Tokens
Every colour is a --fp-color-* custom property, set for both skins in tokens.css. A custom skin sets the same names. With Tailwind, each maps into the theme with an fp- prefix: --fp-color-shell becomes bg-fp-shell, text-fp-shell and so on, and changes with the skin.
Colours
Read from the stylesheet as it renders, so these are the values that ship.
Chrome Silver
chrome-hichrome-100chrome-300chrome-500chrome-800chrome-tintscroll-thumbshellshell-hishell-mattewellfieldinkink-softink-dimbevel-hibevel-loedgeedge-strongcastgridlcd-bglcd-inklcd-ghosthousinghousing-inkled-onled-amberled-redled-offcapcap-inkcap-bluecap-blue-inkcap-ambercap-amber-inkcap-graphitecap-graphite-inkcap-berrycap-berry-inkgelgel-higel-logel-inkfocusfocus-ringselecterror-textbackdropbackdrop-hi
Gunmetal Night
chrome-hichrome-100chrome-300chrome-500chrome-800chrome-tintscroll-thumbshellshell-hishell-mattewellfieldinkink-softink-dimbevel-hibevel-loedgeedge-strongcastgridlcd-bglcd-inklcd-ghosthousinghousing-inkled-onled-amberled-redled-offcapcap-inkcap-bluecap-blue-inkcap-ambercap-amber-inkcap-graphitecap-graphite-inkcap-berrycap-berry-inkgelgel-higel-logel-inkfocusfocus-ringselecterror-textbackdropbackdrop-hi
Fonts
| Token | Stack | Used for |
|---|---|---|
--fp-font-ui | Tahoma, Verdana, "Segoe UI", system-ui, sans-serif | Text and button labels |
--fp-font-display | "Michroma", "Arial Black", sans-serif | Silkscreen labels and titles |
--fp-font-lcd | "VT323", "Courier New", monospace | LCD readouts |
Michroma and VT323 load from fonts.css; see Fonts.
Checked pairs
The colour pairings the classes rely on, and their contrast in each skin. Text needs 4.5:1 and other UI 3:1 for WCAG AA, and a test holds both skins to it. A custom skin that keeps these passing keeps the classes readable. A pair not listed is not promised.
| Pair | Where | Needs | Chrome Silver | Gunmetal Night |
|---|---|---|---|---|
ink on shell | text on the device body | 4.5:1 | ||
ink on shell-matte | text in a module | 4.5:1 | ||
ink on chrome-100 | chrome button label, light end | 4.5:1 | ||
ink on chrome-300 | chrome button label, dark end | 4.5:1 | ||
ink on well | text in a recessed well | 4.5:1 | ||
ink on field | text in a field | 4.5:1 | ||
ink on backdrop | page text (base.css) | 4.5:1 | ||
ink-soft on shell | silkscreen label on the device body | 4.5:1 | ||
ink-soft on shell-matte | silkscreen label in a module | 4.5:1 | ||
ink-soft on chrome-300 | silkscreen label on a title bar | 4.5:1 | ||
ink-soft on well | secondary text in a well | 4.5:1 | ||
ink-dim on shell-matte | dim text, matte panels only | 4.5:1 | ||
error-text on shell-matte | error message in a module | 4.5:1 | ||
error-text on field | error message in a field | 4.5:1 | ||
lcd-ink on lcd-bg | LCD readout | 4.5:1 | ||
housing-ink on housing | label in a dark housing | 4.5:1 | ||
gel-ink on gel | gel button label, mid-height | 4.5:1 | ||
cap-ink on cap | label on a plain cap | 4.5:1 | ||
cap-blue-ink on cap-blue | label on a blue cap | 4.5:1 | ||
cap-amber-ink on cap-amber | label on an amber cap | 4.5:1 | ||
cap-graphite-ink on cap-graphite | label on a graphite cap | 4.5:1 | ||
cap-berry-ink on cap-berry | label on a berry cap | 4.5:1 | ||
edge-strong on shell-matte | field border in a module | 3:1 | ||
edge-strong on field | field border against its fill | 3:1 | ||
select on shell-matte | ring around a selected cap, against the module | 3:1 | ||
select on well | ring around a selected cap, against a well | 3:1 | ||
focus-ring on shell | focus ring on the device body | 3:1 | ||
focus-ring on shell-matte | focus ring in a module | 3:1 | ||
focus-ring on chrome-100 | focus ring on chrome | 3:1 | ||
focus-ring on backdrop | focus ring on the page | 3:1 | ||
led-on on housing | lit green LED in its bezel | 3:1 | ||
led-amber on housing | lit amber LED in its bezel | 3:1 | ||
led-red on housing | lit red LED in its bezel | 3:1 | ||
scroll-thumb on well | scrollbar thumb in a well | 3:1 | ||
scroll-thumb on shell-matte | scrollbar thumb in a module | 3:1 | ||
scroll-thumb on shell | scrollbar thumb on the device body | 3:1 |