Button

Badge

Brand readyQuiet systemStableReview

Indicator

RN
7

Avatar

RN
OP

Group

  • RA
  • CT
  • UI
  • QA
  • PM

Breadcrumb

Input

Names and placeholders should read like product UI.

Select

Textarea

Field

The base wrapper still works for custom controls.

Checkbox

Checkboxes inherit tone and radius.

Switch

Segmented

Slider

72

Rating

File

launch-plan.pdfPDF • 179.20 KB

Input

No file chosen

Drop

Drop references, screenshots, or brand files

The active state follows the semantic primary tone.

Cards

Static surface

Launch brief

Read only

Use `Card` for summaries, grouped metadata, or content that needs structure without turning the whole surface into an action.

Owner: ProductUpdated 12m ago

Navigation surface

Open overlays

Link

Use `CardLink` for docs sections, settings destinations, or detail views when the entire card should behave like navigation.

Jump to the overlay examples

Divider

Highlight

Use Highlight when one phrase needs to stand out inside otherwise neutral copy.

Callout

Structural surfaces stay quiet so the interactive states remain easy to judge.

Loader

Accordion

Tone aliases, size, radius, and variant update the board instantly.

Toast

Dialog

Alert