Color
Cloaked's palette is a high-contrast black-and-white system with a single Firey orange that does almost all the "do something" work, plus six tint families kept in reserve for accents, avatars, and semantic state.
Neutral ramp
21 steps from pure white to pure black. Backgrounds, surfaces, borders, and text all come from here — the entire product can be built with just neutrals and Firey.
Color families
Each family has a base and a few tints. Names come straight from the Figma source of truth — rename a primitive, not a semantic token.
Role tokens
Use these in components — they remap cleanly to dark mode and never need to be renamed. Click any hex to copy.
Surfaces
Foreground
Borders
State
Light ↔ Dark
Every role token has a dark-mode counterpart. The token name never changes —
--fg-default
gives you black on light and white on dark. Use the toggle in the sidebar
footer to flip the whole site; every component remaps automatically.
--bg-canvas | #FFFFFF | |
--bg-subtle | #F7F7F7 | |
--bg-muted | #F2F2F2 | |
--fg-default | #000000 | |
--fg-muted | #262626 | |
--fg-subtle | #595959 | |
--fg-link | #5A76FF | |
--border-default | #E5E5E5 | |
--border-strong | #CCCCCC | |
--accent-primary | #FF550C | |
--state-success | #009933 | |
--state-danger | #EC4545 | |
--state-info | #2DA9FF |
--bg-canvas | #000000 | |
--bg-subtle | #1A1A1A | |
--bg-muted | #262626 | |
--fg-default | #FFFFFF | |
--fg-muted | #E5E5E5 | |
--fg-subtle | #A6A6A6 | |
--fg-link | #8196FF | |
--border-default | #333333 | |
--border-strong | #4C4C4C | |
--accent-primary | #FF550C | |
--state-success | #31AD5A | |
--state-danger | #F36669 | |
--state-info | #30A2F2 |
Approved pairings
Combinations we sign off on. If a screen feels wrong, it's almost always because the pairing isn't here.
Do & don't
Use Firey for one action per screen — the thing we actually want the person to do.
Don't compete Firey with itself. Two primary CTAs means neither is primary.
Import the tokens
/* One stylesheet, everywhere. */ @import "cloaked/colors_and_type.css"; /* Use semantic tokens, not primitives. */ .card { background: var(--bg-canvas); color: var(--fg-strong); border: 1px solid var(--border-default); } .card .cta { background: var(--accent-primary); color: var(--accent-primary-fg); }