Brand Guide

The visual and editorial system behind the Commonway System (CS): how it looks, how it's written, and how its evidence is presented. This page transcribes the working brand reference; treat the color values and rules below as the source of truth over anything in the site's theme.

#Voice attributes

#The disagreement-phrasing pattern

Every place CS takes a position against, or beyond, conventional practice uses the same underlying shape: name the origin (an intentional baseline practice, or an emergent structural pattern), then close with a classification backed by specific evidence. A baseline source is never called "wrong," "outdated," or "flawed."

• Opening A (intentional practice): "[Baseline source] recommends/practices [X]."
• Opening B (emergent/structural): "[Pattern] emerges when [structural cause]."
• Closer, always: "CS classifies this as [Default / Situational-Discouraged / Avoid], informed by [specific evidence source and finding]."

#Editorial standards

Sentence-level production rules, distinct from the voice attributes above.

• Word-lite principle. Say as little as possible while conveying as much meaning and nuance as possible. Every sentence gets tested for whether it can be shorter without losing precision.
• Layered sentence complexity. Plain-language passages use short, direct sentences with common words. Technical-layer passages, sitting just beneath, can carry longer sentences with precise technical terms and multiple citation badges. The two layers never mix mid-paragraph.

• Plain-language-first terminology. The first time a technical term appears in a plain-language passage, it's introduced in accessible language before the formal term is used, not the reverse.

#Color system

#Base tokens

#Evidence tiers (one hue, three depths)

Represents a strength gradient, not unrelated categories. Legal requirement is the strongest backing, precedent the weakest, so tiers separate by lightness and remain readable to red-green color blindness.

As rendered chips:

#Functional Classification ramps

Each Functional Classification gets a 6-step tint/shade ramp across density tiers, lightest at Undeveloped, darkest at Core. Revised and colorblind-checked against protanopia, deuteranopia, and tritanopia; Local's hue was shifted from an initial rose to a saturated violet-purple after simulation found a collision with Freeway under deuteranopia.

Local

Collector

Arterial

Freeway

Color is for fast scanning; a text label is what makes classification colorblind-safe. Never color alone.

#Typography

Fraunces (variable serif) for headings, Inter (variable sans) for body text. Both free, open-source, true variable fonts that hold up in print and web. Fraunces carries warmth and distinctiveness at display size; Inter stays clean and legible through dense technical passages.

#Illustration & photography

Clean flat vector illustration, NACTO-inspired, warmed by human figures at true scale. Spot-color amber technique: context stays grayscale, the specific pattern being illustrated floods amber.

The amber trigger rule. Only the specific pattern a page is about floods amber. Adjacent patterns appearing in the same illustration for context stay grayscale, even if they're themselves named CS Typologies with their own pages elsewhere. One page, one amber subject, no exceptions. The amber-flooded pattern occupies roughly 60 to 70 percent of the frame, with just enough grayscale context to make the relationship legible.

Human figures. Render in a fixed, neutral ink-based treatment regardless of what's flooding amber around them, since their job is scale and presence, not representing the pattern. Cap at 2 to 3 figures per illustration. Across the book as a whole, figures should reflect a real range of ages and mobility.

Sizing and aspect ratio by scale

Photography is reserved for case-study and precedent documentation only (before/after material for a real corridor), never for core pattern definitions, which stay flat vector illustration.

#Components

#Pattern ID card

