Responsive Patterns & Design System Integration

Q: Fluid Pattern Scaling

Static background-size pixel values feel too small on large screens and too large on small screens. Use viewport units: background-size: 5vw 5vw scales the pattern tile proportionally with the viewport. Alternatively, use CSS clamp: background-size: clamp(20px, 3vw, 60px) to set a minimum and maximum tile size.

Q: Dark Mode Patterns

Use @media (prefers-color-scheme: dark) to switch pattern colours. Two approaches: (1) Override background-color in dark mode — if your pattern uses opacity, the new background colour will tint the pattern automatically. (2) Provide a separate dark-mode data URI. Approach 1 is far simpler when patterns use opacity-based foregrounds.

Q: Theming with data Attributes

Use data-theme attributes on the root element to support multiple themes beyond just light/dark. Teams building SaaS products can expose theme switching to users — each theme overrides the pattern colour tokens. The pattern SVGs themselves never change; only the CSS token values do.

Fluid Pattern Scaling

Static background-size pixel values feel too small on large screens and too large on small screens. Use viewport units: background-size: 5vw 5vw scales the pattern tile proportionally with the viewport. Alternatively, use CSS clamp: background-size: clamp(20px, 3vw, 60px) to set a minimum and maximum tile size.

Design Tokens for Patterns

Define pattern colours as CSS custom properties (design tokens) at the root level. The SVG embedded in background-image cannot read CSS variables, but you can dynamically build the data URI in JavaScript using template literals that interpolate your token values. This connects your pattern colours to your design system's colour scale.

:root {
  --color-pattern-fg: #6366f1;
  --color-pattern-bg: #f5f5ff;
}

/* Use JS to build the data URI with these values */
const fg = getComputedStyle(document.documentElement)
  .getPropertyValue('--color-pattern-fg').trim();

Dark Mode Patterns

Use @media (prefers-color-scheme: dark) to switch pattern colours. Two approaches: (1) Override background-color in dark mode — if your pattern uses opacity, the new background colour will tint the pattern automatically. (2) Provide a separate dark-mode data URI. Approach 1 is far simpler when patterns use opacity-based foregrounds.

Component-Level Pattern Tokens

Don't assign raw colour values to pattern CSS — always go through tokens. Define a --surface-pattern-light and --surface-pattern-dark token that maps to your colour palette tokens. This means a single change to your palette propagates automatically to every patterned surface in your design system.

Theming with data Attributes

Use data-theme attributes on the root element to support multiple themes beyond just light/dark. Teams building SaaS products can expose theme switching to users — each theme overrides the pattern colour tokens. The pattern SVGs themselves never change; only the CSS token values do.

Pattern Density Breakpoints

Mobile screens benefit from coarser patterns (larger tiles, fewer repeats) for readability and performance. Desktop screens can handle finer patterns. Define pattern density breakpoints: --pattern-size: 20px on mobile, 40px on tablet, 60px on desktop. Alternatively, link pattern size to the user's preferred font size for accessibility.

Storybook Integration

Document your pattern library in Storybook with a dedicated "Patterns" category. Each pattern story shows the pattern preview, its CSS code, the design token it uses, and dark/light variants. Add a controls knob for background colour — designers can explore pattern colour combinations directly in the component browser without writing code.