· Internal reference ·

Design system.

Every color, font, size, space, radius, and shadow used on State Affairs, with a live sample and the exact value you can paste into Webflow.

Click any value to copy
01 · Brand

Core brand colors.

Four colors carry the brand: deep black, cream white, green accent, gold highlight. Every other color on the site is a tint or shade of these.

Dark
0a0a0a
#0a0a0a · rgb(10, 10, 10)
Light
f5f1ea
#f5f1ea · rgb(245, 241, 234)
Accent: Green
2d7a5f
#2d7a5f · rgb(45, 122, 95)
Highlight: Gold
c2a056
#c2a056 · rgb(194, 160, 86)
02 · Colors

Full palette.

Every named color, grouped by purpose. Click a swatch to copy the hex.

Neutrals: Dark

Black
#000000
Dark
#0a0a0a
Dark · soft
#0d0d0d
Dark · card
#111111

Neutrals: Light

Pure white
#ffffff
White
#f8f5ef
Light
#f5f1ea
Light · warm
#f2ede5

Grays: 900 → 50

Gray · 900
#1a1a1a
Gray · 800
#2a2a2a
Gray · 700
#3a3a3a
Gray · 600
#555555
Gray · 500
#777777
Gray · 400
#999999
Gray · 300
#bbbbbb
Gray · 200
#d4d4d4
Gray · 100
#e8e8e8
Gray · 50
#f0f0f0

Green: Primary accent

Accent
#2d7a5f · base
Accent · dark
#1f5e48 · hover
Accent · light
#3d9474 · on-dark
Sage
#5a8a72 · muted

Gold: Highlight

Gold
#c2a056
Gold · muted
rgba(194,160,86,0.2)
Gold · border
rgba(194,160,86,0.15)
Gold · border 2
rgba(194,160,86,0.12)
03 · On dark

Text & accents on dark backgrounds.

When a section uses #0a0a0a as background, these are the colors to reach for — text, subtle borders, the green and gold that read best on black.

Text: primary
Default body text on dark sections
The quick brown fox jumps over the lazy dog.
Text: muted
Secondary body, captions
The quick brown fox jumps over the lazy dog.
Text: subtle
Tertiary labels, timestamps
The quick brown fox jumps over the lazy dog.
Border: subtle
Section dividers on black
Border: gold
Emphasis dividers on black
04 · On light

Text & borders on light backgrounds.

When a section uses #f5f1ea, #efe9de, or #ffffff as background, reach for these. Hex text colors pull from the gray scale. Borders are rgba black for consistent tinting on any light bg.

Text: primary
Default heading / strong body
The quick brown fox jumps over the lazy dog.
Text: body
Long paragraphs in articles
The quick brown fox jumps over the lazy dog.
Text: muted
Secondary body, descriptions
The quick brown fox jumps over the lazy dog.
Text: subtle
Eyebrow labels, captions
The quick brown fox jumps over the lazy dog.
Text: tertiary
Placeholder-level, disabled
The quick brown fox jumps over the lazy dog.
Border: subtle
Section dividers on white/cream
Border: default
Grid cells, card borders
Border: cream
Inside cream & warm-light sections
05 · Tags

Tag & status colors.

Semantic color pairs used on pills, badges, and inline tags. Each tag has a background tint and a text color.

BILL
Bill tag
bg rgba(45,122,95,0.12) · text #3d9474
HEARING
Hearing tag
bg rgba(234,179,8,0.12) · text #d4a20a
NEWS
News tag
bg rgba(34,197,94,0.12) · text #22c55e
AI
AI tag
bg rgba(90,138,114,0.12) · text #5a8a72
ALERT
Alert tag
bg rgba(220,80,60,0.12) · text #dc503c
06 · Fonts

Three font families.

Playfair Display for editorial headings, Figtree for UI and body copy, SF Mono for data and code. Italic Playfair on the accent color is the signature H1 treatment.

Heading · Display
Aa Bb Cc
Relevant data. Hearing AI.
400 500 600 700 Italic
Body · UI
Aa Bb Cc
The 50-state policy intelligence platform.
300 400 500 600 700
Mono · Data
Aa Bb Cc 123
SB 1047 · score 94/100
400 500 600
07 · Headings

Heading scale.

H1–H3 use Playfair Display. H4–H6 switch to Figtree (used for UI and labels). Sizes scale with viewport using clamp().

H1
Playfair · clamp(36px, 5vw, 60px)
Relevant data. Hearing AI.
H2
Playfair · clamp(28px, 4vw, 48px)
One platform. Nothing slips.
H3
Playfair · clamp(22px, 3vw, 32px)
Hundreds of bills. A dozen statehouses.
H4
Figtree · 24px
Government affairs and policy team
H5
Figtree · 20px
Capabilities used on this engagement
H6
Figtree · 18px
Additional metadata about the record
08 · Body

Body text scale.

Figtree, line-height 1.6. Use Large (20px) for lead paragraphs under a heading. Base (16px) is the default. Small (14px) for UI labels. XS (12px) for uppercase eyebrows.

