VITAL CITY Design system. Go to site

Vital City  /  design system

A working kit for data-driven, measured, charming urban-policy design.

Tokens, components, fonts, chart themes and editorial guidance — everything needed to produce on-brand Vital City artifacts. Drop this into any project or import files à la carte.

Browse tokens See chart specs

Brand DNA

Read more →

Promise

Diverse, evidenced, actionable expertise on public safety and urban policy in a package that is easy to understand and enjoyable to engage with.

Is

Data-driven · Sophisticated · Measured · Nuanced · Succinct · Charming · Intellectually energizing · Pragmatic · Clever.

Is not

Clinical · Pretentious · Dry · Precious · Austere · Cute · Politically agitative · Pessimistic · Smart aleck-y.

If Vital City were a person, they would walk quite fast with efficiency and purpose, strike a certain contrapposto pose while waiting for the subway, and slap the top of a cab to say thanks.

Wordmark

Rules →

The canonical wordmark is set in Bayard (Vocal Type), a sans inspired by the 1963 March on Washington for Jobs and Freedom. Bayard is licensed as a retail font, not a web font — the live site ships it as a raster image.

For web uses where a real text wordmark is preferred (accessibility, dark-mode recoloring, dynamic sizing, embedded artifacts), use the Halyard-based .vc-wordmark component. It reads as "in system" and degrades cleanly. Never typeset "Vital City" in any other sans, in mixed case, or with the logo PNG below ~90px wide.

Rules at a glance

  • Horizontal lockup is primary; stacked and vertical are secondary.
  • Clear space: at least 50% of the height of the "V" on all sides.
  • Minimum: 1.25"/90px wide horizontal; 0.5"/54px tall stacked.
  • Color: Black by default, White on dark fields. Never any other color.
  • Never stretch, skew, angle, shadow, or place on a busy background.

Horizontal (primary)

VITAL CITY

Stacked (secondary)

VITALCITY

On dark

VITAL CITY

On palette colors

VITAL CITY
VITAL CITY
VITAL CITY
VITAL CITY
VITAL CITY
VITAL CITY
VITAL CITY
VITAL CITY

Primary

Black#050507
White#ffffff
Cloud#dddddd
Chartreuse#dde44c
Safety Orange#ff7c53
Periwinkle#9b9fbc

Secondary

Rose#cea9be
Magenta#e7466d
Charcoal#707175
Indigo#394882
Cerulean#217ebe

Gradients for data visualization

Used for maps, choropleths and tables where a spectrum or divergence matters. Tertiary "good/bad" colors are not general brand colors — they belong in data viz only, and should be used sparingly. Drop steps to reduce color vibration; prefer primary/secondary colors or tertiaries closest to them.

"Good" → "bad", linear

Chartreuse Safety Orange

"Good" / colder, binned ←

Goodest Green
#57aa4a
Good 3
#7cbf4e
Good 2
#9cc456
Good 1
#bdd451
Chartreuse
#dde44c

"Bad" / hotter, binned →

Safety Orange
#ff7c53
Bad 1
#fb693c
Bad 2
#ed5236
Bad 3
#e03a30
Baddest Red
#d2232a

Divergent ←→

Goodest Green
#57aa4a
Good 0
#e0e883
Bad 0
#fb9e63
Baddest Red
#d2232a

Optional minimums shown — anchors may be extended with additional bins as needed.

Type on color

Black text is the standard, in print and on web. Color text is used sparingly — single words, small kickers, data labels. Check accessibility on every pairing before shipping, especially at thinner weights and small sizes. "More" = use as much as possible; "Less" = use sparingly; blank = don't use.

TEXT ↓  /  BG →
White MORE MORE MORE MORE MORE
Black MORE MORE MORE MORE MORE MORE MORE
Cloud LESS
Chartreuse LESS LESS LESS LESS LESS LESS LESS LESS
Safety Orange LESS LESS LESS LESS
Periwinkle LESS LESS LESS
Rose LESS LESS
Magenta LESS LESS LESS LESS
Charcoal LESS LESS LESS
Indigo LESS LESS LESS
Cerulean LESS LESS LESS

Role

  • Pop (chartreuse) — drop shadows, chart fills, rare single-word accent
  • Accent (orange) — nav, CTAs, kickers, trend lines
  • Focal (magenta) — the subject of analysis
  • Compare (cerulean) — comparison groups
  • Muted (charcoal) — axis labels, deks, metadata
  • Neutral (periwinkle) — sophisticated filler

Typography

fonts.css →

Halyard Text · primary

Halyard Black 900

Halyard Bold 700 · small caps labels, kickers

Halyard Book 300 · body copy, chart annotations. A finely balanced contemporary take on the classic grotesques of the 19th and 20th centuries.

Halyard Light 200 · subheads, chart subtitles and deks.

Gascogne Extra Light · secondary serif

Gascogne Light 300

Article deks and alternative title style. Refreshing serif break from Halyard.

Pullquotes are set in Gascogne, never in quotation marks.


Type scale

Display · Gascogne

To Prioritize Pedestrians, We Need to Walk the Walk

