brand.magicblocks.ai · tokens

Design tokens

The atomic vocabulary of the brand — colours, type, spacing, radii, motion, shadows. The same values served from /api/brand.json for AI agents.

Colours

Click any swatch to copy its hex value. Pink-700 is the brand accent — every other colour orbits it.

Accent

Neutrals

Warm cream scale

pink

yellow

green

blue

Semantic

Typography

Four faces. Display + body + mono + serif italic accent.

Bricolage Grotesque

headlines, display, big numbers

The quick brown fox
jumps over the lazy dog
0123456789 — & ! ?
abcdefghijklmnopqrstuvwxyz

DM Sans

body, UI, paragraphs

The quick brown fox
jumps over the lazy dog
0123456789 — & ! ?
abcdefghijklmnopqrstuvwxyz

JetBrains Mono

code, tokens, hex values, technical

The quick brown fox
jumps over the lazy dog
0123456789 — & ! ?
abcdefghijklmnopqrstuvwxyz

Serif

—

The quick brown fox
jumps over the lazy dog
0123456789 — & ! ?
abcdefghijklmnopqrstuvwxyz

Spacing

A 4px grid. Click any value to copy.

Radius

Corner curvature, named small to extra-large. Click to copy.

Motion

Four duration buckets. House easing curve below.

--ease

Shadows

Elevation + the brand's pink halo + focus ring.

Minimum sizes

Brand-protection rules — never render the marks below these sizes.

  • Full lockup120px / 30mm print
  • Icon24px / 8mm print
  • Wordmark90px

CSS variables

Every custom property declared in _shared.css. Filter by name. Click any row to copy the variable name (with leading --).

110 vars
Show / hide all (110)
  • #191E32
  • #466099
  • #6E90CC
  • #FFFFFF
  • #FBF6F0
  • #F9F1E8
  • #F4ECE4
  • #E8DBCB
  • #D2BFAA
  • #FE84A9
  • #FF5B8D
  • #FF3F7A
  • #FFD878
  • #F9C33E
  • #F9AD03
  • #7DF4D0
  • #47DDB2
  • #37BC9B
  • #5BD9FC
  • #30C4F2
  • #1FAAE8
  • var(--warm-3)
  • var(--paper)
  • var(--warm-5)
  • var(--warm-5)
  • var(--warm-2)
  • var(--warm-7)
  • var(--ink)
  • rgba(25, 30, 50, 0.78)
  • rgba(25, 30, 50, 0.7)
  • rgba(25, 30, 50, 0.6)
  • rgba(25, 30, 50, 0.12)
  • rgba(25, 30, 50, 0.06)
  • rgba(139, 115, 85, 0.18)
  • rgba(139, 115, 85, 0.10)
  • var(--accent)
  • var(--pink-700)
  • rgba(255, 63, 122, 0.12)
  • var(--green-700)
  • rgba(55, 188, 155, 0.14)
  • var(--yellow-700)
  • rgba(249, 173, 3, 0.16)
  • var(--blue-700)
  • rgba(31, 170, 232, 0.14)
  • #D64545
  • rgba(214, 69, 69, 0.12)
  • var(--accent)
  • #1E6B44
  • #1463A1
  • #8A5A00
  • var(--error)
  • rgba(255, 63, 122, 0.06)
  • rgba(31, 170, 232, 0.04)
  • rgba(249, 195, 62, 0.03)
  • rgba(25, 30, 50, 0.035)
  • 4px
  • 8px
  • 12px
  • 16px
  • 20px
  • 24px
  • 32px
  • 40px
  • 48px
  • 64px
  • 80px
  • 96px
  • 128px
  • 4px
  • 6px
  • 10px
  • 14px
  • 20px
  • 28px
  • 999px
  • none
  • 0 1px 2px rgba(25, 30, 50, 0.06), 0 1px 1px rgba(25, 30, 50, 0.04)
  • 0 4px 10px rgba(25, 30, 50, 0.08), 0 1px 2px rgba(25, 30, 50, 0.06)
  • 0 10px 28px rgba(25, 30, 50, 0.12), 0 2px 4px rgba(25, 30, 50, 0.06)
  • 0 24px 56px rgba(25, 30, 50, 0.18), 0 4px 8px rgba(25, 30, 50, 0.08)
  • 0 12px 40px rgba(255, 63, 122, 0.28)
  • 0 0 0 3px rgba(255, 63, 122, 0.28)
  • 100ms
  • 160ms
  • 240ms
  • 400ms
  • cubic-bezier(0.2, 0.8, 0.2, 1)
  • "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif
  • "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif
  • "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
  • "Fraunces", ui-serif, Georgia, "Times New Roman", serif
  • 1
  • 10
  • 100
  • 200
  • 300
  • color-mix(in oklab, var(--bg-paper) 95%, var(--accent))
  • 0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent)
  • linear-gradient(135deg, color-mix(in oklab, var(--accent) 12%, transparent) 0%, color-mix(in oklab, var(--info) 10%, transparent) 100%)
  • linear-gradient(135deg, color-mix(in oklab, var(--accent) 8%, transparent) 0%, color-mix(in oklab, var(--info) 6%, transparent) 100%)
  • var(--success)
  • var(--warning)
  • var(--error)
  • color-mix(in oklab, var(--success) 12%, transparent)
  • color-mix(in oklab, var(--warning) 12%, transparent)
  • color-mix(in oklab, var(--error) 12%, transparent)
  • 1.2px
  • 52px
  • 36px
  • var(--row-h-comfortable)

Want this as JSON? /api/brand.json