Design system
Colours, type, foundations and components for the Platy web app, first derived from the logo and since updated with CAPPI SIM's decisions of 2 November 2026. Every text colour reaches WCAG 2.1 AA contrast (4.5:1), and every focus ring, field border and outline button border 3:1, in the light and the dark theme.
Logo
A single-colour mark. Its white details are cut out, so the same file works on light and dark backgrounds.
- Brand teal #09C6C2, sampled from the logo, reaches only 2.1:1 on white. It is for the logo and decoration, never for text or controls: interactive teal is the darker primary.
- The files are derived from the 640 px logo image until a vector original is available.
Colour
Every pairing the components use, with its contrast ratio in both themes. Values come from the design tokens in globals.css.
| Use | Tokens | light | dark |
|---|---|---|---|
| Body text | foreground on background | #0C1817 / #FFFFFF 18.12:1 min 4.5:1 | #E6F0EF / #0C1817 15.60:1 min 4.5:1 |
| Supporting text | muted-foreground on background | #4E6261 / #FFFFFF 6.47:1 min 4.5:1 | #9DB2B1 / #0C1817 8.14:1 min 4.5:1 |
| Supporting text on muted areas | muted-foreground on muted | #4E6261 / #F4F8F8 6.05:1 min 4.5:1 | #9DB2B1 / #172524 7.11:1 min 4.5:1 |
| Text on cards | card-foreground on card | #0C1817 / #FFFFFF 18.12:1 min 4.5:1 | #E6F0EF / #122120 14.30:1 min 4.5:1 |
| Supporting text on cards | muted-foreground on card | #4E6261 / #FFFFFF 6.47:1 min 4.5:1 | #9DB2B1 / #122120 7.46:1 min 4.5:1 |
| Links and text buttons | primary on background | #0B817D / #FFFFFF 4.72:1 min 4.5:1 | #09C6C2 / #0C1817 8.52:1 min 4.5:1 |
| Primary button | primary-foreground on primary | #FFFFFF / #0B817D 4.72:1 min 4.5:1 | #04302E / #09C6C2 6.73:1 min 4.5:1 |
| Secondary button, neutral badge | secondary-foreground on secondary | #0C1817 / #EAF1F1 15.84:1 min 4.5:1 | #E6F0EF / #1F302F 11.88:1 min 4.5:1 |
| Hovered and selected items | accent-foreground on accent | #0E5654 / #E3F7F6 7.63:1 min 4.5:1 | #A9F1ED / #103634 10.31:1 min 4.5:1 |
| Field error messages | destructive on background | #C42B2B / #FFFFFF 5.63:1 min 4.5:1 | #F06A6A / #0C1817 6.02:1 min 4.5:1 |
| Destructive button | destructive-foreground on destructive | #FFFFFF / #C42B2B 5.63:1 min 4.5:1 | #2A0707 / #F06A6A 6.16:1 min 4.5:1 |
| OK status | success-foreground on success | #17643A / #E3F5EA 6.34:1 min 4.5:1 | #82DDA6 / #10301E 8.77:1 min 4.5:1 |
| At-risk status | warning-foreground on warning | #874505 / #FDF1D9 6.51:1 min 4.5:1 | #F2C063 / #352709 8.64:1 min 4.5:1 |
| Blocking status | danger-foreground on danger | #A32025 / #FCE9E9 6.44:1 min 4.5:1 | #FF9E9E / #3B1517 8.15:1 min 4.5:1 |
| Focus ring | ring on background | #0B817D / #FFFFFF 4.72:1 min 3:1 | #09C6C2 / #0C1817 8.52:1 min 3:1 |
| Field and outline button borders | input on background | #6F8584 / #FFFFFF 3.91:1 min 3:1 | #6F8584 / #0C1817 4.63:1 min 3:1 |
| Field and outline button borders on cards | input on card | #6F8584 / #FFFFFF 3.91:1 min 3:1 | #6F8584 / #122120 4.24:1 min 3:1 |
Typography
Inter, an open-source typeface (SIL Open Font License), served with the app. Sizes follow Tailwind's scale from 14 px up; times and amounts use tabular figures so columns line up.
- Page titletext-3xl, semibold
- Season 2027 staffing
- Section titletext-xl, semibold
- Le Mans Classic · 2–5 July
- Card titletext-base, semibold
- Track marshals
- Bodytext-sm
- Twelve marshals confirmed; two still need a valid licence.
- Supportingtext-sm, muted
- Updated 3 minutes ago by the event coordinator
- Numberstext-sm, tabular-nums
- 08:30–18:00 · €1,240.00 · 14 of 16 staffed
Foundations
The rules behind every screen. The components below apply them.
- Spacing8 px grid
- Page margins, the padding of panels and cards, and the gaps between cards, groups and sections are multiples of 8 px. The half step, 4 or 12 px, is only for things that belong together, such as an icon and its label, a heading and its text, or the inside of a control, badge or table row. Other values, such as 6 or 20 px, are not used.
- Sizes4 px steps
- Heights and icons are sizes, not spacing: controls are 32, 36 or 40 px high, badges at least 24 px, and icons beside text 16 px.
- Corner radius8 to 12 px
- Cards and panels are 12 px. Buttons, fields and badges are 8 px.
- Iconslucide-react
- One line-based set, drawn with a 2 px stroke on a 24 px grid. The stroke is never overridden and icons beside text are all 16 px, so every stroke renders alike.
- Motion150 to 300 ms
- Only for state changes, such as the hover colour of a button, easing in and out. Buttons and fields fade their colours in 150 ms. No loops or decorative effects.
Components
Adapted from shadcn/ui and kept in this repository. Keyboard focus draws a 2 px ring in the primary colour; statuses always pair colour with a word and an icon.
Light theme
Buttons
Badges
Form fields
The licence expired on 12 March 2026.
Cards
Le Mans Classic · 2–5 July 2027
Motor show · 14–19 Sept 2027
Dark theme
Buttons
Badges
Form fields
The licence expired on 12 March 2026.
Cards
Le Mans Classic · 2–5 July 2027
Motor show · 14–19 Sept 2027