Creating a minimal color palette for a professional SaaS dashboard

60-30-10 rule
Color contrast ratios (WCAG AA)
Semantic color mapping
Neutral base with accent colors

Solution: Use a neutral grayscale base (slate/cool grays) with a single primary accent color (indigo) for CTAs and active states. Maintain 4.5:1 contrast ratio for text. Use semantic colors: green for success, amber for warning, red for error, blue for info. Apply 60% neutral backgrounds, 30% secondary surfaces, 10% accent colors.

White text on indigo-600 = 7.2:1 contrast ratio (AAA). All combinations meet WCAG AA. Provide non-color indicators for color-coded info.


Bold high-contrast palette for creative agency website

High contrast design
Vibrant accent colors
Dark mode first
Triadic color scheme

Solution: Pure black (#000000) and white (#FFFFFF) base with electric lime (#39FF14) and hot pink (#FF10F0) accents. Creates striking visual impact. Use large typography with color overlays.

.bold-agency {
  --bg-primary: #000000;
  --bg-secondary: #0a0a0a;
  --text-primary: #ffffff;
  --accent-lime: #39FF14;
  --accent-pink: #FF10F0;
}
.hero-title {
  background: linear-gradient(135deg, #39FF14 0%, #FF10F0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Electric colors on black pass WCAG AAA. Ensure hover states maintain 3:1 minimum. Offer reduced motion option.


Earthy natural palette for eco-friendly product site

Nature-inspired colors
Warm undertones
Organic harmony
Psychology of color

Solution: Forest green (#2D5A27), terracotta (#C17F59), sand beige (#E8DCC4), moss green (#4A6B4A), warm cream (#F5F1E8). Creates calming, trustworthy feeling. Green as primary, terracotta for CTAs.

:root {
  --forest: #2D5A27;
  --terracotta: #C17F59;
  --sand: #E8DCC4;
  --moss: #4A6B4A;
  --cream: #F5F1E8;
}
.eco-button {
  background-color: var(--terracotta);
  color: var(--cream);
  padding: 12px 24px;
  border-radius: 8px;
}

Terracotta on cream = 7.8:1 (AAA). Forest green text on cream = 8.2:1. Ensure colorblind-friendly patterns for graphs.


Neon cyberpunk palette for gaming platform

High saturation
Dark background
Glowing effects
Complementary colors

Solution: Deep navy (#0A0E27) background with neon cyan (#00FFFF), magenta (#FF00FF), and yellow (#FFFF00) accents. Use box-shadow for glow effects.

.cyberpunk {
  --bg-deep: #0A0E27;
  --neon-cyan: #00FFFF;
  --neon-magenta: #FF00FF;
  --neon-yellow: #FFFF00;
}
.neon-button {
  background: transparent;
  border: 2px solid var(--neon-cyan);
  color: var(--neon-cyan);
  box-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan);
}

Neon on dark navy = 8.5:1 (AAA). Respect prefers-reduced-motion for glow animations.


Pastel dreamy palette for children's app

Soft saturation
Playful colors
Friendly psychology
Low visual stress

Solution: Lavender (#E6E6FA), mint green (#98FF98), baby pink (#FFB6C1), sky blue (#87CEEB), butter yellow (#FFFACD). All colors have high lightness (70-90%). Use darker shades for text.

.pastel-theme {
  --lavender: #E6E6FA;
  --mint: #98FF98;
  --baby-pink: #FFB6C1;
  --sky-blue: #87CEEB;
  --text-dark: #4A4A4A;
}
.pastel-card {
  background: var(--lavender);
  border-radius: 16px;
  padding: 20px;
  color: var(--text-dark);
}

Dark gray text on pastels = 7.2:1 average (AAA). Avoid light text on pastel backgrounds.


Monochromatic blue palette for enterprise software

Single hue progression
Professional psychology
Trust-building
Clean aesthetic

Solution: Blue scale from #EBF8FF (50) to #1A365D (900). Use lighter values for backgrounds, medium for borders, dark for text.

.enterprise-blue {
  --blue-50: #EBF8FF;
  --blue-200: #90CDF4;
  --blue-600: #3182CE;
  --blue-900: #1A365D;
}
.enterprise-button-primary {
  background: var(--blue-600);
  color: white;
}

White on blue-600 = 7.5:1 (AAA). Blue-900 text on blue-50 = 14.2:1 (AAA).


Warm autumn palette for restaurant website

Appetizing colors
Seasonal psychology
Warm undertones
Comfort atmosphere

Solution: Burnt orange (#CC5500), golden yellow (#FFB300), deep red (#8B0000), warm brown (#8B4513), cream (#FFFDD0). Orange stimulates appetite.

.autumn-restaurant {
  --burnt-orange: #CC5500;
  --golden-yellow: #FFB300;
  --deep-red: #8B0000;
  --warm-brown: #8B4513;
  --cream: #FFFDD0;
}
.cta-button {
  background: var(--golden-yellow);
  color: var(--deep-red);
  font-weight: bold;
}

Deep red text on cream = 13.1:1 (AAA). Golden yellow on brown = 6.8:1 (AA).


Luxurious gold palette for high-end jewelry brand

Premium psychology
Metallic tones
Elegant minimalism
Sophistication

Solution: Black (#000000) and charcoal (#1C1C1C) backgrounds with gold gradient (#D4AF37 to #FFD700), white (#FFFFFF) text.

.luxury-gold {
  --black: #000000;
  --charcoal: #1C1C1C;
  --gold-light: #FFD700;
  --gold-base: #D4AF37;
  --white: #FFFFFF;
}
.gold-text {
  background: linear-gradient(135deg, var(--gold-light), var(--gold-base));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

White text on charcoal = 15.8:1 (AAA). Gold gradient on charcoal = 4.2:1 minimum (AA).


Modern tech blog using Inter and Source Serif Pro

Geometric sans-serif with serif
High readability
Modern professional
Clear hierarchy

Solution: Inter (sans-serif) for UI elements, navigation, headings up to H3. Source Serif Pro (serif) for body text, H1, H2 for editorial feel.

:root {
  --font-sans: 'Inter', -apple-system, sans-serif;
  --font-serif: 'Source Serif Pro', Georgia, serif;
}
body {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.7;
}
h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 600;
}

Inter and Source Serif Pro both have excellent legibility at small sizes. Maintain minimum 16px for body text.


E-commerce fashion site using Playfair Display and Poppins

Elegant serif with geometric sans
Luxury aesthetic
High contrast pairing
Editorial style

Solution: Playfair Display (high-contrast serif) for hero headlines and product names. Poppins (geometric sans) for navigation, prices, buttons, and body text.

:root {
  --font-display: 'Playfair Display', serif;
  --font-body: 'Poppins', sans-serif;
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 700;
}
.product-price {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 600;
}

Playfair Display has high contrast but maintain minimum 32px for headlines to ensure legibility.


SaaS dashboard using IBM Plex Sans and JetBrains Mono

Corporate professional
Code-friendly
Data density
Technical clarity

Solution: IBM Plex Sans (professional sans) for UI, navigation, labels, data displays. JetBrains Mono (monospaced) for code snippets, numbers, tabular data.

:root {
  --font-ui: 'IBM Plex Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}
.metric-value {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 600;
}
.code-block {
  font-family: var(--font-mono);
  font-size: 13px;
  background: #1A202C;
  color: #E2E8F0;
}

IBM Plex Sans optimized for UI at 14-16px. JetBrains Mono has excellent character differentiation.


Creative agency website using Space Grotesk and Instrument Serif

Bold personality
Artistic expression
Geometric contrast
Modern editorial

Solution: Space Grotesk (eccentric geometric) for headlines, navigation, statements. Instrument Serif (elegant serif) for body copy, descriptions.

:root {
  --font-headline: 'Space Grotesk', sans-serif;
  --font-body: 'Instrument Serif', serif;
}
.hero-headline {
  font-family: var(--font-headline);
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.project-description {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.7;
}

Space Grotesk readable at 20px+ for headlines. Instrument Serif provides excellent body text readability at 18px.


Children's educational app using Nunito and Comic Neue

Friendly psychology
Readability for young users
Playful but clear
Approachable design

Solution: Nunito (rounded sans) for headings, buttons, instructions. Comic Neue (casual handwriting) for fun elements, speech bubbles.

:root {
  --font-heading: 'Nunito', sans-serif;
  --font-fun: 'Comic Neue', cursive;
}
.activity-title {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
}
.character-speech {
  font-family: var(--font-fun);
  font-size: 1.125rem;
  background: #FEFCBF;
  padding: 16px 20px;
  border-radius: 20px;
}

Nunito rounded ends improve readability for children. Minimum 18px for instructions.


Restaurant menu using Cormorant Garamond and Montserrat

Elegant dining
Menu readability
Upscale atmosphere
Category organization

Solution: Cormorant Garamond (elegant display serif) for restaurant name, section headers, specials. Montserrat (geometric sans) for menu items, descriptions, prices.

:root {
  --font-display: 'Cormorant Garamond', Garamond, serif;
  --font-body: 'Montserrat', sans-serif;
}
.restaurant-name {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.menu-item {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.125rem;
}

Cormorant Garamond requires minimum 24px for headings. Montserrat ensures menu items are readable at 16-18px.


Bold and energetic
High impact
Motivational
Clear data display

Solution: Oswald (condensed sans-serif) for headlines, metrics, motivational quotes, stats. Open Sans (friendly sans) for body text, instructions, navigation.

:root {
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Open Sans', sans-serif;
}
.workout-title {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  text-transform: uppercase;
}
.stat-display {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 700;
  color: #48BB78;
}

Oswald's condensed style needs 24px+ for headlines. Open Sans optimized for body text at 16px.


Luxury hotel website using Cinzel and Raleway

Classic elegance
Luxury signaling
Sophistication
Timeless appeal

Solution: Cinzel (classical serif) for hotel name, room categories, elegant headings. Raleway (elegant sans) for navigation, room descriptions, amenities, booking form.

:root {
  --font-display: 'Cinzel', serif;
  --font-body: 'Raleway', sans-serif;
}
.hotel-name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 600;
  letter-spacing: 0.15em;
}
.room-description {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
}

Cinzel requires minimum 24px for headings due to classical styling. Raleway provides excellent body readability at 16px.


Non-profit organization using Merriweather and Roboto

Trust and warmth
High readability
Universal appeal
Clear communication

Solution: Merriweather (slab serif) for headlines, stories, emotional content. Roboto (neutral sans) for navigation, forms, donation buttons, body text.

:root {
  --font-serif: 'Merriweather', Georgia, serif;
  --font-sans: 'Roboto', sans-serif;
}
.mission-statement {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
}
.donate-button {
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

Merriweather optimized for screen reading at 16-18px. Roboto provides excellent UI clarity.


Beauty brand using DM Serif Display and Mulish

Elegant femininity
Premium positioning
Editorial style
Soft sophistication

Solution: DM Serif Display (elegant display serif) for brand name, product names, campaign headlines. Mulish (geometric sans) for navigation, product descriptions, ingredients, prices.

:root {
  --font-display: 'DM Serif Display', serif;
  --font-body: 'Mulish', sans-serif;
}
.brand-name {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 400;
  line-height: 1.1;
}
.product-description {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
}

DM Serif Display needs minimum 32px for headlines. Mulish optimized for body text at 14-16px.


Baseline rhythm
Vertical rhythm
Consistent spacing
Modular scale

Solution: Use 4px as base unit. All spacing multiples of 4: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px. Line heights also align to 4px grid. Creates visual harmony and consistency.

/* 4px Grid System */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
}
.card {
  padding: var(--space-6);
  margin-bottom: var(--space-8);
  gap: var(--space-4);
}
h1 {
  margin-bottom: var(--space-6);
  line-height: 1.2; /* 48px for 40px font */
}

Consistent spacing helps users with cognitive disabilities. Ensure touch targets minimum 44x44px (11x space units).


Implementing an 8px spacing scale for component library

Coarser granularity
Faster development
Component consistency
Design tokens

Solution: 8px base unit. Spacing scale: 8, 16, 24, 32, 40, 48, 64, 80, 96, 128. Simpler than 4px grid but less precise. Good for UI components where exact alignment less critical.

/* 8px Spacing Scale */
$spacing: (
  'xs': 8px,
  'sm': 16px,
  'md': 24px,
  'lg': 32px,
  'xl': 48px,
  '2xl': 64px,
  '3xl': 96px
);
.button {
  padding: spacing('sm') spacing('md');
  gap: spacing('xs');
}
.card {
  padding: spacing('lg');
  margin-bottom: spacing('xl');
}

8px scale ensures sufficient spacing for interactive elements. Maintain minimum 8px between adjacent clickable elements.


Creating responsive spacing with fluid units

Fluid typography
Responsive spacing
Viewport-relative units
Mobile-first

Solution: Use clamp() for fluid spacing that scales with viewport. Base sizes at mobile, maximum at desktop. Ensures comfortable spacing on all screen sizes without breakpoints.

/* Fluid Spacing */
:root {
  --space-fluid-sm: clamp(1rem, 2vw, 1.5rem);
  --space-fluid-md: clamp(1.5rem, 3vw, 2.5rem);
  --space-fluid-lg: clamp(2rem, 4vw, 4rem);
  --space-fluid-xl: clamp(3rem, 6vw, 6rem);
}
.hero {
  padding: var(--space-fluid-xl) var(--space-fluid-md);
}
.section {
  margin-bottom: var(--space-fluid-lg);
}
.container {
  gap: var(--space-fluid-sm);
}

Fluid spacing prevents cramped layouts on small screens. Test with text zoom up to 200%.


Implementing modular scale for typography and spacing

Golden ratio
Harmonious proportions
Typographic scale
Visual hierarchy

Solution: Use 1.25 (major fifth) or 1.414 (perfect fourth) ratio for type and spacing. Creates harmonious progression: 16, 20, 25, 31, 39, 49, 61. Spacing follows same scale.

Modular scale creates predictable sizing. Ensure base size (16px) meets minimum requirements. Respect user font size preferences.


Designing spacing for mobile touch interfaces

Touch target size
Fitts's Law
Mobile ergonomics
Thumb-friendly zones

Solution: Minimum 44x44px (iOS) or 48x48px (Android) for touch targets. 8-12px gap between elements. Group related items with 16-24px spacing. Bottom navigation 56-64px height.

/* Mobile Touch Spacing */
:root {
  --touch-target: 44px;
  --touch-target-min: 44px;
  --gap-sm: 8px;
  --gap-md: 12px;
  --gap-lg: 16px;
  --nav-height: 56px;
}
.touch-button {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  padding: 12px 24px;
}
.button-group {
  gap: var(--gap-md);
}
.bottom-nav {
  height: var(--nav-height);
  padding: 0 16px;
}

44x44px minimum ensures users with motor impairments can interact. Provide adequate spacing to prevent accidental touches.


Creating elevation-based shadow system for Material Design

Elevation metaphor
Progressive depth
Light consistency
Layer hierarchy

Solution: 24 elevation levels (0-24px). Higher elevation = larger, more diffuse shadow. Ambient shadow + key shadow combo. Creates clear sense of layering and Z-axis.

Shadows shouldn't be the only indicator of elevation. Use border and background color changes too. Respect prefers-reduced-motion.


Soft shadows
Convex/concave
Subtle depth
Monochromatic

Solution: Two shadows: light top-left, dark bottom-right. Creates extruded (pressed) or embossed (raised) appearance. Matches background color exactly. Very subtle contrast.

/* Neumorphic Shadows */
:root {
  --bg: #e0e5ec;
  --shadow-light: #ffffff;
  --shadow-dark: #a3b1c6;
}
.neu-raised {
  background: var(--bg);
  box-shadow:
    9px 9px 16px var(--shadow-dark),
    -9px -9px 16px var(--shadow-light);
  border-radius: 20px;
}
.neu-pressed {
  background: var(--bg);
  box-shadow:
    inset 6px 6px 10px var(--shadow-dark),
    inset -6px -6px 10px var(--shadow-light);
  border-radius: 20px;
}
.neu-raised:active {
  box-shadow:
    inset 4px 4px 8px var(--shadow-dark),
    inset -4px -4px 8px var(--shadow-light);
}

Neumorphism has accessibility concerns - low contrast can be difficult for some users. Provide clear borders or labels. Ensure focus states are visible.


Glassmorphism blur and transparency system

Background blur
Transparency layers
Acrylic effect
Depth through blur

Solution: Semi-transparent white/dark backgrounds with backdrop-filter: blur(). Border with slight transparency. White text shadow for readability. Creates layered glass effect.

/* Glassmorphism */
:root {
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-blur: 20px;
}
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.glass-card-dark {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(255, 255, 255, 0.1);
}

Glass effects can reduce contrast. Ensure text contrast meets WCAG AA. Provide fallback for browsers without backdrop-filter support.


Colored shadow system for vibrant interfaces

Color psychology
Brand shadows
Soft emphasis
Playful depth

Solution: Tinted shadows matching brand colors instead of black. Softer, more friendly appearance. Use low opacity (5-15%) for subtle effect. Creates distinctive brand identity.

/* Colored Shadows */
:root {
  --brand-primary: #6366f1;
  --brand-secondary: #ec4899;
  --shadow-primary: 0 10px 40px -10px rgba(99, 102, 241, 0.3);
  --shadow-secondary: 0 10px 40px -10px rgba(236, 72, 153, 0.3);
}
.card-primary {
  box-shadow: var(--shadow-primary);
  border: 1px solid rgba(99, 102, 241, 0.1);
}
.card-secondary {
  box-shadow: var(--shadow-secondary);
  border: 1px solid rgba(236, 72, 153, 0.1);
}
.button-primary:hover {
  box-shadow: 0 20px 60px -15px rgba(99, 102, 241, 0.4);
}

Colored shadows may not provide sufficient depth cues for all users. Use with other elevation indicators. Test with various color vision types.


Consistent border radius scale for component library

Shape consistency
Design tokens
Component hierarchy
Visual language

Solution: Define radius scale: 0 (sharp), 4px (small), 8px (medium), 12px (large), 16px (xlarge), 9999px (pill/circle). Match radius to component size. Smaller elements get smaller radius.

/* Border Radius Scale */
:root {
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
}
.button-sm { border-radius: var(--radius-sm); }
.button-md { border-radius: var(--radius-md); }
.button-lg { border-radius: var(--radius-lg); }
.pill { border-radius: var(--radius-full); }
.avatar { border-radius: var(--radius-full); }
.card { border-radius: var(--radius-lg); }

Consistent border radius helps users recognize component types. Ensure focus indicators are visible on rounded elements.


Superellipse/squircle shapes for modern iOS-style interfaces

Continuous curvature
Modern aesthetic
Apple-inspired
Smooth corners

Solution: Use larger border radius values (16-24px) with smooth corners. Creates superellipse (squircle) shape. More modern than simple circles. Common in iOS design.

/* Superellipse/Squircle Shapes */
:root {
  --radius-smooth: 20px;
  --radius-smooth-lg: 28px;
}
.ios-card {
  border-radius: var(--radius-smooth);
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}
.ios-button {
  border-radius: var(--radius-smooth);
  background: #007AFF;
}
/* For true squircle, use SVG or border-radius with smooth corners */
.squircle {
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

Smooth corners can be aesthetically pleasing but ensure touch targets remain 44x44px minimum. Maintain clear focus states.


Sharp edges and mixed radius for brutalist design

Bold aesthetic
Raw authenticity
Mixed shapes
High contrast

Solution: Combine sharp (0px) and rounded (8-16px) corners. Use sharp for structural elements, rounded for interactive. Creates distinctive brutalist aesthetic. Bold borders.

/* Brutalist Mixed Radius */
:root {
  --radius-sharp: 0;
  --radius-brutal: 16px;
}
.brutalist-container {
  border: 3px solid #000;
  border-radius: var(--radius-sharp);
  box-shadow: 8px 8px 0 #000;
}
.brutalist-button {
  border: 3px solid #000;
  border-radius: var(--radius-brutal);
  background: #FF0;
  box-shadow: 4px 4px 0 #000;
  transition: all 0.1s;
}
.brutalist-button:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 #000;
}

Brutalist design can be overwhelming. Ensure content remains readable. Provide clear focus states. High contrast benefits accessibility.


12-column CSS Grid layout with auto-fit and minmax

Flexible grid
Auto-layout
Responsive without media queries
Grid gaps

Solution: 12-column grid using repeat(12, 1fr). Use minmax() for responsive columns without breakpoints. Grid gap for spacing. Span columns with grid-column.

/* 12-Column Grid System */
:root {
  --grid-columns: 12;
  --grid-gap: 24px;
  --container-max: 1200px;
}
.grid-container {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gap);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--grid-gap);
}
.col-span-12 { grid-column: span 12; }
.col-span-6 { grid-column: span 6; }
.col-span-4 { grid-column: span 4; }
.col-span-3 { grid-column: span 3; }
/* Auto-fit responsive cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--grid-gap);
}

Grid layout should maintain reading order. Use logical properties for RTL support. Ensure grid doesn't create orphaned content on mobile.


Container queries
Component responsiveness
Context-aware
Modern CSS

Solution: Use @container for component-level responsiveness. Components adapt to their container, not viewport. More modular and reusable.

/* Container Query Layout */
.card-container {
  container-type: inline-size;
}
.card {
  padding: 16px;
}
@container (max-width: 400px) {
  .card {
    padding: 12px;
  }
  .card h3 {
    font-size: 1.25rem;
  }
}
@container (min-width: 600px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}
/* Parent with container context */
.sidebar {
  container-name: sidebar;
}

Container queries are cutting-edge. Provide fallbacks. Test with text zoom. Ensure responsive behavior doesn't hide content.


Masonry-style uneven grid for image gallery

Masonry layout
Optimal space use
Visual interest
Card-based

Solution: CSS columns or grid with dense packing. Creates Pinterest-style layout. Items span different heights. Efficient space utilization.

/* Masonry Grid with CSS Columns */
.masonry {
  column-count: 4;
  column-gap: 16px;
}
.masonry-item {
  break-inside: avoid;
  margin-bottom: 16px;
}
@media (max-width: 1200px) {
  .masonry { column-count: 3; }
}
@media (max-width: 768px) {
  .masonry { column-count: 2; }
}
@media (max-width: 480px) {
  .masonry { column-count: 1; }
}
/* Alternative: CSS Grid with dense packing */
.masonry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-flow: dense;
  gap: 16px;
}

Masonry layouts can be challenging for screen readers. Maintain logical reading order. Ensure focus order matches visual order when possible.


Grid template areas
Widget hierarchy
Flexible arrangement
Dashboard UX

Solution: CSS Grid with grid-template-areas. Named areas for semantic layout. Easily rearrange. Different spanning for importance-based sizing.

/* Bento Box Grid */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, minmax(180px, auto));
  gap: 20px;
  grid-template-areas:
    "header header header stats"
    "main main sidebar sidebar"
    "main main footer footer";
}
.widget-header { grid-area: header; }
.widget-main { grid-area: main; }
.widget-sidebar { grid-area: sidebar; }
.widget-stats { grid-area: stats; }
.widget-footer { grid-area: footer; }
@media (max-width: 768px) {
  .bento-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "stats"
      "main"
      "sidebar"
      "footer";
  }
}

Named grid areas improve code maintainability. Ensure widgets can be reordered without breaking screen reader flow. Use ARIA landmarks appropriately.


Persistent navigation
Clear hierarchy
Scanable content
Progressive disclosure

Solution: Fixed left sidebar (240-280px) with navigation. Main content area with max-width. Top bar for search, profile, notifications. Collapsible sidebar on mobile.

/* Sidebar Dashboard Layout */
.dashboard-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: 64px 1fr;
  min-height: 100vh;
}
.sidebar {
  grid-row: 1 / -1;
  background: #1A202C;
  color: white;
  padding: 20px 0;
}
.top-bar {
  grid-column: 2;
  background: white;
  border-bottom: 1px solid #E2E8F0;
  padding: 0 24px;
}
.main-content {
  grid-column: 2;
  padding: 24px;
}
@media (max-width: 768px) {
  .dashboard-layout {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: fixed;
    left: -260px;
    transition: left 0.3s;
  }
  .sidebar.open {
    left: 0;
  }
}

Sidebar should be toggleable with keyboard. Use landmark roles (nav, main). Ensure focus trap in mobile menu. Skip to content link.


Horizontal navigation
Mega menu organization
Content-first
Maximum width for content

Solution: Fixed top bar with primary navigation. Mega menus for dropdowns. Full-width content area. Breadcrumb for location. Search prominent in header.

/* Top Navigation Dashboard */
.top-nav-dashboard {
  display: grid;
  grid-template-rows: 64px 1fr;
  min-height: 100vh;
}
.nav-bar {
  background: white;
  border-bottom: 2px solid #E2E8F0;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mega-menu {
  position: absolute;
  top: 64px;
  left: 0;
  right: 0;
  background: white;
  border-bottom: 1px solid #E2E8F0;
  padding: 24px 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.main-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px;
}

Mega menus need proper ARIA attributes. Ensure keyboard navigation works. Escape key closes menu. Focus management is critical.


Widget-based
Visual hierarchy
Data density
Glanceable metrics

Solution: CSS Grid bento layout. Widgets of varying sizes based on importance. Key metrics large (2x2). Charts medium (2x1). Lists small (1x1). Responsive reflow.

/* Bento Analytics Dashboard */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: 20px;
  padding: 20px;
}
.widget-kpi {
  grid-column: span 1;
  grid-row: span 1;
}
.widget-kpi-large {
  grid-column: span 2;
  grid-row: span 2;
}
.widget-chart {
  grid-column: span 2;
  grid-row: span 1;
}
.widget-list {
  grid-column: span 1;
  grid-row: span 2;
}
@media (max-width: 1024px) {
  .analytics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .analytics-grid {
    grid-template-columns: 1fr;
  }
  .widget-kpi-large,
  .widget-chart,
  .widget-list {
    grid-column: span 1;
    grid-row: span 1;
  }
}

Grid reordering can confuse screen readers. Maintain logical DOM order. Use aria-label for widgets. Ensure data is available in text format.


Tab organization
View switching
Context preservation
Progressive loading

Solution: Horizontal tabs for major views. Sidebar for filtering. Content area switches without page reload. Maintain state when switching. Lazy load heavy content.

/* Multi-Tab Dashboard */
.tab-dashboard {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.tabs-header {
  background: white;
  border-bottom: 1px solid #E2E8F0;
  padding: 0 24px;
}
.tab-list {
  display: flex;
  gap: 4px;
  list-style: none;
}
.tab-button {
  padding: 12px 20px;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.tab-button.active {
  border-bottom-color: #4F46E5;
  color: #4F46E5;
}
.tab-panel {
  display: none;
  flex: 1;
  overflow-y: auto;
}
.tab-panel.active {
  display: block;
}

Use role=tablist, role=tab, role=tabpanel. Arrow key navigation. Auto-activate or manual activate options. Maintain focus on tab switch.


Value proposition first
Social proof
Feature benefits
Clear CTA

Solution: Full-width hero with headline, subhead, CTA, product image. 3-column feature grid below. Social proof section. Testimonials. Final CTA. Sticky header for navigation.

/* Product Landing Page */
.landing-hero {
  min-height: 90vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 64px;
  padding: 0 10%;
}
.hero-content h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.1;
  margin-bottom: 24px;
}
.hero-content p {
  font-size: 1.25rem;
  margin-bottom: 32px;
  max-width: 600px;
}
.cta-group {
  display: flex;
  gap: 16px;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding: 80px 10%;
}
@media (max-width: 768px) {
  .landing-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .features-grid {
    grid-template-columns: 1fr;
  }
}

Skip link to main content. Semantic heading hierarchy (one h1). Alt text for hero image. CTA buttons have clear purpose.


Split-screen lead generation landing page

Form prominence
Value proposition
Minimal distraction
Trust signals

Solution: 50/50 split: left side value proposition, right side form. Sticky form on desktop. Benefits list. Trust badges below form. Clean, focused design.

/* Split-Screen Landing Page */
.split-landing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.value-prop {
  padding: 80px 10%;
  background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
  color: white;
}
.form-section {
  padding: 80px 10%;
  display: flex;
  align-items: center;
  background: white;
}
.lead-form {
  width: 100%;
  max-width: 480px;
}
.benefit-list {
  list-style: none;
  margin: 32px 0;
}
.benefit-list li {
  padding: 12px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
@media (max-width: 768px) {
  .split-landing {
    grid-template-columns: 1fr;
  }
}

Form should have clear labels and error messages. Trust badges should have alt text. Contrast ratio on gradient background. Form validation.


Narrative flow
Scroll progression
Visual breaks
Progressive disclosure

Solution: Single column, full-width sections. Each section tells part of story. Alternating layouts (text left/image right, then reverse). Sticky navigation showing progress. Scroll-triggered animations.

/* Storytelling Landing Page */
.story-section {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
  padding: 80px 10%;
}
.story-section:nth-child(even) {
  direction: rtl;
}
.story-section:nth-child(even) > * {
  direction: ltr;
}
.section-number {
  font-size: 8rem;
  font-weight: 700;
  color: #E2E8F0;
  position: absolute;
  top: -40px;
  left: -20px;
  z-index: -1;
}
.progress-nav {
  position: fixed;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
}
.progress-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #CBD5E0;
  margin: 12px 0;
}
.progress-dot.active {
  background: #4F46E5;
}

Scroll progress should be announced. Skip to section links. Respect prefers-reduced-motion for scroll animations. Semantic sections with headings.


Visual demonstration
Product in action
Social proof
Easy trial

Solution: Hero with autoplay muted video preview. Large play button to launch full demo. Features below with mini video clips. Comparison section. Pricing with trial CTA.

/* Video-First Landing Page */
.video-hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.video-background {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.play-button {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s;
}
.play-button:hover {
  transform: scale(1.1);
}
.feature-videos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 80px 10%;
}

Video should have captions and transcripts. Autoplay with pause button. Audio shouldn't start automatically. Keyboard controls for video player.


Scannability
Filter hierarchy
Visual comparison
Load more/pagination

Solution: Sidebar with filters (category, price, color, size). Main area product grid (3-4 columns). Sort dropdown at top. Filter count badges. Clear all filters button.

/* E-commerce Product Grid */
.ecommerce-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  padding: 32px;
}
.filters-sidebar {
  position: sticky;
  top: 32px;
  height: fit-content;
}
.filter-group {
  margin-bottom: 24px;
}
.filter-header {
  font-weight: 600;
  margin-bottom: 12px;
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 24px;
}
.product-card {
  display: flex;
  flex-direction: column;
}
.sort-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
@media (max-width: 768px) {
  .ecommerce-layout {
    grid-template-columns: 1fr;
  }
  .filters-sidebar {
    display: none;
  }
}

Filters should be keyboard accessible. Clear filter states. Use form controls for filters. Product cards need descriptive alt text. Load more should be a button.


Product detail page with gallery and purchase options

Product focus
Image gallery
Clear pricing
Purchase prominence

Solution: Left: image gallery with thumbnails. Right: product info, price, variants, add to cart. Below: description, specifications, reviews. Sticky purchase box on scroll.

/* Product Detail Page */
.pdp-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px;
}
.product-gallery {
  position: sticky;
  top: 32px;
  height: fit-content;
}
.main-image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
}
.thumbnail-strip {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.thumbnail {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
}
.purchase-box {
  position: sticky;
  top: 32px;
  height: fit-content;
}
.variant-selector {
  display: flex;
  gap: 12px;
  margin: 16px 0;
}
@media (max-width: 768px) {
  .pdp-container {
    grid-template-columns: 1fr;
  }
}

Image gallery should be keyboard navigable. Alt text for all images. Color swatches need labels. Size buttons should indicate selection. Form validation for add to cart.


Shopping cart with quantity controls and cross-sells

Edit convenience
Cost clarity
Cross-selling
Checkout flow

Solution: List of cart items with thumbnail, details, quantity stepper, remove button. Order summary with subtotal, shipping, total. Cross-sell suggestions below. Sticky checkout button.

/* Shopping Cart */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px;
}
.cart-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cart-item {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 16px;
  padding: 16px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
}
.quantity-stepper {
  display: flex;
  align-items: center;
  border: 1px solid #E2E8F0;
  border-radius: 4px;
}
.order-summary {
  position: sticky;
  top: 32px;
  height: fit-content;
  padding: 24px;
  background: #F7FAFC;
  border-radius: 8px;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
}