The colored left edge always matches the pattern's Functional Classification, using each classification's real ramp color now that tokens.css is synced (Arterial and Freeway's real hues are naturally light, so the left border uses their darkest tier, Core, to clear the 3:1 UI-component contrast minimum). The ID text itself is always ink, per the guide: "a constant identity mark distinct from classification color." Intersections is the one classification without a documented ramp in the working draft, so its color is still a placeholder.

#Citation badge

#Unsourced-claim flag

#Buttons, links & forms

The interactive-site build needs these regardless of how sparingly the book itself uses them, since search, filtering, and the eventual interactive Guide diagnostic tool all depend on real form controls. The site does not have production <button>/<select> styling wired up as reusable components yet, but these previews use the same tokens.css values everything else on the site does.

#Buttons

Primary uses the signature teal fill with ink text, not paper text. Paper-on-teal only reaches 2.86:1 contrast and fails; ink-on-teal reaches 6.18:1.. At most one primary button per view; everything else is secondary or dark.

#Hyperlinks

Links use indigo, not teal, since teal is already committed to citations and evidence tiers. Underlined always, not just on hover, since this is a reference work first and a marketing site second. This example uses the site's real --cw-link token, which reflects both modes correctly.

The working draft's original indigo (#3D3AAB) reaches 8.28:1 contrast on light paper, but only 2.1:1 on a dark background, well below the 4.5:1 WCAG AA minimum. The dark-mode value is the same indigo/violet hue lightened, not a different color, and reaches 7.89:1 on dark paper. Dark mode isn't part of the original working draft; this pairing is a site-only addition, documented here since it's now the real token every hyperlink in the guidebook uses.

#Form controls

Focus state on text inputs and selects uses a teal outline ring, not a color change on the border alone, so keyboard navigation stays visible against every classification color context.

#Citation format

The house citation format is modeled on agency-reference conventions: source name, year, title, publisher (when distinct from the source), and URL. Entries are numbered to match their inline badges, sorted by publication date, and, within a single source cited multiple times, ordered by where the content appears in that source, not by citation number or alphabetically.

Link maintenance

One citation, one purpose.

#SEO / AEO / GEO strategy

Google's own guidance treats generative AI search optimization as fundamentally the same discipline as SEO, rooted in the same core ranking and quality systems, and explicitly debunks several tactics marketed as "GEO best practices" (llms.txt for Google specifically, content "chunking," and structured data as a requirement rather than a nice-to-have). What actually drives visibility, per Google's guidance, is unique point-of-view content and non-commodity material with genuine expert insight, organized into clear sections with real navigational headings, which is exactly what CS already is by design.

What CS does:

• Lets the plain-language layer at the top of each pattern entry function as a natural, self-contained answer block.
• URL structure mirrors the Pattern ID system (e.g. /patterns/str-ums-014).
• Uses structured data (DefinedTerm or Article schema, dateModified tied to CalVer) for genuine rich-result eligibility, not because AI visibility requires it.
• Keeps entity clarity through the Functional Classification / Street Typology terminology discipline: consistent, unambiguous naming.
• Treats the citation system as a genuine GEO asset, not a performance of one. It exists for credibility reasons first.
• Surfaces CalVer versioning visibly on every page as a real freshness signal.

What CS skips: llms.txt treated as load-bearing for Google specifically, content chunking as an optimization tactic, and structured data treated as a hard requirement rather than a nice-to-have.

#Accessibility notes

A contrast issue was caught and fixed during design: the citation badge and Evidence-based chip originally used #003D35 text on #00A896, a 4.10:1 contrast ratio, below the 4.5:1 WCAG AA requirement for text at that size. Corrected to #002D27, reaching 5.01:1 (the value used by the evidence chips above).

The full palette is simulated against protanopia, deuteranopia, and tritanopia using the Machado-Oliveira-Fairchild model. Local's hue was moved from an initial muted rose, which collapsed toward Freeway's gray under deuteranopia, to a saturated violet-purple, chosen via a hue and saturation sweep maximizing worst-case separation while staying outside the red, orange, and yellow range reserved for the warning system.

A separate legibility issue surfaced after the contrast fix above: the citation badge and unsourced-claim flag pass their contrast ratios at the working draft's --type-micro size (10px), but a numeral at 10px in a tight colored pill was hard to actually read, a real-world legibility problem the contrast ratio alone doesn't catch. Both now render at 12px, semibold, independent of the type scale documented above. Contrast is unaffected, this is a size correction, not a color one.

#Logo & wordmark

The Commonway System mark is a set of flowing ribbon shapes rendered in a warm red-to-amber gradient, paired with the wordmark "Commonway System." This is the finalized, production logo system, delivered as clean vector art with a complete set of variants for light and dark contexts.

Two explicit exceptions to the rest of this guide, scoped to the logo only:

• Gradient. The red-to-amber gradient exists nowhere else in the Commonway System. Every other use of color in this guide, illustrations, UI components, classification ramps, stays flat, no gradients. The logo is the sole exception.
• Typography. "Commonway" is set in Fraunces Bold (700), heavier than the SemiBold (600) used for headings throughout the rest of the system. "SYSTEM" is set in Inter Light (300) with extended letter-spacing. Neither weight should be replicated in body headings, card titles, or any other heading context.

#Full lockup, standard use

This is what the site itself uses in its navbar, switching automatically with the reader's light/dark mode.

#Full lockup, muted / watermark use only

#Square lockup

#Icon only, no wordmark

All logo variants ship in static/logos/, including the muted/watermark pairs, even where only the standard pair is used live on the site today.

Suggest changes to this page (opens in new tab)