Design Elevation

Design Elevation System

This skill transforms functional visual outputs into polished, professional designs by applying systematic design thinking and refinement protocols.

Design Philosophy

Follow Alla Kholmatova's design systems framework: every design decision is either a functional pattern (what users interact with — structure, layout, components) or a perceptual pattern (how it feels — color, typography, spacing, motion). Both layers must be intentional.

Canonical Design Tokens: Tailwind CSS

All design decisions should map to Tailwind CSS as the shared design language. This means:

• Colors from Tailwind's palette (gray, blue, emerald, amber, rose, violet, etc.)
• Spacing from Tailwind's scale (1 = 0.25rem/4px, 2 = 0.5rem/8px, 4 = 1rem/16px, etc.)
• Typography from Tailwind's type scale (text-xs through text-9xl)
• Border radius from Tailwind's system (rounded-sm through rounded-2xl)
• Shadows from Tailwind's elevation (shadow-sm through shadow-2xl)

When writing CSS or HTML, use Tailwind utility classes. When defining design tokens for other formats (presentations, documents), translate Tailwind values into the target medium.

Activation Protocol

When creating ANY visual output:

1. Start with function — Create a working version first 2. Define functional patterns — What does the user interact with? What's the structure? Use references/grid-systems.md 3. Define perceptual patterns — How should it feel? What's the personality? Use references/elevation-protocol.md 4. Apply interrogation — Question every default choice using references/design-interrogation.md 5. Elevate with techniques — Use specific moves from references/technique-catalog.md 6. Polish data visualizations — If any charts/data, apply references/data-visualization.md 7. Final check — Ensure output feels hand-crafted, not templated

Functional Patterns by Output Type

For Presentations (PPTX)

• Start with information hierarchy, not decoration
• Apply grid systems from references/grid-systems.md
• One idea per slide — if it needs two ideas, it needs two slides
• Build complexity gradually across the slide sequence

For Dashboards & Data Visualization

• Begin with data relationships, not chart types
• Apply Tufte's data-ink ratio from references/data-visualization.md
• Structure: KPI bar → Primary chart → Supporting charts → Detail tables
• Use small multiples over multi-series charts when comparing 4+ categories
• Default to Tailwind's gray scale for non-data elements; reserve color for data

For Documents & Reports

• Structure with clear typographic hierarchy
• Apply document grids from references/grid-systems.md
• Use Tailwind's type scale for consistent sizing

For Web/HTML Artifacts

• Design with responsive grid foundations (Tailwind's grid/flex utilities)
• Use Tailwind utility classes directly
• Apply animation restraint — transition-all duration-200 ease-out as default

Perceptual Patterns

Typography Excellence

Tailwind's type scale is the foundation. Layer these refinements:

• Use font-sans (Inter/system) for UI, font-serif for editorial
• Apply tracking-tight for display text (text-3xl and above)
• Apply leading-relaxed for body text
• Use font-semibold for emphasis over font-bold — subtler hierarchy
• For numbers in data contexts: always tabular-nums
• Refer to references/typography-scales.md for scale selection

Color Sophistication

Tailwind's palette is the source of truth:

• Build from gray neutrals (not pure black/white)
• text-gray-900 for primary text, text-gray-500 for secondary, text-gray-400 for tertiary
• bg-white or bg-gray-50 for backgrounds — never stark white with stark black
• Accent color: pick ONE from Tailwind's palette (blue, emerald, violet, etc.)
• Apply 60-30-10: 60% neutrals, 30% secondary, 10% accent
• Refer to references/color-systems.md for full system

Spatial Systems

Tailwind's spacing scale provides the rhythm:

• Base unit: 4 (1rem / 16px) for most UI
• Component padding: p-4 to p-6 (16-24px)
• Section spacing: py-12 to py-20 (48-80px)
• Gaps: gap-4 for tight, gap-6 for comfortable, gap-8 for spacious
• Use Tailwind's spacing scale exclusively — no arbitrary values
• Refer to references/spacing-systems.md for patterns

Visual Refinement

• Border radius: rounded-lg as default for cards, rounded-md for buttons
• Borders: border border-gray-100 for subtle card separation
• Shadows: shadow-sm for cards; reserve shadow-lg for modals/overlays
• Hover states: hover:bg-gray-50 for interactive elements
• Transitions: transition-colors duration-150 as default

Design Exemplars

Use these as illustrations of principles, not as the system itself. The system is Tailwind + Kholmatova's framework. These exemplars show what excellence looks like:

• Stripe: Gradient sophistication, precise type, technical content made beautiful
• Linear: Dark mode mastery, keyboard-first, minimal and precise
• Apple: Scale contrasts, photography integration, restraint as premium
• Swiss/International Style: Grid discipline, objective clarity, mathematical spacing
• Trimble Modus: Enterprise utility, Open Sans 14px body, 4px radius, uniform shadows, professional restraint
• IBM Carbon: Sharp corners (0px radius), IBM Plex type family, 2x grid, four-theme architecture
• Shopify Polaris: Merchant-friendly, warm neutrals, dark primary buttons, 13px body, rounded cards
• Adobe Spectrum: Four color themes, two scale modes, three-layer token architecture, creative-tool patterns
• Salesforce Lightning: CRM-optimized, brand blue #0176d3, slds- utility classes, record-detail patterns

Refer to references/design-exemplars.md for specific techniques to borrow.

Trimble Modus Override

When building for Trimble products or when Modus styling is requested, Modus tokens override Tailwind defaults:

• Font: Open Sans (not Inter), body at 14px (not 16px)
• Primary: #0063A3 Trimble Blue (not Tailwind blue-600)
• Border radius: 4px everywhere (not rounded-lg)
• Shadows: 0 0 4px rgba(36,35,45,0.3) uniform (not directional)
• Gray scale: Modus grays with cool/blue undertone (not Tailwind neutral grays)
• Full reference: references/modus-design-system.md

IBM Carbon Override

When building for IBM products or when Carbon styling is requested, Carbon tokens override Tailwind defaults:

• Font: IBM Plex Sans (not Inter), body at 14px
• Primary: #0f62fe Blue 60 (not Tailwind blue-600)
• Border radius: 0 everywhere (not rounded-lg) — Carbon's signature sharp corners
• Text: #161616 Gray 100 (not Tailwind gray-900)
• Layers: alternating white/gray-10 (#f4f4f4) for depth
• Full reference: references/carbon-design-system.md

Shopify Polaris Override

When building Shopify apps or when Polaris styling is requested, Polaris tokens override Tailwind defaults:

• Font: Inter, body at 13px (not 16px)
• Primary buttons: #303030 dark (not blue!)
• Interactive/links: #005bd3
• Page background: #f1f1f1 (not white)
• Border radius: 8px for cards, 6px for buttons
• Full reference: references/polaris-design-system.md

Adobe Spectrum Override

When building Adobe products or when Spectrum styling is requested, Spectrum tokens override Tailwind defaults:

• Font: Adobe Clean / Source Sans Pro, body at 14px
• Accent: #0D80D8 (light) / #2A9AF4 (dark)
• Border radius: 4px for controls, 8px for cards
• Four themes: Lightest, Light, Dark, Darkest
• Two scales: Medium (desktop), Large (touch)
• Full reference: references/spectrum-design-system.md

Salesforce Lightning Override

When building Salesforce apps or when Lightning/SLDS styling is requested, SLDS tokens override Tailwind defaults:

• Font: Salesforce Sans, body at 13px
• Brand: #0176d3 (not Tailwind blue-600)
• Border radius: 4px (0.25rem) everywhere
• Text: #181818 (not Tailwind gray-900)
• Uses slds- prefix utility classes
• Full reference: references/lightning-design-system.md

Critical Design Moves (Quick Reference)

Make it feel intentional

• Replace #000000 with text-gray-900
• Replace #ffffff with bg-gray-50 for backgrounds
• Use rounded-lg consistently, not mixed radii
• Apply one spacing scale throughout

Make it feel premium

• Generous whitespace — p-8 or p-12 on hero sections
• Tight tracking on display text: tracking-tight
• Colored shadows: shadow-blue-500/10 instead of black
• Subtle borders: border-gray-100 instead of border-gray-300

Make it feel clean

• Remove borders and use whitespace to separate
• Reduce to 2-3 type sizes maximum per view
• Single accent color
• text-gray-500 for supporting text, not smaller type

Make data feel clear

• Title states the finding, not the chart type
• Direct labels over legends
• Gray out non-essential series
• tabular-nums on all number columns
• Source attribution in text-xs text-gray-400

Resource Loading Priority

For efficiency, load resources in this order: 1. references/elevation-protocol.md — Always load first 2. references/data-visualization.md — Load when any data/charts involved 3. references/technique-catalog.md — Load for specific techniques 4. references/design-interrogation.md — Load for quality checks 5. references/modus-design-system.md — Load when Trimble/Modus styling is requested 6. references/carbon-design-system.md — Load when IBM/Carbon styling is requested 7. references/polaris-design-system.md — Load when Shopify/Polaris styling is requested 8. references/spectrum-design-system.md — Load when Adobe/Spectrum styling is requested 9. references/lightning-design-system.md — Load when Salesforce/Lightning styling is requested 10. Context-specific references (color, typography, spacing, grids) as needed

Output Standards

Every delivered visual should:

• Use Tailwind's design tokens consistently (or their translated equivalents)
• Show clear functional patterns (structure, hierarchy, interaction)
• Express coherent perceptual patterns (color, type, spacing, motion)
• Demonstrate data integrity (if data is present, follow Tufte's principles)
• Feel intentionally designed, not defaulted
• Balance boldness with restraint

Silent Execution

Unless explicitly asked, apply all design thinking internally. The user sees only the polished result. Document design decisions in code comments for HTML/CSS, or in speaker notes for presentations, but don't explain the process unless requested.

Great design is invisible when done right. The user should feel the quality without seeing the effort.

IBM Carbon Design System Reference

A comprehensive reference for building interfaces that conform to IBM's Carbon Design System (v11). Use this when the user requests Carbon styling, IBM branding, or when working on IBM products.

Source: carbondesignsystem.com and @carbon/themes

---

Design Philosophy

Carbon is IBM's open-source design system — built for enterprise products across AI, cloud, data, and infrastructure. It prioritizes:

• Consistency across IBM's vast product portfolio
• Accessibility (WCAG 2.1 AA compliance, IBM Equal Access guidelines)
• Productive density for professional, data-heavy workflows
• The 2x Grid — every spatial decision derives from a 2px mini-unit grid
• Four themes (White, Gray 10, Gray 90, Gray 100) for flexible surface treatment
• IBM Design Language — systematic, rational, and expressive

The aesthetic is clean, geometric, and information-dense. Sharp corners, structured grids, and IBM Plex typography define the visual character.

---

Typography

Font Families

/* Primary — all UI text */
font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;

/* Monospace — code, technical data */
font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;

/* Serif — editorial, long-form content */
font-family: 'IBM Plex Serif', 'Georgia', Times, serif;

When using Google Fonts:

<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">

Type Scale

Font Weights

---

Color System

Brand Colors

Gray Scale (Cool Gray)

Gray Scale (Neutral Gray)

Semantic / Status Colors

Theme Tokens (White Theme — Default)

Theme Tokens (Gray 100 — Dark)

---

Spacing

Carbon uses a 2x grid system — all spacing derives from multiples of 2px, with the primary scale at 8px intervals.

Spacing Scale

Container Spacing

---

Borders & Radius

Border Radius

Carbon is distinctive for its sharp corners:

Key distinction: Unlike most design systems, Carbon uses 0px border-radius by default for most components. This gives IBM products their characteristic angular, structured look.

Border Widths

---

Shadows

Carbon uses minimal shadow — preferring border and layer color to create depth.

Key distinction: Carbon relies on layer tokens (layer-01, layer-02, layer-03) rather than shadows for most elevation hierarchy.

---

Component Patterns

Buttons

Button sizes:

Note: Carbon buttons are wider than most — they include icon space on the right side and use full-width in many contexts.

Tiles (Cards)

/* Clickable tile */
background: var(--layer-01); /* #f4f4f4 on white theme */
border: none;
border-radius: 0;
padding: 16px;
min-height: 64px;

/* Tile hover */
background: var(--layer-hover-01); /* #e8e8e8 */

/* Selected tile */
border: 1px solid var(--border-interactive); /* #0f62fe */

Data Tables

/* Table header */
background: var(--layer-accent-01); /* #e0e0e0 */
color: var(--text-primary); /* #161616 */
font-size: 14px;
font-weight: 600;
padding: 16px;
height: 48px;

/* Table row */
background: var(--layer-01); /* #f4f4f4 */
border-bottom: 1px solid var(--border-subtle-01);
height: 48px; /* default, also 24/32/40/64px sizes */
padding: 16px;
font-size: 14px;

/* Row hover */
background: var(--layer-hover-01); /* #e8e8e8 */

/* Row selected */
background: var(--layer-selected-01); /* rgba(141,141,141,0.20) */

Text Inputs

/* Default input */
background: var(--field-01); /* #f4f4f4 */
border: none;
border-bottom: 1px solid var(--border-strong-01); /* #8d8d8d */
color: var(--text-primary);
font-size: 14px;
height: 40px; /* default, also 32px sm, 48px lg */
padding: 0 16px;

/* Focus */
outline: 2px solid var(--focus); /* #0f62fe */
outline-offset: -2px;

/* Error */
outline: 2px solid var(--support-error); /* #da1e28 */

Notifications

Header / Navigation

/* UI Shell header */
background: #161616; /* Always dark */
height: 48px;
color: #f4f4f4;
font-size: 14px;
font-weight: 600;

/* Side navigation */
background: #ffffff; /* White theme */
width: 256px; /* expanded */
width: 48px; /* collapsed rail */

Tabs

/* Tab (contained) */
background: var(--layer-accent-01); /* #e0e0e0 */
height: 48px;
font-size: 14px;
padding: 0 16px;
border-bottom: none;

/* Selected tab */
background: var(--layer-01);
border-bottom: 2px solid var(--border-interactive);
font-weight: 600;

/* Tab (line) */
border-bottom: 2px solid var(--border-subtle);
/* Selected: border-bottom color changes to interactive */

Tags / Badges

/* Tag */
height: 24px; /* sm: 18px, md: 24px, lg: 32px */
padding: 0 8px;
border-radius: 24px; /* pill shape */
font-size: 12px;
font-weight: 400;

/* Tag colors — high contrast */
/* Red */ background: #fff1f1; color: #a2191f;
/* Blue */ background: #edf5ff; color: #0043ce;
/* Green */ background: #defbe6; color: #0e6027;
/* Purple */ background: #f6f2ff; color: #6929c4;
/* Teal */ background: #d9fbfb; color: #005d5d;
/* Gray */ background: #f4f4f4; color: #525252;

Modals / Dialogs

/* Modal */
background: var(--layer-01);
width: 36%; /* xs: 48%, sm: 60%, lg: 72%, max: 84% */
max-height: 84vh;
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
border-radius: 0; /* Sharp corners */

/* Modal header */
padding: 16px 16px 0;
margin-bottom: 8px;

/* Overlay */
background: rgba(22, 22, 22, 0.5);

Toggle / Switch

/* Toggle off */
background: #8d8d8d;
width: 48px;
height: 24px;
border-radius: 12px;

/* Toggle on */
background: #198038; /* green-60 — not blue! */

/* Small toggle */
width: 32px;
height: 16px;

---

Data Visualization Colors

Carbon has a dedicated data visualization palette:

Categorical (1-color to 5-color sequences)

1 color:  #6929c4 (Purple 70)
2 colors: #6929c4, #1192e8
3 colors: #6929c4, #1192e8, #005d5d
4 colors: #6929c4, #1192e8, #005d5d, #9f1853
5 colors: #6929c4, #1192e8, #005d5d, #9f1853, #fa4d56

Extended palette (14 hues)

Purple 70:  #6929c4    Cyan 50:    #1192e8
Teal 70:    #005d5d    Magenta 70: #9f1853
Red 50:     #fa4d56    Red 90:     #570408
Green 60:   #198038    Blue 80:    #002d9c
Magenta 50: #ee5396    Yellow 50:  #b28600
Teal 50:    #009d9a    Cyan 90:    #012749
Purple 50:  #a56eff    Orange 40:  #eb6200

Sequential (single-hue gradient)

Blue:  #edf5ff → #d0e2ff → #a6c8ff → #78a9ff → #4589ff → #0f62fe → #0043ce → #002d9c

---

Layout Patterns

Grid System

Carbon uses a responsive 16-column grid:

UI Shell Dimensions

---

Interaction States

Motion / Transitions

Carbon defines two motion modes:

Common durations:

---

Quick Implementation Checklist

When building Carbon-styled interfaces:

• [ ] Use IBM Plex Sans (Google Fonts or self-hosted)
• [ ] Set body text to 14px/20px, #161616
• [ ] Background: #ffffff (White theme) or #161616 (g100 theme)
• [ ] Primary interactive: #0f62fe (Blue 60)
• [ ] Borders: 1px solid #e0e0e0 (subtle) or #8d8d8d (strong)
• [ ] No border-radius on buttons, inputs, tiles (0px default)
• [ ] Button height: 48px (default), full-width in forms
• [ ] Header: always #161616, 48px height
• [ ] Focus: 2px solid #0f62fe, inset
• [ ] Layer hierarchy: white → gray-10 → white → gray-10 (alternating)
• [ ] 16-column grid, 32px gutters
• [ ] Tabs and toggles use green for "on" state, not blue
• [ ] Tags use pill shape (border-radius: 24px) — exception to no-radius rule
• [ ] Minimal shadows — use layer color shifts for depth

---

Tailwind CSS Mapping

When translating Carbon tokens to Tailwind:

Custom Tailwind config for Carbon:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['IBM Plex Sans', 'Helvetica Neue', 'Arial', 'sans-serif'],
        mono: ['IBM Plex Mono', 'Menlo', 'monospace'],
        serif: ['IBM Plex Serif', 'Georgia', 'serif'],
      },
      colors: {
        carbon: {
          blue: { 60: '#0f62fe', 70: '#0043ce', 80: '#002d9c' },
          gray: { 10: '#f4f4f4', 20: '#e0e0e0', 50: '#8d8d8d', 80: '#393939', 100: '#161616' },
          red: { 60: '#da1e28' },
          green: { 60: '#198038' },
          yellow: { 30: '#f1c21b' },
          purple: { 60: '#8a3ffc' },
        }
      },
      borderRadius: {
        none: '0',
      },
      spacing: {
        '0.5': '2px',
      }
    }
  }
}

