GFS Design System — Data Visualization Language

02Chart Selection GuideDecision Flowchart

Start with the story you need to tell. The chart type follows from the data relationship, not the other way around.

What story are you telling?

Comparison

Bar Chart

Trend

Line Chart

Composition

Donut / Stacked

Distribution

Histogram

Relationship

Scatter Plot

      Quick rules:

      Comparing categories? Bar. Showing change over time? Line. Part-of-whole? Donut (max 5 segments). Spread of values? Histogram. Two variables? Scatter.

03Color Sequences4 Palettes / Live Chart Demos

Four color palettes for different data storytelling needs. Each palette includes 6 swatches and a mini chart demonstrating usage.

Sequential BluesOrdered data

Use for heatmaps, choropleth maps, sequential rankings

CategoricalDistinct groups

Use for multi-series charts, pie/donut segments, grouped bars

DivergingPositive / Negative

Use for profit/loss, above/below target, positive/negative deltas

StatusOperational states

Use for health monitors, SLA dashboards, system status indicators

OK

!

X

04Axis & Grid StylingReference Chart with Labels

Standardized axis and grid styling ensures every chart reads consistently. The reference chart below labels every element with its specification.

400

300

200

100

0

Jan

Feb

Mar

Apr

May

Grid line: 1px #F0F2F5

Chart area padding: 20px

Y-axis: Plex Mono 10px

X-axis labels: IBM Plex Mono 10px #9CA3AF

Axis: 2px #D9E1EA

Y-Axis Labels

          Font: IBM Plex Mono

          Size: 10px

          Color: #9CA3AF (Steel)

          Alignment: Right-aligned

          Offset: 8px from axis

Grid Lines

          Stroke: 1px solid

          Color: #F0F2F5 (Fog)

          X-Axis base: 2px #D9E1EA

          Ticks: None (clean look)

          Max lines: 5 horizontal

X-Axis Labels

          Font: IBM Plex Mono

          Size: 10px

          Color: #9CA3AF (Steel)

          Alignment: Center under bars

          Rotation: 0 (or -45 if crowded)

05Bar Chart Patterns5 Variants / Live CSS Demos

Five bar chart variants covering all comparison needs. Each includes proper spacing, data labels, and hover states.

VerticalStandard comparison

180

Q1

290

Q2

240

Q3

360

Q4

HorizontalRanked / Long labels

Midwest

352

Northeast

288

Southeast

220

West

160

Southwest

112

GroupedMulti-category compare

Jan

Feb

Mar

Apr

2025

2026

StackedPart-of-whole over time

Q1

Q2

Q3

Q4

Cheese

Eggs

Butter

DivergingPositive / Negative variance

Cheese

+12.4%

Eggs

-5.8%

Butter

+7.2%

Cream

-9.1%

Whey

+18.3%

Variance from prior year -- center axis = 0%

06Line Chart Patterns3 Variants / SVG Demos

Three line chart variants for trend visualization. Include data points, threshold lines, and properly styled tooltips.

Single LineOne metric over time

            JanFebMarAprMayJunJulAug
          

Multi-LineCompare series

Midwest

Northeast

West

Area ChartVolume over time

            W1W2W3W4W5W6W7W8
          

07Donut & Pie PatternsCSS Conic-Gradient

Two circular chart variants using pure CSS conic-gradient. Max 5 segments for donuts. Gauges show a single metric on a half-circle.

Donut ChartPart-of-whole, max 5 segments

$4.2M

TOTAL REV

Cheese 36%

Eggs 25%

Butter 17%

Cream 11%

Other 11%

Semi-Circle GaugeSingle metric, target context

87.6%

ON-TIME DELIVERY

Target: 85%

60.0%

FILL RATE

Target: 90%

08KPI Card Patterns6 Display Patterns

Six ways to display key performance indicators, from minimal to data-rich. Choose based on the context and information density needed.

Revenue YTD

$4.2M

On-Time Rate

98.6%

▲ +2.1% vs prior

Active Routes

412

▲ Trending up

Quota Attainment

76%

$3.2M

of $4.2M target

Weekly Volume

2,847

          8w agoThis week
        

