Use for emphasis, call-to-action accents, and anchor moments.
Web 1 Style Guide Light System
Code + Design 1 now uses the shared 368-derived light system: restrained cards, high-contrast text, DM Sans + DM Mono, and the rainbow reserved for the “Real Thing” moment.
Use the rainbow only as a signature accent for the “Real Thing” language and keep the rest of the interface anchored in the semantic system.
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.