UI Design

Instructions

Visual Hierarchy — Guide the eye deliberately through every screen:

• Apply F-pattern for text-heavy pages (headline → subhead → left-aligned scan)
• Apply Z-pattern for landing pages and hero sections (logo → CTA → content → action)
• Maintain contrast ratios of at least 4.5:1 (AA) for body text and 3:1 for large text
• Use size, weight, color, and whitespace — never rely on a single differentiator

Grid Systems — All layout decisions derive from a consistent spatial framework:

• Use an 8pt base grid (4pt for fine adjustments like icon alignment)
• Default to a 12-column grid with responsive gutters (16px mobile, 24px tablet, 32px desktop)
• Apply auto-layout in design tools so components reflow predictably
• Treat whitespace as a design element — generous padding signals hierarchy and calm
• Reference the Golden Ratio (1:1.618) for proportional sections and the Rule of Thirds for focal placement
• Design mobile-first: start at 320px, then progressively enhance

Atomic Component Design — Build from the smallest reusable pieces upward:

• Atoms → icons, buttons, inputs, labels, badges
• Molecules → search bars, form fields with labels, card headers
• Organisms → navigation bars, hero sections, data tables
• Templates → page-level layouts with placeholder content
• Pages → templates populated with real data
• Document every interactive state: default, hover, focus, active, disabled, error, loading, skeleton
• Design for graceful degradation — every component must remain usable if JS fails or images don’t load

Semantic Color System — Colors carry meaning, not just aesthetics:

• Define five token groups: primary, secondary, tertiary, semantic (success/warning/error/info), neutral (grays)
• Generate tint/shade scales using HSL — adjust lightness in consistent steps (e.g., 10% increments)
• Never use pure black (#000) or pure white (#FFF); prefer #1A1A1A and #FAFAFA
• Enforce 4.5:1 minimum contrast (AA) on all text/background pairings

Spacing Tokens — Never hardcode pixel values in production:

• Define a token scale: space-xs: 4px, space-sm: 8px, space-md: 16px, space-lg: 24px, space-xl: 32px, space-2xl: 48px, space-3xl: 64px
• Reference tokens by name in specs and handoff annotations

Dark Mode — Every component must ship with a dark variant:

• Swap background/foreground token sets rather than inverting colors
• Re-check contrast ratios — dark backgrounds often need lighter tint stops
• Test shadows, borders, and elevation cues under both themes

Typography — Limit to 2 typeface families maximum (one display, one body):

• Define a modular type scale tied to spacing tokens
• Specify line-height (1.4–1.6 for body), letter-spacing, and max line length (60–80 characters)

Responsive Breakpoints — Design and annotate at these widths:

• 320px (small mobile)
• 768px (tablet portrait)
• 1024px (tablet landscape / small desktop)
• 1440px (standard desktop)
• 1920px (large desktop)

Asset Export — Deliver raster assets at 1x, 2x, and 3x from a 1x base design. Prefer SVG for icons and illustrations.

Checklist before handoff:

• [ ] All interactive states documented
• [ ] Color contrast passes AA on every text/surface pair
• [ ] Spacing uses tokens, not magic numbers
• [ ] Dark mode variant reviewed
• [ ] Responsive layouts annotated at all five breakpoints
• [ ] Assets exported at required densities