Use for emphasis, call-to-action accents, and anchor moments.
Web 2 Style Guide Dark System
Code + Design 2 now uses the DESN368 dark-mode system as its base: WCAG-forward contrast, semantic red/blue/green accents, and a web-native font stack.
Keep motion and behavior expressive, but let the color system stay disciplined so interaction states remain readable and accessible.
Typography
Display / Navigation
DM Sans brings the warmth and the weight.
Body copy stays readable at normal paragraph sizes, and headings can go heavier without feeling corporate or generic.
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
font-family: 'DM Mono', 'SFMono-Regular', 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
font-family: 'DM Mono', 'SFMono-Regular', 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
Semantic Color System
Use for links, technical cues, and supporting interaction affordances.
Use for available states, completion, and positive reinforcement.
Use sparingly for caution, deadlines, and “read this closely” moments.
Components in Practice
Card language
Cards are simple, square-ish, and contrast-first. They should feel like course artifacts, not marketing blocks.
Course 1 Accent Rule
Keep the rainbow only for Real Thing language and similar signature moments.
Course 2 Accent Rule
Lead with dark surfaces and let red, blue, and green do the signaling instead of decorative gradients.