Quantity controls should have min/max. Remove buttons need confirmation. Price updates announced. Cross-sells should be clearly separated. Form validation before checkout.


Multi-step checkout with progress indicator

Progressive disclosure
Error prevention
Clear progress
Guest checkout option

Solution: 3-4 steps: Shipping, Billing, Review, Confirm. Progress bar at top. Each step has clear heading. Back/next buttons. Guest checkout option. Order summary sidebar.

/* Multi-Step Checkout */
.checkout-container {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 32px;
}
.progress-indicator {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  margin-bottom: 32px;
}
.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}
.progress-step.completed .step-number {
  background: #48BB78;
  color: white;
}
.progress-step.active .step-number {
  background: #4F46E5;
  color: white;
}
.checkout-form {
  display: none;
}
.checkout-form.active {
  display: block;
}

Each step should have heading. Progress announced to screen readers. Form validation per step. Keyboard navigation through steps. Save for later option.


Label clarity
Input grouping
Validation feedback
Accessible form controls

Solution: Single column, left-aligned labels. Floating labels move up on focus/input. Inline validation messages. Helper text below inputs. Primary/secondary action buttons.

/* Single Column Form with Floating Labels */
.form-container {
  max-width: 480px;
  margin: 0 auto;
  padding: 32px;
}
.form-group {
  position: relative;
  margin-bottom: 24px;
}
.floating-label {
  position: absolute;
  left: 16px;
  top: 16px;
  color: #718096;
  pointer-events: none;
  transition: 0.2s;
}
.form-input:focus + .floating-label,
.form-input:not(:placeholder-shown) + .floating-label {
  top: -8px;
  left: 12px;
  font-size: 12px;
  background: white;
  padding: 0 4px;
}
.form-input {
  width: 100%;
  padding: 16px;
  border: 2px solid #E2E8F0;
  border-radius: 8px;
  font-size: 16px;
}
.form-input:focus {
  border-color: #4F46E5;
  outline: none;
}
.error-message {
  color: #E53E3E;
  font-size: 14px;
  margin-top: 4px;
}

