Terminal Design System
Three type families, each with a role. Saira Condensed is the display face — condensed proportions give headlines an industrial, utilitarian feel. Overpass handles body text with clean readability. IBM Plex Mono is the instrument face — flight numbers, manifest codes, nav labels, coordinates, and all data that needs to scan like a cockpit gauge.

Type Roles

Each role binds a size, font, weight, and tracking. The visual hierarchy is the grouping.

hero-title Camron Flanders
page-title What I Use
flight CF-1 · CF-2 · CF-3
body Software engineer building fast, reliable web apps.
nav-item HOME → USES → PROJECTS
section Desk — Section A
status ON TIME
tag ELIXIR PHOENIX LIVEVIEW
footer-item GITHUB UPLIFT EMAIL RSS
manifest A-1 A-2 B-1 B-2
subtitle KLWC · 72°F CLEAR 10SM · VFR
meta WELCOME ABOARD · 38°58'N 95°14'W

Lockups

Common font pairings as they appear in the system

Page header + body

Projects

Tools, experiments, and side projects. Each one is a flight — some are on time, some are still boarding.

Hero: label + title + description
Cargo Manifest

What I Use

Tools, hardware, and software powering the cockpit.

Data label + value
Carrier
LULA
Equipment
ELX/RCT/TS
Station
KLWC
Section header
Desk SECTION A
Metadata line
KLWC • ELEV 833FT • RWY 15/33
Card: title + description + tags
Wallpaper Splitter

Tile a single image across multiple displays with pixel-perfect alignment.

elixir liveview canvas

Font Families

Each family at its working weights

Saira Condensed — display
Normal 400
Medium 500
Semibold 600
Bold 700
Overpass — body
Normal 400 — body text, descriptions, long-form content
Medium 500 — emphasized body, card titles
Bold 700 — strong emphasis
IBM Plex Mono — instruments
Regular 400 — coordinates, timestamps, data values
Medium 500 — nav items, manifest codes
Semibold 600 — labels, button text

Letter Spacing

Four tracking tokens — tighter for dense labels, wider for section headings

TERMINAL DESIGN SYSTEM
tracking-label (0.1em) — tags, status, form labels
TERMINAL DESIGN SYSTEM
tracking-nav (0.15em) — nav items, menu links
TERMINAL DESIGN SYSTEM
tracking-section (0.2em) — section headers, group labels
TERMINAL DESIGN SYSTEM
tracking-wide (0.25em) — footer links, sparse metadata