H1 · Halyard Black

1 in 7 days in 2025 were shooting-free

H2

A reduction that lags the nation

Dek · Halyard Light

Percent change in murder rates between 2019 and 2025*

Kicker · Halyard Bold caps

Crime · City Planning · Homelessness

Article type scheme

vitalcitynyc.org →

The living reference for article pages is the website itself — these classes mirror what vitalcitynyc.org actually ships. Display headlines use halyard-display (medium 500); body copy uses halyard-text (book 300). Gascogne at weight 200 is reserved for pullquotes and the occasional serif break. When the site updates, defer to the site, not this page.

Live example

Criminal justice

To prioritize pedestrians, we need to walk the walk

A decade after Vision Zero, the city still spends more on parking enforcement than on the sidewalks people actually use.

Body copy is halyard-text book (300) at roughly 17px with a 1.6 line height. It sits comfortably alongside charts and photography and leaves the serif for deliberate moments.

A reduction that lags the nation

Subheads are halyard-display medium (500). The display family lends just enough weight to carry at larger sizes without feeling blocky.

The hairline rule is Safety Orange, 1.5px — the single place where the brand pop earns a full appearance in running text.

Back to body. Short paragraphs. Evidence-led sentences. No vibes-only voice.

Class reference

.vc-article__kicker — halyard-text 700, 12px, tracked caps, Safety Orange
.vc-article__h1 — halyard-display 500, clamp(32–52px), line-height 1.08
.vc-article__dek — halyard-text 200, clamp(18–22px), charcoal
.vc-article__byline — halyard-text 700, 13px, tracked caps
.vc-article__h2 — halyard-display 500, clamp(24–30px)
.vc-article__h3 — halyard-text 700, 18px
.vc-article__body — halyard-text 300, 17px / 1.6
.vc-article__display-serif — Gascogne 200 italic — pullquotes, occasional deks
.vc-article__blockquote — Gascogne 200 italic, 1.5px Safety Orange left rule

Font loading: this page now pulls the site's Typekit kit nlh6iak, which ships halyard-display, halyard-text, and atlas-grotesk. If you embed these classes in a project using the older qqk2vto kit, the display family falls back to halyard-text gracefully.

Components

components.css →

Buttons

Donate Subscribe Explore data Read more

Article cards

Feature card — panel tucked into the image

Just Fix It · Apr. 14 2026

Mamdani's first 100 days: a scorecard


How's he doing when it comes to helping the gears of government turn better?

Photo tag with arrow — "Data" section treatment

Crime
Jails
Subway

Data visualization

Flourish theme →

Categorical series order

Matches published Vital City Flourish charts. Place the focal subject in series 1 to get Safety Orange. Override to Magenta when you want the focal highlight.

  1. Safety Orange — #ff7c53
  2. Chartreuse — #dde44c
  3. Cerulean — #217ebe
  4. Magenta — #e7466d
  5. Rose — #cea9be
  6. Indigo — #384984
  7. Periwinkle — #9b9fbc
  8. Periwinkle 50 — #cdcfde
  9. Charcoal — #707175
  10. Black — #050507
  11. Cloud — #dddddd

Chart tokens

  • Title — Halyard Black, #050507, sentence case, opinionated (tell the reader what it means)
  • Subtitle / dek — Halyard Light, #707175
  • Tick labels — #707175
  • Axis titles — #050507, normal weight
  • Gridlines — #dddddd, 1px, horizontals only where possible
  • Background — #ffffff, always
  • Source — "Source: " + hyperlinked dataset name, Charcoal, small
  • Logo — only on standalone exports ≥ 24px tall; omit from inline HTML charts

1 in 7 days in 2025 were shooting-free in New York City

Percent of days with zero shooting incidents reported to NYPD, by year*

20% 15% 10% 5% 0% 9.8 11.5 12.6 13.4 6.3 8.2 11.9 14.2 2018 2019 2020 2021 2022 2023 2024 2025 PANDEMIC →

Source: NYPD Shooting Incident Data (Historic), NYC Open Data. *2025 is year-to-date through 12/07. Illustrative figures.

Headline rules

  • Good: "1 in 7 days in 2025 were shooting-free"
  • Good: "The city's reduction in murders lags the nation"
  • Bad: "Shooting-Free Days by Year" (descriptive label, not analysis)
  • Bad: "Murder Rate Changes by City" (no point of view)

What we publish

Smart, accessible writing about how cities work — and how they could work better. Pragmatic ideas rooted in research and data that might actually improve urban governance, public safety, housing, transit, parks, budgets.

The sweet spot

"Keyhole" pieces — small, achievable changes that yield outsized benefits without requiring a political revolution. Comparative urbanism. Data that surprises. Accountability without outrage.

Not for us

Invective, ad hominem attacks, partisan scorekeeping, op-eds that are mostly vibes, pieces built on outrage, or arguments that blame one villain and assume bad faith.

Writers can

Acknowledge the strongest version of opposing views before disagreeing. Draw on RCTs, reporting, personal experience or deep study. Use hyperlinks, not footnotes. Be lively when possible.