Labels must be programmatically associated. Validation errors announced. Required fields indicated. Focus visible on all inputs. Error messages linked via aria-describedby.


Multi-step form with progress and confirmation

Chunking information
Progress indication
Save and continue
Step validation

Solution: Break complex form into 3-5 logical steps. Show progress indicator. Validate each step before proceeding. Allow saving progress. Show confirmation summary.

/* Multi-Step Form */
.multi-step-form {
  max-width: 640px;
  margin: 0 auto;
}
.steps-nav {
  display: flex;
  justify-content: space-between;
  margin-bottom: 32px;
  position: relative;
}
.steps-nav::after {
  content: '';
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  height: 2px;
  background: #E2E8F0;
}
.step-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.step-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: white;
  border: 2px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}
.form-step {
  display: none;
}
.form-step.active {
  display: block;
  animation: fadeIn 0.3s;
}
.step-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 32px;
}

Use role=form with aria-labelledby. Each step has heading. Focus management between steps. Progress announced. Save progress explicitly. Review step before submit.


Inline validation form with real-time feedback

Immediate feedback
Error prevention
Success confirmation
Clear requirements

Solution: Validate on blur or after input. Show success icon for valid fields. Inline error messages below field. Character counter for limited fields. Password strength indicator.

/* Inline Validation Form */
.form-group {
  position: relative;
  margin-bottom: 20px;
}
.input-wrapper {
  position: relative;
}
.form-input {
  width: 100%;
  padding: 12px 40px 12px 16px;
  border: 2px solid #E2E8F0;
  border-radius: 6px;
}
.form-input.valid {
  border-color: #48BB78;
}
.form-input.invalid {
  border-color: #E53E3E;
}
.validation-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}
.validation-message {
  font-size: 14px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.validation-message.success {
  color: #48BB78;
}
.validation-message.error {
  color: #E53E3E;
}
.character-count {
  text-align: right;
  font-size: 12px;
  color: #718096;
  margin-top: 4px;
}

Use aria-invalid and aria-describedby. Don't validate too early (respect user flow). Error messages specific and actionable. Success states not too prominent. Respect prefers-reduced-motion.


Complex form with conditional logic and sections

Logical grouping
Conditional fields
Section disclosure
Form hierarchy

Solution: Group related fields in fieldsets with legends. Show/hide fields based on previous answers. Use expandable sections for optional info. Clear visual hierarchy.

/* Complex Conditional Form */
.form-section {
  margin-bottom: 32px;
}
.fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
.legend {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
}
.conditional-fields {
  display: none;
  margin-top: 16px;
  padding-left: 20px;
  border-left: 3px solid #4F46E5;
}
.conditional-fields.visible {
  display: block;
  animation: slideDown 0.3s;
}
.collapsible-section {
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  margin-bottom: 16px;
}
.section-header {
  padding: 16px;
  background: #F7FAFC;
  font-weight: 600;
  cursor: pointer;
}
.section-content {
  display: none;
  padding: 16px;
}
.section-content.expanded {
  display: block;
}

Use fieldset/legend for grouping. aria-expanded for collapsible sections. aria-controls for conditional fields. Focus management when showing/hiding. Keyboard navigation for all controls.


Complete button system with variants and states

Visual hierarchy
State feedback
Accessibility
Consistent sizing

Solution: Primary, secondary, tertiary, ghost buttons. Hover, active, focus, disabled states. Loading spinner. Icon buttons. Sizes: sm, md, lg.

/* Button System */
:root {
  --btn-primary: #4F46E5;
  --btn-primary-hover: #4338CA;
  --btn-secondary: #E2E8F0;
  --btn-ghost: transparent;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}
.btn-primary {
  background: var(--btn-primary);
  color: white;
}
.btn-primary:hover {
  background: var(--btn-primary-hover);
}
.btn-secondary {
  background: var(--btn-secondary);
  color: #1A202C;
}
.btn-ghost {
  background: var(--btn-ghost);
  color: #4F46E5;
  border: 2px solid #E2E8F0;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn:focus-visible {
  outline: 3px solid #4F46E5;
  outline-offset: 2px;
}
.btn-sm { padding: 8px 16px; font-size: 14px; }
.btn-lg { padding: 16px 32px; font-size: 18px; }

Buttons must have accessible name. Focus indicator clearly visible. Disabled state properly implemented. Loading state announced. Icon buttons have aria-label.


Content card with image, text, and actions

Content hierarchy
Scanability
Action clarity
Visual boundaries

Solution: Card with optional image, category tag, title, description, metadata, action buttons. Consistent padding and borders. Hover effect for interactivity.

/* Content Card */
.card {
  background: white;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.3s, transform 0.3s;
}
.card:hover {
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}
.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.card-content {
  padding: 20px;
}
.card-category {
  display: inline-block;
  padding: 4px 12px;
  background: #EBF8FF;
  color: #4299E1;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 12px;
}
.card-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}
.card-description {
  color: #718096;
  line-height: 1.6;
  margin-bottom: 16px;
}
.card-actions {
  display: flex;
  gap: 8px;
}
.card-meta {
  display: flex;
  gap: 16px;
  font-size: 14px;
  color: #A0AEC0;
  margin-top: 16px;
}

