design system launch

Author: andresarbelaez

.cursor/rules/design-system-sync.mdc

@@ -0,0 +1,17 @@
+---
+description: After editing the design system doc, sync to landing so the design-system page stays in sync
+globs: docs/confidant-design-system.md
+alwaysApply: false
+---
+
+# Design system doc → landing sync
+
+When you **edit** `docs/confidant-design-system.md`, always run the sync so the live design-system page is updated:
+
+```bash
+cd landing && npm run sync:design-system
+```
+
+(or from repo root: `npm run sync:design-system`)
+
+This updates `landing/src/content/design-system.md` from the spec. Run it in the same session after any change to the design system doc.

.husky/pre-commit

@@ -0,0 +1 @@
+node scripts/ensure-design-system-synced.mjs

CONTRIBUTING.md

@@ -55,6 +55,8 @@ Thank you for your interest in contributing to Confidant. This document explains
 - **Rust**: Use `cargo fmt` and `cargo clippy` in `desktop/src-tauri/`.
 - **Logging**: Verbose logs are compiled only in debug builds (`cargo build`); release builds stay quiet.
 - **Docs**: Update README or relevant docs when adding user-facing behavior or setup steps.
+- **Design system**: For UI work on the desktop (and future mobile) app, follow the shared design system so colors, typography, and components stay consistent. See **[docs/DESIGN_SYSTEM_ADHERENCE.md](docs/DESIGN_SYSTEM_ADHERENCE.md)** for rules and single source of truth. Optionally run **`npm run check:design-tokens`** from the repo root before PRs to see a report of hardcoded colors; prefer `var(--color-*)` and the `confidant-design-tokens` package.
+- **Accessibility**: Run accessibility checks (e.g. axe-core or eslint-plugin-jsx-a11y) in CI or before release where possible. See [docs/DESIGN_SYSTEM_ACCESSIBILITY_AUDIT.md](docs/DESIGN_SYSTEM_ACCESSIBILITY_AUDIT.md) for the design-system audit.
 
 ## Areas for contribution
 

design/.gitkeep

@@ -0,0 +1 @@
+

design/confidant-symbol-path.json