Body · Large
Lead paragraph / hero sub
Carvana's government affairs team operates across hundreds of bills.
Body · Medium
Article body on case studies
State Affairs delivers relevant, scored legislative activity against the issue set.
Body · Base
Default body text
Signal quality — the right activity surfaced against the issue set, hearing-level detail.
Body · Small
UI labels, captions
Automated monitoring runs continuously across states.
Body · XS
Uppercase eyebrows, metadata
Customer story · Carvana
09 · Weights

Font weights.

Figtree ships with 300–700. Playfair with 400–700 and italic variants. Bold (700) for most headings; Semibold (600) for UI; Medium (500) for quiet emphasis; Regular (400) for body.

Light · 300
Figtree only, rarely used
State Affairs · 300 Light
Regular · 400
Default body weight
State Affairs · 400 Regular
Medium · 500
Quiet emphasis, button text
State Affairs · 500 Medium
Semibold · 600
UI headings, nav links
State Affairs · 600 Semibold
Bold · 700
Display headings, strong emphasis
State Affairs · 700 Bold
Italic
Playfair italic, signature accent
Nothing slips.
10 · Spacing

Spacing scale.

Base unit: 4px. Every margin, padding, and gap on the site picks from this ladder. Use the named token, not an arbitrary pixel.

space-1 4px · 0.25rem
space-2 8px · 0.5rem
space-3 12px · 0.75rem
space-4 16px · 1rem
space-5 20px · 1.25rem
space-6 24px · 1.5rem
space-8 32px · 2rem
space-10 40px · 2.5rem
space-12 48px · 3rem
space-16 64px · 4rem
space-20 80px · 5rem
space-24 96px · 6rem
space-30 120px · 7.5rem
11 · Radius

Border radius.

Sharp corners. Almost everything on State Affairs is 0px or 2px. Small tags can use 3–4px. Never circles, never pill shapes, never rounded avatars.

Sharp · 0
0px
Default · 2
2px
Tag · 3
3px
Badge · 4
4px
12 · Shadows

Elevation & shadows.

Used sparingly. Cards stay flat by default. Reserve shadow-lg and shadow-xl for hover lifts and floating panels.

shadow-sm
0 1px 2px rgba(0,0,0,0.05)
shadow-card
0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)
shadow-md
0 4px 12px rgba(0,0,0,0.08)
shadow-lg
0 8px 30px rgba(0,0,0,0.12)
shadow-lift
0 12px 40px rgba(0,0,0,0.15)
shadow-xl
0 20px 60px rgba(0,0,0,0.15)
13 · Layout

Containers & layout.

Most pages max out at 1340px with 48px side padding. Nav runs a bit wider (1440). Narrow article columns (760px) are used on case studies.

Container · default
Most pages / sections
Container · narrow
Case study / article columns
Container · wide
Nav, customer grids
Nav height
Fixed top nav
14 · Motion

Transitions & timing.

Four timing presets. Fast for hover color changes. Base for most UI. Slow for reveals. Spring only for confident, playful moments (card lifts, stepper pops).

Fast
Color & border hovers
Base
Default UI transitions
Slow
Dropdowns, reveals
Spring
Overshoot, playful lifts
15 · Reference

Complete CSS variables.

Everything in one place. Copy the whole block into Webflow → Site Settings → Custom Code → Head Code (or into a style block) and every token is available as a CSS variable.

/* State Affairs — Design Tokens */ /* Paste inside :root or a CSS block in Webflow */ --color-black: #000000; --color-dark: #0a0a0a; --color-dark-soft: #0d0d0d; --color-dark-card: #111111; --color-white: #f8f5ef; --color-white-pure: #ffffff; --color-light: #f5f1ea; --color-light-warm: #f2ede5; --color-gray-900: #1a1a1a; --color-gray-800: #2a2a2a; --color-gray-700: #3a3a3a; --color-gray-600: #555555; --color-gray-500: #777777; --color-gray-400: #999999; --color-gray-300: #bbbbbb; --color-gray-200: #d4d4d4; --color-gray-100: #e8e8e8; --color-gray-50: #f0f0f0; --color-accent: #2d7a5f; /* primary green */ --color-accent-dark: #1f5e48; /* hover / pressed */ --color-accent-light: #3d9474; /* on-dark accent */ --color-sage: #5a8a72; --color-gold: #c2a056; /* highlight / eyebrow */ --font-heading: 'Playfair Display', Georgia, serif; --font-body: 'Figtree', -apple-system, sans-serif; --font-mono: 'SF Mono', Menlo, monospace; --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-md: 1.125rem; /* 18 */ --text-lg: 1.25rem; /* 20 */ --text-xl: 1.5rem; /* 24 */ --text-2xl: 2rem; /* 32 */ --text-3xl: 2.5rem; /* 40 */ --text-4xl: 3rem; /* 48 */ --text-5xl: 3.75rem; /* 60 */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-30: 120px; --container-max: 1340px; --container-padding: 48px; --nav-max: 1440px; --radius-sm: 0px; --radius-md: 2px; --radius-lg: 2px; --radius-xl: 2px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-lift: 0 12px 40px rgba(0, 0, 0, 0.15); --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
Copied