Clair design system candidate

Intelligence, made tangible.

A dark precision system for evidence, decisions, and coordinated action.

Review foundationsComplete component catalog below

Material question

Confirm the source boundary

Needs evidence

Current evidence supports the repository scope. The retention boundary still needs a recognized decision.

Architecture overviewCurrent maintained knowledge

Current

Live foundation specimen. Example content only.

Designed for consequential work.

Clair DIM makes evidence, uncertainty, and authority legible without turning planning into visual noise.

Quiet hierarchy

Contrast follows consequence. Most of the interface stays calm so material changes are unmistakable.

Inspectable trust

Evidence, freshness, authority, and effect boundaries remain visible at the point of action.

Purposeful depth

Elevation explains hierarchy. It never exists as decoration or as a substitute for structure.

Decisive restraint

The Clair color marks the current working context. Semantic colors appear only when the underlying state earns them.

Color is structural.

Layered neutral surfaces carry the interface. The Clair color identifies working context; named semantic colors communicate only their exact states.

Ambient#08090A--dim-ambient

Shell#0E1012--dim-shell

Canvas#121416--dim-canvas

Surface#181A1D--dim-surface

Raised#1F2226--dim-raised

Floating#272B30--dim-floating

Clair

Primary interaction: current working context, active paths, and selection

#B291D3

Current

Verified, connected, current state

#62C97B

Attention

Material uncertainty or review needed

#D5A84D

Critical

Blocked, destructive, or failed state

#E8756F

Depth explains priority.

Every raised surface must answer a hierarchy question. Shadows stay cool, broad, and nearly invisible. Boundaries remain one pixel; nested details reuse the control radius and status chips alone use pill geometry.

Canvas

Surface

Raised

Floating

Canvas

The continuous working field. It should disappear behind the work.

Surface

Persistent regions and grouped context. Defined by tone and one quiet rule.

Raised

Selected work, temporary emphasis, and controls that need tactile priority.

Floating

Transient in-page emphasis. Menus and dialogs use a darker overlay tone.

Control radius8px

Panel radius12px

Shell radius18px

Inset / status8px / pill

Typography carries confidence.

Host Grotesk is measured, technical, and quietly distinctive. Weight and tone create hierarchy before size does.

Host Grotesk

Primary interface, narrative, and decision language.

Fragment Mono

Provenance, identifiers, timestamps, and measured values. Native weight 400 only.

Display56 / 58 | 600 | -0.045em

Clarity at the point of action

Section36 / 40 | 580 | -0.032em

Evidence before assertion

Title20 / 26 | 560 | -0.018em

Recognized decision

Body15 / 23 | 430

Show what is known, what remains uncertain, and why the next action matters.

Label13 / 18 | 560

Evidence sufficiency

Metadata12 / 17 | 400 | mono

Observed 22 Aug 2026 | GitHub | current

Four-point rhythm

Dense within a task. Generous between context changes. Layout uses the four-point scale; compact controls may use a two-pixel optical adjustment.

4

8

12

16

24

32

48

72

96

Interaction feels instrumented.

Feedback is immediate and physical. Motion clarifies state change, then gets out of the way.

Action specimen

Choose the next useful action.

Focus stays neutral: fields use a quiet inset keyline, while discrete controls retain a clearer two-pixel boundary. Variant, disabled, loading, hover, and press states preserve the same material hierarchy.

Show provenance inlineKeep exact sources attached to their claims.

PrimaryStrong neutral face for the next action

SecondarySame material with quieter content

FocusTwo-pixel neutral keyline, three-pixel offset

GhostNo boundary until interaction

DestructiveCritical color only for irreversible action

SelectedTinted fill, neutral content

DisabledNoninteractive and intentionally muted

LoadingRetains width and label while busy is announced

120msPress and direct feedback

180msHover and surface transition

240msContext and disclosure change

0msReduced-motion preference

Calm enough to think. Exact enough to act.

The system should feel trustworthy before it feels impressive.

Clair DIM turns organizational complexity into a field of clear, inspectable choices.

Calm

Large quiet fields, measured contrast, no decorative urgency.

Exact

Specific labels, visible sources, deliberate alignment.