@@ -0,0 +1 @@
+{"d":"M402.791 247.828C404.032 247.893 405.269 247.972 406.501 248.067C406.409 249.162 407.217 250.127 408.312 250.227C412.131 250.573 415.907 251.067 419.634 251.703C420.717 251.888 421.745 251.164 421.938 250.084C423.16 250.31 424.376 250.55 425.586 250.806C425.353 251.878 426.028 252.939 427.101 253.181C430.831 254.021 434.507 255.005 438.123 256.127C439.174 256.453 440.288 255.868 440.62 254.821C441.801 255.205 442.974 255.605 444.142 256.018C443.769 257.05 444.299 258.192 445.331 258.573C448.915 259.896 452.432 261.356 455.877 262.946C456.875 263.407 458.056 262.975 458.523 261.982C459.643 262.518 460.754 263.066 461.857 263.629C461.353 264.604 461.728 265.804 462.7 266.317C466.074 268.096 469.371 270.004 472.582 272.034C473.511 272.622 474.737 272.348 475.331 271.426C476.37 272.103 477.401 272.792 478.422 273.494C477.795 274.395 478.01 275.634 478.907 276.27C482.017 278.471 485.037 280.791 487.959 283.225C488.804 283.928 490.056 283.817 490.765 282.979C491.707 283.785 492.638 284.602 493.56 285.432C492.82 286.243 492.874 287.5 493.681 288.246C496.475 290.831 499.168 293.525 501.753 296.319C502.499 297.126 503.756 297.179 504.567 296.439C505.397 297.361 506.214 298.292 507.021 299.234C506.182 299.943 506.071 301.196 506.774 302.041C509.208 304.964 511.529 307.983 513.73 311.093C514.366 311.99 515.604 312.204 516.505 311.577C517.207 312.598 517.896 313.629 518.573 314.668C517.651 315.262 517.378 316.489 517.966 317.418C519.996 320.629 521.904 323.926 523.683 327.3C524.196 328.272 525.396 328.646 526.37 328.142C526.933 329.245 527.481 330.356 528.017 331.476C527.024 331.943 526.593 333.125 527.054 334.123C528.644 337.568 530.104 341.085 531.427 344.669C531.807 345.701 532.949 346.23 533.981 345.857C534.394 347.025 534.794 348.198 535.178 349.379C534.131 349.711 533.547 350.826 533.873 351.877C534.995 355.493 535.979 359.169 536.819 362.899C537.061 363.971 538.121 364.645 539.193 364.413C539.449 365.624 539.689 366.839 539.915 368.061C538.835 368.254 538.112 369.283 538.297 370.366C538.933 374.093 539.427 377.869 539.773 381.688C539.873 382.782 540.838 383.589 541.932 383.498C542.027 384.731 542.106 385.967 542.171 387.208C541.074 387.258 540.222 388.184 540.265 389.283C540.338 391.18 540.375 393.085 540.375 395C540.375 396.915 540.338 398.82 540.265 400.717C540.222 401.816 541.074 402.741 542.171 402.791C542.106 404.032 542.027 405.269 541.932 406.501C540.838 406.41 539.873 407.218 539.773 408.312C539.47 411.654 539.054 414.963 538.528 418.234L538.297 419.634C538.112 420.717 538.836 421.745 539.915 421.938C539.689 423.16 539.449 424.375 539.193 425.586C538.189 425.368 537.195 425.947 536.875 426.903L536.819 427.101C535.979 430.831 534.995 434.507 533.873 438.123C533.547 439.173 534.131 440.288 535.178 440.62C534.794 441.801 534.394 442.974 533.981 444.142C533.014 443.793 531.951 444.236 531.508 445.143L531.427 445.331C530.104 448.915 528.644 452.432 527.054 455.877C526.593 456.875 527.024 458.056 528.017 458.523C527.481 459.643 526.933 460.754 526.37 461.857C525.457 461.385 524.345 461.684 523.787 462.524L523.683 462.7C522.126 465.653 520.47 468.546 518.721 471.374L517.966 472.582C517.379 473.511 517.651 474.737 518.573 475.331C517.896 476.37 517.207 477.401 516.505 478.422C515.661 477.834 514.52 477.986 513.857 478.746L513.73 478.907C511.804 481.628 509.787 484.28 507.683 486.858L506.775 487.959C506.072 488.804 506.183 490.056 507.021 490.765C506.214 491.707 505.397 492.638 504.567 493.56C503.807 492.867 502.655 492.87 501.899 493.537L501.754 493.681C499.492 496.126 497.147 498.494 494.724 500.779L493.681 501.753C492.874 502.499 492.821 503.756 493.56 504.567C492.638 505.397 491.707 506.214 490.765 507.021C490.101 506.235 488.959 506.089 488.123 506.652L487.959 506.774C485.402 508.903 482.77 510.947 480.069 512.899L478.907 513.73C478.01 514.366 477.795 515.604 478.422 516.505C477.401 517.207 476.37 517.896 475.331 518.573C474.774 517.709 473.662 517.415 472.76 517.865L472.582 517.966C469.772 519.742 466.897 521.425 463.962 523.01L462.7 523.683C461.728 524.195 461.353 525.396 461.857 526.37C460.754 526.933 459.643 527.481 458.523 528.017C458.056 527.024 456.875 526.593 455.877 527.054C452.863 528.446 449.793 529.738 446.672 530.925L445.331 531.427C444.3 531.807 443.769 532.949 444.142 533.981C442.974 534.394 441.801 534.794 440.62 535.178C440.288 534.131 439.173 533.547 438.123 533.873C434.959 534.854 431.749 535.73 428.497 536.497L427.101 536.819C426.029 537.061 425.354 538.122 425.586 539.193C424.375 539.449 423.16 539.689 421.938 539.915C421.757 538.903 420.843 538.204 419.837 538.272L419.634 538.297C415.907 538.933 412.131 539.427 408.312 539.773C407.218 539.873 406.41 540.838 406.501 541.932C405.269 542.027 404.032 542.106 402.791 542.171C402.741 541.074 401.816 540.222 400.717 540.265C398.82 540.338 396.915 540.375 395 540.375C393.085 540.375 391.18 540.338 389.283 540.265C388.184 540.222 387.258 541.074 387.208 542.171C385.967 542.106 384.731 542.027 383.498 541.932C383.589 540.838 382.782 539.873 381.688 539.773L380.257 539.637C376.925 539.301 373.627 538.853 370.366 538.297L370.163 538.272C369.157 538.204 368.242 538.903 368.061 539.915C366.839 539.689 365.624 539.449 364.413 539.193C364.645 538.121 363.971 537.061 362.899 536.819C359.169 535.979 355.493 534.995 351.877 533.873C350.826 533.547 349.711 534.131 349.379 535.178C348.198 534.794 347.025 534.394 345.857 533.981C346.23 532.949 345.701 531.807 344.669 531.427C341.085 530.104 337.568 528.644 334.123 527.054L333.933 526.978C332.979 526.649 331.914 527.086 331.476 528.017C330.356 527.481 329.245 526.933 328.142 526.37C328.646 525.396 328.272 524.196 327.3 523.683L326.038 523.009C323.103 521.424 320.228 519.742 317.418 517.966L317.24 517.865C316.338 517.415 315.224 517.709 314.668 518.573C313.629 517.896 312.598 517.207 311.577 516.505C312.204 515.604 311.99 514.366 311.093 513.73C307.983 511.529 304.963 509.209 302.041 506.775L301.877 506.652C301.041 506.089 299.898 506.235 299.234 507.021C298.292 506.214 297.361 505.397 296.439 504.567C297.179 503.756 297.126 502.5 296.319 501.754L295.276 500.779C292.853 498.494 290.509 496.126 288.247 493.681L288.101 493.537C287.344 492.869 286.192 492.867 285.432 493.56C284.602 492.638 283.785 491.707 282.979 490.765C283.817 490.056 283.929 488.804 283.226 487.959L282.318 486.858C280.214 484.28 278.196 481.628 276.27 478.907L276.143 478.746C275.48 477.986 274.338 477.834 273.494 478.422C272.792 477.401 272.103 476.37 271.426 475.331C272.348 474.737 272.622 473.511 272.034 472.582L271.279 471.374C269.53 468.546 267.874 465.653 266.317 462.7C265.804 461.728 264.604 461.353 263.629 461.857C263.066 460.754 262.518 459.643 261.982 458.523C262.975 458.056 263.407 456.875 262.946 455.877C261.356 452.432 259.896 448.915 258.573 445.331L258.492 445.143C258.049 444.236 256.985 443.792 256.018 444.142C255.605 442.974 255.205 441.801 254.821 440.62C255.868 440.288 256.453 439.174 256.127 438.123L255.713 436.764C254.762 433.587 253.916 430.365 253.181 427.101L253.125 426.903C252.805 425.947 251.811 425.368 250.806 425.586C250.55 424.376 250.31 423.16 250.084 421.938C251.164 421.745 251.888 420.717 251.703 419.634C251.067 415.907 250.573 412.131 250.227 408.312L250.197 408.11C250.005 407.12 249.093 406.415 248.067 406.501C247.972 405.269 247.893 404.032 247.828 402.791C248.925 402.741 249.778 401.816 249.735 400.717L249.688 399.293C249.646 397.867 249.625 396.436 249.625 395C249.625 393.564 249.646 392.133 249.688 390.707L249.735 389.283C249.778 388.184 248.925 387.258 247.828 387.208C247.893 385.967 247.972 384.731 248.067 383.498C249.093 383.584 250.005 382.88 250.197 381.89L250.227 381.688C250.53 378.346 250.946 375.037 251.472 371.766L251.703 370.366C251.888 369.283 251.164 368.254 250.084 368.061C250.31 366.839 250.55 365.624 250.806 364.413C251.811 364.631 252.805 364.053 253.125 363.097L253.181 362.899C253.916 359.635 254.762 356.413 255.713 353.236L256.127 351.877C256.453 350.826 255.868 349.711 254.821 349.379C255.205 348.198 255.605 347.025 256.018 345.857C256.986 346.207 258.049 345.764 258.492 344.857L258.573 344.669C259.731 341.533 260.992 338.448 262.355 335.418L262.946 334.123C263.407 333.125 262.975 331.943 261.982 331.476C262.518 330.356 263.066 329.245 263.629 328.142C264.542 328.615 265.655 328.316 266.213 327.476L266.317 327.3C268.096 323.926 270.004 320.629 272.034 317.418C272.622 316.489 272.349 315.262 271.426 314.668C272.103 313.629 272.792 312.598 273.494 311.577C274.338 312.166 275.479 312.014 276.143 311.254L276.27 311.093C278.471 307.983 280.791 304.963 283.225 302.041C283.928 301.196 283.817 299.943 282.979 299.234C283.785 298.292 284.602 297.361 285.432 296.439C286.243 297.179 287.499 297.127 288.246 296.319C290.508 293.874 292.853 291.506 295.276 289.221L296.319 288.247C297.127 287.5 297.179 286.243 296.439 285.432C297.361 284.602 298.292 283.785 299.234 282.979C299.898 283.764 301.04 283.911 301.877 283.348L302.041 283.226C304.598 281.097 307.23 279.053 309.931 277.101L311.093 276.27C311.99 275.634 312.205 274.395 311.577 273.494C312.598 272.792 313.629 272.103 314.668 271.426C315.262 272.349 316.489 272.622 317.418 272.034C320.228 270.258 323.103 268.575 326.038 266.99L327.3 266.317C328.272 265.804 328.647 264.604 328.142 263.629C329.245 263.066 330.356 262.518 331.476 261.982C331.914 262.913 332.979 263.351 333.933 263.022L334.123 262.946C337.137 261.554 340.207 260.262 343.328 259.075L344.669 258.573C345.701 258.192 346.23 257.05 345.857 256.018C347.025 255.605 348.198 255.205 349.379 254.821C349.69 255.803 350.689 256.378 351.679 256.178L351.877 256.127C355.041 255.146 358.251 254.27 361.503 253.503L362.899 253.181C363.972 252.939 364.646 251.878 364.413 250.806C365.624 250.55 366.839 250.31 368.061 250.084C368.242 251.096 369.157 251.796 370.163 251.728L370.366 251.703C373.627 251.147 376.925 250.699 380.257 250.363L381.688 250.227C382.783 250.127 383.59 249.162 383.498 248.067C384.731 247.972 385.967 247.893 387.208 247.828C387.258 248.925 388.184 249.778 389.283 249.735C391.18 249.662 393.085 249.625 395 249.625C396.915 249.625 398.82 249.662 400.717 249.735C401.816 249.778 402.741 248.925 402.791 247.828Z"}

