frontend-css-patterns

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.

Typography

/* AVOID: Generic defaults */
font-family: Inter, system-ui, sans-serif;

/* PREFER: Distinctive pairings */
--font-display: 'Clash Display', 'Space Grotesk', sans-serif;
--font-body: 'Satoshi', 'General Sans', sans-serif;

/* Specific moods */
--font-luxury: 'Cormorant Garamond', serif;
--font-brutalist: 'JetBrains Mono', monospace;
--font-playful: 'Fredoka', 'Quicksand', sans-serif;

Typography scale:

:root {
  --text-hero: clamp(3rem, 10vw, 8rem);
  --text-display: clamp(2rem, 5vw, 4rem);
  --text-heading: clamp(1.5rem, 3vw, 2.5rem);
  --text-body: clamp(1rem, 1.5vw, 1.125rem);
}

Color & Theme

:root {
  /* Dominant + sharp accent */
  --color-bg: #0a0a0a;
  --color-fg: #fafafa;
  --color-accent: #ff3366;
  --color-accent-muted: #ff336633;
}

Commit to: high contrast, limited palette (3-4 colors), accent colors that pop.

Motion

Focus on high-impact moments over scattered micro-interactions:

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.reveal {
  animation: fadeInUp 0.6s ease-out forwards;
}

.reveal:nth-child(1) { animation-delay: 0.1s; }
.reveal:nth-child(2) { animation-delay: 0.2s; }

Focus on: page load sequences, scroll-triggered reveals, state transitions.

Spatial Composition

Break the grid: