✦ CASESTUDY — DESIGN SYSTEMS
Novacore's token system scales from a single palette to Crédito +
Débito — in light and dark — without touching a single component.
Credit
Debit
𒊹 Light
⏾ Dark
ROLE
Product Designer
SYSTEM
Novacore Design System
TOOLS
Figma Variables · W3C DTCG
SCOPE
Tokens · Components · Multi-brand theming
✦ 01 — THE PROBLEM
One product,
one hardcoded palette
As the company expanded into new products, every squad started building its own components. Colors were fixed values, not roles — so adding a second brand meant editing screens by hand, one at a time, with no shared source of truth.
Static color palette
✦ 02 — THE DECISION
Same token name — action/primary, text/primary — resolves to a different value depending on which product and theme are active. Components never know the difference.
Credit primitive
Emerald + Pine ramps
Debit primitive
Sky + Slat ramps
Semantic tokens
credit / debit · light / dark
Components — zero rewrites
✦ 03 — PROVING IT SCALES
Same components,
four modes
Credit
Debit
𒊹 Light
⏾ Dark
✦ 04 — INSIDE THE SYSTEM
Nine primitives,
one shared vocabulary
Esmerald
Pine
Sky
Slat
Silent
Success
Warning
Error
Info
Info
TYPOGRAPHY - HIERARCHY BY SIZE, NOT WEIGHT
HEADING
Available credit
BODY
Available credit
NUMERIC
$18,200.34
UI LABEL
PAY
SPACING — 8PT SCALE, 4PT MICRO-ADJUST
4
8
16
24
32
48
64
✦ 05 — BUILT TO BE MAINTAINED
Documented and validated before
a single component shipped
NAMING CONVENTION
action / primary / default
text / secondary
border / focus
Category · role · state — every token reads like a sentence. Anyone can guess what it does without opening Figma.
CONTRAST, VALIDATED UPFRONT
AAA
AAA
AAA
Every primitive stop carries its WCAG contrast ratio against white and black — checked before a component existed, not after.
SINGLE SOURCE OF TRUTH
Tokens are authored in Figma Variables, published to Supernova in W3C DTCG format, and consumed by both design and engineering from one place — no exported style guide to fall out of date.