Carta Design System — Ink

Carta was rebranding, and the constraint wasn't visual. The existing system had no semantic layer to rebrand against — color was applied straight from a palette, so changing the brand meant touching every surface that used it.

I architected Ink's color system in four tiers: primitives (the raw scale), foundation (brand accents and status colors), core (backgrounds, content, lines), and product semantics. The tier that does the work is foundation. It sits between the raw palette and everything downstream, so changing it re-resolves core and product semantics against a new brand without a single component changing.

The product semantics tier is where the domain lives. On an equity platform, status_Tier 1 through 7 encode where a security sits in its lifecycle, and info_Positive / info_Attention carry financial meaning rather than decoration. Getting those names wrong isn't a style problem.

Typography
Role-based, not size-based. Display, heading, paragraph, and legal tiers — each with documented usage rules and link/hover variants. Designers choose the role; the scale resolves the value. That distinction is what keeps a type system stable when the brand moves.

Accessibility
I validated the brand palette under monochromacy, tritanopia, and deuteranopia before locking it. On a product where color signals financial state, a palette that collapses under color blindness is a functional failure, not a cosmetic one.

Sequencing
Nine months, no delivery freeze. I phased the migration deliberately: color semantics first, then type and iconography, then grid and spacing, then page patterns. Color, type, the navigation system, and the redesigned UI shipped during my time on the team. The later phases were sequenced and documented for the teams continuing the rollout.