Warm neutrals. Precise type. Disciplined space.
The palette, type scale, spacing system, dark-mode behavior, and accessibility gates that every public and product surface inherits.
Light-mode working tokens
Warm neutrals do most of the work. Semantic accents stay muted and explicit.
Dark mode is first-class
Dark mode stays warm and avoids pure black or neon inversion.
One family, no decorative second voice.
Instrument Sans is the primary family. Fallbacks are Noto Sans and system UI. Use tabular numerals for money, dates, times, counts, and scanning-heavy data.
| Style | Mobile | Desktop | Use |
|---|---|---|---|
| Hero | 40 / 44 | 48 / 52 | Homepage hero or short opener |
| H1 | 32 / 36 | 36 / 40 | Primary page title |
| H2 | 24 / 30 | 28 / 34 | Section title |
| H3 | 18 / 24 | 20 / 26 | Subsection or module title |
| Body | 16 / 24 | 16 / 24 | Running product copy |
| Body small | 14 / 20 | 14 / 20 | Helper or secondary text |
| Meta | 12 / 16 | 12 / 16 | Meta labels |
One plane. One layer of containment.
Settle breathes, but it never drifts. Density comes from hierarchy and disclosure, not from tiny type or crowded chrome.
| Token | Use |
|---|---|
| 4 | Tight micro-gap between icon and label |
| 8 | Icon padding, chip inset, row subdivisions |
| 12 | Compact stack gap, card inset adjustment |
| 16 | Default compact margin and field padding |
| 24 | Primary section gap, medium-screen side margin |
| 32 | Desktop section gap, hero padding |
| 48 | Large section break / figure top spacing |
| 64 | Public page band spacing / hero depth |
| Element | Value | Use |
|---|---|---|
| Field / small card radius | 10 px | Text fields, list rows, compact cards |
| Standard surface radius | 12 px | Panels, bottom sheets, dialogs |
| Hero / image radius | 16 px | Still-image containers, key marketing blocks |
| Pill | 999 px | Status chips |
| Border thickness | 1 px default / 2 px focus | Normal state vs active state |
Fast, quiet, and short.
Motion should feel like a page settling into place—never like the interface is performing.
| Pattern | Default | Rule |
|---|---|---|
| State change | 100–120 ms fade | Chip update, save confirmation, inline validation |
| Screen transition | 160–180 ms short slide + fade | Forward navigation or pane change |
| Bottom sheet | 180 ms rise | Sheet or modal presentation |
| Reduce Motion mode | Fade only | No scale, bounce, parallax, or spring depth cues |
Accessibility is part of the visual language.
| Gate | Requirement |
|---|---|
| Text contrast | At least 4.5:1 for normal text; 3:1 for large text |
| Non-text contrast | At least 3:1 for field outlines, icons, and key controls |
| Color use | No state relies on color alone; pair color with text and/or iconography |
| Touch target | 48 × 48 px target size across product controls |
| Text resizing | Support 200% text size without clipping or loss of function |
| Motion | Respect system Reduce Motion settings; fade-only fallback |
| Labels | Visible, descriptive labels for controls and form inputs |
| Privacy | Mask sensitive notifications and shared-state previews by default |
Icon system
Every production icon uses a 24 × 24 viewBox, 1.5 px stroke weight, round caps, round joins, and currentColor inheritance. The browser pages and the TypeScript registry must stay aligned with the raw assets under icons/.
Icons do not carry their own colors. Status meaning comes from the surrounding chip or text color, while the icon inherits the same foreground value.
Render slots use token-driven sizes: xs 14 px, sm 16 px, md 20 px, lg 24 px. Dedicated slots exist for chip icons, bottom-nav icons, and app-sheet icons.
Compact widths keep only high-value placements: bottom-bar destinations, Capture, app headers, search results, object rows, Linked / Related headers, related app rows, and status chips. Decorative duplicate icons are explicitly excluded.
Source wireframes preserved
The packet also carries forward the earlier graphic artifacts. They are preserved under source_assets/ and the earlier DOCX has been dumped into semantic JSON under archive/settle_v1_docx_dump.json, so the machine-readable packet does not discard the previous level of detail.