Verdigris Design System

Convention

Generalizes the whitepaper-cover eyebrow pattern (categories/whitepapers/cover.md) to web surfaces. The middot (·) separator + uppercase + tracking-wide system was shipped on the LBNL/DOE briefing and is now adopted as the universal Verdigris eyebrow.

Eyebrow Typography

The eyebrow is the small text element that sits above the H1. It locates the reader: which taxonomy is this page in, what audience or product family does it serve. It is structurally the page’s answer to the URL bar — the first signal that this page is the right page.

Verdigris eyebrows are uppercase, tracking-wide, and use the middot (·) as the inter-segment separator. This guide codifies the form.

Rule

Form

Property Value Source
Font family Lato (display stack) tokens/typography/font-family.json
Font weight 700 tokens/typography/scale.json > fontWeight.bold
Font size (web) caption (0.8125rem / 13px) or caption-strong (0.875rem / 14px) when number-prefixed tokens/typography/scale.json
Font size (print) 9pt (cover), 13pt (number-prefixed section eyebrow) categories/whitepapers/cover.md (existing)
Case UPPERCASE Lato 700 + uppercase is the established Verdigris small-caps register
Letter-spacing 0.10em (body eyebrow), 0.16em (cover eyebrow), 0.18em (chart/diagram eyebrow) categories/whitepapers/cover.md, categories/visualizations/index.md
Color --brand-teal-soft on dark backgrounds, --vd-muted on light backgrounds tokens/color/*.json
Max length (rendered) 64 characters including separator New — see Rationale below
Separator character middot · (U+00B7) with one space on each side New — see Rationale below

Content rules

  1. Two or three segments, separated by ` · ` (space-middot-space). The first segment is the taxonomy label (singular noun or noun phrase). Subsequent segments are scope qualifiers (audience, product, partner, location). Examples:
    • INTEGRATION · SCHNEIDER ECOSTRUXURE
    • INDUSTRY · COLOCATION
    • BRIEFING · LBNL GRID INTEGRATION GROUP / DOE
    • PLATFORM · OBSERVABILITY
    • CASE STUDY · T-MOBILE
  2. Never use the en-dash (–), em-dash (—), or slash (/) as inter-segment separator. Slash inside a single segment is acceptable when the segment is itself a compound name (e.g. LBNL GRID INTEGRATION GROUP / DOE). The inter-segment separator is exclusively the middot.
  3. **Never use the pipe ( ).** The pipe reads as utility-bar typography (filenames, tab labels, breadcrumb chrome). The middot reads as editorial taxonomy. Match the register.
  4. No terminal punctuation in the eyebrow. Not a period, not a colon. The eyebrow is a label, not a sentence.
  5. Taxonomy segment in singular noun form. INTEGRATION not INTEGRATIONS; INDUSTRY not INDUSTRIES. The eyebrow names the genre of the page, not a directory.

Why middot (·)?

The middot has a 500-year typographic history as the inter-segment separator in editorial mastheads, bibliographic citations, and signage. It does not carry the semantic weight of a comma, the rhythmic break of an em-dash, or the structural division of a pipe. It reads as a typographic pause — a register-shift signal without breaking the line’s visual continuity.

Editorial precedent: the New York Times (date-byline-section masthead), the Financial Times (sector-region segmentation in indices), Stripe Press jacket spines (title · author). The middot is the established convention for compact, multi-attribute editorial labels.

Why this length cap?

64 characters is the eyebrow’s mobile-fold ceiling. Above that, the eyebrow wraps; once wrapped, it loses the structural “this is a taxonomic label” register and starts to read as a deck. If a longer reference is needed (e.g. a long partner name), abbreviate or move the additional context to the deck.

Compliant

Eyebrow Why
INTEGRATION · SCHNEIDER ECOSTRUXURE Two segments, middot separator, uppercase, singular taxonomy noun, 36 chars.
INDUSTRY · COLOCATION Two segments, taxonomy + scope, short.
CASE STUDY · T-MOBILE · 800-RECTIFIER PILOT Three segments, all uppercase, middot separators, 44 chars.
BRIEFING · LBNL GRID INTEGRATION GROUP / DOE Slash inside compound segment is acceptable.
PLATFORM · OBSERVABILITY Singular nouns, two segments.

Non-compliant

Eyebrow Why it fails
Integrations | Schneider Electric Pipe separator (utility chrome register), title case, plural taxonomy noun. Three violations.
INTEGRATION — SCHNEIDER ELECTRIC Em-dash separator. AI-tell.
INTEGRATION / SCHNEIDER / ECOSTRUXURE Slash as inter-segment separator (overloaded; slash is reserved for compound segment names).
INTEGRATIONS · SCHNEIDER ECOSTRUXURE Plural taxonomy noun (“INTEGRATIONS” → “INTEGRATION”).
Integration · Schneider Ecostruxure Title case instead of uppercase. Breaks the small-caps register.
INTEGRATION · SCHNEIDER ECOSTRUXURE FOR DATA CENTERS AND COMMERCIAL BUILDINGS 75 chars; wraps on mobile. Move scope to the deck.
INTEGRATION · SCHNEIDER ECOSTRUXURE. Terminal period on a label.

Where this applies

Surface Scope
/integrations/* Required — INTEGRATION · <PARTNER>
/industries/* Required — INDUSTRY · <SEGMENT>
/platform/* Required — PLATFORM · <PILLAR>
/hardware/* Required — HARDWARE · <PRODUCT FAMILY>
/solutions/* Required — SOLUTION · <USE CASE>
/company/* Recommended — COMPANY · <PAGE>
/resources/blog/* Recommended — BLOG · <TAG> or <DATELINE> · <CATEGORY>
Whitepaper covers (PDF) See categories/whitepapers/cover.md for the cover-eyebrow tier — the rule is the same.

Sources

  1. categories/whitepapers/cover.md (existing) — established the middot pattern for Verdigris whitepaper covers (e.g. BRIEFING · LBNL GRID INTEGRATION GROUP / DOE). This rule generalizes that pattern to web surfaces.
  2. Robert Bringhurst, The Elements of Typographic Style (4.x editions), Chapter 5 “Analphabetic Symbols” and Chapter 6 “Letterforms,” on the editorial role of the middot (interpunct) as a quiet separator in compact labels.
  3. Editorial precedent. New York Times masthead, Financial Times sector indices, Stripe Press jacket spines.

See also