Trustworthy

State and authority are shown, never implied by visual confidence alone.

Decisive

When evidence is sufficient, the next action is unambiguous.

Should feel

Composed, consequential, inspectable, quietly premium.

Should not feel

Futuristic for show, playful, glossy, alarmist, or surveillance-oriented.

Current shadcn component inventory

One system, sixty-four proofs.

Every component uses the approved Clair DIM foundations. Interactions are live, example content stays local, and no specimen represents production capability.

64components4 families

Component family 01

Core and feedback

The base vocabulary for grouping, disclosure, status, progress, and direct action.

Component specimen

Accordion

Progressively disclose provenance without hiding the status of the underlying claim.

The architecture overview is maintained by the platform group and was reviewed this week.

Component specimen

Alert

Surface important context in place, with language proportional to consequence.

Evidence refreshed

Three maintained sources were checked 4 minutes ago.

Source access changed

One cited record can no longer be verified for this actor.

Component specimen

Alert Dialog

Reserve interruption for consequential, difficult-to-reverse choices.

Component specimen

Aspect Ratio

Keep visual evidence stable while its container adapts across planning surfaces.

SOURCE MAP / 07Current

Identity boundary and connected-system access

Component specimen

Attachment

Represent cited material with explicit processing state and reversible removal.

architecture-overview.pdfMaintained source · 2.4 MB

Component specimen

Avatar

Identify participants without turning expertise signals into employee ranking.

AMRKJT

5 stakeholders

Component specimen

Badge

Compact semantic labels carry status, not decoration.

RecognizedIn reviewCurrentAccess changedDraft

Component specimen

Bubble

Conversation is calm, compact, and visibly distinct from durable organizational state.

Which source defines the retention boundary?

The policy record is current, but the exception still needs stakeholder clarification.

Component specimen

Button

Material controls use quiet depth, crisp state changes, and neutral focus.

Component specimen

Button Group

Related modes read as one instrument while preserving individual labels.

Lens

Component specimen

Card

A raised summary surface groups one coherent object and its next action.

Confirm the source boundary

Material question · raised 12 minutes ago

Needs evidence

Current evidence supports the repository scope. Retention still needs a recognized decision.

Component specimen

Collapsible

Reveal supporting detail without changing the hierarchy of the primary result.

3 supporting observations

Component specimen

Empty

Empty states explain what is absent and offer one useful next move.

No unresolved questions

This specimen has no open clarification requests for the selected scope.

Component specimen

Item

Dense evidence rows keep identity, status, and action aligned.

Architecture overview

Current maintained knowledge · reviewed 4 days ago

Current

Component specimen

Kbd

Keyboard hints remain secondary but legible in dense command surfaces.

Open evidence search⌘K

Component specimen

Marker

Low-emphasis markers divide chronology and annotate source context.

Today · 14:32

Evidence refreshed from 3 maintained sources

Supersedes decision v2

Component specimen

Progress

Progress communicates bounded review work, never artificial certainty.

Source review

Component specimen

Separator

One-pixel structure separates regions without creating decorative boxes.

Evidence

Decision

Plan

Component specimen

Skeleton

Loading placeholders preserve structure and avoid implying content that is not ready.

Component specimen

Spinner

Use indeterminate motion only while work is genuinely in flight.

Checking source freshness

Component specimen

Toggle

A toggle exposes a reversible view preference with an explicit pressed state.

Component specimen

Toggle Group

Mutually exclusive lenses change presentation, never stakeholder authority.

Component specimen

Typography (composition)

Host Grotesk carries product hierarchy while Fragment Mono labels evidence and state.

Recognized decision / v3

Identity remains actor-specific.

Provider identity, connected-system identity, authorization, and source access remain separate grants. Presentation can adapt to role, but authority does not.

Important beliefs require evidence, provenance, and a correction path.

Open the evidence panel with⌘Ksource.current

Component family 02

Forms and input

Quiet, exact controls for gathering evidence, resolving ambiguity, and recording scoped intent. Every example remains local to this showcase.

Component specimen

Calendar

A focused date surface with a restrained selected state.

August 2026

Component specimen

Checkbox

