DESIGN SYSTEM TEMPLATE

I. FIXED ELEMENTS

These foundations remain consistent across all projects, regardless of brand or context.

1. Spacing Scale

Fixed System:

Usage:

• Margins, padding, gaps between elements
• Mathematical relationships ensure visual harmony
• Use multipliers of base unit (4px)

Why Fixed: Consistent spacing creates visual rhythm regardless of brand personality.

2. Grid System

Fixed Structure:

• 12-column grid for most layouts (divisible by 2, 3, 4, 6)
• 16-column grid for data-heavy interfaces
• Gutters: 16px (mobile), 24px (tablet), 32px (desktop)

Why Fixed: Grid provides structural order. Brand personality shows through color, typography, content—not grid structure.

3. Accessibility Standards

Fixed Requirements:

• WCAG 2.1 AA compliance minimum
• Contrast: 4.5:1 for normal text, 3:1 for large text
• Touch targets: Minimum 44×44px
• Keyboard navigation: All interactive elements accessible
• Screen reader: Semantic HTML, ARIA labels where needed

Why Fixed: Accessibility is not negotiable. It’s a baseline requirement for ethical, legal, and usable products.

4. Typography Hierarchy Logic

Fixed Structure:

• Mathematical scaling: 1.25x (major third) or 1.333x (perfect fourth)
• Hierarchy levels: Display → H1 → H2 → H3 → Body → Small → Caption
• Line height: 1.5x for body text, 1.2-1.3x for headlines
• Line length: 45-75 characters optimal

Why Fixed: Mathematical relationships create predictable, harmonious hierarchy. Specific fonts change, but the logic doesn’t.

5. Component Architecture

Fixed Patterns:

• Button states: Default, Hover, Active, Focus, Disabled
• Form structure: Label above input, error below, helper text optional
• Modal pattern: Overlay + centered content + close mechanism
• Card structure: Container → Header → Body → Footer (optional)

Why Fixed: Users expect consistent component behavior. Architecture is fixed; appearance is project-specific.

6. Animation Timing Framework

Fixed Physics Profiles:

• Lightweight (icons, chips): 150ms
• Standard (cards, panels): 300ms
• Weighty (modals, pages): 500ms

Fixed Easing:

• Ease-out: Entrances (fast start, slow end)
• Ease-in: Exits (slow start, fast end)
• Ease-in-out: Transitions (smooth both ends)

Why Fixed: Natural physics feel consistent across brands. Duration and easing create that feeling.

II. PROJECT-SPECIFIC ELEMENTS

Fill in these for each project based on brand personality and purpose.

1. Brand Color System

Template Structure:

Questions to Answer:

• What emotion should the brand evoke? (Trust, excitement, calm, urgency)
• Warm or cool neutrals?
• Conservative or bold accents?

Examples:

Project A: Fintech App

Project B: Creative Community

Project C: Healthcare Platform

2. Typography Pairing

Template:

Pairing Logic:

• Serif + Sans-serif (classic, editorial)
• Geometric + Humanist (modern + warm)
• Display + System (distinctive + efficient)

Examples:

Project A: Editorial Platform

Project B: Tech Startup

Project C: Luxury Brand

3. Tone of Voice

Template:

Examples:

Project A: Banking App

Project B: Social App

4. Animation Speed & Feel

Template:

Examples:

Project A: Trading Platform

Project B: Wellness App

III. ADAPTABLE ELEMENTS

Context-dependent implementations that vary based on use case.

1. Component Variations

Button Variants:

• Primary: Full background color (high emphasis)
• Secondary: Outline only (medium emphasis)
• Tertiary: Text only (low emphasis)
• Destructive: Red-ish (danger actions)
• Ghost: Minimal (navigation, toolbars)

Adaptation Rules:

• Primary: Main CTA, one per screen section
• Secondary: Alternative actions
• Tertiary: Less important actions, multiple allowed
• Use brand colors, but hierarchy logic is fixed

2. Responsive Breakpoints

Fixed Ranges:

• XS: 0-479px (small phones)
• SM: 480-767px (large phones)
• MD: 768-1023px (tablets)
• LG: 1024-1439px (laptops)
• XL: 1440px+ (desktop)

Adaptable Implementations:

Simple Content Site:

Dashboard/Data App:

3. Dark Mode Palette

Adaptation Strategy:

Not a simple inversion. Dark mode needs adjusted contrast:

Light Mode:

Dark Mode (Adapted):

Why Adapt: Pure white on pure black is too harsh. Dark mode needs slightly lower contrast for eye comfort.

4. Loading States

Context-Dependent:

Fast operations (<500ms):

• No loading indicator (feels instant)

Medium operations (500ms-2s):

• Spinner or skeleton screen

Long operations (>2s):