design/logo-512-source.png

@@ -44,7 +44,7 @@ Several inputs and controls use `outline: none` on `:focus` with no visible repl
 | PasswordPrompt.css | `.form-input:focus` | `outline: none` |
 | SetupScreen.css | `.selector-dropdown:focus` | `outline: none` |
 | SetupSection.css | `.selector-dropdown:focus`, `.existing-model-selector:focus` | `outline: none` |
-| LanguageSelector.css | `.language-select:focus` | `outline: none` (warm.css adds box-shadow) |
+| LanguageSelector.css | `.language-select:focus` | `outline: none` (theme.css adds focus-visible) |
 
 **Recommendation:** Add `:focus-visible` styles: `outline: 2px solid var(--color-primary); outline-offset: 2px` or equivalent. Reserve `outline: none` only for cases where another visible focus style exists.
 
@@ -100,14 +100,14 @@ The loading spinner is decorative and has no accessible alternative.
 
 ### Medium
 
-#### 7. Potential color contrast in warm theme
-Warm palette uses oklch. Verify contrast ratios:
+#### 7. Potential color contrast
+Theme uses oklch. Verify contrast ratios:
 
 - **--color-text-muted** (oklch 0.48 0.035 100) on **--color-bg** (0.985 0.008 100) — may be close to 4.5:1
 - **--color-text-faint** (0.55) — may fall below 4.5:1 for normal text
 - **Assistant bubble** — Very low contrast by design; may not meet 1.4.3 for users with low vision
 
