Most data viz is where
brand goes to die.
Column Five turns charts into brand moments. This is the definitive guide to our visualization system — 17 chart patterns rendered in the C5 token system, each identifiable without a logo in sight.
Default charts destroy brands
Every charting library ships the same Helvetica-blue defaults. The moment a brand's data hits a dashboard or report, the visual identity evaporates. Column Five's viz system exists to fix this.
Dark canvas, white data, orange signal
Three principles make every chart unmistakably C5 — even stripped of the logo.
Surface IS the chart
The dark background (#1a171a) isn't a container — it's the canvas. Data appears as light on dark, creating natural hierarchy without needing axes or gridlines.
White encodes value
Primary data is white at varying opacities (alpha 230→160→110→75→50). Multi-series uses an opacity ramp, not a color rainbow.
Orange marks the story
#f44d37 is reserved for the one thing you want the viewer to notice. A highlighted bar, a trend line, a key data point. If everything is orange, nothing is.
Glass morphism ties it together
Chart containers use the same glass card as the rest of the brand — rgba(255,255,255,0.04) fill, 0.12 border. Charts feel like part of the UI.
Six colors, infinite compositions
The viz palette is deliberately constrained. Six primitive colors, plus a white opacity ramp for multi-series data.
The workhorses
Bar, line, and metric cards handle 80% of content marketing data. Everything else builds from here.
Bar Chart
Pill-radius bar tops (6px) are the subtle signature. Orange highlights the hero metric. Works in both orientations — vertical for comparisons, horizontal for ranked lists.
Line Chart
Time-series data with a translucent orange fill under the highlighted line. Grid lines use the divider token. Dots at data points reinforce density without clutter.
Metric Cards & Score Gauges
Single-value callouts in glass cards. Score gauges use semantic color (green/yellow/red). Progress bars snap to pill radius. The KPI building blocks.
Charts that tell stories
These patterns answer "what changed?" and "who's winning?" — the questions that make content marketing resonate.
Ridge Plot (Joy Plot)
White peaks rising from dark ground — the most visually distinctive chart in the system. Each ridge is a distribution, with overlapping rows creating depth and drama. The highlighted row pops in orange.
Bump Chart
Ranks entities across time. Crossing lines create instant narrative tension — "who overtook whom?" The highlighted entity in orange draws the eye to the protagonist.
Stream Graph
Organic flowing layers centered on a midline. Translucent white fills create depth. The highlighted layer in orange stands out without needing a legend.
Lollipop Chart
Ultra-minimal — dot + stem replaces heavy bars. Orange dot marks the highlighted data point. Horizontal orientation with category labels left-aligned.
Slope Chart
Tufte-approved minimalism. Two axes compare before/after states with connecting lines. Orange marks the protagonist. Direction of the line IS the story.
Structure and connection
Grid patterns encode density. Network patterns encode relationships. Both leverage the dark surface as "zero value."
Heatmap
The dark background IS the zero state — cells emerge as brightness increases. Supports both white and orange color modes. Cell gap and radius are configurable.
Waffle Chart
Each cell = 1%, making percentages physically countable. Orange cells mark a secondary value within the filled portion. Ghost cells at 20 alpha show the remainder.
Force Network
Glowing nodes with faint connecting edges. Highlighted nodes glow orange. The constellation aesthetic is unique to the dark canvas — it wouldn't work on white.
Micro-patterns for dense layouts
Sparklines and dot plots work inside cards, tables, and dashboards. Small enough to repeat, distinctive enough to stay on-brand.
Sparklines
Inline trend indicators — tiny line charts showing direction without axes. Pair with metric cards and pill tags for dense dashboard layouts.
Dot Plot
Values scattered along a baseline for each category. The highlighted row uses orange dots. Useful for showing spread and density within categories.
The hard stops
Non-negotiable constraints that keep the system coherent across all 17 chart patterns.
Use the dark surface (#1a171a) as chart background. Data emerges from darkness.
Never use a rainbow palette. Multi-series = white opacity ramp. Orange = highlight only.
Set Inter as the only font. Weight 500 for labels, 700 for headlines, 400 for body.
Never use orange as a background fill. It's an accent — CTAs, links, highlighted data.
Apply glass card treatment (0.04 fill, 0.12 border) to chart containers.
Never use drop shadows on any element. Zero exceptions.