diff --git a/apps/x/apps/renderer/DESIGN_LANGUAGE.md b/apps/x/apps/renderer/DESIGN_LANGUAGE.md index e7457d55..0f0a136a 100644 --- a/apps/x/apps/renderer/DESIGN_LANGUAGE.md +++ b/apps/x/apps/renderer/DESIGN_LANGUAGE.md @@ -17,21 +17,22 @@ Rowboat should feel like a command center for people who live in notes, agents, 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 ink, paper, and graphite neutrals with signal colors: teal for command/action, amber for attention, blue for structure, green for completion, and red for destructive state. + 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. ## Tokens - Radius: `8px` for controls and cards, smaller where density matters. - Backgrounds: warm paper in light mode, graphite ink in dark mode. -- Borders: one-step darker than surfaces, never pure gray unless inherited from OS content. +- 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. ## Core Surfaces -- **Sidebar:** persistent workflow switcher with calm selected states and a command-colored leading signal on active quick actions. +- **Sidebar:** persistent workflow switcher with calm selected states. Quick-action icons use the teal-green command treatment. - **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, bordered by the primary tone, and sharp enough to feel like an input terminal. +- **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. - **Status:** sync, saving, recording, and task activity stay small but always visible near the surface they affect. diff --git a/apps/x/apps/renderer/src/App.css b/apps/x/apps/renderer/src/App.css index c45bad27..13b2d83f 100644 --- a/apps/x/apps/renderer/src/App.css +++ b/apps/x/apps/renderer/src/App.css @@ -981,42 +981,42 @@ :root { --radius: 0.5rem; - --background: var(--bg-color, oklch(0.982 0.0035 100)); + --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.0012 100)); + --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.0012 100)); + --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 100)); - --secondary: var(--sub-alt-color, oklch(0.94 0.007 100)); + --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.0065 100)); + --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.0095 100)); + --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 100)); - --input: var(--sub-alt-color, oklch(0.89 0.0075 100)); + --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.0065 104)); + --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.0018 104)); - --sidebar-accent: var(--sub-color, oklch(0.902 0.008 104)); + --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.0072 104)); + --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 100); - --scrollbar-thumb: oklch(0.72 0.0105 100); - --scrollbar-thumb-hover: oklch(0.62 0.013 100); - --rowboat-panel: oklch(0.972 0.0035 100); - --rowboat-raised: oklch(0.998 0.0012 100); + --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); --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); @@ -1032,7 +1032,7 @@ --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.072 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)); @@ -1043,7 +1043,7 @@ --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.072 86)); + --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); @@ -1051,12 +1051,12 @@ --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.072 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.072 86)); + --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); @@ -1064,7 +1064,7 @@ --rowboat-raised: oklch(0.245 0.016 255); --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.66 0.095 168); + --rowboat-command: oklch(0.72 0.13 165); --rowboat-attention: oklch(0.78 0.13 58); --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); @@ -1104,22 +1104,18 @@ } .rowboat-shell { - background: - linear-gradient(180deg, color-mix(in oklab, var(--background) 86%, var(--rowboat-wash) 14%) 0%, var(--background) 46%), - var(--background); + background: var(--background); } .rowboat-sidebar [data-sidebar="sidebar"] { - background: - linear-gradient(180deg, color-mix(in oklab, var(--sidebar) 90%, var(--primary) 10%) 0%, var(--sidebar) 38%), - var(--sidebar); + background: var(--sidebar); border-right: 1px solid var(--sidebar-border); } .rowboat-sidebar [data-sidebar="header"] { gap: 0.625rem; border-bottom: 1px solid color-mix(in oklab, var(--sidebar-border) 76%, transparent); - background: linear-gradient(180deg, color-mix(in oklab, var(--sidebar) 88%, var(--primary) 12%), var(--sidebar)); + background: var(--sidebar); } .rowboat-section-switcher { @@ -1150,8 +1146,7 @@ } .rowboat-titlebar { - background: - linear-gradient(180deg, color-mix(in oklab, var(--sidebar) 82%, var(--background) 18%), var(--background)); + background: var(--background); border-bottom-color: color-mix(in oklab, var(--border) 82%, transparent); } @@ -1162,7 +1157,7 @@ .rowboat-tab[class*="bg-background"] { border-bottom-color: var(--primary); - background: linear-gradient(180deg, var(--rowboat-raised), var(--background)); + background: var(--rowboat-raised); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--foreground) 8%, transparent); } @@ -1172,8 +1167,7 @@ .rowboat-chat-input { border-color: color-mix(in oklab, var(--border) 74%, var(--primary) 26%); - background: - linear-gradient(180deg, color-mix(in oklab, var(--rowboat-raised) 96%, var(--primary) 4%), var(--rowboat-raised)); + background: var(--rowboat-raised); box-shadow: var(--rowboat-shadow); }