Color Systems & Palettes

Professional color systems built on Tailwind CSS as the canonical design token system. All color decisions should reference Tailwind's palette first.

Core Principle

Color should label, measure, represent, or highlight — never merely decorate (Tufte). Apply the 60-30-10 rule: 60% neutrals, 30% secondary, 10% accent.

Tailwind Neutral Foundations (Primary System)

Gray Scale (Default — cool blue undertone)

Use gray as the default neutral. Choose slate, zinc, neutral, or stone only when temperature matters.

/* Tailwind gray — the default for all text and backgrounds */
gray-50:  #F9FAFB;    /* bg-gray-50   — subtle backgrounds */
gray-100: #F3F4F6;    /* bg-gray-100  — card backgrounds, hover states */
gray-200: #E5E7EB;    /* border-gray-200 — default borders */
gray-300: #D1D5DB;    /* border-gray-300 — heavier borders */
gray-400: #9CA3AF;    /* text-gray-400 — tertiary text, placeholders */
gray-500: #6B7280;    /* text-gray-500 — secondary text */
gray-600: #4B5563;    /* text-gray-600 — strong secondary text */
gray-700: #374151;    /* text-gray-700 — subheadings */
gray-800: #1F2937;    /* text-gray-800 — near-black text */
gray-900: #111827;    /* text-gray-900 — primary text (NOT #000000) */
gray-950: #030712;    /* text-gray-950 — deepest dark mode backgrounds */

Neutral Temperature Variants (Tailwind)

slate  — Cool/blue undertone   → Technical, corporate
gray   — Balanced cool         → Default, versatile
zinc   — True neutral          → Minimal, modern
neutral — Warm-ish neutral     → Approachable
stone  — Warm/brown undertone  → Organic, editorial

Text & Background Pairings

/* Light mode defaults */
--text-primary:   gray-900;    /* Main text */
--text-secondary: gray-500;    /* Supporting text */
--text-tertiary:  gray-400;    /* Captions, metadata */
--bg-primary:     white;       /* Main background */
--bg-secondary:   gray-50;     /* Subtle card/section backgrounds */
--bg-tertiary:    gray-100;    /* Hover states, grouped backgrounds */
--border-default: gray-200;    /* Subtle borders */
--border-heavy:   gray-300;    /* Emphasized borders */

Tailwind Brand Colors (Semantic System)

Primary Accent Options

Pick ONE as your primary accent. Use its 500 for standard, 600 for hover, 100 for subtle backgrounds.

/* Blue — Professional, trustworthy (default choice) */
blue-500:    #3B82F6;   /* text-blue-500, bg-blue-500 */
blue-600:    #2563EB;   /* hover states */
blue-100:    #DBEAFE;   /* subtle backgrounds */

/* Indigo — Technical, modern */
indigo-500:  #6366F1;
indigo-600:  #4F46E5;

/* Violet — Creative, premium */
violet-500:  #8B5CF6;
violet-600:  #7C3AED;

/* Emerald — Growth, success */
emerald-500: #10B981;
emerald-600: #059669;

/* Cyan — Fresh, data-forward */
cyan-500:    #06B6D4;
cyan-600:    #0891B2;

Semantic Colors (Tailwind)