• Progress bar with percentage
• Or: Skeleton + estimated time

Interactive Operations:

• Button shows spinner inside (don’t disable, show state)

5. Error Handling Strategy

Context-Dependent:

Form Errors:

API Errors:

Data Errors:

DECISION TREE

When implementing a feature, ask:

Is this…

FIXED?

• Does it affect structure, accessibility, or universal UX?
• Examples: Spacing scale, grid, contrast ratios, component architecture
• Action: Use the fixed system, no variation

PROJECT-SPECIFIC?

• Does it express brand personality or purpose?
• Examples: Colors, typography, tone of voice, animation feel
• Action: Fill in the template for this project

ADAPTABLE?

• Does it depend on context, content, or use case?
• Examples: Component variants, responsive behavior, error handling
• Action: Choose appropriate variation based on context

EXAMPLE: Implementing a “Submit” Button

Fixed Elements (Always the same):

• Touch target: 44px minimum height
• Padding: 16px horizontal (from spacing scale)
• States: Default, Hover, Active, Focus, Disabled
• Animation: 150ms ease-out (lightweight profile)

Project-Specific (Filled per project):

• Project A (Bank): Dark blue background, white text, “Submit Application”
• Project B (Social): Coral background, white text, “Let’s Go!”
• Project C (Healthcare): Soft blue background, white text, “Continue”

Adaptable (Context-dependent):

• Form context: Primary button (full color)
• Toolbar context: Ghost button (text only)
• Danger context: Destructive variant (red-ish)

VALIDATION CHECKLIST

Before finalizing a design, check:

Fixed Elements

• Not done: Uses spacing scale (4/8/12/16/24/32/48/64/96px)
• Not done: Follows grid system (12 or 16 columns)
• Not done: Meets WCAG AA contrast (4.5:1 normal, 3:1 large)
• Not done: Touch targets ≥ 44px
• Not done: Typography follows mathematical scale
• Not done: Components follow standard architecture

Project-Specific Elements

• Not done: Brand colors filled in and intentional
• Not done: Typography pairing chosen and justified
• Not done: Tone of voice defined and consistent
• Not done: Animation speed matches brand personality

Adaptable Elements

• Not done: Component variants appropriate for context
• Not done: Responsive behavior fits content type
• Not done: Loading states match operation duration
• Not done: Error handling fits error type

PROJECT KICKOFF TEMPLATE

Use this to start a new project:

MAINTAINING CONSISTENCY

Documentation

• Keep this template updated as system evolves
• Document WHY choices were made, not just WHAT

Communication

• Share with designers: “Here’s what varies vs. what’s fixed”
• Share with developers: “Here are the design tokens”

Tooling

• Use CSS variables for project-specific values
• Use Tailwind config for spacing scale
• Use design tokens in Figma/Storybook

Reviews

• Audit: Does new work follow fixed elements?
• Validate: Are project-specific elements intentional?
• Question: Are adaptations justified by context?

EXAMPLES OF COMPLETE SYSTEMS

System A: B2B SaaS (Conservative)

Fixed: Standard spacing, 12-col grid, WCAG AA, major third type scale Project-Specific:

• Colors: Cool greys + corporate blue
• Typography: DM Sans (headlines + body)
• Tone: Professional, formal
• Animation: Quick, precise (150ms) Adaptable:
• Dashboard gets multi-panel layout
• Forms are extensive (use progressive disclosure)
• Errors show detailed technical info

System B: Consumer Social App (Playful)

Fixed: Same spacing/grid/accessibility/type logic Project-Specific:

• Colors: Warm greys + vibrant coral
• Typography: Poppins (headlines) + Inter (body)
• Tone: Casual, friendly, playful
• Animation: Moderate, bouncy (200ms) Adaptable:
• Mobile-first (most users on phones)
• Forms are minimal (progressive profiling)
• Errors are friendly, not technical

System C: Healthcare Platform (Clinical)

Fixed: Same foundational structure Project-Specific:

• Colors: Pure greys + medical blue
• Typography: System fonts (SF Pro / Segoe)
• Tone: Clear, authoritative, calm
• Animation: Slow, smooth (300ms) Adaptable:
• Desktop-first (clinical use at workstations)
• Forms are complex (HIPAA compliance)
• Errors are precise with next steps

KEY TAKEAWAY

The system flexibility framework lets you:

• Maintain consistency (fixed elements)
• Express brand personality (project-specific)
• Adapt to context (adaptable elements)

Without this framework:

• Designers reinvent spacing every project
• Components feel inconsistent across products
• Brand personality overrides accessibility
• Context-blind implementations feel wrong

With this framework:

• Speed: Start from proven foundations
• Consistency: Fixed elements guarantee it
• Flexibility: Express unique brand identity
• Context: Adapt without breaking system