web-designCSS implementation patterns for layout, typography, color, spacing, and responsive design. Complements ui-design (fundamentals) with code-focused examples.
Install via ClawdBot CLI:
clawdbot install wpank/web-designCSS implementation patterns for production-grade interfaces. For design fundamentals and decision-making, see ui-design. This skill focuses on code.
See also:ui-designfor typography/color/spacing theory,frontend-designfor creative aesthetics.
npx clawhub@latest install web-designUse CSS Grid for two-dimensional layouts and Flexbox for one-dimensional flow. Choose the right tool for each context.
| Layout Need | Tool | Why |
|---|---|---|
| Page-level structure | CSS Grid (grid-template-areas) | Named regions, explicit row/column control |
| Navigation bars | Flexbox | Single-axis alignment, spacing with gap |
| Card grids | Grid (auto-fill / auto-fit) | Responsive without media queries |
| Centering | Grid (place-items: center) | Shortest, most reliable centering |
| Sidebar + content | Grid (grid-template-columns: 250px 1fr) | Proportional sizing with fixed sidebar |
| Stacking overlaps | Grid + grid-area: 1/1 | Layer elements without position: absolute |
Go beyond predictable layouts. Intentional asymmetry, overlapping elements, and grid-breaking accents create visual interest. Use grid stacking (grid-area: 1/1) instead of position: absolute for overlapping elements. Choose generous negative space for luxury/editorial aesthetics, or controlled density for data-rich interfaces — the choice must be intentional.
Typography carries 90% of a design's personality. Choose fonts that match the interface's purpose.
| Context | Display Font Direction | Body Font Direction | Example Pairing |
|---|---|---|---|
| Editorial / magazine | High-contrast serif | Neutral humanist sans | Playfair Display + Source Sans 3 |
| SaaS dashboard | Geometric sans | Matching weight sans | DM Sans + DM Mono (data) |
| Creative portfolio | Expressive display | Clean readable sans | Syne + Outfit |
| E-commerce luxury | Thin modern serif | Elegant sans | Cormorant Garamond + Jost |
| Developer tooling | Monospace display | Monospace body | JetBrains Mono + IBM Plex Mono |
Use a consistent ratio. A 1.25 (major third) scale works for most interfaces: text-xs 0.64rem, text-sm 0.8rem, text-base 1rem, text-lg 1.25rem, text-xl 1.563rem, text-2xl 1.953rem, text-3xl 2.441rem, text-4xl 3.052rem. Set body text to 1rem (16px minimum), line-height 1.5 for body, 1.1–1.2 for headings. Limit line length to 60–75ch.
Every palette needs five functional roles:
| Role | Purpose | Example Usage |
|---|---|---|
| Primary | Brand identity, primary actions | Buttons, links, active states |
| Neutral | Text, borders, backgrounds | Body text, cards, dividers |
| Accent | Secondary actions, highlights | Tags, badges, secondary buttons |
| Success / Warning / Error | Semantic feedback | Toasts, form validation, status |
| Surface | Layered backgrounds | Cards on page, modals on overlay |
Create depth through surface layering, not just shadows:
:root {
--surface-0: hsl(220 15% 8%); /* page background */
--surface-1: hsl(220 15% 12%); /* card */
--surface-2: hsl(220 15% 16%); /* raised element */
--surface-3: hsl(220 15% 20%); /* popover / modal */
}Use HSL or OKLCH for perceptually uniform color manipulation. Dominant color with sharp accents outperforms evenly-distributed palettes. Always verify WCAG contrast: 4.5:1 for normal text, 3:1 for large text.
Consistent spacing creates rhythm. Use an 8px base unit (or 4px for dense UIs):
| Token | Value | Use |
|---|---|---|
| --space-1 | 0.25rem (4px) | Inline icon gaps, tight padding |
| --space-2 | 0.5rem (8px) | Input padding, compact lists |
| --space-3 | 0.75rem (12px) | Button padding, card inner spacing |
| --space-4 | 1rem (16px) | Default element spacing |
| --space-6 | 1.5rem (24px) | Section padding, card gaps |
| --space-8 | 2rem (32px) | Section separation |
| --space-12 | 3rem (48px) | Major section breaks |
| --space-16 | 4rem (64px) | Page-level vertical rhythm |
Apply spacing consistently: use gap on Grid/Flexbox containers instead of margins on children. This eliminates margin-collapse bugs and simplifies responsive adjustments.
Guide the eye through deliberate contrast in size, weight, color, and space.
| Technique | How | Impact |
|---|---|---|
| Size contrast | Hero heading 3–4x body size | Immediate focal point |
| Weight contrast | Bold headings + regular body | Scannability |
| Color contrast | Primary text vs muted secondary | Information layering |
| Spatial grouping | Tight spacing within groups, wide between | Gestalt proximity |
| Elevation | Shadows / surface layers | Interactive affordance |
| Whitespace isolation | Empty space around key element | Emphasis through absence |
Layer hierarchy within cards: eyebrow (xs, uppercase, muted) → title (xl, semibold) → body (base, secondary color, 1.6 line-height) → action (spaced apart with margin-top). Use surface color for separation and consistent padding from spacing tokens.
| Breakpoint | Target | Approach |
|---|---|---|
| < 640px | Mobile | Single column, stacked navigation, touch targets ≥ 44px |
| 640–1024px | Tablet | Two-column options, collapsible sidebars |
| 1024–1440px | Desktop | Full layout, hover interactions enabled |
| > 1440px | Wide | Max-width container (1280px), prevent ultra-wide line lengths |
Prefer fluid sizing over rigid breakpoints where possible:
/* Fluid typography — scales between 640px and 1440px viewport */
h1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }
/* Fluid spacing */
section { padding-block: clamp(2rem, 1rem + 4vw, 6rem); }
/* Intrinsic grid — no media queries needed */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-6); }Use container queries (@container) for component-level responsiveness when a component's layout should respond to its container, not the viewport.
Accessibility is not optional. Build it in from the start.
| Requirement | Implementation | Standard |
|---|---|---|
| Color contrast | 4.5:1 normal text, 3:1 large text / UI | WCAG 2.1 AA |
| Keyboard navigation | All interactive elements focusable and operable | WCAG 2.1.1 |
| Focus indicators | Visible :focus-visible ring, 2px+ offset | WCAG 2.4.7 |
| Semantic HTML | Use , , , etc. | WCAG 1.3.1 |
| Alt text | Descriptive for informational images, alt="" for decorative | WCAG 1.1.1 |
| Motion safety | Respect prefers-reduced-motion | WCAG 2.3.3 |
| Touch targets | Minimum 44×44px interactive areas | WCAG 2.5.8 |
| ARIA when needed | aria-label, aria-live, role only when native semantics insufficient | WCAG 4.1.2 |
/* Robust focus indicator */
:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}Every UI component should have clear states, consistent spacing, and predictable behavior:
| State | Visual Treatment | Example |
|---|---|---|
| Default | Base styling | Button at rest |
| Hover | Subtle shift — background, shadow, or scale | background lightens 5-10% |
| Active / Pressed | Compressed feel — reduced shadow, slight inset | transform: scale(0.98) |
| Focus | High-visibility ring, no outline removal | :focus-visible ring |
| Disabled | Reduced opacity, cursor: not-allowed | opacity: 0.5 |
| Loading | Spinner or skeleton, disabled interaction | Inline spinner replacing label |
Structure tokens in three layers for maintainability:
/* Layer 1: Primitive values */
--blue-500: oklch(0.55 0.2 250);
--gray-100: oklch(0.95 0.005 250);
--radius-md: 0.5rem;
/* Layer 2: Semantic aliases */
--color-primary: var(--blue-500);
--color-surface: var(--gray-100);
--radius-button: var(--radius-md);
/* Layer 3: Component-specific */
--btn-bg: var(--color-primary);
--btn-radius: var(--radius-button);
--btn-padding: var(--space-2) var(--space-4);This three-layer approach allows theme switching by remapping Layer 2 without touching components.
Use motion to communicate state changes, not to decorate. Focus on high-impact moments:
| Interaction | Duration | Easing | Purpose |
|---|---|---|---|
| Button hover | 150ms | ease-out | Acknowledge interaction |
| Modal open | 250ms | ease-out | Draw attention |
| Modal close | 200ms | ease-in | Quick dismissal |
| Page transition | 300ms | ease-in-out | Maintain spatial context |
| Stagger reveal | 50–80ms delay per item | ease-out | Sequential content loading |
| Micro-feedback | 100ms | ease-out | Toggle, checkbox, switch |
/* Staggered entrance animation */
.stagger-item {
opacity: 0;
translate: 0 1rem;
animation: reveal 0.5s ease-out forwards;
}
.stagger-item:nth-child(1) { animation-delay: 0ms; }
.stagger-item:nth-child(2) { animation-delay: 60ms; }
.stagger-item:nth-child(3) { animation-delay: 120ms; }
@keyframes reveal {
to { opacity: 1; translate: 0 0; }
}Use native animation-timeline: scroll() (behind @supports) for parallax and reveal effects without JavaScript. Wrap in feature detection to gracefully degrade.
Before shipping, verify against these criteria:
transform, opacity)Generated Mar 1, 2026
A B2B SaaS company needs to update its dashboard for better data visualization and user experience. This skill provides CSS Grid for layout structure, typography pairings like DM Sans for readability, and spacing tokens to create a clean, professional interface with consistent rhythm and hierarchy.
A high-end fashion retailer wants a visually striking website to showcase products with editorial flair. The skill offers color palettes with surface layering for depth, typography pairings like Cormorant Garamond for elegance, and spatial composition techniques like intentional asymmetry to create a premium aesthetic.
A freelance designer or agency needs a portfolio site to highlight creative work with expressive visual elements. This skill provides grid stacking for overlapping layouts, typography choices like Syne for bold displays, and responsive design strategies to ensure the site looks polished on all devices.
An online magazine seeks to improve readability and visual appeal for long-form content. The skill offers typography scales with consistent ratios, color contrast guidelines for accessibility, and spacing tokens to create comfortable reading experiences with controlled line lengths and whitespace.
A tech startup building developer tools needs a functional, code-focused interface. This skill provides monospace typography pairings like JetBrains Mono, layout principles using Grid and Flexbox for efficient component arrangement, and color roles for semantic feedback in error or success states.
Offer custom CSS implementation and design system development for clients. Use the skill's patterns to deliver production-grade interfaces quickly, charging per project or hourly rates based on complexity, such as responsive layouts or advanced typography setups.
Build and sell SaaS applications with polished, user-friendly interfaces. Leverage the skill's layout and responsive design principles to create scalable products, generating revenue through subscription models, with tiers based on features or user count.
Provide consulting services to help companies establish or refine their design systems. Use the skill's color, spacing, and typography guidelines to create consistent, maintainable CSS patterns, billing clients on a retainer or per-engagement basis for ongoing support.
💬 Integration Tip
Integrate this skill by first applying layout principles with CSS Grid and Flexbox, then layer in typography and color systems, using spacing tokens for consistency across components.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui — no mockups needed. Generates bold, memorable designs from plain text requirements with anti-AI-slop aesthetics, mobile-first responsive patterns, and single-file bundling. Use when building landing pages, marketing sites, portfolios, dashboards, or any static web UI. Supports both Vite (pure static) and Next.js (Vercel deploy) workflows.
AI skill for automated UI audits. Evaluate interfaces against proven UX principles for visual hierarchy, accessibility, cognitive load, navigation, and more. Based on Making UX Decisions by Tommy Geoco.