Frontend CSS Patterns

Implementation patterns for distinctive visual design.

Design Token Integration

If the project contains a DESIGN.md file, use its tokens as the source of truth:

/* Map DESIGN.md tokens to CSS custom properties */
:root {
  --color-primary: /* from {colors.primary} */;
  --color-accent: /* from {colors.accent} */;
  --font-display: /* from {typography.display.fontFamily} */;
  --spacing-md: /* from {spacing.md} */;
}

Do not invent colors, fonts, or spacing values when tokens are defined. Resolve {token.ref} references from YAML frontmatter before generating CSS.