Color

Cloaked's palette is a high-contrast black-and-white system with a single Brand/300 Cloaked orange that does almost all the "do something" work, plus six tint families kept in reserve for accents, avatars, and semantic state.

Foundation

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 Brand/300 Cloaked.

050100150 200250300350 400450500550 600650700750 8008509009501000

Rule of thumb. Text on white uses 900 or 1000. Body text uses 850. Captions and metadata use 650. Borders use 100.

Foundation

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.

Brand

Primary action · key moments · Cloaked identity

--brand-100

--brand-200

--brand-300-cloaked

--brand-400

Blue

Informational accents · links · focus rings

--blue-100-subtle

--blue-200

--blue-300

Purple

Personal-data moments · avatars · non-alert highlights

--purple-100-subtle

--purple-200

--purple-300

Green

Positive state · resolved state · confirmations

--green-100-subtle

--green-200

--green-300

Red

Negative state · destructive confirmation · errors

--red-100-subtle

--red-200

--red-300

Status

Positive · Negative · Warning

--status-positive

--status-negative

--status-warning

Semantic

Role tokens

Use Figma-native variables in new work. Semantic aliases still exist for existing components, but the Figma names are the registry truth.

Surfaces

bg / canvas

#FFFFFF

bg / Marketing/200

#F3EFE2

bg / subtle

#F7F7F7

bg / muted

#F2F2F2

bg / inverse

#000000

Foreground

fg / default

#000000

fg / strong

#1A1A1A

fg / muted

#262626

fg / subtle

#595959

fg / placeholder

#A6A6A6

Borders

border / subtle

#F2F2F2

border / default

#E5E5E5

border / strong

#CCCCCC

border / focus

#3F7AEF

State

state / success

#009933

state / danger

#EC4545

state / warning

#F27F0D

state / info

#2A9AE8

Semantic

Light ↔ Dark

Every Figma color variable has a dark-mode counterpart. The token name never changes — --neutral-1000 gives you black on light and white on dark. Use the toggle in the sidebar footer to flip the whole site; mapped components remap automatically.

Light default

`--bg-canvas`		#FFFFFF
`--bg-subtle`		#F7F7F7
`--bg-muted`		#F2F2F2
`--fg-default`		#000000
`--fg-muted`		#262626
`--fg-subtle`		#595959
`--fg-link`		#3F7AEF
`--border-default`		#E5E5E5
`--border-strong`		#CCCCCC
`--accent-primary`		#FF550C
`--state-success`		#009933
`--state-danger`		#EC4545
`--state-warning`		#F27F0D
`--state-info`		#2A9AE8

Dark data-theme="dark"

`--bg-canvas`		#1A1A1A
`--bg-subtle`		#0D0D0D
`--bg-muted`		#1A1A1A
`--fg-default`		#FFFFFF
`--fg-muted`		#E5E5E5
`--fg-subtle`		#A6A6A6
`--fg-link`		#4782F7
`--border-default`		#262626
`--border-strong`		#404040
`--accent-primary`		#FF6625
`--state-success`		#31AD5A
`--state-danger`		#EE5555
`--state-warning`		#F4983B
`--state-info`		#30A2F2

Application

Approved pairings

Combinations we sign off on. If a screen feels wrong, it's almost always because the pairing isn't here.

Canvas on Ink#FFFFFF × #000000

Marketing/200 on Neutral/1000#F3EFE2 × #000000

Ink on Canvas#000000 × #FFFFFF

Brand/300 Cloaked on Canvas#FF550C × #FFFFFF

Blue/300 on Canvas#3F7AEF × #FFFFFF

Brand/300 Cloaked on Marketing/200#FF550C × #F3EFE2

Guidance

Do & don't

Use Brand/300 Cloaked for one action per screen — the thing we actually want the person to do.

Don't

Don't compete Brand/300 Cloaked with itself. Two primary CTAs means neither is primary.

Dev

Import the tokens

/* One stylesheet, everywhere. */
@import "cloaked/colors_and_type.css";

/* Use Figma-native tokens from registry/token-map.json. */
.card {
  background: var(--surface-l1-card);
  color:      var(--neutral-900);
  border:     1px solid var(--neutral-150-border-1);
}
.card .cta {
  background: var(--brand-300-cloaked);
  color:      var(--neutral-0);
}