Frontend Design

This skill guides creation of distinctive, production-grade frontend interfaces. Implement real working code with exceptional attention to aesthetic detail.

Example prompts

• "Build the hero section from the brief"
• "Create a card component in a Scandinavian style"
• "I want this to feel like a Japanese magazine. Build the layout."
• "Build the settings page. Use whatever style fits."

Before You Write Any Code

0. Materialize a token spec if one exists but no token file does. If .design/<slug>/DESIGN_TOKENS.md exists AND the project has no existing token file (no tokens.css, no populated theme.extend, no theme.ts populated from a prior pass), translate the spec into the project's stack-appropriate format first:

   • Tailwind project → extend tailwind.config.js|ts under theme.extend AND write CSS variables to globals.css for anything that needs runtime theming.
   • Plain CSS/HTML → write to tokens.css, imported by the root stylesheet.
   • CSS-in-JS (Material UI / Chakra / Emotion) → write to theme.ts in the expected shape for the library.
   • Default when unclear → CSS custom properties in tokens.css.

   Read names, values, and roles directly from the spec — do not re-derive from the philosophy. Announce the file created before proceeding. (When invoked from /build, the orchestrator will have already flagged this step; still perform it if the file isn't there yet.)

1. Explore the existing codebase first. Scan specifically for:

   • Component directories: components/, ui/, shared/ and list every component by name and its props/API
   • CSS variables / tokens: files named tokens.css, variables.css, theme.css, or :root declarations with custom properties
   • Tailwind config: tailwind.config.js or tailwind.config.ts, check theme.extend for custom values
   • UI framework themes: Material UI createTheme, Chakra extendTheme, shadcn globals.css and components.json
   • Storybook: .storybook/ directory or *.stories.* files indicating documented components
   • Font loading: Google Fonts links, @font-face declarations, font imports
   • Layout patterns: how existing pages handle grid, containers, breakpoints, and spacing
   • Package.json UI dependencies: tailwindcss, @mui/material, @chakra-ui/react, @radix-ui, lucide-react, framer-motion, etc.
   • If components exist that match or partially match what you need to build, extend or compose them. Do not create duplicates.

2. Understand the context:

   • What problem does this interface solve? Who uses it?
   • What is the intended emotional tone?
   • What are the hard constraints (framework, devices, performance, accessibility)?

3. Commit to an aesthetic direction. Either the user names one (see philosophies below) or you choose one that fits the context. State your choice and why before writing code.

Aesthetic Philosophies

When the user names a philosophy or describes a vibe, use these as concrete implementation guides. Each philosophy defines typography, color, layout, spacing, motion, and detail treatment.

Dieter Rams (Functionalist)

Less but better. Every element earns its place. Nothing decorative without function.

• Typography: Clean sans-serif (Helvetica Neue, Suisse Intl, Akkurat). Tight letterspacing on headings. Generous line height on body. One size scale, used strictly.
• Color: Restrained. Monochromatic with a single functional accent. White or light grey backgrounds. Color is information, not decoration.
• Layout: Strict grid. Clear functional hierarchy. Components aligned to a spatial system. No asymmetry for its own sake.
• Spacing: Consistent, mathematical scale (4px/8px base). Generous padding. Breathing room between elements.
• Motion: Minimal. Purposeful transitions only (state changes, reveals). No decorative animation.
• Details: Subtle borders and dividers over shadows. Precise alignment. Rounded corners used sparingly and consistently.

Swiss / International Typographic

Objectivity through structure. The grid is sacred. Content is king.

• Typography: Strong sans-serifs (Neue Haas Grotesk, Univers, Aktiv Grotesk). Dramatic scale contrast between headings and body. All-caps subheadings with generous letterspacing.
• Color: High contrast. Black, white, and one primary color. Bold color blocks as compositional elements.
• Layout: Rigid multi-column grid. Asymmetric balance. Text and image in dialogue. Alignment across elements is non-negotiable.
• Spacing: Defined by the grid module. Gutters are part of the design, not afterthought.
• Motion: Page transitions and scroll-triggered reveals that respect the grid. No playful bounce.
• Details: Rules (horizontal lines) as structural elements. No gradients. No shadows. Flatness is the point.

Japanese Minimalism (Ma)

Negative space is content. Restraint communicates sophistication. Quiet over loud.

• Typography: Thin-weight sans-serifs or elegant serifs (Noto Sans, Cormorant). Generous line height (1.8-2.0). Small body size with large whitespace margins.
• Color: Muted naturals (warm greys, stone, sage, washi). Subtle tonal shifts over hard contrasts. Near-monochrome.
• Layout: Asymmetric but balanced. Off-center content. Large empty areas are intentional. Content floats in space.
• Spacing: Extreme whitespace. Padding and margins 2-3x what feels "normal." Elements breathe.
• Motion: Slow, gentle fades (400-600ms). No bounce, no overshoot. Opacity transitions over position shifts.
• Details: Hairline borders. Subtle texture (paper grain, linen). No sharp shadows. Soft, diffused effects.

Brutalist / Raw

Structure is visible. No polish. Anti-aesthetic is the aesthetic.

• Typography: System fonts, monospace (JetBrains Mono, IBM Plex Mono, Courier), or aggressive display faces. Mixed sizes. Text as texture.
• Color: Black and white primary. If color, it is raw and clashing (construction yellow, hazard orange, terminal green). No gradients.
• Layout: Visible borders. Box model exposed. Stacked blocks. Deliberate roughness. Content first, beauty never.
• Spacing: Tight or intentionally uneven. Padding that feels compressed.
• Motion: None, or jarring (instant state changes, hard cuts). No easing.
• Details: Visible outlines. Default browser form elements can be intentional. Text-only interfaces. No icons unless functional.

Scandinavian

Warmth plus restraint. Functional beauty. Accessible by default.

• Typography: Rounded, friendly sans-serifs (Nunito, Poppins, Circular, Cera Pro). Medium weights. Comfortable reading sizes.
• Color: Natural palette. Warm whites, soft blues, muted greens, clay. Pastel accents. No pure black (use charcoal).
• Layout: Clean and open. Card-based. Rounded corners (8-12px). Comfortable, generous layouts.
• Spacing: Generous but not extreme. Everything feels approachable and uncluttered.
• Motion: Gentle, natural easing. Subtle hover lifts. Content that settles into place.
• Details: Soft shadows (large blur, low opacity). Rounded elements. Warm undertones in greys. Illustration-friendly.

Art Deco / Geometric

Bold symmetry. Decorative precision. Statement and luxury.

• Typography: Geometric display faces (Futura, Poiret One, Josefin Sans). All-caps headlines with extreme letterspacing. Serif body text for contrast.
• Color: Rich and deep. Gold/champagne, emerald, navy, burgundy, black. Metallic accents (gold gradients, shimmer effects).
• Layout: Symmetrical and centered. Strong vertical axis. Decorative frames and borders. Layered depth.
• Spacing: Structured and formal. Padding is architectural.
• Motion: Elegant reveals. Staggered entrance animations. Parallax depth.
• Details: Geometric patterns (chevrons, sunbursts, fan shapes). Ornamental borders. Texture (marble, brushed metal). Statement typography at hero scale.

Neo-Memphis

Playful chaos. Anti-corporate. Shapes as characters.

• Typography: Mix of weights and styles. Clashing fonts is intentional. Oversized headlines. Text at angles.
• Color: Bold primaries and neons. Clashing combinations (pink and yellow, blue and orange). No muted tones. Flat color, no gradients.
• Layout: Broken grid. Overlapping elements. Shapes (circles, triangles, squiggles) as compositional elements. Asymmetric on purpose.
• Spacing: Dense in some areas, empty in others. Rhythm is irregular.
• Motion: Bouncy, playful. Exaggerated hover effects. Elements that wiggle, rotate, or pop.
• Details: Thick borders. Geometric shapes as decoration. Patterns (dots, dashes, zigzags). Drop shadows with hard edges and bright colors.

Editorial / Magazine

Content-led design. Typography does the heavy lifting. Every page is a spread.

• Typography: Display serif for headlines (Playfair Display, Fraunces, Instrument Serif). Clean sans for body (DM Sans, Source Sans). Dramatic scale (hero headlines at 72-120px). Pull quotes. Drop caps.
• Color: Minimal. Black and white with one accent. Color used editorially (to highlight, not decorate).
• Layout: Strong column grid (3-5 columns). Full-bleed images. Text wrapping. Mixed column widths. Vertical rhythm.
• Spacing: Generous margins. Tight leading on headlines, open on body. Whitespace as a compositional tool.
• Motion: Scroll-triggered reveals. Parallax on images. Smooth page transitions.
• Details: Thin rules as dividers. Caption typography. Issue/date metadata. Print-inspired details (folio numbers, running headers).

Implementation Guidelines

• Typography: Choose distinctive fonts loaded via Google Fonts or CDN. Avoid generic defaults (Inter, Roboto, Arial, system fonts). Pair a display font with a body font.
• Color: Use CSS variables for consistency. Dominant color with sharp accents outperforms safe, evenly-distributed palettes.
• Motion: CSS transitions for HTML. Framer Motion / Motion library for React. Focus on high-impact moments (page load reveals, state changes) over scattered micro-interactions.
• Spatial composition: Unexpected layouts earn attention. Asymmetry, overlap, diagonal flow, grid-breaking elements. Or, if the philosophy demands it, strict grids executed with precision.
• Backgrounds and depth: Create atmosphere. Gradient meshes, noise textures, geometric patterns, layered transparencies, grain overlays. Match the chosen philosophy.

NEVER produce generic AI aesthetics: purple gradients on white, Inter font, predictable card grids, cookie-cutter component layouts. Every output should feel designed for its specific context.

Match implementation complexity to the aesthetic vision. A Dieter Rams interface is 50 lines of precise CSS. A Neo-Memphis interface is 300 lines of creative chaos. Both are correct.

Mobile-First

Build mobile layout first, then scale up. This is non-negotiable.

• Start with a single-column layout at 375px width.
• Add complexity at each breakpoint (min-width media queries, not max-width).
• Touch targets must be at least 44x44px on mobile.
• Body text must be at least 16px on mobile (prevents iOS zoom on input focus).
• Navigation must have a mobile-specific pattern (hamburger, bottom tabs, or drawer). Do not rely on horizontal nav bars that overflow.
• Test that line lengths stay comfortable (45-75 characters) at every breakpoint.

Dark Mode

If a design tokens file exists (from /design-tokens), use its dark mode palette. If not, generate dark mode support alongside the light theme.

• Use CSS custom properties so switching themes means changing variable values, not rewriting components.
• Support both prefers-color-scheme media query (system preference) and a [data-theme="dark"] attribute (manual toggle).
• Do not simply invert colors. Dark backgrounds should be warm or cool to match the philosophy (warm charcoal for Scandinavian, cool slate for Swiss, near-black for Brutalist).
• Reduce pure white text to off-white (e.g., #E5E5E5 or rgba(255,255,255,0.87)) to reduce eye strain.
• Shadows in dark mode should be darker and more transparent, not the same values as light mode.
• Accent colors may need lightness adjustments to maintain WCAG contrast ratios against dark backgrounds.
• Include a prefers-reduced-motion media query for users who need it. Disable or simplify all animations and transitions within that query.