Avg Order Value

$18.4K

Prior Year

$16.2K

Target

$20.0K

▲ +13.6% YoY | 92% of target

09Empty & Error States for Charts4 State Patterns

What to show when charts cannot render normally. Each state has a clear visual pattern and a helpful message.

No data available

There are no records for the selected time period. Try adjusting your date range or filters.

Loading data...

Fetching records from the server. This may take a moment for large datasets.

Failed to load chart

Could not connect to the data source. Check your connection and try again.

Insufficient data

At least 3 data points are needed to render this chart. Currently showing 1 record.

10Annotation Patterns5 Annotation Types

Five ways to annotate charts with contextual information: threshold lines, targets, events, callouts, and trend labels.

Annotated Chart -- All PatternsCombined reference

THRESHOLD: 350 UNITS

TARGET: 400

New route launched

PEAK: 380 UNITS

Week of Apr 15

            ▲ +28% over period
          

500

250

0

Threshold Line

2px dashed, error red. Shows limits or alerts.

Target Marker

2px solid, success green. Shows goals or benchmarks.

Event Marker

Vertical dashed line with label. Marks point-in-time events.

Callout Box

White box with shadow. Highlights specific data points.

▲ +28%

Trend Label

Floating text with delta. Summarizes the story.

11Do / Don't for Data Viz8 Rules / Visual Examples

Eight non-negotiable rules for data visualization at GFS. Each rule is shown as a Do/Don't pair with visual examples.

Do: Flat 2D

Clean, flat bars with no perspective distortion.

Don't: 3D Effects

3D distorts proportions and makes comparison harder.

Do: Y-Axis from Zero

0

Shows true proportional differences between values.

Don't: Truncated Y-Axis

90

Truncated axis exaggerates small differences.

Do: Max 5 Segments

Each segment is visually distinct and readable.

Don't: Too Many Segments

Tiny slices are unreadable. Merge small groups into "Other".

Do: Solid Colors

Solid fills make exact comparisons easy.

Don't: Gradients on Bars

Gradients make bar tops ambiguous and comparisons harder.

Do: Direct Labels

87%

64%

Values are readable without hovering or referencing axes.

Don't: Force Hover

(hover for values...)

Key values should be visible without interaction.

Do: Same Scale

0-100

0-100

Matching scales enable accurate cross-panel comparisons.

Don't: Different Scales

0-100

0-1000

Different scales create false visual equivalences.

Do: Pattern + Color

Patterns provide distinction beyond color alone.

Don't: Color Only

Red/green alone fails for ~8% of male viewers.

Do: Descriptive Title

Revenue grew 28% in Q1, led by Midwest

Jan-Mar 2026 vs Jan-Mar 2025

Title states the insight; viewer does not have to decode it.

Don't: Generic Title

Revenue Data

Chart 1

Generic labels force the viewer to interpret the story themselves.

12Sparkline Patterns6 Inline Micro-Chart Variants

Sparklines are small, inline charts that communicate trends without axes, labels, or gridlines. Use them in tables, KPI cards, and dashboards where space is limited but trend context is valuable.

Line Sparkline

$1.84M

+12.4% vs prior period

Single-color polyline, no fill. End dot marks current value. Line width: 1.5px. Height: 24-32px. Width: 60-100px.

Area Sparkline

2,847

orders this week

Line + filled area below. Fill: brand color at 10-15% opacity. Useful for volume/count trends.

Bar Sparkline

96.2%

on-time delivery rate

Thin vertical bars, 4-8px wide, 2px gap. Last bar full opacity; prior bars at 50%. Max 7-12 bars.

Win/Loss Sparkline

8/10

SQF audits passed

Binary up/down bars. Green up = pass, Red down = fail. Equal height bars. Centered on midline.

Dot Sparkline

38.4

avg temp (F) — trending down

Scatter dots, increasing opacity toward current. Final dot larger (3px r). Good for sparse or irregular data.

Band / Range Sparkline

$2.14

CME barrel cheddar /lb

Line with shaded normal range band. Out-of-band points highlighted in red. Good for compliance metrics.