Cards should be semantic article or div with role=article. Images have alt text. Links have descriptive text. Hover states not only indication of interactivity.


Responsive top navigation with mobile menu

Clear branding
Menu hierarchy
Mobile adaptation
Search prominence

Solution: Logo left, navigation center, actions right. Desktop: horizontal links. Mobile: hamburger menu with full-screen overlay. Sticky on scroll. Search in header.

/* Responsive Navigation */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: white;
  border-bottom: 1px solid #E2E8F0;
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
}
.nav-link {
  color: #4A5568;
  text-decoration: none;
  font-weight: 500;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
}
.nav-link:hover,
.nav-link.active {
  color: #4F46E5;
  border-bottom-color: #4F46E5;
}
.nav-actions {
  display: flex;
  gap: 16px;
}
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}
@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
  .menu-toggle {
    display: block;
  }
}

Use nav element with aria-label. Menu toggle has aria-expanded. Mobile menu trap focus. Skip navigation link. Current page indicated.


Accessible modal dialog with overlay and focus trap

Focus management
Backdrop dismissal
Escape key
ARIA attributes

Solution: Modal with backdrop overlay. Close button top-right. Focus trap inside modal. Return focus on close. Escape key closes. Click outside closes.

/* Accessible Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal {
  background: white;
  border-radius: 12px;
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid #E2E8F0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-title {
  font-size: 20px;
  font-weight: 700;
}
.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #A0AEC0;
}
.modal-body {
  padding: 24px;
}
.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid #E2E8F0;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

Use role=dialog with aria-modal=true. aria-labelledby points to title. Focus trap implemented. Scroll body locked. Focus returns to trigger.


Data table with sort, filter, and pagination

Data density
Sort indication
Row selection
Responsive behavior

Solution: Sortable columns with indicators. Row hover effect. Checkbox for selection. Pagination at bottom. Responsive: card view on mobile. Sticky header.

/* Data Table */
.table-container {
  overflow-x: auto;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.table-header {
  background: #F7FAFC;
  position: sticky;
  top: 0;
}
.table-header th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.sort-indicator {
  margin-left: 8px;
  opacity: 0.3;
}
.table-header th.sorted .sort-indicator {
  opacity: 1;
}
.table-row {
  border-bottom: 1px solid #E2E8F0;
}
.table-row:hover {
  background: #F7FAFC;
}
.table-cell {
  padding: 12px 16px;
}
.row-checkbox {
  width: 40px;
}
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
}
@media (max-width: 768px) {
  .data-table,
  .table-header,
  .table-row,
  .table-cell {
    display: block;
  }
  .table-row {
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    margin-bottom: 16px;
    padding: 16px;
  }
}

