Living brand book
Runwayz style guide
Every token, type style, and component — rendered live. Color rows show both modes side by side; everything else follows the current mode (toggle is in the footer). Built on the Art Deco v2 design tokens.
01
Logo
Full lockup, light and dark backgrounds.
02
Vibe / posters
The brand in the wild: bold display headline (one word italicized), real trade photography, a single accent chip per composition, money-forward copy, and the Runwayz lockup.
03
Semantic color tokens
These swap automatically by mode. Left swatch = light, right = dark. All pass WCAG AA on the surfaces they appear on.
Page background
--bg-page · #FAF4E6 / #141A28
Surface (cards)
--bg-surface · #FFFFFF / #1B2232
Raised
--bg-raised · #FFFBF0 / #272D3C
Hero
--bg-hero · #F5ECD7 / #0C1018
Border
--border · #DDE0E7 / #272D3C
Text — primary
--fg1 · #1F2430 / #F5ECD7
Text — secondary
--fg2 · #4A5264 / #DDE0E7
Text — tertiary
--fg3 · #5F6678 / #8A92A3
Accent (interactive)
--accent · #14609F / #7DB8E4
Success
--success · #1F6C52 / #5CB394
Warning
--warning · #A86A10 / #F4A02C
Danger
--danger · #B63A2A / #E87666
04
Poster accents
Decorative accent colors for marketing and UI.
05
Typography
Gill Sans is the primary typeface across all brand communications — print, decks, signage, collateral. Cabin is the secondary, open-source substitute used on digital surfaces where Gill Sans can't be licensed for the web.
Primary · Gill Sans
Licensed (Monotype). The face for all brand & design communications. Renders below if Gill Sans is installed locally (e.g. macOS); otherwise it falls back to the web font.
Build something real.
Hard skills, soft life. Future careers, taking off.
Secondary · Cabin (web)
Open-source (OFL), humanist in the Gill Sans tradition — the live web font for this site. Weight tops out at 700, which handles display.
XL Headline · .headline-xl · homepage hero (3.375 → 4.5rem)
Find your path.
Display · 700 · -0.02em
Build something real.
Heading 1 · 700 · 2.7rem (3.6rem ≥sm)
Real work. Real pay.
Subheading · .subheading · 25px
Runwayz helps great careers take off, in the skilled trades and beyond.
Heading 2 · 700
The basics
Eyebrow · 700 · 0.16em · UPPER
Section 01
Body · 400 · 1.55
Plumbers make an average of $120K per year. Just saying.
06
Components
Built from the semantic tokens — try the footer toggle to see dark.
Buttons
Tags — flat, 4px radius, one accent each
Form inputs
We use this to prioritize jobs near you.
Zip must be 5 digits.
Status
07
Light / dark side by side
The same card composition in both modes.
light
For Talent
Find your next opportunity
Training, credentials, and jobs — surfaced through the people you trust.
dark
For Talent
Find your next opportunity
Training, credentials, and jobs — surfaced through the people you trust.