Sparkline placement rules. Always pair a sparkline with its numeric value — the sparkline adds context, not replaces the number. Minimum width: 60px. Maximum width: 120px. Height: 24-32px. Use brand Cobalt as default color. Never add axes, gridlines, or labels to sparklines.

13Data Table with Inline ChartsTable Rows with Embedded Visualizations

Inline chart columns embed sparklines and micro-visualizations directly into data table rows. This pattern combines the precision of tabular data with the trend context of charts, eliminating the need to switch between views.

Customer	Revenue	Orders	On-Time %
Empire State Foods	$284,200	847	97%
NYC DOE (Dist. 12)	$198,400	412	94%
Good Eats Deli Corp	$156,800	328	88%
Tri-State Grocers	$142,600	276	96%

Inline chart column rules. Chart columns must have a fixed width (80-120px). Trends use line sparklines; rates use progress bars; composition uses stacked bars. Declining trends use red (#DC2626) polyline. Column header describes the visualization type. Sort by the numeric column, not the chart.

14Real-Time Gauge Patterns4 Gauge Types / Live Dashboard Widgets

Gauges display a single metric's position within a known range. Use them for real-time operations dashboards where the current value relative to thresholds matters more than historical trend. GFS gauges use the brand color system with semantic thresholds.

Semicircle Gauge

72%

Warehouse Capacity

Target: <80% | Alert: >90%

Ring Gauge

96.2

%

OTD Rate

SLA: ≥95% | Current: Pass

Bullet Gauge

Revenue vs Target

            $0$7.8M actual$10M
          

CSAT Score

            04.4/5.05.0
          

Status Gauge

36F

Cooler A Temp

NORMAL RANGE

Gauge selection guide. Semicircle: capacity/utilization. Ring: percentage completion toward a goal. Bullet: actual vs target comparison. Status: threshold-based monitoring (temperature, pressure). All gauges must show the current numeric value prominently. Update interval for live dashboards: 15-60 seconds. Use semantic colors at threshold boundaries.

15Animation & MotionSpring Physics / 6 Animated Demos

Spring-based easing gives data visualizations a physical, tactile quality. Elements overshoot their target value and settle back, creating organic motion that draws the eye to changing data. All demos below trigger on scroll via IntersectionObserver.

        CSS Spring Curve

        cubic-bezier(0.34, 1.56, 0.64, 1)
      
        Trigger Method

        IntersectionObserver (threshold: 0.2)

01 / Spring Bar Chart

$3.2M

Q1

$4.1M

Q2

$3.8M

Q3

$5.2M

Q4

$4.7M

Q1

$6.0M

Q2

Bars spring up from zero with staggered delay. cubic-bezier(0.34, 1.56, 0.64, 1)

02 / Spring Ring Fill

75%

Capacity

Concentric rings overshoot then settle. Outer: 75%, Inner: 60%.

03 / Spring Counter

0

Shipments

0

On-Time %

0

Revenue

Numbers spring-count up with overshoot on entrance transform.

04 / Spring Progress Overshoot

Barrel Cheddar — East Coast

88%

Mozzarella — Metro NYC

72%

USDA Brown Box — National

95%

Frozen Entrees — Southeast

54%

Bars overshoot target width by ~6% then settle back. Staggered 150ms.

05 / Staggered Card Entrance

DC

Distribution

14

RT

Routes

38

LD

Loads/Day

127

OT

On-Time

99%

CS

Customers

84

RV

Revenue

$4.2M

Cards fly up + scale in with 100ms stagger. translateY(30px) to 0.

06 / Sequential Dot Bounce

Mon

Tue

Wed

Thu

Fri

Sat

Sun

Mon

Tue

Wed

Data points bounce in sequentially with 80ms stagger. scale(0) to scale(1) with overshoot to 1.35.

Motion guidelines. Spring curve: cubic-bezier(0.34, 1.56, 0.64, 1) for all overshoot animations. Stagger delay: 80-150ms between sequential elements. Total animation budget: keep under 1.5s for primary content, 2s max for decorative motion. Always use prefers-reduced-motion media query to disable spring animations for accessibility. Trigger on scroll via IntersectionObserver at 0.2 threshold — never animate above the fold on load.