Use table headers properly. Sort announced to screen readers. Selection tracked via aria-selected. Pagination links descriptive. Table caption provided.


Text input with validation states and helper text

Clear labeling
Validation feedback
Helper context
Error prevention

Solution: Label above input. Helper text below. Error message appears below input on invalid. Success indicator when valid. Focus ring visible.

/* Text Input Component */
.input-group {
  margin-bottom: 16px;
}
.input-label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: #2D3748;
}
.input-label .required {
  color: #E53E3E;
  margin-left: 2px;
}
.text-input {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid #E2E8F0;
  border-radius: 6px;
  font-size: 16px;
}
.text-input:focus {
  border-color: #4F46E5;
  outline: none;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
.text-input.error {
  border-color: #E53E3E;
}
.text-input.success {
  border-color: #48BB78;
}
.helper-text {
  font-size: 14px;
  color: #718096;
  margin-top: 4px;
}
.error-message {
  font-size: 14px;
  color: #E53E3E;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

Label for attribute matches input id. aria-describedby for helper text. aria-invalid for errors. aria-describedby links error message. Required attribute used.


Selection clarity
Search capability
Clear action
Keyboard navigation

Solution: Custom select with searchable dropdown. Clear button when value selected. Keyboard navigation through options. Grouped options support. Multi-select variant.

/* Custom Select Component */
.select-wrapper {
  position: relative;
}
.select-trigger {
  width: 100%;
  padding: 10px 36px 10px 12px;
  border: 2px solid #E2E8F0;
  border-radius: 6px;
  background: white;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.select-trigger::after {
  content: '▼';
  font-size: 10px;
  margin-left: 8px;
}
.select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  margin-top: 4px;
  max-height: 300px;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  z-index: 10;
}
.select-search {
  padding: 8px;
  border-bottom: 1px solid #E2E8F0;
}
.select-search input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #E2E8F0;
  border-radius: 4px;
}
.select-option {
  padding: 10px 12px;
  cursor: pointer;
}
.select-option:hover,
.select-option.highlighted {
  background: #F7FAFC;
}
.select-option.selected {
  background: #EBF8FF;
  color: #4299E1;
}

Use native select when possible. Custom select needs role=combobox. aria-expanded for dropdown. Keyboard navigation implemented. Options properly labeled.


Non-intrusive
Clear messaging
Actionable
Auto-dismissal

Solution: Stackable toasts in corner. Info, success, warning, error variants. Auto-dismiss after 5s. Close button. Optional action button. Progress bar for time.

/* Toast Notifications */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.toast {
  min-width: 320px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
  padding: 16px;
  display: flex;
  gap: 12px;
  animation: slideIn 0.3s;
}
.toast-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}
.toast-content {
  flex: 1;
}
.toast-title {
  font-weight: 600;
  margin-bottom: 4px;
}
.toast-message {
  color: #718096;
  font-size: 14px;
}
.toast-close {
  background: none;
  border: none;
  cursor: pointer;
  color: #A0AEC0;
}
.toast.info { border-left: 4px solid #4299E1; }
.toast.success { border-left: 4px solid #48BB78; }
.toast.warning { border-left: 4px solid #ECC94B; }
.toast.error { border-left: 4px solid #E53E3E; }
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: currentColor;
  animation: progress 5s linear;
}

Use role=alert or role=status. aria-live region for dynamic toasts. Auto-dismiss with user control. Focus management for action buttons. Clear and concise messages.


Perceived performance
Content structure
Animation subtlety
Progressive loading

Solution: Gray placeholder boxes matching content structure. Shimmer animation from left to right. Different heights for text variants. Circular for avatars.

/* Skeleton Loading */
.skeleton {
  background: #E2E8F0;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.skeleton::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.4),
    transparent
  );
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  100% { left: 100%; }
}
.skeleton-text {
  height: 16px;
  margin-bottom: 8px;
}
.skeleton-text.title {
  height: 24px;
  width: 60%;
  margin-bottom: 16px;
}
.skeleton-text.paragraph {
  height: 14px;
}
.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.skeleton-button {
  height: 40px;
  width: 120px;
  border-radius: 8px;
}
.skeleton-card {
  padding: 20px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
}

Use aria-busy=true on container. aria-live for status updates. Respect prefers-reduced-motion. Screen readers announce loading state. Don't hide content behind skeletons too long.


Button hover effects with scale and shadow

Feedback clarity
Delight factor
Performance
Accessibility

Solution: Subtle scale (1.02-1.05) on hover. Shadow increases. Background darkens slightly. Transition 150-300ms. Focus state visible. Active state press effect.

/* Button Hover Effects */
.button {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}
.button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.button:focus-visible {
  outline: 3px solid #4F46E5;
  outline-offset: 2px;
}
/* Icon button hover */
.icon-button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #F7FAFC;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.icon-button:hover {
  background: #E2E8F0;
  transform: rotate(15deg);
}

Hover states not only indicator. Focus states always visible. Respects prefers-reduced-motion. Touch devices get :active state. Color contrast maintained.


Respect system preference
User control
Smooth transition
Color adaptation

Solution: CSS custom properties for colors. prefers-color-scheme media query. Manual toggle with localStorage. Smooth color transition. Adjust shadows and borders for dark.

/* Dark Mode Implementation */
:root {
  --bg-primary: #FFFFFF;
  --bg-secondary: #F7FAFC;
  --text-primary: #1A202C;
  --text-secondary: #718096;
  --border-color: #E2E8F0;
  --shadow: rgba(0,0,0,0.1);
}
[data-theme='dark'] {
  --bg-primary: #1A202C;
  --bg-secondary: #2D3748;
  --text-primary: #F7FAFC;
  --text-secondary: #A0AEC0;
  --border-color: #4A5568;
  --shadow: rgba(0,0,0,0.3);
}
body {
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: background 0.3s, color 0.3s;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg-primary: #1A202C;
    --bg-secondary: #2D3748;
    --text-primary: #F7FAFC;
  }
}
.theme-toggle {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

Respect system preference by default. User choice persists. All colors have contrast in both modes. Images may need adjustment. Focus visible in both modes.


Keyboard navigation and focus management

Keyboard accessibility
Visible focus
Logical order
Skip links

Solution: All interactive elements keyboard accessible. Visible focus indicator (3:1 contrast). Tab order follows visual order. Skip navigation link. Focus trap in modals.

/* Keyboard Accessibility */
/* Skip Navigation Link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #4F46E5;
  color: white;
  padding: 8px 16px;
  text-decoration: none;
  z-index: 100;
}
.skip-link:focus {
  top: 0;
}
/* Focus Styles */
:focus-visible {
  outline: 3px solid #4F46E5;
  outline-offset: 2px;
}
/* Remove outline only when using mouse */
:focus:not(:focus-visible) {
  outline: none;
}
/* Focus Trap in Modal */
.modal {
  display: none;
}
.modal.active {
  display: flex;
}
.focusable-elements {
  outline: 2px solid transparent;
}
.focusable-elements:focus {
  outline-color: #4F46E5;
}

Test all functionality with keyboard only. Focus indicator always visible. Tab order logical. Skip links functional. Focus management in dynamic content.


Screen reader support with ARIA attributes

Semantic HTML
ARIA labels
Live regions
Landmarks

Solution: Use semantic HTML first. ARIA labels for unlabeled icons. aria-live for dynamic content. Landmarks for navigation. aria-describedby for additional context.

/* Screen Reader Support */

Home

About

Page Title

<button aria-label='Close dialog'>
  ×
</button>

  Annual Report

 (PDF, 2.3MB)

Test with actual screen readers. Semantic HTML over ARIA when possible. aria-live used appropriately. Landmarks properly nested. Descriptive link text.


WCAG AA contrast
Not color alone
Text resize
Focus visibility

Solution: 4.5:1 for normal text, 3:1 for large text. Don't use color alone to convey info. Support 200% text resize. Focus indicators visible. Avoid low contrast placeholders.

/* Color Contrast */
.text-primary {
  color: #1A202C; /* On white: 15.8:1 (AAA) */
}
.text-secondary {
  color: #4A5568; /* On white: 7.1:1 (AA) */
}
.link-color {
  color: #4F46E5; /* On white: 6.2:1 (AA) */
}
.error-color {
  color: #E53E3E; /* On white: 5.9:1 (AA) */
}
/* Success/Error States with Icons */
.status-success {
  color: #48BB78;
}
.status-success::before {
  content: '✓ ';
  font-weight: bold;
}
.status-error {
  color: #E53E3E;
}
.status-error::before {
  content: '✕ ';
  font-weight: bold;
}
/* Text Resize Support */
html {
  font-size: 16px;
}
body {
  font-size: 1rem; /* Resizes with html */
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Test contrast with tools. Ensure patterns/icons work for colorblind users. Test with 200% zoom. Respect prefers-reduced-motion. Focus always visible.


Clear labels
Error identification
Inline validation
Help context

Solution: Labels programmatically associated. Required fields indicated. Errors clearly identified and described. Helper text available. Form submission feedback.

/* Accessible Forms */
<form novalidate>

      Email Address
      *
       (required)

    <input
      type='email'
      id='email'
      name='email'
      required
      aria-required='true'
      aria-describedby='email-hint email-error'
      aria-invalid='false'
    >

      We'll never share your email

      Please enter a valid email address

  <button type='submit'>Submit</button>
</form>

Labels properly associated. Required fields indicated. Errors linked with aria-describedby. aria-invalid toggled. Submit button clear. Form validation accessible.


Glassmorphic card with frosted glass effect

Background blur
Transparency
Border gloss
Layered depth

Solution: Semi-transparent white with backdrop-filter blur. Thin border with slight transparency. White text shadow. Layered cards with varying opacity.

/* Glassmorphism Card */
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  padding: 32px;
  color: white;
}
.glass-card h3 {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.glass-button {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 12px 24px;
  border-radius: 12px;
}
/* Dark background required for effect */
.glass-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  padding: 40px;
}

Glass effects reduce contrast. Ensure text contrast meets WCAG. Fallback for browsers without backdrop-filter. Test on various backgrounds. Don't overuse.


Soft shadows
Extruded forms
Monochromatic
Subtle depth

Solution: Dual shadows: light top-left, dark bottom-right. Matches background exactly. Convex for raised, concave for pressed. Very subtle contrast.

/* Neumorphism */
:root {
  --neu-bg: #e0e5ec;
  --neu-light: #ffffff;
  --neu-dark: #a3b1c6;
}
body {
  background: var(--neu-bg);
}
.neu-raised {
  background: var(--neu-bg);
  box-shadow:
    9px 9px 16px var(--neu-dark),
    -9px -9px 16px var(--neu-light);
  border-radius: 20px;
  padding: 20px;
}
.neu-pressed {
  background: var(--neu-bg);
  box-shadow:
    inset 6px 6px 10px var(--neu-dark),
    inset -6px -6px 10px var(--neu-light);
  border-radius: 20px;
}
.neu-button {
  background: var(--neu-bg);
  box-shadow:
    6px 6px 10px var(--neu-dark),
    -6px -6px 10px var(--neu-light);
  border: none;
  border-radius: 10px;
  padding: 12px 24px;
}
.neu-button:active {
  box-shadow:
    inset 4px 4px 8px var(--neu-dark),
    inset -4px -4px 8px var(--neu-light);
}

Low contrast can be inaccessible. Add borders or labels. Focus states critical. Avoid for essential interactive elements. Consider accessibility alternatives.


Brutalist design with bold borders and shadows

Raw aesthetic
High contrast
Bold borders
Offset shadows

Solution: Thick black borders (2-4px). Hard offset shadows. Bright, clashing colors. Raw, unpolished appearance. Large typography. Sharp edges.

/* Brutalism */
.brutalist-container {
  border: 4px solid #000;
  box-shadow: 12px 12px 0 #000;
  background: #FFFF00;
  padding: 0;
  margin: 40px;
}
.brutalist-header {
  background: #FF0066;
  color: white;
  padding: 24px;
  border-bottom: 4px solid #000;
}
.brutalist-button {
  background: #00FFFF;
  border: 3px solid #000;
  color: #000;
  padding: 16px 32px;
  font-size: 18px;
  font-weight: bold;
  box-shadow: 6px 6px 0 #000;
  cursor: pointer;
  transition: all 0.1s;
}
.brutalist-button:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 #000;
}
.brutalist-button:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 #000;
}