-**Recommendation:** Run a contrast checker on warm theme combinations. Consider bumping `--color-text-muted` and `--color-text-faint` chroma/lightness if needed.
+**Recommendation:** Run a contrast checker on theme combinations. Consider bumping `--color-text-muted` and `--color-text-faint` chroma/lightness if needed.
 
 ---
 
@@ -136,7 +136,7 @@ Multiple screens use `h1` or `h2`. Ensure a single `h1` per view and a logical o
 |----------|--------|
 | 1.1.1 Non-text content | Partial — icons have aria-hidden where decorative |
 | 1.3.1 Info and relationships | Issues — chat input, password input need labels |
-| 1.4.3 Contrast (minimum) | Verify — warm theme, assistant bubble |
+| 1.4.3 Contrast (minimum) | Verify — theme, assistant bubble |
 | 2.1.1 Keyboard | Pass — modals, forms keyboard accessible |
 | 2.4.7 Focus visible | Fail — many focus outlines removed |
 | 4.1.2 Name, role, value | Partial — several inputs need accessible names |
@@ -150,4 +150,4 @@ Multiple screens use `h1` or `h2`. Ensure a single `h1` per view and a logical o
 2. ~~Add `aria-label` or label to chat textarea and PasswordPrompt input.~~ **Done**
 3. ~~Make password visibility toggles keyboard accessible and add `aria-label`.~~ **Done**
 4. ~~Add `role="alert"` to the chat error container.~~ **Done**