Independent, reversible choices with labels as the full hit target.

Include superseded evidence

Inherit authority from source access

Component specimen

Combobox

Search a bounded collection without hiding the available choices.

Evidence source

Component specimen

Date Picker

Calendar and popover composed into a compact review-date control.

Evidence review date

Component specimen

Field

Label, control, description, and validation presented as one unit.

Component specimen

Input

A neutral text entry surface with explicit placeholder guidance.

Initiative name

Component specimen

Input Group

Related adornments share one boundary without competing for emphasis.

Artifact reference

clair /

Component specimen

Input OTP

Segmented verification input with a visible grouping rhythm.

Temporary verification code

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Example value only.

Component specimen

Label

Compact language that stays close to the control it names.

Decision owner

Component specimen

Native Select

Platform-native selection for simple, stable option sets.

Evidence window

Component specimen

Questionnaire

A keyboard-ready sequence for resolving one bounded question at a time.

Specimen interactions stay in this browser session.

Component specimen

Radio Group

One decision among mutually exclusive authority states.

Authority state

Current

Needs evidence

Superseded

Component specimen

Select

A styled single-choice control for concise state vocabularies.

Source status

Component specimen

Slider

A continuous estimate with the numeric value kept visible.

Confidence estimate72%

Example estimate only. Confidence does not establish authority.

Component specimen

Switch

A compact binary preference with state conveyed by the control.

Notify the question owner

Example preference. No notification will be sent.

Component specimen

Textarea

Multiline evidence notes with enough space for a precise explanation.

Evidence note

Component family 03

Navigation and overlays

Temporary surfaces stay precise, quiet, and explicit about their effect boundary.

Component specimen

Dialog

A focused decision without theatrical depth.

Component specimen

Direction

Logical layout works in either reading direction.

اتجاه الواجهة

Component specimen

Drawer

Mobile-first detail that remains dismissible.

Component specimen

Menubar

Desktop command access with familiar key paths.

Component specimen

Sheet

Persistent task context from the inline edge.

Component family 04

Data and conversation

Dense information stays inspectable, keyboard reachable, and explicit about local example state.

Component specimen

Carousel

A bounded sequence for related evidence, with visible mechanical controls.

EV-014Current

Architecture overview

Maintained knowledge · reviewed today

EV-021Current

Retention policy decision

Recognized decision · reviewed 2 days ago

EV-034Review

Connector access record

Observed evidence · one clarification open

Component specimen

Chart

Semantic series make evidence movement legible without ornamental color.

Component specimen

Command

Search-first access to evidence and decision actions, with keyboard cues.

No command selected

Component specimen

Data Table

TanStack Table v9 composes real client-side filtering and sortable columns.

Scroll horizontally to inspect

Filter artifacts5 of 5 records

Local example records. No organizational state is changed.

Architecture overview	Platform group	Current	Today
Retention policy decision	Security council	Current	2d
Identity exception record	Access team	Needs evidence	18d
Legacy connector scope	Integration team	Superseded	94d
Customer data boundary	Privacy lead	Current	6d

Component specimen

Message

Conversation stays visually distinct from durable evidence and recognized decisions.

Clair · local example

The architecture overview is current. The retention exception still needs direct clarification.

Evidence checked moments ago

Initiative lead

Ask the privacy lead to confirm whether derived artifacts are in scope.

Not recorded as a decision

Component specimen

Message Scroller

Long discovery threads preserve reading position and expose a return-to-end control.

Which source currently defines the repository boundary?

The architecture overview names the repository and was reviewed today.

Does the retention decision cover derived artifacts?

Not yet. The recognized decision applies only to source records.

Who needs to clarify the derived-artifact boundary?

The privacy lead and platform owner are the relevant stakeholders.

Component specimen

Pagination

Compact page movement keeps location and current state explicit.

Example evidence page 2 of 8

Component specimen

Resizable

Evidence and decision context share one plane with a keyboard-operable divider.

EVIDENCE

Architecture overview

Current maintained knowledge

DECISION CONTEXT

Source scope is supported. Retention remains an open material question.

Component specimen

Scroll Area

Dense activity remains contained without hiding chronological order.