High contrast benefits accessibility. Bold borders help focus. Can be overwhelming. Ensure content remains readable. Clear visual hierarchy important.


Less is more
Whitespace emphasis
Content focus
Subtle interactions

Solution: Generous whitespace. Limited color palette (1-2 colors). Simple typography. Hidden until hover. No decorative elements. Content-first approach.

/* Minimalism */
:root {
  --bg: #FFFFFF;
  --text: #1A1A1A;
  --accent: #4A4A4A;
  --spacing-unit: 8px;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
}
.container {
  max-width: 720px;
  margin: 0 auto;
  padding: calc(var(--spacing-unit) * 8);
}
.minimal-header {
  margin-bottom: calc(var(--spacing-unit) * 12);
}
.minimal-h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: calc(var(--spacing-unit) * 4);
}
.minimal-link {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  transition: border-color 0.2s;
}
.minimal-link:hover {
  border-bottom-color: var(--text);
}
.minimal-button {
  background: transparent;
  border: 1px solid var(--text);
  color: var(--text);
  padding: 12px 24px;
  transition: all 0.2s;
}
.minimal-button:hover {
  background: var(--text);
  color: var(--bg);
}

Minimalism aids focus. Clear typography benefits readability. Ample whitespace reduces cognitive load. Ensure focus states visible. Don't sacrifice accessibility for aesthetics.


