Design Taste Frontend

Design Taste — Frontend

A comprehensive design taste and visual quality guide for building premium, modern frontend interfaces across web and mobile platforms.

1. Core Design Principles

The Hierarchy of Visual Quality

1. Spacing & Alignment — The #1 indicator of design quality. Inconsistent spacing = amateur.
2. Typography — Sets the entire tone. Good type choices carry even minimal designs.
3. Color & Contrast — Creates mood, guides attention, signals interactivity.
4. Depth & Layering — Shadows, blur, z-ordering create spatial relationships.
5. Motion & Feedback — Makes the interface feel alive and responsive.

Design Taste Signals

✅ Premium Feel:

• Generous whitespace (don't be afraid of empty space)
• Tight leading on large headings, loose leading on body text
• Subtle color palette with 1–2 accent colors
• Consistent 4px/8px spacing grid
• Purposeful shadows (not generic box-shadow)

❌ Amateur Signals:

• Default browser fonts and sizes
• Rainbow of unrelated colors
• Inconsistent padding/margins
• Borders everywhere instead of spacing and background contrast
• Generic stock icons that don't match in style

2. Typography System

Font Selection Strategy

Type Scale (Recommended)

--text-xs:    0.75rem   / 12px   — Captions, badges
--text-sm:    0.875rem  / 14px   — Secondary text, labels
--text-base:  1rem      / 16px   — Body text (base)
--text-lg:    1.125rem  / 18px   — Lead paragraphs
--text-xl:    1.25rem   / 20px   — Card titles
--text-2xl:   1.5rem    / 24px   — Section headings
--text-3xl:   1.875rem  / 30px   — Page sub-headings
--text-4xl:   2.25rem   / 36px   — Page headings
--text-5xl:   3rem      / 48px   — Hero headings
--text-6xl:   3.75rem   / 60px   — Display / marketing

Typography Rules

• Line height: 1.2 for headings, 1.5–1.6 for body text
• Letter spacing: Slightly tighten headings (-0.02em), slightly loosen uppercase labels (0.05em)
• Max line width: 65–75 characters for body text readability
• Font weight contrast: Use at minimum 2 weights (e.g., 400 regular + 600 semibold)
• Never use more than 2 font families on a single project

3. Color System

Building a Palette

Brand Primary:    1 hero color (used sparingly for CTAs, links, active states)
Brand Secondary:  1 complementary accent (used for secondary actions, tags)
Neutrals:         10-step gray scale (50–950) for text, borders, backgrounds
Semantic:         Success (green), Warning (amber), Error (red), Info (blue)

Dark Mode Strategy

• Don't just invert colors — redesign lightness relationships
• Use hsl() and adjust lightness channel: light mode L=95% bg → dark mode L=10%
• Reduce saturation slightly in dark mode (vibrant colors glare on dark backgrounds)
• Shadows become ambient glows or are removed entirely
• Use elevated surfaces (lighter grays) instead of shadows for depth

Color Application Rules

4. Spacing & Layout

Spacing Scale (8px grid)

--space-1:   4px     — Inline icon gaps
--space-2:   8px     — Tight element groups
--space-3:   12px    — Related elements
--space-4:   16px    — Default padding
--space-5:   20px    — Card padding
--space-6:   24px    — Section gaps
--space-8:   32px    — Section spacing
--space-10:  40px    — Major sections
--space-12:  48px    — Page-level spacing
--space-16:  64px    — Hero / feature sections
--space-20:  80px    — Large page sections

Layout Patterns

• Max content width: 1200–1400px for marketing, 960–1080px for reading, full-width for dashboards
• Grid: CSS Grid for page layout, Flexbox for component internals
• Responsive breakpoints: 640px (sm), 768px (md), 1024px (lg), 1280px (xl)
• Container padding: 16px mobile → 24px tablet → 32px desktop

5. Component Quality Standards

Buttons

• Minimum touch target: 44×44px (mobile), 36×36px (desktop)
• Visual hierarchy: Primary (filled) → Secondary (outlined) → Ghost (text-only)
• Hover: subtle background shift + slight translateY(-1px) lift
• Active: darken + translateY(0) press-down
• Loading state: spinner replaces label, button width stays fixed

Cards

• Consistent border-radius: pick one (8px, 12px, or 16px) and apply everywhere
• Subtle shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)
• Hover shadow: 0 8px 24px rgba(0,0,0,0.08) with smooth transition
• Content padding: 20–24px, uniform on all sides

Inputs & Forms

• Label above input (not placeholder-as-label)
• Consistent border color → focused ring color transition
• Error messages appear below with red text + icon
• Success states: green checkmark, not just color

Icons

• Use a single icon library (Lucide, Phosphor, SF Symbols, Material Symbols)
• Consistent size: 16px inline, 20px in buttons, 24px standalone
• Consistent stroke width across all icons
• Color: match surrounding text color (not arbitrary colors)

6. Visual Effects & Depth

Shadow System

--shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
--shadow-md:  0 4px 8px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
--shadow-lg:  0 12px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
--shadow-xl:  0 20px 40px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.04);

Glassmorphism (Use Sparingly)

.glass {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
}

Gradients

• Hero backgrounds: Subtle radial gradients, mesh gradients
• Text gradients: Use only for hero/display text, never body copy
• Border gradients: border-image or pseudo-element overlay for premium card effects
• Keep gradient angle consistent (usually 135deg or 180deg)

7. Mobile-Specific Guidelines

iOS Design Conventions

• Large title navigation bars with bold SF Pro Display
• Tab bars at the bottom with filled/outlined icon toggle
• Swipe-to-go-back gesture support
• Haptic feedback on meaningful interactions
• Safe area insets for notch/dynamic island

Android / Material Design Conventions

• FAB (Floating Action Button) for primary action
• Top app bar with elevation on scroll
• Bottom navigation with label + icon
• Ripple effect on tap
• Edge-to-edge rendering with system bar transparency

Responsive Image Strategy

• Use srcset and sizes for resolution switching
• Lazy load below-fold images with loading="lazy"
• Aspect ratio containers to prevent layout shift
• WebP/AVIF with fallback for older browsers