Style 1: UI

Seven styles,
no exceptions.

1 — UI
AG 500 · 11px · uppercase · ls 0.13em

Nav links, kickers, tags, captions, meta text, form labels, source citations, "read more" links. One style for all small uppercase text.

District 8 · Platform

Housing Transit Public Safety

Source: SF Controller's Office, FY2024–25 budget report

Read more →


2 — CTA
AG 500 · 13px · uppercase · ls 0.07em

All buttons. Outline at rest, no border when filled. Slightly larger than UI, tighter tracking for readability at button scale.

Single CTA — outline at rest, violet fill on hover Read the platform →
Cursor-tracked — spotlight follows mouse, no outline when filled Get Involved → Donate →
Paired CTAs (hero pattern) — primary filled, secondary matches standard outline Read the Platform → Get Involved →
Paired CTAs on plum Donate → Learn More →

3 — Heading
AG · 3 weight tiers, responsive clamp sizes

All headlines and card titles. Weight and size shift by tier but it's one conceptual style.

Hero — AG 900 · clamp(52px, 6.5vw, 88px)

Join us.

Section — AG 800 · clamp(30px, 3.8vw, 46px)

Actually build housing

Subsection — AG 700 · clamp(19px, 2.2vw, 24px)

Streamline permitting for small projects


4 — Body
DT 400

All reading text. Lede is a size variant used only in hero sections — not for opening paragraphs or subsection subtitles.

Lede — DT 400 · 20px · lh 1.4 · hero sections only

Below is everything I plan to do, including the parts I'm not sure about yet. Each section links to the research behind it.

Standard — DT 400 · 17px · lh 1.5

The J Church runs on time less than half the time. The SF Charter mandates 85% on-time performance, which SFMTA has never hit. The agency hasn't published route-level performance data since 2018. A city department shouldn't be able to choose a metric just because it looks better. I want both numbers reported, side by side.

Highlighted text — <mark> for editorial emphasis (light surfaces only)

Two SFMTA Board positions expire fourteen months into the next supervisor's term. I'll use those confirmation hearings to push for specific commitments: D8 route performance published monthly, headway and schedule-based data reported together, and a timeline for the J Church corridor engineering study.


5 — Pull Quote
AG 500 · clamp(18px, 2.1vw, 23px) · always < subsection

One style. AG medium, never larger than subsection. Curly quotes, no decoration. Like current tier 2e but capped. No italic.

“A city department shouldn't be able to choose a metric just because it looks better.”

— Darshini Patel, Platform

6 — Stat
AG 900 · responsive clamp sizes · gradient optional

Large numbers that anchor a section. Gradient is a color event. Kept separate from Heading because stats use display-scale sizing with unique line-height.

Hero stat — clamp(72px, 10vw, 140px)
627

Days average permit approval

Sentence stat — clamp(36px, 4vw, 56px)
$108M

SFPD overtime since 2019

Seen together

How they work on a real page

Housing

Actually build housing

San Francisco approved 69 new homes in District 8 last year. We need ten times that. Here's how we get there.

Streamline permitting for small projects

The average permit takes 627 days to approve in San Francisco. That's not a backlog — it's a policy choice. Every month of delay adds cost that gets passed to renters and buyers. I'll push for a 180-day maximum for projects under 10 units, with automatic approval if the city misses the deadline.

“Every month of delay adds cost that gets passed to renters and buyers.”

Two SFMTA Board positions expire fourteen months into the next supervisor's term. I'll use those confirmation hearings to push for specific commitments.

Source: SF Planning Department, Annual Housing Inventory 2024

On dark surfaces

Same six styles, inverted

Every style works on plum. Color shifts are handled by surface classes, not new type styles.

“Color is punctuation, not grammar.”

The default state is monochrome — cream and dark text. The page loads warm and quiet. Color is earned through scale, interaction, or gravity.

Source: C.5 Restraint Design System