Dark Mode

Dark mode was one of GitHub's most-requested features—and an accessibility imperative for the 73M+ developers on the platform. But it couldn't be solved with a CSS color inversion. GitHub needed a theming architecture: a design token system flexible enough to support multiple themes, handle WCAG contrast requirements across two modes, and account for complex subsystems like user-chosen label colors, syntax highlighting, and empty state illustrations.

• Project DRI—owned the project end-to-end from color audit through Universe 2020 launch: design vision, cross-functional coordination, stakeholder communication, and delivery
• Dark Mode Look & Feel—led the visual design exploration for the primary dark theme: saturation, lightness, tint, overall atmosphere
• Color System Architect—designed the functional variable (design token) system that made the entire product themeable
• Collaboration Lead—coordinated specialists across color palettes, subsystems design, product design, and engineering to ship a flawless launch

• Dim the lights, don't redesign the room. Core design principle: switching themes should feel like the same space in different lighting. Every visual hierarchy, spatial relationship, and information architecture stays intact.
• Systematic color audit and codification. Conducted a comprehensive audit of every color value in production, uncovering massive inconsistencies outside of Primer. Grouped colors by intent, consolidated duplicates, and began creating semantic design tokens.
• Absolute control over elegance. Designed a functional variable system intentionally heavier than typical token architectures—trading minimalism for precision because the launch needed to be flawless.
• Subsystem-first problem solving. Identified that the hardest problems weren't in the main design system but in subsystems: user-chosen label colors, empty state illustrations, syntax highlighting, and theme settings UX.

• Semantic color palettes: Collaborated with Julius to redesign color scales with predictable semantic meaning at each step—so step N in any hue always serves the same functional purpose.
• Functional naming convention: Every color in the product got a semantic name based on its job, not its appearance. This made the system theme-agnostic from day one.
• Perceptual color translation: Developed approaches for translating user-chosen colors across themes while maintaining both WCAG contrast compliance and perceptual consistency.
• Theme settings UX: Javi led the product design for the theme settings interface—how users preview, select, and manage themes.

• Dark mode launched flawlessly at GitHub Universe 2020 to immediate, overwhelmingly positive community response
• The functional variable system now supports 8+ themes including high-contrast and colorblind-friendly options, meeting WCAG 2.1 accessibility standards
• Established the theming architecture that continues to scale GitHub's Primer design system today
• Dark mode became one of the most celebrated feature launches in GitHub's history, driving immediate user adoption and sustained positive sentiment
• Color palette redesign became the foundation for all future color work at GitHub
• Theme settings UI set the pattern for how GitHub approaches user preference features

Figma (component libraries, color exploration), CSS/SASS inspection, systematic color auditing, design token architecture, WCAG contrast analysis, perceptual color mapping, feature flag rollout, cross-functional coordination across design systems, product design, accessibility, and engineering teams.

The design philosophy holds—dimming the lights, investing in infrastructure, solving subsystems. But AI transforms the tooling dramatically.

I'd build a programmatic color auditor that crawls the product and returns a complete color inventory in hours instead of a week. I'd use a Design System Restyler to generate and compare theme variants at speed. I'd create a design token stress-tester to probe where the abstraction breaks under new theme requirements. And I'd build a color translator that handles perceptual mapping across themes with contrast checking and edge-case warnings built in.

The manual work of figuring out how color subsystems translate was one of the most time-consuming parts of this project. The perceptual questions remain, but the iteration speed would be transformed.

• Infrastructure work pays compound interest—the component refresh enabled dark mode, which enabled the full theming ecosystem with 8+ accessibility-focused themes
• Constraint is harder than freedom: making something feel "the same" in a new visual context requires deeper perceptual understanding than designing something new
• Subsystems are where theming breaks—a system is only as good as its handling of edge cases where users inject their own choices
• Exceptional collaboration comes from assembling irreplaceable expertise, not from hierarchy—every person on this team brought a unique superpower

Led under Diana Mounter (Design Infrastructure Lead). Semantic color palettes by Julius. Theme settings and subsystems design by Javi. Engineering by Cole, Simon, and Rohan. The best—and most challenging—project I've been part of.