Brand System & Design Tokens

Kirthi
Balakrishnan.

A comprehensive visual identity system for data-driven design — typography, color, layout, components, and data visualization standards.

DM Mono → DM Sans → Space Mono
Teal/Cyan × Purple × Dark Ground

01
Typography
Three voices — display, structural, metadata
Display Voice — DM Mono
Kirthi Balakrishnan
DM Mono Medium / 51.5px / -0.02em / Name and H1 branding only
Structural Voice — DM Sans (prod: Diatype)
Urban Systems & Spatial Data
Transit-Oriented Development Analysis
The project investigates the spatial relationship between transit infrastructure investment and housing affordability outcomes across twelve metropolitan regions, using geospatial regression models and longitudinal census tract data.
H2: Bold 32px / H3: Semi 22px / Body: Regular 16.77px
Metadata Voice — Space Mono (prod: Monument Grotesk Mono)
Spring 2022 / Conflict Urbanism / Columbia GSAPP
D3.jsPythonGISTypeScript
"The map reveals not geography but ideology — every boundary line encodes a power relation."
Tags: 12px / Metadata: 14.38px, 0.4 opacity / Pull quotes: italic, centered
FontRoleWeb SubLicense
DM MonoDisplay / H1DM Mono (same)Google Fonts — OFL
DiatypeStructuralDM SansDinamo — Commercial
Monument Grotesk MonoMetadataSpace MonoDinamo — Commercial
02
Color System
Click any swatch to copy — switch format below
Teal / Primary
Purple / Secondary
Sequential — Choropleth (5-step)
Diverging — Purple ↔ Teal
Categorical — 6-Color
on #FFF
on #1A1A1A
Text Opacity System
Light BG Primary — 0.85 Secondary — 0.65 Muted — 0.40
Dark BG Primary — 0.90 Secondary — 0.65 Muted — 0.40
03
Spacing & Layout
Fluid tokens and page structure
8
xs
12
sm
16
md
24
lg
38
xl
64
2xl
96
3xl
Two-Column Header
24.3%
70%
5.7% gap
3-Column Grid
card
card
card
38px gap / flex-wrap
04
Components
Reusable interface elements
Project Card
Diversity in America
D3.jsTypeScript
Urban Mobility
PythonKepler.gl
Transit Infrastructure
ArcGISGeoPandas
05
Data Visualization
Live D3 demos — charts animate on scroll entry
PropertyValueToken
Background#1A1A1A--dark-bg
Axis#333 / 0.5px--dark-border
Gridrgba(255,255,255,0.04) dashed—
LabelsSpace Mono 10px / 0.4 opacity--font-meta
Annotations#E8A87C dashed--color-annotation
Grouped Bar Chart
Housing units by type
Multifamily
Mixed-Use
Affordable
Animated Line Chart
Transit ridership indexed to baseline
Stacked Area Chart
Funding allocation by category over time
Beeswarm Plot
Median rent distribution by tier
Donut Chart
Tenure composition — renter vs owner
Slope Chart
Affordability index shift 2019 → 2024
Waffle Chart
Housing stock by type (each square = 1%)
06
Map Styles
Basemaps, choropleths, and label hierarchy
ElementStyle
BasemapCarto Dark Matter / Mapbox Dark
ChoroplethSequential teal 5-step / quantile
Polygon strokergba(255,255,255,0.08) / 0.5px
Point markers#6FCDCD / 4-8px / 0.7 opacity
Primary labelsDM Sans 600 12px / #FFF 0.8
Secondary labelsSpace Mono 10px / #FFF 0.4
Carto Dark Matter
Mapbox Dark
Custom KB Dark
07
Hex Tile Grid
Hover to explore — sequential teal fill
08
Implementation
Drop-in code — D3, Python, ArcGIS, Kepler
// KB Brand Scales — D3.js
const seq = d3.scaleLinear()
  .domain([0,.25,.5,.75,1])
  .range(["#E0F5F5","#9CDFDF","#6FCDCD","#4BAFAF","#236363"]);
const cat = d3.scaleOrdinal()
  .range(["#6FCDCD","#8B7FB8","#E8A87C","#E85D75","#95C77E","#F2CC60"]);
# KB Brand — Python
from matplotlib.colors import LinearSegmentedColormap
KB_SEQ = ["#E0F5F5","#9CDFDF","#6FCDCD","#4BAFAF","#236363"]
KB_CAT = ["#6FCDCD","#8B7FB8","#E8A87C","#E85D75","#95C77E","#F2CC60"]
kb_cmap = LinearSegmentedColormap.from_list("kb", KB_SEQ)
// ArcGIS Pro RGB
// Sequential: 224,245,245 → 156,223,223 → 111,205,205 → 75,175,175 → 35,99,99
// Cat: 111,205,205 | 139,127,184 | 232,168,124 | 232,93,117 | 149,199,126 | 242,204,96
{"sequentialTeal":{"colors":["#E0F5F5","#9CDFDF","#6FCDCD","#4BAFAF","#236363"]},
 "mapStyle":{"styleType":"dark"},
 "layerDefaults":{"opacity":0.7,"strokeWidth":0.5}}