-5. Run contrast checks on the warm theme and tweak if needed.
+5. Run contrast checks on the theme and tweak if needed.

design/logo_template.svg

@@ -2,12 +2,11 @@
 
 Short reference for colors, typography, spacing, and component patterns. Use this to keep UI changes consistent.
 
-## Theme experiments
+**Canonical design system:** The single source of truth is [docs/confidant-design-system.md](../docs/confidant-design-system.md) and the `confidant-design-tokens` package. For how to keep new UI aligned with the design system, see [docs/DESIGN_SYSTEM_ADHERENCE.md](../docs/DESIGN_SYSTEM_ADHERENCE.md).
 
-A warm (cream/yellow) palette can be enabled to match the landing page. It lives in `src/themes/warm.css`.
+## Theme
 
-- **Enable:** Ensure `main.tsx` imports `./themes/warm.css`.
-- **Revert:** Comment out that import in `main.tsx`.
+Confidant has one theme: light, with beige/cream surface tones. Token values are set in `src/index.css` and the theme stylesheet in `src/themes/`.
 
 ## Color variables
 
@@ -37,8 +36,7 @@ Defined in `src/index.css` (`:root` and `@media (prefers-color-scheme: light)`).
 - **`--color-success`**, **`--color-success-bg`**, **`--color-success-text`** – Success states.
 - **`--color-error`**, **`--color-error-bg`**, **`--color-error-text`**, **`--color-error-border`** – Errors, validation.
 - **`--color-danger-bg`**, **`--color-danger-text`**, **`--color-danger-hover`**, **`--color-danger-active`** – Destructive actions (e.g. Log out).
-- **`--color-warning-bg`**, **`--color-warning-text`** – Warnings.
-- **`--color-info-bg`**, **`--color-info-border`** – Informational.
+- **`--color-info-bg`**, **`--color-info-border`**, **`--color-info-text`** – Informational. For warning-style UI use **`--color-surface`** and **`--color-text-muted`**.
 
 ### Overlay / modal
 - **`--color-overlay`**, **`--color-overlay-strong`** – Backdrops.