The design systemComponents · tokens · shells

The components are
the easy part.

A component set with tokens you can point at your own brand, packaged so Claude Design picks it up on load. It sits on whichever primitives you already use — what makes it worth having is that every state is drawn and every value is defined.

TokensYours to set

Point it at your brand.

Colour, radius and type are variables. The look is a configuration change; the judgement underneath is not.

01The components →
Colour tokensA neutral scale that carries the interface, and one accent you point wherever you like.
RadiusEvery radius is a stop on one scale, and nested shapes stay concentric.
TypeA face for headings, one for reading, and one that holds figures in columns.
Aadisplay
Awaiting surveytext
128,400.00tabular
ComponentsEvery state drawn, not only the happy one

The inventory is the easy half.

The inventory is unremarkable and deliberately so. What is added is the part that is usually left to the person implementing it: what each control means, and when it may not be offered.

02Shells and archetypes →

Accordion

Collapsible panels with headings. One open at a time, or several.

Alert

A callout stating something the reader must know before acting.

Alert dialog

A decision that must be answered before anything else can happen.

Autocomplete

An input that narrows a known set as you type, and never invents one.

Avatar

A person, with a fallback that never leaves an empty circle behind.

Badge

Status as data. Every value the enum permits has a defined appearance.

Breadcrumb

The path to the current record. Every segment is a route that exists.

Button

One primary action per surface, and never two.

Calendar

A date picker with ranges and multiple selection.

Card

A container that groups related information, and states what it is.

Checkbox

Toggles that wait for submit, rather than committing on click.

Checkbox group

Shared state across a set, including the indeterminate parent.

Collapsible

A panel controlled by its own trigger, with no hidden state.

Combobox

An input over a known set, with the chosen values held as chips.

Command

A palette for searching and running the actions a screen permits.

Context menu

A menu raised at the pointer, portalled clear of its container.

Date picker

A field that opens a calendar, and accepts only real dates.

Dialog

A surface that opens over the page and states what it will do.

Drawer

A panel from the edge of the screen, with a handle you can find.

Empty

Nothing to show is a state that gets drawn, with a way out of it.

Field

A control bound to its label, its hint and its error.

Fieldset

A group of controls under one legend, submitted together.

Form

Validation held on the field, and a submit that says what it commits.

Frame

A framed region that names what it contains before it shows it.

Group

Controls that belong together, sharing one border.

Input

The plain field, with every state it can be in already drawn.

Input group

A field with what belongs beside it, inside the same border.

Kbd

Shortcuts written the way the operating system writes them.

K

Label

Bound to its control, so clicking it does what a label should.

Menu

Actions read from the record, with submenus where they belong.

Meter

A value inside a range, with the range stated.

Number field

A number with its own increment, and limits it will not pass.

OTP field

A segmented code entry that keeps its place as you type.

Pagination

Range and total derived from the set. There is no prop to pass.

Popover

A panel anchored to what opened it, and dismissed the same way.

Preview card

A preview raised on hover, never the only place the fact exists.

Progress

A task with a known end, distinct from one without.

Radio group

One of a set, where none and several are both impossible.

Scroll area

A scrolling region whose overlays are portalled out of it.

Segmented control

For switching a view. Never for taking an action.

Select

A choice from a closed set, with nothing outside it accepted.

Separator

A division that screen readers can hear as well as see.

Sheet

A flyout from the side, on the dialog’s own rules.

Skeleton

Loading shaped like the thing that is loading, so nothing jumps.

Slider

A value from a range, with the value legible without dragging.

Spinner

For work with no known end. Anything measurable gets a progress bar.

Switch

Commits immediately. If it needs a save button, it is a checkbox.

Table

Tabular figures, and a footer that derives its own totals.

Tabs

Panels on one record. The set never changes what the record is.

Textarea

Longer input, sized to what is expected of it.

Toast

Confirmation of something already done, never a question.

Toggle

Two states, both of which look deliberate.

Toggle group

Shared state across a set of toggles, with one always true.

Toolbar

Grouped controls, with one primary action and never two.

Tooltip

A hint for a sighted user. Never the only place a fact exists.

Ships on Coss UI out of the box, and adapts to the primitives you already use. Either way each component arrives with its loading, empty, error and permission-denied states — the four that never make the mockup and always make the bug list.
Shells and archetypesThe parts every business app grows

Constraint alone makes everything look the same.

So the shells are recipes, not templates. Each one must name three expressive choices and give a reason for each — which is where a product stops looking like everybody else’s.

03See them built →
Archetype 01

Work queue

A list somebody acts on, sorted by what is burning down rather than by what arrived last.

severity orders the list
Archetype 02

Record page

One object, its figures traced, and only the actions its current state permits.

actions read from the record
Archetype 03

Decision surface

Where somebody commits. Gated on evidence, and explicit about what cannot be undone.

gated, and reversible where it can be
Archetype 04

Reconciliation view

Two sides that must agree, with the difference named rather than left to arithmetic.

the difference is a first-class figure

Reckon

Your look.
Not your judgement.

Point the tokens wherever you like. The rules about derivation, affordance and coverage are not configurable, because they are the product.

Built for Claude Design · plain markdown · nothing to run