Design system — Doso

Voice, visual direction, tokens, and interaction posture.

Voice#

Doso is plain, measured, and concrete. Explain what the system does before using the stone, roads, or guardians as metaphor. Product copy favors specific states and actions over marketing language.

The interface is a calm, dense workspace. Scanability and clear state matter more than decorative energy.

Visual direction#

Use a restrained stone greyscale with chroma reserved for information that needs immediate attention. Avoid loud teal or terracotta gradients, purple-on-white AI defaults, cream editorial styling, heavy shadows, pill clusters, and decorative glow.

Surfaces (dark default)#

Token	Value	Role
`--shell` / `--background`	`hsl(0 0% 8%)`	App chrome
`--panel`	`hsl(0 0% 9%)`	Side nav, raised
`--panel-2`	`hsl(0 0% 13%)`	Nested / hover
`--line` / `--hairline`	`hsl(0 0% 13%)`	1px outlines
`--ink`	`oklch(0.985 0 0)`	Primary text
`--muted`	`oklch(0.705 0.015 286.067)`	Secondary text

Surfaces (light)#

Token	Value
`--shell`	`hsl(60 9.1% 97.8%)` stone-50
`--panel`	`oklch(1 0 0)`
`--panel-2`	`oklch(0.967 0.001 286.375)`
`--line`	`oklch(0.92 0.004 286.32)`
`--ink`	`oklch(0.205 0.005 285.8)`
`--muted`	`oklch(0.552 0.016 285.938)`

Accent#

Stone only — no chroma accents. Interactive uses ink/stone-800 (light) or light stone on dark shell. Soft fills are ink at ~8–10% via color-mix. Status tokens stay near-neutral warm stone.

Typography#

Display / page titles: system UI sans-serif, 500–700, tracking -0.01em to -0.02em
UI / body / labels: system UI sans-serif, 400–500, body 16px / 1.7, labels 14px / 1.25
Code / citations: system UI monospace

Depth#

Stacked stone surfaces + 1px hairline. No drop shadows. --radius: 0.65rem.

Brand mark#

A solid round stone (r30, centred at 50,40) above a level plinth (60 × 11, radius 5.5) on a 100 × 100 grid.
The 10-unit gap never closes or widens; plinth width always equals the stone diameter.
Use one ink only: #131312 on light grounds or #FAFAF9 on dark grounds. No outline, tint, wordmark, container, badge, stretch, or rotation.
At 16px and below, use the heavy cut: stone r32, plinth 64 × 13.
Navigational instances link home; their context menu links to /brand.

Components#

Nav: active = soft accent tint + accent ink. Buttons: solid muted accent or hairline ghost. Cards / list rows: shared surface tokens — --panel fill, border-[var(--line)]/50, --radius; selected = border-[var(--ink)]/35 + --panel-2. List rhythm: gap-2, pad px-3 py-2.5. No drop shadows.

Chat / answer chrome#

Answer bubble: prose only (no status lines, no Cypher triples).
Workflow trace: collapsed by default; expand for search / ingest / refine steps.
Collapsed drawers: Refined after live sources, Citations, Sources.
Library: small stone meta.source badges (gmail, calendar, imessage, firecrawl, …).