# Grounded — Design Language Reference: black device chrome, a white content sheet that rises into it with a large corner radius, oversized light display titles, tiny grey all-caps metadata labels, pill chips, and a lot of whitespace. The app reads as a record, not a dashboard. ## Type — General Sans | Role | Family | Size | Use | |---|---|---|---| | Display | `TextType.Light` | 30–44 | Screen titles. Always light, never bold. | | Title | `TextType.Bold` | 17–20 | Card and section titles. | | Body | `TextType.Regular` | 13–14, `height: 1.5` | Descriptions, copy. | | Label | `TextType.Bold` | 10–11, `letterSpacing: 0.8–1.2`, uppercase, `colorGrey2` | Metadata above a value. | | Metric | `TextType.Bold` | 24–34 | Debt score, counts. | The label/value pair is the core unit: a tiny grey all-caps label sitting directly above a large dark value. Used everywhere numbers appear. ## Geometry - Sheet radius `28`, card radius `16`, chip radius `999`, control radius `12`. - Screen padding `20` horizontal. Card padding `16`. Section gap `28`. - Hairlines at `colorDivider` (black 7%), borders at `colorBorder` (black 8%). - One soft shadow only: `0 4 18 rgba(0,0,0,0.03)`. No coloured glows. ## Colour Near-black ink (`colorPrimaryDark #141414`) on warm off-white (`colorPrimaryLight #EDEEEA`), with a single green accent (`colorPrimary #2F6F4E`). Enforcement tiers own the rest of the palette: | Standing | Colour | |---|---| | Good | green `#2F6F4E` | | Warned | amber `#C98A04` | | Grounded | rust `#B5442F` | | Lockdown | oxblood `#7A1F14` | The tier colour is used consistently — header, chip, meter, queue accent — so the standing is legible without reading the word. ## Structure Every screen is: black `headerBar` (back, title, action) → white sheet with a `28` top radius → `sectionHeader` (label + light display title) → content. ## Rules - Display titles are Light. Bold is for labels and metrics only. - Numbers get a label above them, never beside them. - Chips carry state, never actions. - One primary button per screen; everything else is outlined or text. - Empty states are plain. An empty overdue queue is good news, not a party.