Developer Portal design system

Dark-first design system for a government platform — accessible by default, built for engineering to use off the shelf.

Design systemAccessibilityComponent libraryDesign tokens

PROJECT_FILE // 01

DEMO // PICTURE_IN_PICTURE

What I owned.

SCOPE // 01

→Dark-first design system with WCAG contrast decided and documented per token
→17 production components with states, usage rules, and named anti-patterns
→Handoff spec engineering builds from directly — design DNA, constraints, checklists

How this shipped.

DOC // NARRATIVE

Context: Booz Allen Hamilton's government-facing Developer Portal ran on two design systems side by side. Design review was a two-week bottleneck on every ticket, and the existing UI washed out under the low light operators actually worked in.
Problem: Teams re-reviewed the same accessibility and token mismatches on every release. The design system lived only in Figma, so engineering kept rebuilding it by hand. And dark mode was treated as an afterthought even though operators lived in it.
Approach: I made the system dark-first and wrote the accessibility decision into each token — every color carries the contrast ratio it passed. Then I packaged the components and rules as a spec engineering (and their agents) could consume directly, instead of interpreting a Figma file.
Ship: A dark-first design system: 17 components with states, usage rules, and anti-patterns, plus tokens that expose their WCAG ratio for every ink-on-surface pair. Delivered as a handoff engineering builds straight from.
Outcome: Design review dropped from two weeks to under two days. Every contrast pair provably ≥ 4.5:1, and operators stopped reporting dim text in retros. Jennifer Sheppard, the Product Lead, called it work she wanted to keep reusing.
Differently: I'd separate the client-specific tokens from the base as a clean layer from day one, and make a failed contrast ratio block the release instead of relying on review to catch it.
Craft floor: Accessibility decided per token, not linted after. Dark mode as the primary, not a theme. The same system in design and in code, so nothing drifts between them.

Next case

Juan Valdez mobile app & design system