/* Status colors — consistent across all outputs */
--success:  emerald-500  (#10B981);  /* Positive, growth, complete */
--warning:  amber-500    (#F59E0B);  /* Caution, attention needed */
--error:    rose-500     (#F43F5E);  /* Error, negative, danger */
--info:     blue-500     (#3B82F6);  /* Information, neutral status */

Dark Mode (Tailwind)

/* Dark mode — swap light/dark values */
--text-primary:   gray-50;     /* Light text on dark */
--text-secondary: gray-400;
--text-tertiary:  gray-500;
--bg-primary:     gray-950;    /* Deepest background */
--bg-secondary:   gray-900;    /* Card backgrounds */
--bg-tertiary:    gray-800;    /* Hover states */
--border-default: gray-700;    /* Borders in dark mode use rgba(255,255,255,0.08) */

Data Visualization Palettes (Tailwind-Native)

Tufte's Color Principle

Color should label, measure, represent, or highlight — never merely decorate.

Default to grays. Add color only when it encodes meaning. The most powerful technique: gray everything out, highlight one series in color.

Categorical (Distinct — max 6-8)

Built from Tailwind's 500 shade for sufficient contrast on white:

--cat-1: blue-500;     /* #3B82F6 */
--cat-2: emerald-500;  /* #10B981 */
--cat-3: amber-500;    /* #F59E0B */
--cat-4: violet-500;   /* #8B5CF6 */
--cat-5: rose-500;     /* #F43F5E */
--cat-6: cyan-500;     /* #06B6D4 */
--cat-7: orange-500;   /* #F97316 — use sparingly beyond 6 */
--cat-8: pink-500;     /* #EC4899 — use sparingly beyond 6 */

Use 400 for secondary emphasis, 600 for dark backgrounds. Above 6 categories: use small multiples instead of more colors.

Sequential (Gradient — single hue)

Use one Tailwind hue, stepping through shades for magnitude:

/* Blue sequential — lightest = lowest, darkest = highest */
--seq-1: blue-50;    /* #EFF6FF */
--seq-2: blue-100;   /* #DBEAFE */
--seq-3: blue-200;   /* #BFDBFE */
--seq-4: blue-300;   /* #93C5FD */
--seq-5: blue-500;   /* #3B82F6 */
--seq-6: blue-700;   /* #1D4ED8 */
--seq-7: blue-900;   /* #1E3A8A */

Alternative hues: emerald for positive metrics, rose for risk/heat.

Diverging (Two-direction)

Show deviation from a midpoint using two Tailwind hues through a neutral center:

/* Rose ← Gray → Emerald (negative to positive) */
--div-neg-3: rose-700;     /* #BE123C */
--div-neg-2: rose-500;     /* #F43F5E */
--div-neg-1: rose-200;     /* #FECDD3 */
--div-mid:   gray-100;     /* #F3F4F6 */
--div-pos-1: emerald-200;  /* #A7F3D0 */
--div-pos-2: emerald-500;  /* #10B981 */
--div-pos-3: emerald-700;  /* #047857 */

The Highlight Pattern

The single most effective dataviz color technique:

<!-- Gray out everything, highlight the finding -->
<line class="text-gray-300" />  <!-- Series A -->
<line class="text-gray-300" />  <!-- Series B -->
<line class="text-blue-600" />  <!-- Series C: THE STORY -->
<line class="text-gray-300" />  <!-- Series D -->

Accessibility in Data Color

• Never use color alone to encode meaning — pair with shape, pattern, or direct label
• Minimum 3:1 contrast ratio for graphical elements against background
• Avoid red/green as the only distinguishing pair (deuteranopia)
• Use Tailwind 500+ shades on white for sufficient contrast
• Provide text alternatives: direct labels, data tables, or alt text

Industry-Specific Palettes

Finance/Banking

--finance-primary: #003D5B;    /* Deep blue */
--finance-secondary: #00638D;  /* Mid blue */
--finance-accent: #30BCED;     /* Light blue */
--finance-success: #2A9D8F;    /* Teal */
--finance-warning: #E9C46A;    /* Gold */
--finance-error: #E76F51;      /* Coral */
--finance-neutral: #264653;    /* Dark gray */

Healthcare

--health-primary: #0077B6;     /* Medical blue */
--health-secondary: #00B4D8;   /* Light blue */
--health-accent: #90E0EF;      /* Pale blue */
--health-success: #52B788;     /* Green */
--health-warning: #FFB700;     /* Amber */
--health-error: #D00000;       /* Red */
--health-neutral: #495057;     /* Gray */

Technology

--tech-primary: #6366F1;       /* Indigo */
--tech-secondary: #8B5CF6;     /* Purple */
--tech-accent: #EC4899;        /* Pink */
--tech-success: #10B981;       /* Emerald */
--tech-warning: #F59E0B;       /* Amber */
--tech-error: #EF4444;         /* Red */
--tech-neutral: #64748B;       /* Slate */

Education

--edu-primary: #2563EB;        /* Blue */
--edu-secondary: #7C3AED;      /* Violet */
--edu-accent: #F59E0B;         /* Amber */
--edu-success: #10B981;        /* Green */
--edu-warning: #F97316;        /* Orange */
--edu-error: #DC2626;          /* Red */
--edu-neutral: #6B7280;        /* Gray */

Gradient Systems

Linear Gradients

/* Subtle */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* Vibrant */
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);

/* Professional */
background: linear-gradient(135deg, #13547a 0%, #80d0c7 100%);

/* Warm */
background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);

/* Cool */
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);

Mesh Gradients

/* Modern mesh gradient */
background: 
  radial-gradient(at 40% 20%, hsla(28,100%,74%,1) 0px, transparent 50%),
  radial-gradient(at 80% 0%, hsla(189,100%,56%,1) 0px, transparent 50%),
  radial-gradient(at 0% 50%, hsla(355,100%,93%,1) 0px, transparent 50%),
  radial-gradient(at 80% 100%, hsla(340,100%,76%,1) 0px, transparent 50%),
  radial-gradient(at 0% 100%, hsla(22,100%,77%,1) 0px, transparent 50%),
  radial-gradient(at 0% 0%, hsla(242,100%,70%,1) 0px, transparent 50%);

Accessibility Color Combinations

WCAG AAA Compliant

/* Dark on Light */
--text: #000000;
--background: #FFFFFF;
/* Contrast ratio: 21:1 */

/* Blue on White */
--text: #003D82;
--background: #FFFFFF;
/* Contrast ratio: 11.5:1 */

/* White on Dark Blue */
--text: #FFFFFF;
--background: #003D82;
/* Contrast ratio: 11.5:1 */

WCAG AA Compliant

/* Gray on White */
--text: #595959;
--background: #FFFFFF;
/* Contrast ratio: 7:1 */

/* Blue on Light Gray */
--text: #0066CC;
--background: #F5F5F5;
/* Contrast ratio: 5.4:1 */

Color Application Strategies

Monochromatic Sophistication

/* Use single hue with varied saturation/lightness */
--mono-100: hsl(220, 60%, 95%);
--mono-200: hsl(220, 60%, 85%);
--mono-300: hsl(220, 60%, 70%);
--mono-400: hsl(220, 60%, 55%);
--mono-500: hsl(220, 60%, 40%);
--mono-600: hsl(220, 60%, 30%);
--mono-700: hsl(220, 60%, 20%);
--mono-800: hsl(220, 60%, 10%);

Analogous Harmony

/* Adjacent colors for cohesion */
--primary: hsl(200, 70%, 50%);    /* Blue */
--secondary: hsl(180, 70%, 50%);  /* Cyan */
--tertiary: hsl(220, 70%, 50%);   /* Blue-violet */

Triadic Energy

/* Three equidistant colors */
--primary: hsl(10, 80%, 50%);     /* Red-orange */
--secondary: hsl(130, 80%, 50%);  /* Green */
--tertiary: hsl(250, 80%, 50%);   /* Blue-violet */

Shadow Color Systems

Colored Shadows

/* Blue tinted shadows */
box-shadow: 
  0 1px 3px rgba(59, 130, 246, 0.15),
  0 1px 2px rgba(59, 130, 246, 0.3);

/* Warm shadows */
box-shadow: 
  0 4px 6px rgba(139, 92, 78, 0.07),
  0 1px 3px rgba(139, 92, 78, 0.12);

/* Purple glow */
box-shadow: 
  0 0 20px rgba(139, 92, 246, 0.2),
  0 0 40px rgba(139, 92, 246, 0.1);

Quick Color Decisions

For "Professional/Corporate"

• Primary: Deep blue (#003D82)
• Neutrals: Cool grays
• Accent: Minimal, muted

For "Modern/Tech"

• Primary: Indigo/Purple gradient
• Neutrals: True neutrals
• Accent: Bright, electric

For "Friendly/Approachable"

• Primary: Teal or green
• Neutrals: Warm grays
• Accent: Orange or yellow

For "Luxury/Premium"

• Primary: Deep purple or burgundy
• Neutrals: Rich blacks
• Accent: Gold or copper

Data Visualization Principles & Techniques

A systematic guide to creating clear, honest, and elegant data visualizations. Grounded in Edward Tufte's foundational principles with practical implementation using Tailwind CSS.

Core Principles (Tufte)

1. Data-Ink Ratio

Maximize the share of ink (or pixels) devoted to displaying actual data. Every visual element should earn its place.

Data-Ink Ratio = Data-Ink / Total Ink Used

Goal: Approach 1.0 by removing non-data ink

In practice:

• Remove background fills from chart areas
• Eliminate grid lines or reduce to border-gray-100 at most
• Remove chart borders and boxes
• Strip redundant labels (if the axis says "Revenue ($M)", don't repeat it in a title)
• Let data points carry the message, not decoration

Tailwind application:

<!-- BAD: Heavy chrome, low data-ink ratio -->
<div class="bg-gray-100 border-2 border-gray-300 rounded-lg p-6 shadow-lg">
  <div class="bg-white border border-gray-200 p-4">
    <!-- chart with gridlines, borders, background -->
  </div>
</div>

<!-- GOOD: Minimal chrome, high data-ink ratio -->
<div class="p-6">
  <div class="border-b border-gray-200">
    <!-- chart with minimal axis, no gridlines -->
  </div>
</div>

2. Graphical Integrity

Never distort what the data says. The visual representation should match the numerical reality.

The Lie Factor:

Lie Factor = Size of Effect Shown in Graphic / Size of Effect in Data

Acceptable range: 0.95 – 1.05

Common violations to avoid:

• Truncated baselines that exaggerate differences
• 3D effects that distort area perception
• Inconsistent scales between compared charts
• Dual axes that create false correlations
• Area/volume encodings where only one dimension changes

Rules:

• Bar charts must start at zero
• Line charts may use meaningful baselines but must label them
• When comparing charts, use identical scales
• Label axes clearly with units
• Show the data range honestly

3. Chartjunk Elimination

Remove visual elements that don't convey information. Decoration competes with data for the viewer's attention.

Types of chartjunk:

• Moiré vibration: Patterned fills (hatching, crosshatching) that create optical noise
• Grid excess: Dense gridlines that overpower data
• Decorative elements: Icons, illustrations, 3D effects, gradients on data elements
• Redundant encoding: Using color AND pattern AND label for the same dimension
• Duck charts: When the chart's container is shaped like its subject matter

What to remove:

✗ Background colors on chart areas
✗ Gradient fills on bars
✗ 3D perspective on any chart
✗ Heavy gridlines
✗ Box borders around legends
✗ Unnecessary axis lines (use data to imply axis)
✗ Decorative icons mixed with data
✗ Shadow effects on data elements

What to keep:

✓ Direct labels on data (replaces legends when possible)
✓ Light reference lines for key thresholds
✓ Subtle gridlines when comparison requires them
✓ Axis labels with units
✓ Source attribution

4. Small Multiples

Repeat the same chart structure across panels to show variation across conditions, time periods, or categories. Once viewers understand one panel, they immediately understand all of them.

When to use:

• Comparing the same measure across 4+ categories
• Showing change over time across groups
• Revealing patterns that aggregate views hide
• Replacing legend-heavy multi-series charts

Implementation:

<!-- Small multiples grid -->
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
  <!-- Each panel: identical structure, different data -->
  <div class="space-y-2">
    <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Region A</p>
    <div class="h-32"><!-- chart --></div>
  </div>
  <!-- Repeat for each category -->
</div>

Rules for small multiples:

• Identical scales across all panels (critical)
• Consistent axis ranges — let the data vary, not the frame
• Minimal per-panel labeling — label the structure once
• Panel titles should be the only varying text
• Use gap-4 or gap-6 — enough separation without wasting space

5. Micro/Macro Readings

Design visualizations that work at multiple scales — a reader can see the big picture at a glance AND drill into details on closer inspection.

Techniques:

• Overview + detail: summary numbers above, detailed chart below
• Sparklines inline with text or tables for trend-at-a-glance
• Interactive tooltips that reveal detail on hover
• Annotation layers that add context without obscuring data

Tailwind pattern:

<!-- Macro: KPI summary -->
<div class="flex gap-8 mb-8">
  <div>
    <p class="text-3xl font-semibold text-gray-900 tabular-nums">$2.4M</p>
    <p class="text-sm text-gray-500">Revenue</p>
  </div>
  <div>
    <p class="text-3xl font-semibold text-emerald-600 tabular-nums">+12.3%</p>
    <p class="text-sm text-gray-500">vs. Last Quarter</p>
  </div>
</div>

<!-- Micro: Detailed breakdown below -->
<div class="border-t border-gray-100 pt-6">
  <!-- detailed chart or table -->
</div>

6. Layering and Separation

Organize complex information through visual layers using color, weight, and spatial separation — not boxes and borders.

Layer hierarchy (back to front): 1. Background: bg-white or bg-gray-50 — completely neutral 2. Grid/reference: text-gray-200 — barely visible 3. Secondary data: text-gray-400 — supporting context 4. Primary data: text-gray-900 or brand color — the story 5. Annotations: text-gray-500 with text-xs — context on demand

Separation techniques:

• Use whitespace, not borders, to separate groups
• Use opacity/lightness differences, not color differences, for layers
• Reserve strong color for the 1-2 data series that matter most
• Push everything else toward gray

Chart Selection Framework

Choose by Data Relationship

Chart-Specific Rules

Bar Charts:

• Always start y-axis at zero
• Horizontal bars when labels are long or items > 7
• Sort by value (not alphabetically) unless there's a natural order
• Bar width > gap width
• Direct label bars when there are < 10
• Use rounded-t or rounded-t-sm for subtle polish

Line Charts:

• Maximum 4-5 series before using small multiples
• Line weight: stroke-[1.5px] to stroke-2 — never heavy
• Use dots at data points only when individual values matter
• Aspect ratio matters: wider = gentler slopes = less dramatic
• Label lines directly (end-of-line labels) instead of legends when possible

Scatter Plots:

• Include trend line only when correlation exists
• Dot size: w-2 h-2 to w-3 h-3 — small enough to see density
• Use opacity (opacity-60) when dots overlap
• Label outliers directly

Heatmaps:

• Use a single sequential palette (e.g., blue-50 to blue-900)
• Diverging palette only when there's a meaningful midpoint
• Always include a color scale legend
• Cell labels improve accuracy — color alone is imprecise
• Sort rows/columns to reveal clusters

Funnel Charts:

• Show each stage as a proportion of the previous stage
• Label both the count and the conversion rate at each step
• Use a single hue in decreasing saturation, or gray with one highlight stage
• Best when stages are truly sequential (awareness → conversion → retention)

Bullet Charts:

• Encode target as a thin line marker, actual as a bar
• Use qualitative ranges (poor/satisfactory/good) as background bands in gray-100, gray-200, gray-300
• Much more space-efficient than gauges or dials

Grouped Bar Charts:

• Maximum 3-4 groups per cluster before visual overload
• Use consistent color assignment across clusters
• Consider small multiples if groups exceed 4

Violin Plots / Density Curves:

• Show distribution shape, not just summary statistics
• Pair with box plot overlay for median/quartile reference
• Use fill-opacity: 0.3 for the violin area, solid stroke for outline
• Mirror violin plots horizontally for symmetry

Tables (as visualization):

• Right-align numbers, left-align text
• Use tabular-nums for number columns
• Subtle row striping: even:bg-gray-50
• Bold or color-highlight the most important column
• Consider sparklines in a column for trend context
• Conditionally color cells for magnitude (mini heatmap in table)

Color in Data Visualization

Tufte's Color Principles

Color should label, measure, represent, or highlight — never merely decorate.

Restraint first:

• Default to grays; add color only when it encodes meaning
• One highlight color to draw attention to the key finding
• Muted tones for data; saturated only for emphasis
• If removing color would lose information, it's earning its place

Categorical Palette (Tailwind-based)

For distinguishing unrelated categories (max 6-8 before confusion):

--cat-1: theme('colors.blue.500');      /* #3b82f6 */
--cat-2: theme('colors.emerald.500');   /* #10b981 */
--cat-3: theme('colors.amber.500');     /* #f59e0b */
--cat-4: theme('colors.violet.500');    /* #8b5cf6 */
--cat-5: theme('colors.rose.500');      /* #f43f5e */
--cat-6: theme('colors.cyan.500');      /* #06b6d4 */

Use the 400 variant for secondary emphasis, 600 for dark backgrounds.

Sequential Palette (Tailwind-based)

For showing magnitude/intensity in a single hue:

/* Blue sequential — for continuous data */
--seq-1: theme('colors.blue.50');   /* lightest = lowest */
--seq-2: theme('colors.blue.100');
--seq-3: theme('colors.blue.200');
--seq-4: theme('colors.blue.300');
--seq-5: theme('colors.blue.500');
--seq-6: theme('colors.blue.700');
--seq-7: theme('colors.blue.900');  /* darkest = highest */

Diverging Palette (Tailwind-based)

For showing deviation from a midpoint (e.g., positive/negative, above/below average):

--div-neg-3: theme('colors.rose.700');
--div-neg-2: theme('colors.rose.500');
--div-neg-1: theme('colors.rose.200');
--div-mid:   theme('colors.gray.100');
--div-pos-1: theme('colors.emerald.200');
--div-pos-2: theme('colors.emerald.500');
--div-pos-3: theme('colors.emerald.700');

Highlight Pattern

The most powerful dataviz color technique: gray everything out, then use one color to spotlight the finding.

<!-- All series in gray except the one that matters -->
<div class="text-gray-300"><!-- Series A line --></div>
<div class="text-gray-300"><!-- Series B line --></div>
<div class="text-blue-600 font-medium"><!-- Series C: the story --></div>
<div class="text-gray-300"><!-- Series D line --></div>

Accessibility Requirements

• Never use color alone to encode meaning — pair with shape, pattern, or label
• Minimum 3:1 contrast ratio for graphical elements against background
• Test with deuteranopia (red-green) simulation — avoid red/green as the only distinguishing pair
• Provide text alternatives: direct labels, data tables, or alt text
• Use Tailwind's 500+ shades on white for sufficient contrast

Sparklines & Inline Graphics

Small, word-sized graphics that sit inline with text or table cells. Tufte's invention for showing trend without interrupting flow.

Characteristics:

• No axes, labels, or gridlines
• Same height as surrounding text
• Show shape of data, not precise values
• Highlight min, max, or current value with a dot

<!-- Sparkline in a table cell -->
<td class="align-middle">
  <svg class="inline-block h-4 w-16" viewBox="0 0 64 16">
    <polyline
      points="0,12 8,10 16,14 24,8 32,6 40,9 48,4 56,3 64,2"
      fill="none"
      stroke="currentColor"
      class="text-gray-400"
      stroke-width="1.5"
    />
    <circle cx="64" cy="2" r="2" class="fill-emerald-500" />
  </svg>
</td>

Annotation Best Practices

Annotations add narrative to data. They answer "so what?" without cluttering.

Hierarchy of annotation: 1. Title: The finding, not the chart type ("Revenue grew 23% in Q3" not "Revenue by Quarter") 2. Subtitle: Context or methodology in text-sm text-gray-500 3. Inline annotations: Callouts on specific data points that matter 4. Source line: text-xs text-gray-400 at the bottom

Tailwind pattern:

<div class="space-y-1 mb-6">
  <h3 class="text-base font-semibold text-gray-900">
    Revenue grew 23% after the pricing change
  </h3>
  <p class="text-sm text-gray-500">
    Monthly recurring revenue, Jan–Dec 2025. Arrow marks pricing update.
  </p>
</div>

<!-- Chart with annotation -->
<div class="relative">
  <!-- chart -->
  <div class="absolute top-4 right-8 text-xs text-gray-500 max-w-[140px] leading-tight">
    <span class="block w-px h-6 bg-gray-300 mx-auto mb-1"></span>
    Pricing change took effect March 15
  </div>
</div>

<!-- Source -->
<p class="text-xs text-gray-400 mt-4">Source: Internal billing data</p>

Dashboard Composition

Information Hierarchy

Dashboards are not collections of charts — they are arguments made with data. Structure them with clear hierarchy:

1. KPI bar (top): 3-5 headline numbers with trend indicators 2. Primary visualization: The main chart that tells the story 3. Supporting charts: 2-3 smaller charts that provide context 4. Detail layer: Tables or lists for drill-down

Layout with Tailwind

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-8">

  <!-- KPI Bar -->
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
    <div class="bg-white rounded-lg p-4 border border-gray-100">
      <p class="text-sm text-gray-500">Total Revenue</p>
      <p class="text-2xl font-semibold text-gray-900 tabular-nums">$2.4M</p>
      <p class="text-sm text-emerald-600">↑ 12.3%</p>
    </div>
    <!-- repeat for other KPIs -->
  </div>

  <!-- Primary Chart -->
  <div class="bg-white rounded-lg p-6 border border-gray-100">
    <!-- main visualization, full width -->
  </div>

  <!-- Supporting Charts -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="bg-white rounded-lg p-6 border border-gray-100">
      <!-- supporting chart A -->
    </div>
    <div class="bg-white rounded-lg p-6 border border-gray-100">
      <!-- supporting chart B -->
    </div>
  </div>

</div>

Card Design for Charts

<div class="bg-white rounded-lg border border-gray-100 overflow-hidden">
  <div class="px-6 pt-5 pb-2">
    <h3 class="text-sm font-medium text-gray-900">Chart Title as Finding</h3>
    <p class="text-xs text-gray-500 mt-0.5">Supporting context</p>
  </div>
  <div class="px-2 pb-4">
    <!-- chart content — less horizontal padding so chart breathes -->
  </div>
</div>

Number Formatting

Consistent number formatting is a form of data integrity.

Always use `tabular-nums` (or `font-variant-numeric: tabular-nums`) for number columns — this prevents digits from shifting as values change.

Anti-Patterns Checklist

Before delivering any data visualization, verify none of these are present:

✗ Pie chart with more than 5 slices
✗ 3D effects on any chart type
✗ Dual y-axes (use small multiples or indexed values instead)
✗ Truncated bar chart baseline
✗ Rainbow color palette (unordered, inaccessible)
✗ Legend that requires eye-scanning back and forth (use direct labels)
✗ Chart that requires a paragraph of explanation to understand
✗ Decorative illustrations mixed with data graphics
✗ Inconsistent number formatting within a dashboard
✗ Missing source attribution
✗ Axis without units
✗ Default chart library styling (Excel blue, Chart.js defaults)
✗ Unnecessary animation on data elements
✗ Donut chart with a number in the center that doesn't match the donut

Quick Reference: Tufte's Rules

1. Show the data — above all else 2. Maximize the data-ink ratio — erase non-data ink 3. Erase redundant data-ink — don't encode the same data twice 4. Revise and edit — data graphics benefit from iteration 5. The number of information-carrying dimensions should not exceed the dimensions in the data 6. Graphics must not quote data out of context 7. Use small multiples — the best design solution for showing repetition and change 8. Integrate text, graphics, and data — they belong together 9. Content is king — quality, relevance, and integrity of data matter most 10. Induce the viewer to think about substance, not methodology or design

Design Exemplars & Reference Library

Study these examples and principles when elevating designs. Each represents excellence in specific aspects of visual design.

Digital Product Excellence

Stripe

What they do exceptionally:

• Gradient mesh backgrounds with subtle animation
• Perfect typography with custom typefaces
• Micro-interactions that feel precise
• Color that's vibrant yet sophisticated
• Technical concepts made visually beautiful

Key techniques to borrow:

/* Stripe-style gradient */
background: linear-gradient(
  150deg,
  hsl(250, 100%, 97%) 0%,
  hsl(280, 100%, 98%) 30%,
  hsl(340, 100%, 97%) 60%,
  hsl(220, 100%, 98%) 100%
);

/* Their shadow system */
box-shadow: 
  0 5px 10px rgba(50, 50, 93, 0.12),
  0 3px 6px rgba(0, 0, 0, 0.08);

/* Typography scale */
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 17px;
line-height: 28px;
letter-spacing: -0.01em;

Linear

What they do exceptionally:

• Dark mode that feels premium
• Keyboard-first interactions
• Precise, minimal interface
• Beautiful empty states
• Consistent 4px grid system

Key techniques to borrow:

/* Linear-style dark theme */
--background: #0c0c0c;
--surface: #161616;
--text-primary: #f4f4f4;
--text-secondary: #999999;
--accent: #5e6ad2;

/* Their border style */
border: 1px solid rgba(255, 255, 255, 0.08);

/* Subtle backdrop blur */
backdrop-filter: blur(20px);
background: rgba(12, 12, 12, 0.7);

Notion

What they do exceptionally:

• Clean, readable typography
• Flexible layouts that don't feel chaotic
• Subtle interactions
• Great use of white space
• Emoji as functional elements

Key techniques to borrow:

• 40px line height for comfortable reading
• Serif for headings, sans for body
• Generous padding (20-40px)
• Subtle hover states (+5% background)
• Light borders (1px, 10% opacity)

Apple

What they do exceptionally:

• Photography and type integration
• Dramatic scale contrasts
• Perfect technical specifications
• Animation that teaches
• Premium feel through restraint

Key techniques to borrow:

• SF Pro Display for headlines
• Massive type (80-120px) for impact
• Pure black/white for drama
• 0.03s transitions for instant response
• Generous margins (10-15% of viewport)

Trimble Modus

What they do exceptionally:

• Enterprise-grade design system for field + office workers
• Consistent component patterns across a massive product portfolio
• Professional, utilitarian aesthetic — functional over decorative
• Full light/dark mode with comprehensive token system
• Accessible by default (WCAG 2.1 AA)

Key techniques to borrow:

/* Modus foundations */
font-family: 'Open Sans', system-ui, sans-serif;
font-size: 14px; /* Body is 14px, not 16px */
border-radius: 4px; /* Universal — never larger */
box-shadow: 0 0 4px rgba(36, 35, 45, 0.3); /* Uniform, no direction */
color: #252A2E; /* Trimble Gray for body text */
--primary: #0063A3; /* Trimble Blue */

Full reference: See references/modus-design-system.md for complete token tables, component specs, dark mode values, and data visualization palettes.

IBM Carbon

What they do exceptionally:

• Structured, geometric aesthetic with sharp corners (0px radius)
• IBM Plex type family (Sans, Mono, Serif) — one of the best open-source type families
• 2x grid system with rigorous spatial logic
• Four-theme architecture (White, g10, g90, g100)
• Information-dense enterprise interfaces that remain clear

Key techniques to borrow:

/* Carbon foundations */
font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
font-size: 14px;
border-radius: 0; /* Sharp corners — Carbon's signature */
color: #161616; /* Gray 100 */
--interactive: #0f62fe; /* Blue 60 */
--layer-01: #f4f4f4; /* Gray 10 */

Full reference: See references/carbon-design-system.md for complete token tables, component specs, theme values, and data visualization palettes.

Shopify Polaris

What they do exceptionally:

• Merchant-friendly, approachable-yet-professional aesthetic
• Warm neutral palette with subtle shadows and beveled buttons
• Dark primary buttons (#303030, not blue) — distinctive choice
• Excellent resource list and index table patterns for commerce
• Skeleton loading states and progressive disclosure

Key techniques to borrow:

/* Polaris foundations */
font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 13px; /* Compact body text */
border-radius: 8px; /* Cards */
background: #f1f1f1; /* Page background */
color: #303030; /* Primary text */
--interactive: #005bd3; /* Links and interactive */

Full reference: See references/polaris-design-system.md for complete token tables, component specs, dark mode values, and data visualization palettes.

Adobe Spectrum

What they do exceptionally:

• Four color themes (Lightest, Light, Dark, Darkest) with seamless switching
• Two scale modes (Medium for desktop, Large for touch)
• Three-layer token architecture (global → alias → component)
• Rich creative-tool UI patterns optimized for professional workflows
• Comprehensive motion and animation system

Key techniques to borrow:

/* Spectrum foundations */
font-family: 'Adobe Clean', adobe-clean, 'Source Sans Pro', sans-serif;
font-size: 14px;
border-radius: 4px; /* Controls */
color: #222222; /* Body text */
--accent: #0D80D8; /* Accent blue (light theme) */
--background: #F5F5F5; /* Layer 1 background */

Full reference: See references/spectrum-design-system.md for complete token tables, component specs, theme values, and data visualization palettes.

Salesforce Lightning (SLDS)

What they do exceptionally:

• Massive enterprise design system serving the world's largest CRM ecosystem
• Distinctive brand blue (#0176d3) with confident page headers
• Comprehensive utility class system (slds- prefix)
• Record-detail and list-view patterns optimized for CRM workflows
• Robust icon system with standard object colors

Key techniques to borrow:

/* Lightning/SLDS foundations */
font-family: 'Salesforce Sans', Arial, sans-serif;
font-size: 13px; /* Compact body */
border-radius: 4px; /* 0.25rem default */
color: #181818; /* Primary text */
--brand: #0176d3; /* Brand blue */
--page-header-bg: #f3f3f3;

Full reference: See references/lightning-design-system.md for complete token tables, component specs, dark mode values, and data visualization palettes.

Design Movements & Principles

Swiss/International Style

Core principles:

• Grid-based layouts
• Sans-serif typography
• Objective photography
• Asymmetric balance
• Mathematical spacing

Application:

Grid: 12 columns, 20px gutters
Type: Helvetica Neue, single weight variations
Colors: Black, white, one accent
Images: Full-bleed or strict grid alignment
Spacing: Multiples of base unit

Bauhaus

Core principles:

• Form follows function
• Geometric shapes
• Primary colors
• Experimental typography
• Industrial materials

Application:

• Use circles, squares, triangles as design elements
• Bold color blocks
• Overlapping transparent shapes
• Diagonal typography
• Visible structure/grid

Japanese Minimalism

Core principles:

• Ma (negative space)
• Wabi-sabi (imperfect beauty)
• Asymmetric balance
• Natural materials/colors
• Single focal points

Application:

• 60%+ white space
• One hero element
• Muted, natural palette
• Subtle texture/grain
• Careful typography placement

Brutalist Web Design

Core principles:

• Raw, unpolished aesthetic
• Bold, uncomfortable typography
• Harsh contrasts
• Exposed structure
• Anti-beauty

Application:

• Monospace fonts
• Black borders
• Clashing colors
• Broken grid
• System UI elements

Excellence by Category

Presentation Design

McKinsey Style

• Navy and gray palette
• Strictly aligned elements
• Data-heavy but clear
• Conservative typography
• Build complexity gradually

Apple Keynote Style

• One idea per slide
• Massive typography
• Full-bleed imagery
• Dramatic transitions
• Perfect center alignment

Pitch Deck Style

• Bold statement slides
• Consistent icon style
• Strong color coding
• Clear data visualization
• Memorable opening/closing

Dashboard Design

Analytics Excellence

• Clear KPI hierarchy
• Consistent card system
• Muted color palette
• Sparklines over charts
• Progressive disclosure

Executive Dashboard

• High-level metrics first
• Traffic light colors
• Minimal interaction needed
• Print-friendly design
• Clear period comparisons

Operational Dashboard

• Real-time indicators
• Dense but organized
• Interactive filtering
• Drill-down capability
• Alert highlighting

Document Design

Annual Report Style

• Strong typographic hierarchy
• Professional photography
• Infographic integration
• Consistent color coding
• Clear section breaks

Technical Documentation

• Structured layouts
• Code highlighting
• Numbered sections
• Visual callouts
• Comprehensive indexes

Editorial Design

• Beautiful typography
• Pull quotes
• Drop caps
• Image captions
• Columnar layouts

Color Excellence References

Sophisticated Palettes

Monochromatic Executive

#000814 - Deep navy
#001D3D - Navy
#003566 - Blue
#FFC300 - Gold accent
#FFD60A - Light gold

Tech Gradient

#667EEA - Purple
#764BA2 - Magenta
#F093FB - Pink
#C7F0FF - Cyan

Earth Tone Professional

#3D405B - Charcoal
#81B29A - Sage
#F2CC8F - Sand
#E07A5F - Terracotta

Data Visualization

#003F5C - Deep blue
#2F4B7C - Royal
#665191 - Purple
#A05195 - Magenta
#D45087 - Pink
#F95D6A - Coral
#FF7C43 - Orange
#FFA600 - Amber

Typography Combinations

Classic Pairings

• Helvetica Neue + Georgia: Clean and trustworthy
• Futura + Sabon: Geometric and humanist
• Inter + Merriweather: Modern web standard
• SF Pro + New York: Apple's system

Modern Pairings

• Pangram Sans + Pangram Display: Trendy and bold
• GT America + GT Super: Contemporary American
• Founders Grotesk + Tiempos: Hip and editorial
• Akkurat + Akkurat Mono: Systematic precision

Display Combinations

• Bebas Neue + Open Sans: Impact and clarity
• Playfair Display + Lato: Editorial elegance
• Montserrat + Crimson: Modern classic
• DM Serif + DM Sans: Designed to match

Animation & Motion References

Meaningful Transitions

/* Apple-style snap */
transition: all 0.3s cubic-bezier(0.4, 0, 0, 1);

/* Google Material ease */
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

/* Stripe smooth */
transition: all 0.15s ease;

/* Linear instant */
transition: all 0.03s linear;

Loading States

• Skeleton screens over spinners
• Progressive image loading
• Staggered list appearance
• Smooth progress bars
• Pulsing placeholders

Micro-Interactions

• Button depth on hover
• Link underline reveal
• Card lift on hover
• Icon rotation on click
• Color transition on focus

Specific Technique References

For "Make it feel premium"

Reference: Apple, Stripe, Rolls Royce

• Generous white space
• Perfect typography
• Subtle animations
• Deep blacks/pure whites
• Exceptional photography

For "Make it feel technical"

Reference: Bloomberg Terminal, GitHub, Linear

• Monospace accents
• Data density
• Muted colors
• Precise alignment
• Technical annotations

For "Make it feel approachable"

Reference: Mailchimp, Duolingo, Headspace

• Rounded corners
• Friendly colors
• Hand-drawn elements
• Casual typography
• Playful interactions

For "Make it feel trustworthy"

Reference: IBM, Microsoft, Government

• Conservative colors
• Traditional typography
• Symmetric layouts
• Official seals/logos
• Formal language

Rules from the Masters

Dieter Rams' Principles

1. Good design is innovative 2. Good design makes a product useful 3. Good design is aesthetic 4. Good design makes a product understandable 5. Good design is unobtrusive 6. Good design is honest 7. Good design is long-lasting 8. Good design is thorough down to the last detail 9. Good design is environmentally friendly 10. Good design is as little design as possible

Massimo Vignelli's Rules

• Use few typefaces
• Use few type sizes
• Limit line length
• Lead the eye with hierarchy
• Use color functionally
• Design with grids
• Embrace white space
• Be consistent

Paul Rand's Wisdom

• "Design is so simple, that's why it's so complicated"
• "Everything is design. Everything!"
• "Simplicity is not the goal. It is the by-product of a good idea and modest expectations"

Quick Reference Checklist

When elevating, ask:

• What would Jony Ive remove?
• How would Dieter Rams simplify this?
• What would Massimo Vignelli's grid be?
• How would Paula Scher make this bold?
• What would Stefan Sagmeister make unexpected?
• How would Jessica Walsh add delight?
• What would Erik Spiekermann's typography be?

Remember: Don't copy—translate principles into your context.

Design Interrogation Checklist

A systematic framework for questioning and elevating every design decision. Apply these questions before delivering any visual output.

Foundation Questions

Purpose & Context

• [ ] Does the design serve its primary purpose without distraction?
• [ ] Is the visual language appropriate for the audience and context?
• [ ] Have I considered the viewing environment (screen, print, projection)?
• [ ] Does it work at different sizes/resolutions?

First Impressions

• [ ] What would a designer from Pentagram think of this?
• [ ] Does it feel crafted or templated?
• [ ] Is there a clear focal point within 2 seconds?
• [ ] Does it feel premium or generic?

Typography Interrogation

Hierarchy

• [ ] Can I scan the content structure in 3 seconds?
• [ ] Are there more than 3 levels of hierarchy? (Usually too many)
• [ ] Is the hierarchy achieved through size, weight, AND spacing?
• [ ] Could I remove a level of hierarchy?

Type Choices

• [ ] Am I using system fonts by default or by choice?
• [ ] Do the typefaces have the right voice?
• [ ] Is the contrast between sizes dramatic enough?
• [ ] Have I considered optical sizing for display text?

Refinement

• [ ] Is the line height appropriate for the measure?
• [ ] Are there orphans or widows that break reading flow?
• [ ] Is tracking adjusted for display sizes?
• [ ] Do quotes and apostrophes use proper typography?

Color Interrogation

System

• [ ] Is there a clear color logic or is it arbitrary?
• [ ] Am I using pure black (#000000)? (Usually wrong)
• [ ] Do neutrals have subtle temperature?
• [ ] Is the palette accessibility compliant?

Application

• [ ] Does color serve function or just decoration?
• [ ] Is there semantic meaning to color choices?
• [ ] Could I remove a color and improve clarity?
• [ ] Is color used consistently across similar elements?

Sophistication

• [ ] Are there subtle color relationships (analogous, triadic)?
• [ ] Do backgrounds use near-whites or near-blacks?
• [ ] Are shadows colored (not just black opacity)?
• [ ] Is there intentional color vibration anywhere?

Layout Interrogation

Grid

• [ ] Is there an underlying grid or is placement arbitrary?
• [ ] Are elements aligned to each other intentionally?
• [ ] Does the grid create clear zones and relationships?
• [ ] Is the grid invisible but felt?

Balance

• [ ] Is visual weight distributed intentionally?
• [ ] Does asymmetry feel deliberate or accidental?
• [ ] Are there dead zones that need activation?
• [ ] Is there enough negative space?

Flow

• [ ] Is the reading path clear and logical?
• [ ] Do elements lead the eye deliberately?
• [ ] Are related items grouped effectively?
• [ ] Does spacing reinforce relationships?

Detail Interrogation

Consistency

• [ ] Are similar elements treated identically?
• [ ] Is there a clear system for variations?
• [ ] Do patterns repeat with intention?
• [ ] Are corner radii, shadows, borders systematic?

Refinement

• [ ] Are there default software elements showing?
• [ ] Have I replaced generic icons with specific ones?
• [ ] Are transitions and animations purposeful?
• [ ] Do interactive states feel considered?

Polish

• [ ] Would this look good printed and framed?
• [ ] Are there tiny details that show craft?
• [ ] Does zooming in reveal attention to detail?
• [ ] Have I removed everything unnecessary?

Data Visualization Interrogation

Data Integrity (Tufte)

• [ ] Does the visual representation honestly match the numerical data?
• [ ] Is the lie factor between 0.95 and 1.05?
• [ ] Do bar charts start at zero?
• [ ] Are compared charts using identical scales?
• [ ] Are there any 3D effects distorting perception?
• [ ] Is a dual-axis chart creating false correlations? (Use small multiples instead)

Data-Ink Ratio

• [ ] Can I remove this gridline without losing clarity?
• [ ] Can I remove the chart border/box?
• [ ] Can I remove the background fill?
• [ ] Is there redundant encoding (color AND pattern AND label for the same thing)?
• [ ] Can I replace the legend with direct labels on the data?
• [ ] Are there decorative elements competing with the data?

Chart Selection

• [ ] Is this the right chart type for this data relationship?
• [ ] Would small multiples be clearer than a multi-series chart?
• [ ] Am I using a pie chart with more than 5 slices? (Switch to bar chart)
• [ ] Would a simple table be more effective than this chart?
• [ ] Does the chart need to exist, or can a single number tell the story?

Storytelling

• [ ] Does the title state the finding, not the chart type?
• [ ] Is there a clear "so what?" for the viewer?
• [ ] Are key data points annotated with context?
• [ ] Is the source attributed?
• [ ] Are numbers formatted consistently (currency, %, abbreviation)?

Accessibility

• [ ] Can the data be understood without color alone?
• [ ] Do graphical elements have 3:1 contrast against background?
• [ ] Is a text alternative provided (data table, alt text)?
• [ ] Are red/green used as the only distinguishing pair? (Fix for deuteranopia)
• [ ] Are number columns using tabular-nums for alignment?

Comparison Questions

Against Excellence

• [ ] How does this compare to Apple's presentations?
• [ ] Would this fit in Stripe's design system?
• [ ] Does it have Linear's attention to detail?
• [ ] Could this be in a Dieter Rams exhibition?

Against Defaults

• [ ] What would the generic version look like?
• [ ] How far have I pushed from the template?
• [ ] Which decisions are uniquely mine?
• [ ] What makes this feel expensive?

Against Expectations

• [ ] Does this exceed what was asked for?
• [ ] Are there delightful surprises?
• [ ] Will the user notice the quality immediately?
• [ ] Does it feel like multiple iterations?

Final Checks

The Squint Test

• [ ] Does the hierarchy survive squinting?
• [ ] Are the main zones clear when blurred?
• [ ] Is contrast sufficient throughout?

The Reduction Test

• [ ] What happens if I remove this element?
• [ ] Can I simplify further without losing function?
• [ ] Is every element earning its space?

The Context Test

• [ ] Does this feel right for the brand/company?
• [ ] Is it appropriate for the use case?
• [ ] Will it age well or feel dated quickly?

The Pride Test

• [ ] Would I put this in my portfolio?
• [ ] Would I show this to a design hero?
• [ ] Does this represent excellent craft?
• [ ] Am I genuinely proud of this?

Red Flags to Fix

• Using pure black text on pure white
• More than 3 font sizes in one view
• Centered text in paragraphs
• Default software colors (Excel blue, PowerPoint orange)
• Inconsistent spacing between elements
• Multiple corner radius values without logic
• Drop shadows without purpose
• Decorative elements without function
• Default system fonts without intention
• Equal spacing everywhere (no hierarchy)
• Icons from different families
• Arbitrary color choices
• Missing hover/active states
• Undefined grid or alignment
• Generic stock imagery
• Default chart styles (Excel blue, Chart.js defaults)
• System UI elements showing
• Pie chart with more than 5 slices
• 3D effects on any chart
• Truncated bar chart baseline
• Dual y-axes creating false correlation
• Chart title describing chart type instead of finding
• Legend requiring eye-scanning back and forth (use direct labels)
• Missing source attribution on data
• Rainbow color palette on categorical data

Design Elevation Protocol

A systematic process for transforming functional outputs into exceptional designs. Follow these phases in order, spending appropriate time on each based on the output complexity.

Phase 1: Foundation Analysis (2-3 minutes)

Content Audit

1. Identify the core message

• What's the single most important thing?
• What are the supporting points?
• What can be removed?

2. Map the information hierarchy

• Primary: What must be seen first?
• Secondary: What supports the primary?
• Tertiary: What's nice to have?
• Metadata: What's functional but not focal?

3. Determine the appropriate design language

• Corporate → Clean, trustworthy, stable
• Technical → Precise, systematic, data-focused
• Creative → Expressive, dynamic, unexpected
• Analytical → Clear, logical, evidence-based

Context Assessment

• Audience: Technical, executive, general?
• Environment: Screen, print, projection?
• Duration: Glance, scan, or study?
• Action: What should they do after viewing?

Phase 2: Structure Design (3-5 minutes)

Grid Establishment

1. Choose grid complexity

• Simple (2-4 columns): Documents, simple layouts
• Moderate (8-12 columns): Presentations, reports
• Complex (12-16 columns): Dashboards, interfaces

2. Define spatial units

   Base unit: 8px (or 4px for dense interfaces)
   Spacing scale: 1x, 2x, 3x, 4x, 6x, 8x, 12x
   Example: 8, 16, 24, 32, 48, 64, 96px

3. Set margins and safe areas

• Minimum: 2-3 grid columns for margins
• Breathing room: 20-30% of total space
• Consistent internal padding

Layout Architecture

1. Zone definition

• Header/identity zone
• Content/focus zone
• Supporting/context zone
• Navigation/action zone

2. Flow planning

• Natural reading path (F or Z pattern)
• Hierarchy through position
• Grouping related elements

3. Balance decisions

• Symmetrical for stability
• Asymmetrical for dynamics
• Radial for focus
• Mosaic for variety

Phase 3: Typography System (5-7 minutes)

Type Selection

1. Choose primary typeface

• Serif: Traditional, editorial, trustworthy
• Sans-serif: Modern, clean, universal
• Display: Unique, branded, memorable

Premium choices:

• Sans: Inter, SF Pro, Helvetica Neue, Akkurat
• Serif: Minion, Sabon, Tiempos, Freight
• Display: Pangram, Founders Grotesk, GT America

2. Set type scale

   Modular scale (1.25x - Major Third):
   12 → 15 → 19 → 24 → 30 → 37 → 46 → 58 → 72
   
   Modular scale (1.333x - Perfect Fourth):
   12 → 16 → 21 → 28 → 38 → 50 → 67 → 89
   
   Modular scale (1.5x - Perfect Fifth):
   12 → 18 → 27 → 40 → 60 → 90

3. Define styles

   /* Display */
   font-size: 48-72px;
   font-weight: 300-400;
   line-height: 1.0-1.2;
   letter-spacing: -0.02em;
   
   /* Heading */
   font-size: 24-36px;
   font-weight: 500-600;
   line-height: 1.2-1.3;
   letter-spacing: -0.01em;
   
   /* Body */
   font-size: 15-18px;
   font-weight: 400-450;
   line-height: 1.5-1.7;
   letter-spacing: 0;
   
   /* Caption */
   font-size: 12-14px;
   font-weight: 400-500;
   line-height: 1.4-1.5;
   letter-spacing: 0.01em;

Typography Refinement

1. Optical adjustments

• Tighten display type tracking
• Adjust line height for measure
• Kern problematic pairs
• Hang punctuation

2. Hierarchy reinforcement

• Size contrast (minimum 1.5x jump)
• Weight variation (300, 400, 600, 700)
• Color/opacity changes
• Spacing emphasis

Phase 4: Color Development (3-5 minutes)

Color Strategy

1. Build neutral foundation

   Near-blacks: #0a0a0a, #1a1a1a, #2d2d2d
   Mid-grays: #666, #999, #ccc
   Near-whites: #f5f5f5, #f9f9f9, #fcfcfc

2. Add primary accent

• Choose brand-appropriate hue
• Create tint/shade variations (5-7 steps)
• Test against backgrounds
• Ensure accessibility (4.5:1 minimum)

3. Develop supporting palette

• Secondary: Complement or analogous
• Semantic: Success, warning, error
• Data: 5-7 categorical colors
• Apply 60-30-10 rule

Color Application

1. Functional use

• Navigation and wayfinding
• State indication
• Data differentiation
• Emphasis and hierarchy

2. Atmospheric use

• Subtle backgrounds
• Gradient overlays
• Depth through opacity
• Temperature for mood

Phase 5: Data Visualization Elevation (5-8 minutes)

Skip if no charts, tables, or data displays are present.

Data-Ink Audit (Tufte)

1. Maximize data-ink ratio

• Remove all background fills from chart areas
• Eliminate or lighten gridlines to border-gray-100
• Strip chart borders and bounding boxes
• Question every non-data pixel: does it help the reader?

2. Eliminate chartjunk

• No 3D effects on any chart type
• No gradient fills on bars or areas
• No decorative illustrations mixed with data
• No moiré patterns (hatching, crosshatching)
• No redundant encoding (color AND pattern AND label for same dimension)

Chart Selection & Structure

3. Verify chart type matches data relationship

• Comparison → bar chart or dot plot
• Trend → line chart
• Distribution → histogram or strip plot
• Part-to-whole → stacked bar or waffle (not pie for >5 slices)
• Correlation → scatter plot (never dual-axis)

4. Apply small multiples where appropriate

• 4+ series in one chart? → split into small multiples
• Same scales across all panels (critical)
• Use grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4

Data Storytelling

5. Title states the finding, not the chart type

• "Revenue grew 23% after the pricing change" NOT "Revenue by Quarter"
• Subtitle provides methodology/context in text-sm text-gray-500

6. Label directly, minimize legends

• Direct labels on data series when possible (end-of-line labels)
• If legend required, place near the data it describes
• Use the gray-out highlight technique for emphasis

7. Format numbers consistently

• Use tabular-nums for all number columns
• Abbreviate large numbers: $2.4M, 14.2K
• Percentages: one decimal with sign (+12.3%, -4.1%)
• Color deltas: text-emerald-600 for positive, text-rose-600 for negative

Dashboard Composition

8. Structure dashboards as arguments

• KPI bar (top): 3-5 headline numbers with trend indicators
• Primary chart: the main story
• Supporting charts: 2-3 smaller context charts
• Detail layer: tables for drill-down
• Source attribution in text-xs text-gray-400

Phase 6: Visual Enhancement (5-8 minutes)

Depth and Dimension

1. Shadow system

   /* Subtle */
   box-shadow: 0 1px 3px rgba(0,0,0,0.08);
   
   /* Medium */
   box-shadow: 
     0 2px 4px rgba(0,0,0,0.06),
     0 4px 8px rgba(0,0,0,0.08);
   
   /* Elevated */
   box-shadow: 
     0 4px 6px rgba(0,0,0,0.05),
     0 10px 20px rgba(0,0,0,0.1);

2. Layering

• Background layer (subtle texture/gradient)
• Content layer (main elements)
• Overlay layer (emphasis, annotations)
• Interactive layer (hover states, tooltips)

Details and Polish

1. Micro-interactions

• Hover states (lift, glow, reveal)
• Transitions (200-300ms, ease-out)
• Loading states (skeleton, progress)
• Success feedback (color, check, animation)

2. Visual details

• Icons (consistent style, purposeful)
• Dividers (subtle, functional)
• Borders (considered width and color)
• Corner radius (systematic: 4, 8, 12, 16px)

3. Special touches

• Custom bullets or numbering
• Decorated quotes
• Subtle patterns or textures
• Brand moments

Phase 7: Optimization (3-5 minutes)

Reduction Pass

1. Remove the unnecessary

• Question every element
• Eliminate redundancy
• Simplify complex elements
• Combine similar functions

2. Clarify the essential

• Strengthen primary message
• Improve contrast where needed
• Refine alignment
• Perfect spacing

Consistency Check

1. Systematic review

• All similar elements styled identically
• Spacing follows the system
• Colors from defined palette
• Typography from defined scales

2. Edge case handling

• Long text scenarios
• Empty states
• Error conditions
• Responsive behavior

Phase 8: Final Polish (2-3 minutes)

Quality Assurance

1. Technical checks

• All text readable (contrast)
• Interactive elements obvious
• Loading performance acceptable
• Export quality appropriate

2. Design checks

• Passes squint test
• Hierarchy immediately clear
• Feels cohesive throughout
• Nothing feels default

Elevation Verification

Ask yourself:

• Does this feel crafted or generated?
• Would a designer be proud of this?
• Has it moved beyond functional to beautiful?
• Does it exceed expectations?

Time Investment Guide

Quick Elevation (5-10 minutes)

• Focus on Phases 1, 3, 4
• Apply one strong technique
• Fix obvious defaults
• Add one surprise detail

Standard Elevation (15-20 minutes)

• Complete Phases 1-5
• Apply multiple techniques
• Develop consistent system
• Polish key moments

Deep Elevation (25-30 minutes)

• Complete all phases thoroughly
• Apply advanced techniques
• Create custom elements
• Perfect every detail

Output Examples

Before Elevation

• Default fonts and colors
• Even spacing throughout
• No clear hierarchy
• Functional but forgettable

After Elevation

• Considered typography system
• Purposeful color palette
• Clear spatial rhythm
• Memorable and refined

Remember

The goal isn't decoration but intentional design. Every choice should have a reason. When in doubt:

• Choose clarity over cleverness
• Choose system over one-offs
• Choose restraint over excess
• Choose refinement over features

The best design often feels like it was inevitable—like it couldn't have been any other way.

Grid Systems & Layout Structures

Professional grid systems for creating organized, balanced layouts across different media.

Foundation Grid Systems

8-Point Grid System

/* Base unit: 8px */
--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 32px;
--space-5: 40px;
--space-6: 48px;
--space-8: 64px;
--space-10: 80px;
--space-12: 96px;
--space-16: 128px;
--space-20: 160px;
--space-24: 192px;
--space-32: 256px;

/* Usage */
padding: var(--space-2) var(--space-3);
margin-bottom: var(--space-4);
gap: var(--space-2);

4-Point Grid System (Dense)

/* For compact interfaces */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;

Column Grid Systems

12-Column Grid

/* Classic, versatile grid */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Common patterns */
.col-span-12 { grid-column: span 12; } /* Full width */
.col-span-8 { grid-column: span 8; }   /* Main content */
.col-span-6 { grid-column: span 6; }   /* Half */
.col-span-4 { grid-column: span 4; }   /* Sidebar */
.col-span-3 { grid-column: span 3; }   /* Quarter */

16-Column Grid (Complex)

/* For sophisticated layouts */
.grid-16 {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 20px;
  max-width: 1440px;
  margin: 0 auto;
}

/* Content regions */
.main { grid-column: 3 / 15; }      /* Central content */
.wide { grid-column: 2 / 16; }      /* Wide content */
.narrow { grid-column: 5 / 13; }    /* Reading width */

Asymmetric Grid

/* For dynamic layouts */
.grid-asymmetric {
  display: grid;
  grid-template-columns: 2fr 3fr 2fr 5fr 3fr;
  gap: 32px;
}

/* Golden ratio grid */
.grid-golden {
  display: grid;
  grid-template-columns: 1fr 1.618fr;
  gap: 40px;
}

Responsive Grid Systems

Fluid Grid

.fluid-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

/* With maximum columns */
.fluid-grid-max {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 32px;
  max-width: 1400px;
}

Responsive Breakpoint Grid

.responsive-grid {
  display: grid;
  gap: 16px;
  
  /* Mobile: 1 column */
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .responsive-grid {
    /* Tablet: 2 columns */
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (min-width: 1024px) {
  .responsive-grid {
    /* Desktop: 3 columns */
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

@media (min-width: 1440px) {
  .responsive-grid {
    /* Wide: 4 columns */
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
  }
}

Specialized Grid Patterns

Dashboard Grid

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 100px;
  gap: 16px;
  padding: 16px;
}

/* Widget sizes */
.widget-small { 
  grid-column: span 3;
  grid-row: span 1;
}

.widget-medium { 
  grid-column: span 6;
  grid-row: span 2;
}

.widget-large { 
  grid-column: span 9;
  grid-row: span 3;
}

.widget-full { 
  grid-column: span 12;
  grid-row: span 2;
}

Magazine Layout Grid

.magazine-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(100px, auto);
  gap: 24px;
}

/* Article layouts */
.feature-article {
  grid-column: span 4;
  grid-row: span 3;
}

.sidebar-article {
  grid-column: span 2;
  grid-row: span 2;
}

.quote-block {
  grid-column: 2 / 6;
  grid-row: span 1;
}

Card Grid System

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  align-items: start;
}

/* Featured card */
.card-featured {
  grid-column: span 2;
  grid-row: span 2;
}

/* Masonry effect */
.card-grid-masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 20px;
  gap: 20px;
}

.card-tall { grid-row: span 15; }
.card-medium { grid-row: span 10; }
.card-short { grid-row: span 8; }

Presentation Grids

Slide Grid (16:9)

Standard presentation grid:
- 12 columns
- 8 rows
- 40px margins
- 20px gutters

Safe area: 10-90% of slide
Title zone: Top 20%
Content zone: 20-85%
Footer zone: Bottom 10%

Slide Layouts

/* Title slide */
.slide-title {
  display: grid;
  place-items: center;
  min-height: 100vh;
  text-align: center;
}

/* Content slide */
.slide-content {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 40px;
  padding: 60px;
  min-height: 100vh;
}

/* Two-column slide */
.slide-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding: 60px;
  align-items: center;
}

/* Image + text slide */
.slide-image-text {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 80px;
  align-items: center;
}

Document Grids

A4 Document Grid

.document-a4 {
  width: 210mm;
  min-height: 297mm;
  padding: 25mm 20mm;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* Multi-column text */
.document-columns {
  column-count: 2;
  column-gap: 20mm;
  column-rule: 1px solid #e5e5e5;
}

Report Layout Grid

.report-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Sections */
.report-sidebar {
  position: sticky;
  top: 20px;
  height: fit-content;
}

.report-content {
  display: grid;
  gap: 60px;
}

.report-section {
  display: grid;
  gap: 24px;
}

Spacing Systems

Fibonacci Spacing

:root {
  --fib-1: 1px;
  --fib-2: 2px;
  --fib-3: 3px;
  --fib-5: 5px;
  --fib-8: 8px;
  --fib-13: 13px;
  --fib-21: 21px;
  --fib-34: 34px;
  --fib-55: 55px;
  --fib-89: 89px;
  --fib-144: 144px;
}

Modular Scale Spacing

/* Based on 1.5x ratio */
:root {
  --space-xs: 4px;    /* 0.25rem */
  --space-s: 6px;     /* 0.375rem */
  --space-m: 9px;     /* 0.5625rem */
  --space-l: 14px;    /* 0.875rem */
  --space-xl: 21px;   /* 1.3125rem */
  --space-2xl: 31px;  /* 1.9375rem */
  --space-3xl: 47px;  /* 2.9375rem */
  --space-4xl: 70px;  /* 4.375rem */
}

Proportional Spacing

/* Based on font size */
.proportional-spacing {
  padding: 1em 1.5em;
  margin: 2em 0;
  gap: 0.75em;
}

/* Based on element width */
.width-based {
  padding: 5%;
  margin: 10% auto;
}

Layout Composition Patterns

The Rule of Thirds

.rule-of-thirds {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

/* Place focal points at intersections */
.focal-point {
  grid-column: 2;
  grid-row: 2;
}

Golden Rectangle Layout

.golden-layout {
  display: grid;
  grid-template-columns: 1fr 1.618fr;
  min-height: 100vh;
}

/* Recursive golden rectangles */
.golden-recursive {
  display: grid;
  grid-template-columns: 1.618fr 1fr;
  grid-template-rows: 1fr 1.618fr;
}

Swiss Poster Grid

.swiss-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(12, 1fr);
  gap: 0;
  height: 100vh;
}

/* Typical Swiss placements */
.swiss-title {
  grid-column: 1 / 7;
  grid-row: 2 / 4;
}

.swiss-body {
  grid-column: 1 / 5;
  grid-row: 5 / 10;
}

.swiss-image {
  grid-column: 5 / 9;
  grid-row: 4 / 11;
}

Container & Margin Systems

Container Widths

.container-xs { max-width: 640px; }   /* Mobile reading */
.container-sm { max-width: 768px; }   /* Tablet */
.container-md { max-width: 1024px; }  /* Small desktop */
.container-lg { max-width: 1280px; }  /* Desktop */
.container-xl { max-width: 1440px; }  /* Wide desktop */
.container-2xl { max-width: 1680px; } /* Ultra-wide */
.container-full { max-width: 100%; }  /* Full width */

Responsive Margins

.responsive-container {
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 640px) {
  .responsive-container {
    padding: 0 24px;
  }
}

@media (min-width: 1024px) {
  .responsive-container {
    padding: 0 40px;
  }
}

@media (min-width: 1440px) {
  .responsive-container {
    padding: 0 80px;
  }
}

Grid Debugging

Visual Grid Overlay

.show-grid {
  background-image: 
    repeating-linear-gradient(
      90deg,
      rgba(255, 0, 0, 0.1) 0,
      rgba(255, 0, 0, 0.1) 1px,
      transparent 1px,
      transparent 8.333%
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255, 0, 0, 0.1) 0,
      rgba(255, 0, 0, 0.1) 1px,
      transparent 1px,
      transparent 100px
    );
}

Quick Grid Selection

For Presentations

• 12-column grid
• 40-60px margins
• 16-24px gutters
• 8-point spacing system

For Dashboards

• 12 or 24-column grid
• 16px gutters
• 4-point spacing system
• Flexible row heights

For Documents

• 2-3 column options
• 1 inch margins minimum
• 0.5 inch gutters
• Baseline grid alignment

For Web Pages

• 12-column responsive
• Fluid or fixed max-width
• 20-40px gutters
• 8-point spacing system

Trimble Modus Design System Reference

A comprehensive reference for building interfaces that conform to Trimble's Modus Design System. Use this when the user requests Modus styling, Trimble branding, or when working on Trimble products.

Source: modus.trimble.com and modus-web-components

---

Design Philosophy

Modus is Trimble's shared design system — built for enterprise construction, geospatial, agriculture, and transportation products. It prioritizes:

• Consistency across Trimble's product portfolio
• Accessibility (WCAG 2.1 AA compliance)
• Efficiency for professional, task-heavy workflows
• Clarity over decoration — functional, not flashy
• Light and dark mode support from the ground up

The aesthetic is professional, utilitarian, and restrained. Think enterprise SaaS for field and office workers — not consumer-facing marketing gloss.

---

Typography

Font Family

font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
  'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
  'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

When using Google Fonts:

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">

Type Scale

Font Weights

• Regular: 400
• Semi-bold: 600 (buttons, emphasis, tabs, chips, badges)
• Bold: 700 (headings)

Key Rules

• Body text defaults to 14px, NOT 16px
• Labels are 12px
• Use font-variant-numeric: tabular-nums for all data/number displays
• Line height: 1.5 for body, 1.25 for headings

---

Color System

Brand Colors

Gray Scale (Light → Dark)

Blue Progression

Semantic Colors

Green Progression

Yellow Progression

Red Progression

---

Spacing & Sizing

Base Unit

The system uses a 4px base unit with common values:

Component Heights (3 sizes)

---

Borders & Radius

Border Radius

Important: Most components use 4px. Cards are the exception at 8px. Never go larger than 8px on standard components.

Borders

• Default border: 1px solid
• Card border: 1px solid #E0E1E9 (gray-0)
• Input border: 1px solid #6A6E79 (gray-6)
• Table border: 1px solid #B7B9C3 (gray-2)
• Active/focus border: 2px solid #217CBB (blue-light)

---

Shadows

Shadow color is based on Trimble Gray #252A2E = rgb(37, 42, 46).

Note: Modus shadows are uniform (same spread on all sides, no directional offset). This differs from most design systems that use directional shadows.

Backdrop Blur

---

Component Patterns

Buttons

/* Primary */
background: #0063A3; color: #fff; border-radius: 4px;
height: 32px; padding: 0 16px; font-size: 14px; font-weight: 600;

/* Secondary */
background: #6A6E79; color: #fff;

/* Tertiary */
background: #CBCDD6; color: #252A2E;

/* Outline Primary */
background: transparent; border: 1px solid #0063A3; color: #0063A3;

/* Danger */
background: #DA212C; color: #fff;

/* Disabled (all) */
opacity: 0.3; pointer-events: none;

/* Transitions */
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
  border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

/* Focus */
box-shadow: 0 0 0 0.25rem rgba(0, 99, 163, 0.25);

Cards

background: #fff;
border: 1px solid transparent; /* or #E0E1E9 with .card-border */
border-radius: 4px;
overflow: hidden;
/* Hover shadow on .shadow cards: */
box-shadow: 0 0 4px rgba(54, 53, 69, 0.3);

Navbar

height: 56px;
background: #fff; /* or #0E416C for blue variant */
display: flex; align-items: center;
font-family: 'Open Sans'; font-weight: 600;
/* Profile avatars: 32px, rounded-full */
/* Icons: 12px padding, 4px border-radius */

Tables

/* Header */
background: #F1F1F6; color: #464B52; font-size: 14px;
/* Cells */
padding: 4px 16px; height: 48px (3rem); font-size: 14px; line-height: 1.5;
vertical-align: middle;
/* Small variant */
padding: 4px 8px; height: 32px; font-size: 12px;
/* Borders */
border: 1px solid #B7B9C3;
/* Hover */
background: #DCEDF9;
/* Selected */
background: #DCEDF9; border-color: #217CBB;

Inputs

background: #fff; color: #464B52;
border: 1px solid #6A6E79; border-radius: 4px;
padding: 0 12px; height: 32px; font-size: 14px;
/* Focus */
border-color: #217CBB; border-bottom-width: 2px;
box-shadow: 0 0 2px rgba(36, 35, 45, 0.3);
/* Label */
font-size: 12px; color: #464B52; margin-bottom: 7px;
/* Placeholder */
color: #A3A6B1;
/* Disabled */
background: #E0E1E9; opacity: 0.7;

Tabs

height: 48px; /* 32px small */
padding: 10px 32px; /* 4px 16px small */
font-size: 14px; font-weight: 600;
border-bottom: 1px solid #CBCDD6;
/* Active */
border-bottom: 3px solid #217CBB; color: #217CBB;
/* Hover */
background: #DCEDF9; color: #217CBB;

Badges

font-size: 12px; font-weight: 700;
padding: 4px 8px; border-radius: 4px;
/* Small: 10px font, 2px 4px padding */
/* Large: 16px font, 6px 12px padding */

Alerts

padding: 16px 16px; font-weight: 700;
border-left: 12px solid; border-radius: 4px;
/* Primary: bg rgba(220,237,249,0.5), border #0063A3 */
/* Success: bg rgba(224,236,207,0.5), border #006638 */
/* Danger: bg rgba(251,212,215,0.5), border #DA212C */
/* Warning: bg rgba(255,245,228,0.5), border #E49325 */

Chips

font-size: 13px; font-weight: 600;
border-radius: 1rem; /* pill shape */
padding: 2px 12px;
background: #CBCDD6; color: #353A40;
/* Active: bg rgba(33,124,187,0.3); color: #252A2E */

Accordions

/* Header */
padding: 14px 4px; font-size: 16px; line-height: calc(20/16);
/* Small: 8px 4px padding, 14px font */
/* Border: 1px solid #CBCDD6 */
/* Active border: 1px solid #217CBB */
/* Content: 14px font, 12px small */

Progress Bars

height: 16px;
background: #fff; /* track */
border: 1px solid #6A6E79;
/* Bar fill: #0063A3 (primary) */

Modals

background: #fff; border-radius: 4px;
backdrop: rgba(37, 42, 46, 0.75);
/* Header: height 68px, padding 16px, border-bottom: 1px solid #E0E1E9 */
/* Title: 16px, line-height 1.75 */
/* Footer: same height as header */

Side Navigation

background: #fff;
/* Item hover: bg #E0E1E9 */
/* Item active: bg #217CBB, color: #fff */
/* Disabled: opacity 0.3 */
/* Shadow: 0 0 rgba(0,0,0,0.16) */

---

Dark Mode

Dark mode swaps key tokens:

Dark Mode Implementation

<!-- Apply via data attribute -->
<div data-mwc-theme="dark">...</div>

<!-- Or via class -->
<body class="dark">...</body>

---

Data Visualization Colors

Categorical Palette (for charts)

Use these in order for multi-series charts:

#0063A3  — Blue (primary)
#217CBB  — Blue Light
#006638  — Green Dark
#1E8A44  — Green
#E49325  — Yellow Dark
#FBAD26  — Yellow
#DA212C  — Red
#B44E2A  — Trimble Red
#6A6E79  — Gray 6
#A3A6B1  — Gray 3

Sequential Palette (for heatmaps, gradients)

Blue progression: #DCEDF9 → #217CBB → #0063A3 → #0E416C → #004F83

Semantic Data Colors

• Positive/up: #006638 (light) / #1E8A44 (dark)
• Negative/down: #DA212C
• Warning/caution: #E49325 (light) / #FBAD26 (dark)
• Neutral/reference: #6A6E79

Chart Styling Rules

• Chart background: transparent (no fills)
• Gridlines: #E0E1E9 (light) or #464B52 (dark), horizontal only
• Axis labels: #6A6E79 (gray-6), 12px Open Sans
• Data labels: #464B52 (gray-8), 12px, semi-bold
• Titles: #252A2E, 14px, bold
• Use tabular-nums on all number labels

---

Layout Patterns

Navbar + Side Nav + Content (Standard App Layout)

┌──────────────────────────────────────┐
│ Navbar (56px, full width)            │
├────────┬─────────────────────────────┤
│ Side   │ Content area               │
│ Nav    │ (scrollable)               │
│        │                            │
│        │                            │
└────────┴─────────────────────────────┘

Blue Navbar Variant

For Trimble-branded apps, the navbar can be blue:

background: #0E416C;
color: #fff;
/* Icons and text are white */

App Shell Dimensions

Grid System

• 12 columns, 24px gutters (1.5rem)
• Breakpoints: sm 576px, md 768px, lg 992px, xl 1200px, xxl 1600px

Content Area

• Container padding: 24px (1.5rem)
• Card grid gaps: 16-24px
• Section spacing: 24-32px

---

Interaction States

All interactive elements follow this state pattern:

Transitions: 0.15s ease-in-out on color, background-color, border-color, box-shadow.

---

Quick Implementation Checklist

When building in Modus style:

• [ ] Font: Open Sans (400, 600, 700)
• [ ] Body text: 14px, not 16px
• [ ] Primary blue: #0063A3
• [ ] Border radius: 4px on everything (not 8px, not 12px)
• [ ] Shadows: uniform spread (0 0 Npx), not directional
• [ ] Gray scale: use the Modus grays, not Tailwind grays
• [ ] Buttons: 32px height default, 600 weight, 4px radius
• [ ] Navbar: 56px height
• [ ] Tables: gray-light header bg, gray-2 borders
• [ ] Disabled: opacity: 0.3
• [ ] Focus rings: 0 0 0 0.25rem box-shadow
• [ ] Transitions: 0.15s ease-in-out
• [ ] Inputs: gray-6 border, blue-light on focus, 2px bottom border on focus
• [ ] Labels: 12px, gray-8
• [ ] Alerts: 12px left border, semi-transparent backgrounds
• [ ] tabular-nums on all numbers

---

Modus vs. Tailwind Mapping

For teams familiar with Tailwind, here's how Modus tokens map:

Critical differences from Tailwind defaults: 1. Body text is 14px (Tailwind default is 16px) 2. Border radius is always 4px (Tailwind's rounded-lg 8px is too large) 3. Shadows have no Y-offset (Tailwind shadows are directional) 4. Grays have a cool/blue undertone (Tailwind grays are neutral) 5. Primary blue is darker than Tailwind's blue-600

Spacing Systems & Visual Rhythm

Systematic approaches to spacing that create consistent, harmonious layouts.

Base Spacing Systems

Linear Scale (Arithmetic)

/* Simple addition - predictable, stable */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
}

Exponential Scale (Geometric)

/* Multiplied by constant - dramatic, dynamic */
:root {
  --space-xs: 2px;     /* 2^1 */
  --space-sm: 4px;     /* 2^2 */
  --space-md: 8px;     /* 2^3 */
  --space-lg: 16px;    /* 2^4 */
  --space-xl: 32px;    /* 2^5 */
  --space-2xl: 64px;   /* 2^6 */
  --space-3xl: 128px;  /* 2^7 */
}

T-Shirt Sizing

/* Intuitive naming */
:root {
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-s: 12px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;
}

Advanced Spacing Systems

Material Design Spacing

/* 8dp grid system */
:root {
  --space-0: 0;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;
  --space-9: 72px;
}

/* Component spacing */
.material-card {
  padding: var(--space-2);
  margin: var(--space-1);
  border-radius: 4px;
}

Tailwind Spacing

/* 0.25rem increments */
:root {
  --space-0: 0;
  --space-px: 1px;
  --space-0.5: 0.125rem;  /* 2px */
  --space-1: 0.25rem;     /* 4px */
  --space-1.5: 0.375rem;  /* 6px */
  --space-2: 0.5rem;      /* 8px */
  --space-2.5: 0.625rem;  /* 10px */
  --space-3: 0.75rem;     /* 12px */
  --space-4: 1rem;        /* 16px */
  --space-5: 1.25rem;     /* 20px */
  --space-6: 1.5rem;      /* 24px */
  --space-8: 2rem;        /* 32px */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px */
  --space-16: 4rem;       /* 64px */
  --space-20: 5rem;       /* 80px */
  --space-24: 6rem;       /* 96px */
}

Component-Specific Spacing

Button Spacing

/* Optimal button padding */
.btn-small {
  padding: 6px 12px;
  font-size: 14px;
  line-height: 20px;
}

.btn-medium {
  padding: 8px 16px;
  font-size: 16px;
  line-height: 24px;
}

.btn-large {
  padding: 12px 24px;
  font-size: 18px;
  line-height: 28px;
}

/* Icon button spacing */
.btn-icon {
  padding: 8px;
  width: 40px;
  height: 40px;
}

Card Spacing

.card {
  padding: 24px;
  border-radius: 8px;
}

.card-compact {
  padding: 16px;
  border-radius: 6px;
}

.card-spacious {
  padding: 32px;
  border-radius: 12px;
}

/* Internal card spacing */
.card-header {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
}

.card-body {
  margin-bottom: 20px;
}

.card-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}

Form Spacing

.form-group {
  margin-bottom: 24px;
}

.form-label {
  margin-bottom: 8px;
  display: block;
}

.form-input {
  padding: 10px 12px;
  line-height: 20px;
}

.form-help-text {
  margin-top: 6px;
  font-size: 14px;
}

.form-error {
  margin-top: 4px;
  font-size: 14px;
}

/* Form sections */
.form-section {
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border-light);
}

Layout Spacing Patterns

Section Spacing

/* Page sections */
.section {
  padding: 80px 0;
}

.section-small {
  padding: 40px 0;
}

.section-large {
  padding: 120px 0;
}

/* Hero sections */
.hero {
  padding: 160px 0;
}

.hero-compact {
  padding: 80px 0;
}

/* Content blocks */
.content-block + .content-block {
  margin-top: 48px;
}

Stack Spacing

/* Vertical stacks */
.stack-xs > * + * { margin-top: 4px; }
.stack-sm > * + * { margin-top: 8px; }
.stack-md > * + * { margin-top: 16px; }
.stack-lg > * + * { margin-top: 24px; }
.stack-xl > * + * { margin-top: 32px; }
.stack-2xl > * + * { margin-top: 48px; }

/* Responsive stacks */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, 16px);
}

@media (min-width: 768px) {
  .stack {
    --stack-gap: 24px;
  }
}

@media (min-width: 1024px) {
  .stack {
    --stack-gap: 32px;
  }
}

Grid Gaps

/* Standard grid gaps */
.gap-xs { gap: 4px; }
.gap-sm { gap: 8px; }
.gap-md { gap: 16px; }
.gap-lg { gap: 24px; }
.gap-xl { gap: 32px; }
.gap-2xl { gap: 48px; }

/* Asymmetric gaps */
.gap-x-md { column-gap: 16px; }
.gap-y-lg { row-gap: 24px; }

/* Responsive gaps */
.responsive-gap {
  gap: 16px;
}

@media (min-width: 768px) {
  .responsive-gap {
    gap: 24px;
  }
}

@media (min-width: 1024px) {
  .responsive-gap {
    gap: 32px;
  }
}

Typography Spacing

Line Height Relationships

/* Optimal line height by font size */
.text-xs {
  font-size: 12px;
  line-height: 16px; /* 1.33x */
}

.text-sm {
  font-size: 14px;
  line-height: 20px; /* 1.43x */
}

.text-base {
  font-size: 16px;
  line-height: 24px; /* 1.5x */
}

.text-lg {
  font-size: 18px;
  line-height: 28px; /* 1.56x */
}

.text-xl {
  font-size: 20px;
  line-height: 30px; /* 1.5x */
}

.text-2xl {
  font-size: 24px;
  line-height: 32px; /* 1.33x */
}

.text-3xl {
  font-size: 30px;
  line-height: 36px; /* 1.2x */
}

.text-4xl {
  font-size: 36px;
  line-height: 40px; /* 1.11x */
}

.text-5xl {
  font-size: 48px;
  line-height: 52px; /* 1.08x */
}

Paragraph Spacing

/* Article typography */
.article {
  font-size: 18px;
  line-height: 1.7;
}

.article p {
  margin-bottom: 1.5em;
}

.article h2 {
  margin-top: 2.5em;
  margin-bottom: 0.75em;
}

.article h3 {
  margin-top: 2em;
  margin-bottom: 0.5em;
}

.article blockquote {
  margin: 2em 0;
  padding-left: 1.5em;
}

.article ul,
.article ol {
  margin: 1.5em 0;
  padding-left: 1.5em;
}

.article li + li {
  margin-top: 0.5em;
}

White Space Principles

Micro White Space

/* Between letters and words */
.tight-tracking { letter-spacing: -0.05em; }
.normal-tracking { letter-spacing: 0; }
.loose-tracking { letter-spacing: 0.05em; }
.wide-tracking { letter-spacing: 0.1em; }

/* Word spacing */
.tight-words { word-spacing: -0.05em; }
.normal-words { word-spacing: normal; }
.loose-words { word-spacing: 0.1em; }

Macro White Space

/* Major sections */
.breathing-room {
  margin: 80px auto;
  padding: 60px;
}

.compact-layout {
  margin: 20px auto;
  padding: 20px;
}

.spacious-layout {
  margin: 120px auto;
  padding: 80px;
}

Active vs Passive Space

/* Active space - intentional emphasis */
.hero-space {
  min-height: 80vh;
  display: grid;
  place-items: center;
  padding: 120px 40px;
}

/* Passive space - separation */
.divider-space {
  height: 60px;
}

.section-break {
  margin: 60px 0;
}

Responsive Spacing Strategies

Fluid Spacing

/* Viewport-based spacing */
.fluid-padding {
  padding: clamp(20px, 5vw, 80px);
}

.fluid-margin {
  margin: clamp(16px, 4vw, 64px) auto;
}

.fluid-gap {
  gap: clamp(16px, 2vw, 32px);
}

Container Query Spacing

@container (min-width: 400px) {
  .card {
    padding: 24px;
  }
}

@container (min-width: 600px) {
  .card {
    padding: 32px;
  }
}

Aspect Ratio Spacing

/* Maintain proportional spacing */
.square {
  aspect-ratio: 1 / 1;
  padding: 10%;
}

.golden {
  aspect-ratio: 1.618 / 1;
  padding: 5%;
}

.wide {
  aspect-ratio: 16 / 9;
  padding: 2.5%;
}

Platform-Specific Spacing

iOS/Apple Design

:root {
  --ios-spacing-xs: 8px;
  --ios-spacing-sm: 12px;
  --ios-spacing-md: 16px;
  --ios-spacing-lg: 20px;
  --ios-spacing-xl: 32px;
  --ios-edge-margin: 20px;
  --ios-safe-area: env(safe-area-inset-top);
}

Material Design

:root {
  --material-baseline: 8px;
  --material-spacing-1: 8px;
  --material-spacing-2: 16px;
  --material-spacing-3: 24px;
  --material-keyline-1: 16px;
  --material-keyline-2: 72px;
}

Microsoft Fluent

:root {
  --fluent-spacing-xs: 4px;
  --fluent-spacing-s: 8px;
  --fluent-spacing-m: 12px;
  --fluent-spacing-l: 16px;
  --fluent-spacing-xl: 24px;
  --fluent-spacing-xxl: 32px;
}

Spacing in Data Visualization

Chart Spacing

.chart-container {
  padding: 20px;
}

.chart-title {
  margin-bottom: 16px;
}

.chart-legend {
  margin-top: 20px;
  gap: 16px;
}

.axis-label {
  margin: 8px;
}

/* Bar chart spacing */
.bar-spacing {
  --bar-gap: 4px;
  --group-gap: 12px;
  --category-gap: 24px;
}

Table Spacing

.table {
  border-spacing: 0;
}

.table th,
.table td {
  padding: 12px 16px;
}

.table-compact th,
.table-compact td {
  padding: 8px 12px;
}

.table-spacious th,
.table-spacious td {
  padding: 16px 20px;
}

/* Row spacing */
.table-striped tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.02);
}

Spacing Debugging Tools

Visual Spacing Guides

/* Show all spacing */
* {
  outline: 1px solid rgba(255, 0, 0, 0.2);
}

/* Show margins */
*[class*="margin"] {
  background: rgba(255, 255, 0, 0.1);
}

/* Show padding */
*[class*="padding"] {
  background: rgba(0, 255, 0, 0.1);
}

/* Grid gaps visualization */
.show-gaps {
  gap: 16px;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 16px,
    rgba(255, 0, 0, 0.1) 16px,
    rgba(255, 0, 0, 0.1) 17px
  );
}

Quick Spacing Decisions

For Dense Interfaces

• Base: 4px grid
• Components: 8-12px padding
• Gaps: 4-8px
• Sections: 16-24px

For Reading-Focused

• Base: 8px grid
• Paragraphs: 1.5-1.7em line height
• Margins: 1.5em between blocks
• Max width: 65-75 characters

For Marketing/Landing

• Base: 8px grid
• Sections: 80-120px padding
• Components: 24-32px padding
• Generous white space (30-40%)

For Documentation

• Base: 8px grid
• Code blocks: 16px padding
• Headings: 2em top margin
• Lists: 0.5em between items