UI / Themes / Graphite

Graphite

Greyscale chrome. Agents are the only color.

data-theme="graphite"
Launch plan
Launch post: AI workspaces thesisActive
Newsletter issue: AI workspaces primerDrafted
Founder outreach: 50 indie-builder DMsQueued
3 members · 17 rows

Why this theme

Graphite is greyscale on purpose. The canvas sits at #1C1C1C, a deep neutral grey, the color of its namesake material. Surfaces lift in 6 percent steps to #262626 and #2E2E2E so cards, hovers, and selected rows have visible elevation without ever introducing a hue. Text picks up #ECECEC, an off-white that reads cleanly on graphite without the screen-glow pure white causes.

The single radical move: agent presence is the only saturated color in the entire UI. Cursor orbs, row-edit trails, author chips, presence indicators all keep their full brand colors. Everything else is greyscale. Argus's pink trail traversing a row is literally the only hue on screen, and it MEANS something. In every other theme color is partly decorative; in Graphite color is information.

Greyscale chrome makes that point land harder than pitch black would. Pure black reads as void, color appearing in void reads as foreign. Graphite-grey reads as a deliberate desaturated chrome, color appearing on grey reads as deliberate signal. We picked the material name for a reason: graphite is grey, not coal.

When to use

Developer-leaning surfaces. Demoing on a projector. Working in a dark room where you want the chrome to recede and agent activity to glow through it. Reading raw data where the rows should speak louder than the wrapper around them.

When not to use

Long-form reading or marketing-shaped pages. Greyscale is the wrong vibe for storytelling; reach for Light or Breeze.

Color spec

Every CSS variable, what it's set to in this theme, and what we use it for.

--background#1C1C1C
Graphite-grey canvas. The color the theme is named after.
--surface#262626
Cards + popovers. 6% lifted from canvas so they read as elevated.
--surface-muted#2E2E2E
Hover + selected rows. Another 6% step up.
--border-colorrgba(255, 255, 255, 0.12)
Hairline white. Translucent so the alpha shifts naturally over surfaces of different greys.
--text-primary#ECECEC
Off-white. Drops just enough off pure white to stop the glow that pure-white-on-grey causes at length.
--text-secondaryrgba(255, 255, 255, 0.78)
Same off-white at lower alpha. Used for supporting copy.
--accent#FFFFFF
Buttons get pure white. Paired with --btn-primary-text graphite, the contrast snaps.
← All themes
Components·Theme · glossary
UI home →