Design Systems

Why Design Systems matter for Data Visualization Engineers

Design systems turn one-off charts into consistent, scalable products. With tokens, reusable components, and standard interaction patterns, you can ship dashboards faster, reduce visual bugs, and make insights easier to read across teams and products.

• Faster delivery: reuse chart components and tokens instead of pixel-pushing every screen.
• Consistency: typography, spacing, color, and interactions behave the same everywhere.
• Quality: fewer visual regressions and clearer accessibility standards.
• Scalability: new charts and pages inherit defaults that already work.

What you will be able to do

• Define and implement design tokens (color, spacing, typography) for data viz.
• Build reusable chart components that align with your grid and type scale.
• Apply semantic colors for states and data while maintaining accessibility.
• Standardize interactions (hover, focus, drill-down) for predictable behavior.
• Document components so designers and engineers use them correctly.

Who this is for

• Data Visualization Engineers building dashboards, reporting UIs, or embedded analytics.
• Analytics Engineers and BI Developers who maintain chart libraries and UI standards.
• Front-end engineers collaborating with data teams on design-consistent visualizations.

Prerequisites

• Basic HTML/CSS and comfort with CSS variables.
• Familiarity with a charting tool (e.g., D3, Vega-Lite, ECharts, or Chart.js).
• Understanding of accessibility basics (contrast, keyboard focus).

Learning path

1. Define tokens: Create color, spacing, and typography tokens for dashboards.
2. Layout grid: Set a responsive grid and spacing rules for cards, legends, and controls.
3. Typography: Establish a type scale and apply semantic roles to headings, labels, and annotations.
4. Semantic colors: Map states (success, warning, error, info) and data palettes (categorical/quantitative).
5. Reusable components: Build chart wrappers with standardized axes, titles, tooltips, and empty/loading states.
6. Interaction patterns: Standardize hover, selection, drill-down, zoom/pan, and keyboard focus.
7. Documentation: Provide usage guidelines, props, examples, do/don'ts, and accessibility notes.
8. Consistency at scale: Version tokens, run visual regression checks, and adopt review checklists.

Worked examples

{
  "color": {
    "bg.canvas": "#0B0C10",
    "text.primary": "#E6EAF2",
    "text.muted": "#A9B4C2",
    "data.categorical.1": "#4F46E5",
    "data.categorical.2": "#22C55E",
    "data.categorical.3": "#F59E0B",
    "semantic.success": "#16A34A",
    "semantic.error": "#DC2626",
    "semantic.warning": "#D97706"
  },
  "space": {
    "xs": 4,
    "sm": 8,
    "md": 12,
    "lg": 16,
    "xl": 24
  },
  "font": {
    "size.base": 14,
    "size.sm": 12,
    "size.lg": 16,
    "lineHeight.tight": 1.2,
    "lineHeight.normal": 1.45
  }
}

:root{
  --color-bg-canvas:#0B0C10;
  --color-text-primary:#E6EAF2;
  --color-text-muted:#A9B4C2;
  --color-data-categorical-1:#4F46E5;
  --color-data-categorical-2:#22C55E;
  --color-data-categorical-3:#F59E0B;
  --color-semantic-success:#16A34A;
  --color-semantic-error:#DC2626;
  --color-semantic-warning:#D97706;
  --space-xs:4px; --space-sm:8px; --space-md:12px; --space-lg:16px; --space-xl:24px;
  --font-size-sm:12px; --font-size-base:14px; --font-size-lg:16px;
  --line-tight:1.2; --line-normal:1.45;
}
.chart-card{background:var(--color-bg-canvas);padding:var(--space-lg);color:var(--color-text-primary);} 

// scale.js
const base = 14; // px
const ratio = 1.2; // Minor Third
const step = n => Math.round(base * Math.pow(ratio, n));
export const typeScale = {
  h1: step(5), // e.g., 35px
  h2: step(4),
  h3: step(3),
  title: step(2),
  label: step(0),
  tick: step(-1)
};

/* map to CSS */
:root{
  --fs-h1:35px; --fs-h2:29px; --fs-h3:24px; --fs-title:20px; --fs-label:14px; --fs-tick:12px;
}
.chart-title{font-size:var(--fs-title); line-height:var(--line-normal);} 
.axis .tick text{font-size:var(--fs-tick);} 

// semantic colors (UI states)
const semantic = {
  success: "#16A34A",
  warning: "#D97706",
  error:   "#DC2626",
  info:    "#0891B2"
};

// data palettes
const categorical = ["#4F46E5", "#22C55E", "#F59E0B", "#EF4444", "#06B6D4"]; 
const sequential = ["#EFF6FF", "#BFDBFE", "#93C5FD", "#60A5FA", "#3B82F6", "#1D4ED8"]; 

// D3 example
const color = d3.scaleOrdinal().range(categorical);
const fillForChange = d => d > 0 ? semantic.success : d < 0 ? semantic.error : semantic.info;

// React-like pseudocode
function ChartFrame({title, isLoading, isEmpty, children}){
  if(isLoading) return <div class="chart-card">Loading…</div>;
  if(isEmpty) return <div class="chart-card">No data available</div>;
  return (
    <div class="chart-card" style={{padding:"var(--space-lg)"}}>
      <h3 class="chart-title">{title}</h3>
      <div class="chart-inner">{children}</div>
    </div>
  );
}

Drills and exercises

• Create 10 color tokens: 4 semantic, 6 data (categorical). Name them semantically, not by hue.
• Define a 12-column grid and place: 3 chart cards, a legend, a filter bar. Check spacing rhythm.
• Apply your type scale to titles, axis ticks, legends, and tooltips.
• Build a tooltip pattern with keyboard focus and ESC to dismiss.
• Document a reusable bar chart: inputs, outputs, default props, and do/don't examples.

Common mistakes and debugging tips

• Using brand colors for data: Brand palettes often lack contrast steps. Keep a separate data palette; test readability.
• Hardcoding spacing: Replace magic numbers with spacing tokens to maintain rhythm across cards and legends.
• Token names tied to hex values: Use semantic names (e.g., data.categorical.1) so colors can change without code churn.
• Inconsistent interactions: Define hover/selection and keyboard focus once; reuse in all charts.
• Undocumented edge cases: Document empty, loading, and error states; they occur more often than you expect.
• Ignoring dark mode early: If applicable, mirror tokens for dark mode and test contrast before scaling.

Mini project: Token-driven dashboard kit

Build a small dashboard with 3 cards (bar, line, and KPI tile) powered by design tokens.

1. Define tokens for color, spacing, typography. Export as CSS variables.
2. Set up a 12-column grid. Place a filter bar, 2 charts on the top row, and 1 wide chart below.
3. Create a ChartFrame wrapper with title, loading, empty, and error states.
4. Implement standardized tooltips (hover and keyboard), and a consistent legend component.
5. Document the kit: token list, component props, examples, and accessibility notes.

Practical projects

• Chart Component Library: Publish bar, line, and pie components with shared tokens.
• Design Token Migration: Replace hardcoded values in an existing dashboard with tokens.
• Interaction Audit: Standardize hover/selection across 5 existing charts and document patterns.

Next steps

• Introduce dark mode tokens and test contrast for data and UI elements.
• Add automated visual regression tests for your chart library.
• Expand documentation with performance tips and internationalization notes (numbers, dates, right-to-left layouts).

Skill Exam

Take the exam below to validate your understanding. The exam is available to everyone; if you are logged in, your progress will be saved.