Brand System & Design Tokens

Kirthi
Balakrishnan.

The tokens, type stack, color palettes, and components behind this site — documented so I can re-use them, and so future-me doesn't have to guess.

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
Scroll Hint

Animated mouse icon with scrolling dot. Fades in after hero animations, fades out on scroll via animation-timeline: scroll(). Used on project heroes and about page.

Scroll Default
Scroll Mobile
Project Photo (Hover Overlay)

Hover reveals a gradient overlay with description text and optional meta label. Image scales up slightly and darkens. Used on project page images.

CitiBike Network Analysis
Network Analysis Seasonal ridership network mapped across Jersey City and Hoboken using Python and NetworkX.
Editorial Photo

Starts in grayscale, transitions to full color on hover with subtle scale. Optional photo credit appears on hover. Used for about page hero and feature sections.

Kirthi Balakrishnan Photo credit
Resume Hover Animations

Experience items lift with accent border scaleY. Skill labels shift right, list opacity increases. Cert pills slide right with arrow reveal.

Research Analyst
HR&A Advisors
Los Angeles, CA
Data & Engineering
Python, SQL, D3.js, BigQuery
Future Cities — ETH Zurich
CAPM — in progress
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}}
09
Content Animation Library
Interactive reveal, transition, and storytelling components
CA-1

Curtain Reveal

Panels slide apart to reveal content

Content Revealed

This content was behind the curtain panels.

CA-2

Typewriter

CSS-only character-by-character reveal
Urban Tech & Data Viz
CA-3

Metric Counter

Animated KPI callouts
2.4M
Daily Riders
847
Stations Analyzed
94%
Coverage Area
CA-4

Comparison Slider

Before / after drag comparison
Before
After
CA-5

Card Deck

Stacked cards with click/swipe cycling
Card 1: Data Viz
Card 2: GIS
Card 3: Transit
CA-6

Timeline

Process strip with connected nodes
Phase 1

Research & Data Collection

Gathered census data, transit ridership, and land use records across 5 boroughs.
Phase 2

Spatial Analysis

Built GIS layers, ran network analysis, identified coverage gaps.
Phase 3

Visualization & Narrative

Designed interactive charts with D3.js and Mapbox for the final presentation.
CA-7

3D Tilt Card

Perspective tilt on hover with glare

Interactive Card

Hover to see 3D tilt effect with glare overlay. Cards respond to cursor position.