Soft 3D
Rounded forms
Pastel colors
Playful depth

Solution: Very rounded corners. Soft inner and outer shadows. Pastel color palette. Slightly inflated appearance. Floating effect.

/* Claymorphism */
:root {
  --clay-bg: #f0f0f3;
  --clay-primary: #6C5CE7;
  --clay-secondary: #00CEC9;
}
.clay-button {
  background: var(--clay-primary);
  border-radius: 30px;
  padding: 16px 32px;
  color: white;
  border: none;
  box-shadow:
    inset 6px 6px 12px rgba(255,255,255,0.4),
    inset -6px -6px 12px rgba(0,0,0,0.2),
    8px 8px 16px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: all 0.2s;
}
.clay-button:hover {
  box-shadow:
    inset 4px 4px 8px rgba(255,255,255,0.4),
    inset -4px -4px 8px rgba(0,0,0,0.2),
    12px 12px 20px rgba(0,0,0,0.25);
  transform: translateY(-2px);
}
.clay-card {
  background: var(--clay-bg);
  border-radius: 24px;
  padding: 32px;
  box-shadow:
    12px 12px 24px rgba(0,0,0,0.15),
    -12px -12px 24px rgba(255,255,255,0.8);
}
.clay-icon {
  width: 64px;
  height: 64px;
  background: var(--clay-secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 4px 4px 8px rgba(255,255,255,0.5),
    inset -4px -4px 8px rgba(0,0,0,0.1),
    6px 6px 12px rgba(0,0,0,0.15);
}

Soft shadows may reduce contrast. Ensure text is readable. Focus states critical on rounded elements. Don't overuse. Test with color blindness.


Flat design with solid colors and no gradients

No gradients
Solid colors
Simple shapes
Clear typography

Solution: Solid colors only. No shadows or gradients. Simple geometric shapes. Bold typography. High contrast. Clear iconography.

/* Flat Design */
:root {
  --primary: #3498db;
  --secondary: #2ecc71;
  --accent: #e74c3c;
  --dark: #34495e;
  --light: #ecf0f1;
}
.flat-button {
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.flat-button:hover {
  background: #2980b9;
}
.flat-button-secondary {
  background: var(--secondary);
  color: white;
}
.flat-card {
  background: white;
  border: 2px solid var(--light);
  border-radius: 4px;
  padding: 20px;
}
.flat-icon {
  width: 48px;
  height: 48px;
  background: var(--accent);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

Flat design can be very accessible. Clear solid colors. Good contrast ratios. Focus states essential. Ensure depth through other means (borders, spacing).


Realistic textures
Gradients
Inner shadows
Familiar metaphors

Solution: Realistic textures (wood, leather, metal). Complex gradients. Inner shadows for depth. Familiar object metaphors (switches, knobs). High detail.

/* Skeuomorphism */
.skeuo-button {
  background: linear-gradient(180deg, #6495ED 0%, #4169E1 50%, #0000CD 100%);
  border: 1px solid #000080;
  border-radius: 8px;
  padding: 12px 24px;
  color: white;
  font-weight: bold;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 2px 4px rgba(0,0,0,0.4);
  text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
}
.skeuo-button:active {
  background: linear-gradient(180deg, #0000CD 0%, #4169E1 50%, #6495ED 100%);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.4);
}
.skeuo-panel {
  background: linear-gradient(180deg, #8B7355 0%, #6B4423 100%);
  border: 4px solid #3D2914;
  border-radius: 12px;
  padding: 20px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 4px 8px rgba(0,0,0,0.4);
}
.skeuo-input {
  background: linear-gradient(180deg, #1a1a1a 0%, #333 100%);
  border: 2px inset #444;
  border-radius: 4px;
  padding: 8px 12px;
  color: #0f0;
  font-family: 'Courier New', monospace;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6);
}

Can be dated and less accessible. Complex gradients may reduce readability. Focus states critical. Use sparingly. Consider modern alternatives. Test contrast thoroughly.