diff --git a/apps/x/apps/renderer/DESIGN_LANGUAGE.md b/apps/x/apps/renderer/DESIGN_LANGUAGE.md index 0f0a136a..cf412593 100644 --- a/apps/x/apps/renderer/DESIGN_LANGUAGE.md +++ b/apps/x/apps/renderer/DESIGN_LANGUAGE.md @@ -16,21 +16,21 @@ Rowboat should feel like a command center for people who live in notes, agents, 4. **Notes as the canvas** The editor and conversation stay visually dominant. Chrome is supportive, not decorative. Avoid nested cards and oversized empty states in work surfaces. -5. **Warm precision** - The palette pairs paper, ink, and graphite neutrals with earned signal colors: muted blue for structure, teal-green for command tools, amber for attention, and red for destructive state. +5. **Neutral precision** + The palette follows the dev color system: white and graphite surfaces, black/white primary actions, neutral command tools, and reserved semantic colors for destructive and chart states. ## Tokens - Radius: `8px` for controls and cards, smaller where density matters. -- Backgrounds: warm paper in light mode, graphite ink in dark mode. +- Backgrounds: dev defaults in light and dark mode. - Borders: one-step darker than surfaces, quiet enough to separate panels without tinting them. - Shadows: reserved for the composer, menus, dialogs, and active segmented controls. - Type: system sans with tabular-feeling OpenType features enabled; no negative tracking. -- Accent use: muted blue carries structure and focus. Teal-green is reserved for command/action affordances; amber and red are reserved for state. +- Accent use: primary and command affordances use the neutral dev palette. Extra hues are reserved for semantic states and charts. ## Core Surfaces -- **Sidebar:** persistent workflow switcher with calm selected states. Quick-action icons use the teal-green command treatment. +- **Sidebar:** persistent workflow switcher with calm selected states. Quick-action icons use neutral ink from the dev palette. - **Titlebar/tabs:** slim, scan-first navigation. Active tabs get a bottom signal line, not a bulky filled pill. - **Composer:** the highest-emphasis control outside the active canvas. It is slightly raised, flat, bordered by the primary tone, and sharp enough to feel like an input terminal. - **Messages:** user messages are compact structured blocks; assistant messages remain full-width and readable. diff --git a/apps/x/apps/renderer/src/App.css b/apps/x/apps/renderer/src/App.css index 13b2d83f..6c6a2e25 100644 --- a/apps/x/apps/renderer/src/App.css +++ b/apps/x/apps/renderer/src/App.css @@ -981,91 +981,91 @@ :root { --radius: 0.5rem; - --background: var(--bg-color, oklch(0.982 0.006 86)); - --foreground: var(--text-color, oklch(0.205 0.018 255)); - --card: var(--bg-color, oklch(0.998 0.002 86)); - --card-foreground: var(--text-color, oklch(0.205 0.018 255)); - --popover: var(--bg-color, oklch(0.998 0.002 86)); - --popover-foreground: var(--text-color, oklch(0.205 0.018 255)); - --primary: var(--main-color, oklch(0.355 0.055 228)); - --primary-foreground: var(--bg-color, oklch(0.985 0.002 86)); - --secondary: var(--sub-alt-color, oklch(0.94 0.007 86)); - --secondary-foreground: var(--text-color, oklch(0.255 0.022 255)); - --muted: var(--sub-alt-color, oklch(0.945 0.006 86)); - --muted-foreground: var(--sub-color, oklch(0.515 0.026 255)); - --accent: var(--sub-color, oklch(0.91 0.009 86)); - --accent-foreground: var(--text-color, oklch(0.235 0.02 255)); - --destructive: var(--error-color, oklch(0.57 0.19 24)); - --border: var(--sub-alt-color, oklch(0.875 0.008 86)); - --input: var(--sub-alt-color, oklch(0.89 0.007 86)); - --ring: var(--main-color, oklch(0.58 0.086 228)); - --chart-1: oklch(0.55 0.14 230); - --chart-2: oklch(0.61 0.14 155); - --chart-3: oklch(0.62 0.16 42); - --chart-4: oklch(0.55 0.13 310); - --chart-5: oklch(0.66 0.12 92); - --sidebar: var(--bg-color, oklch(0.94 0.013 86)); - --sidebar-foreground: var(--text-color, oklch(0.245 0.02 255)); - --sidebar-primary: var(--main-color, oklch(0.355 0.055 228)); - --sidebar-primary-foreground: var(--bg-color, oklch(0.985 0.002 86)); - --sidebar-accent: var(--sub-color, oklch(0.902 0.008 86)); - --sidebar-accent-foreground: var(--text-color, oklch(0.24 0.02 255)); - --sidebar-border: var(--sub-alt-color, oklch(0.835 0.007 86)); - --sidebar-ring: var(--main-color, oklch(0.58 0.086 228)); - --scrollbar-track: oklch(0.935 0.0055 86); - --scrollbar-thumb: oklch(0.72 0.0105 86); - --scrollbar-thumb-hover: oklch(0.62 0.013 86); - --rowboat-panel: oklch(0.972 0.006 86); - --rowboat-raised: oklch(0.998 0.002 86); + --background: var(--bg-color, oklch(1 0 0)); + --foreground: var(--text-color, oklch(0.145 0 0)); + --card: var(--bg-color, oklch(1 0 0)); + --card-foreground: var(--text-color, oklch(0.145 0 0)); + --popover: var(--bg-color, oklch(1 0 0)); + --popover-foreground: var(--text-color, oklch(0.145 0 0)); + --primary: var(--main-color, oklch(0.205 0 0)); + --primary-foreground: var(--bg-color, oklch(0.985 0 0)); + --secondary: var(--sub-alt-color, oklch(0.97 0 0)); + --secondary-foreground: var(--text-color, oklch(0.205 0 0)); + --muted: var(--sub-alt-color, oklch(0.97 0 0)); + --muted-foreground: var(--sub-color, oklch(0.556 0 0)); + --accent: var(--sub-color, oklch(0.97 0 0)); + --accent-foreground: var(--text-color, oklch(0.205 0 0)); + --destructive: var(--error-color, oklch(0.577 0.245 27.325)); + --border: var(--sub-alt-color, oklch(0.922 0 0)); + --input: var(--sub-alt-color, oklch(0.922 0 0)); + --ring: var(--main-color, oklch(0.708 0 0)); + --chart-1: oklch(0.646 0.222 41.116); + --chart-2: oklch(0.6 0.118 184.704); + --chart-3: oklch(0.398 0.07 227.392); + --chart-4: oklch(0.828 0.189 84.429); + --chart-5: oklch(0.769 0.188 70.08); + --sidebar: var(--bg-color, oklch(0.985 0 0)); + --sidebar-foreground: var(--text-color, oklch(0.145 0 0)); + --sidebar-primary: var(--main-color, oklch(0.205 0 0)); + --sidebar-primary-foreground: var(--bg-color, oklch(0.985 0 0)); + --sidebar-accent: var(--sub-color, oklch(0.9 0 0)); + --sidebar-accent-foreground: var(--text-color, oklch(0.205 0 0)); + --sidebar-border: var(--sub-alt-color, oklch(0.922 0 0)); + --sidebar-ring: var(--main-color, oklch(0.708 0 0)); + --scrollbar-track: oklch(0.95 0 0); + --scrollbar-thumb: oklch(0.75 0 0); + --scrollbar-thumb-hover: oklch(0.65 0 0); + --rowboat-panel: oklch(0.97 0 0); + --rowboat-raised: oklch(1 0 0); --rowboat-wash: color-mix(in oklab, var(--background) 88%, var(--primary) 12%); --rowboat-hairline: color-mix(in oklab, var(--border) 78%, var(--foreground) 22%); - --rowboat-command: oklch(0.46 0.11 167); - --rowboat-attention: oklch(0.66 0.15 47); + --rowboat-command: oklch(0.205 0 0); + --rowboat-attention: oklch(0.646 0.222 41.116); --rowboat-shadow: 0 1px 2px rgb(31 38 48 / 0.07), 0 18px 40px rgb(31 38 48 / 0.08); --rowboat-shadow-soft: 0 1px 2px rgb(31 38 48 / 0.05), 0 8px 24px rgb(31 38 48 / 0.06); } .dark { - --background: var(--bg-color, oklch(0.18 0.012 255)); - --foreground: var(--text-color, oklch(0.93 0.008 86)); - --card: var(--bg-color, oklch(0.225 0.015 255)); - --card-foreground: var(--text-color, oklch(0.93 0.008 86)); - --popover: var(--bg-color, oklch(0.235 0.016 255)); - --popover-foreground: var(--text-color, oklch(0.93 0.008 86)); - --primary: var(--main-color, oklch(0.77 0.08 86)); - --primary-foreground: var(--bg-color, oklch(0.17 0.012 255)); - --secondary: var(--sub-alt-color, oklch(0.285 0.017 255)); - --secondary-foreground: var(--text-color, oklch(0.92 0.008 86)); - --muted: var(--sub-alt-color, oklch(0.285 0.017 255)); - --muted-foreground: var(--sub-color, oklch(0.68 0.016 86)); - --accent: var(--sub-color, oklch(0.34 0.023 248)); - --accent-foreground: var(--text-color, oklch(0.95 0.006 86)); - --destructive: var(--error-color, oklch(0.68 0.17 24)); - --border: var(--sub-alt-color, oklch(0.36 0.02 255 / 0.72)); - --input: var(--sub-alt-color, oklch(0.36 0.02 255 / 0.78)); - --ring: var(--main-color, oklch(0.74 0.08 86)); - --chart-1: oklch(0.72 0.1 225); - --chart-2: oklch(0.72 0.13 155); - --chart-3: oklch(0.76 0.14 48); - --chart-4: oklch(0.69 0.12 310); - --chart-5: oklch(0.78 0.11 92); - --sidebar: var(--bg-color, oklch(0.155 0.013 255)); - --sidebar-foreground: var(--text-color, oklch(0.89 0.01 86)); - --sidebar-primary: var(--main-color, oklch(0.77 0.08 86)); - --sidebar-primary-foreground: var(--bg-color, oklch(0.17 0.012 255)); - --sidebar-accent: var(--sub-color, oklch(0.25 0.017 255)); - --sidebar-accent-foreground: var(--text-color, oklch(0.94 0.008 86)); - --sidebar-border: var(--sub-alt-color, oklch(0.315 0.018 255 / 0.75)); - --sidebar-ring: var(--main-color, oklch(0.74 0.08 86)); - --scrollbar-track: oklch(0.21 0.014 255); - --scrollbar-thumb: oklch(0.42 0.02 255); - --scrollbar-thumb-hover: oklch(0.51 0.025 255); - --rowboat-panel: oklch(0.205 0.014 255); - --rowboat-raised: oklch(0.245 0.016 255); + --background: var(--bg-color, oklch(0.145 0 0)); + --foreground: var(--text-color, oklch(0.985 0 0)); + --card: var(--bg-color, oklch(0.205 0 0)); + --card-foreground: var(--text-color, oklch(0.985 0 0)); + --popover: var(--bg-color, oklch(0.205 0 0)); + --popover-foreground: var(--text-color, oklch(0.985 0 0)); + --primary: var(--main-color, oklch(0.922 0 0)); + --primary-foreground: var(--bg-color, oklch(0.205 0 0)); + --secondary: var(--sub-alt-color, oklch(0.269 0 0)); + --secondary-foreground: var(--text-color, oklch(0.985 0 0)); + --muted: var(--sub-alt-color, oklch(0.269 0 0)); + --muted-foreground: var(--sub-color, oklch(0.708 0 0)); + --accent: var(--sub-color, oklch(0.269 0 0)); + --accent-foreground: var(--text-color, oklch(0.985 0 0)); + --destructive: var(--error-color, oklch(0.704 0.191 22.216)); + --border: var(--sub-alt-color, oklch(1 0 0 / 10%)); + --input: var(--sub-alt-color, oklch(1 0 0 / 15%)); + --ring: var(--main-color, oklch(0.556 0 0)); + --chart-1: oklch(0.488 0.243 264.376); + --chart-2: oklch(0.696 0.17 162.48); + --chart-3: oklch(0.769 0.188 70.08); + --chart-4: oklch(0.627 0.265 303.9); + --chart-5: oklch(0.645 0.246 16.439); + --sidebar: var(--bg-color, oklch(0.205 0 0)); + --sidebar-foreground: var(--text-color, oklch(0.985 0 0)); + --sidebar-primary: var(--main-color, oklch(0.488 0.243 264.376)); + --sidebar-primary-foreground: var(--bg-color, oklch(0.985 0 0)); + --sidebar-accent: var(--sub-color, oklch(0.35 0 0)); + --sidebar-accent-foreground: var(--text-color, oklch(0.985 0 0)); + --sidebar-border: var(--sub-alt-color, oklch(1 0 0 / 10%)); + --sidebar-ring: var(--main-color, oklch(0.556 0 0)); + --scrollbar-track: oklch(0.2 0 0); + --scrollbar-thumb: oklch(0.4 0 0); + --scrollbar-thumb-hover: oklch(0.5 0 0); + --rowboat-panel: oklch(0.269 0 0); + --rowboat-raised: oklch(0.205 0 0); --rowboat-wash: color-mix(in oklab, var(--background) 80%, var(--primary) 20%); --rowboat-hairline: color-mix(in oklab, var(--border) 70%, var(--foreground) 30%); - --rowboat-command: oklch(0.72 0.13 165); - --rowboat-attention: oklch(0.78 0.13 58); + --rowboat-command: oklch(0.922 0 0); + --rowboat-attention: oklch(0.769 0.188 70.08); --rowboat-shadow: 0 1px 2px rgb(0 0 0 / 0.24), 0 22px 44px rgb(0 0 0 / 0.28); --rowboat-shadow-soft: 0 1px 2px rgb(0 0 0 / 0.2), 0 12px 28px rgb(0 0 0 / 0.18); }