Calm ConsoleLinear Style
Make my workbench feel like Linear: grey-white ground, hairline borders, small dense type, one hint of violet — quiet, but expensive.
- Ground is neutral grey-white only: light page #FAFAFA / cards #FFFFFF, dark page #101112 / cards #18191A — no blue or warm cast; premium starts with zero color noise
- Layer with 1px hairlines, not shadows: #E4E4E7 light, #292A2E dark — borders visible but never loud; no gradients, no decorative illustration
- One accent site-wide (violet around #5E6AD2, lifted to #8B93E8 in dark), reserved for the primary action, selection and links — under 5% of the viewport
- Small type, high density: 13px body, 12px meta, restrained headings; every number, date and count uses tabular-nums so metric columns align like instruments
- Status lives in low-saturation micro badges: green in-progress / amber at-risk / grey todo — 10% alpha fill with a same-hue border, never shouting color blocks
- Light and dark are one design: layout and components never move — the three-step gray ramp and borders flip wholesale, the accent lifts one step, selection keeps the same 1px-outline grammar
Both sell 'professional', but Dark Pro Tool is creative-tool chrome — near-black canvas, dense always-on toolbar, the screen belongs to the work. Calm Console is a management panel — grey-white boards and modules where the screen belongs to data and status.
Dark UI is just the inverted palette applied anywhere; Calm Console is about density and restraint — hairline borders, a single accent, tabular numerals. Its light mode looks just as premium, which proves the style never relied on darkness.
Restyle this workbench in the Calm Console language: light mode page #FAFAFA, cards #FFFFFF, borders #E4E4E7, text #18191A/#6B6E76/#A1A1AA; dark mode page #101112, cards #18191A, borders #292A2E, text #E4E4E7/#8A8F98/#5C6066. One accent only — #5E6AD2 (dark: #8B93E8) — limited to primary buttons, selection and links. No shadows, no gradients. 13px body, 12px meta, and font-variant-numeric: tabular-nums on every number; status uses low-saturation micro badges (green/amber/grey, 10% alpha fill with same-hue border). Keep all existing features and copy untouched; both modes share one layout and component set — theming flips tokens only.
Scroll sideways to explore the full example
Raycast
NotionScroll sideways to explore the full example
Scroll sideways to explore the full example
Scroll sideways to explore the full example