Color

Named colors cover chrome and marketing CTAs. Navy and accent carry links on white. btn-fill is the marketing button wipe. Footer is the upper band and the links along the bottom of a mega menu. Footer deep is the lower band.

• Navy

  #1d386f

  Links, the Contact button, and the browser theme color.

• Accent

  #b41e44

  Hover on links and the Contact button. The open-menu underline.

• Button fill

  #d81b24

  Marketing CTA wipe hover. Distinct from chrome accent.

• Footer

  #1c4293

  The upper footer band, and the links along the bottom of a mega menu.

• Footer deep

  #193f8e

  The lower footer band, behind the address and legal links.

• Ink

  #171717

  Body text on white.

• Muted

  #444545

  Category labels in the mega menu.

Used in the chrome, not named yet

These appear in the menu and footer. They stay as local values until a second component needs the same one. Naming every gray now would make the system noisier, not stricter.

• Menu railThe gray category column.#e0e0e0
• Menu barThe strip of links at the bottom of a panel.#f4f4f4
• HairlineDividers inside the menu.#d0d0d0
• Card washThe tint behind a hovered menu card.#95aad638
• Footer headingColumn titles such as Platform. Quieter than the links.white at 82%
• Footer hoverLink text on hover in the footer, with a rose underline.#ffe8ec

Type

Scale

These roles are the adopted type scale. text-display is the homepage hero H1 and shares the same CSS variables the hero uses, so the sample below matches the live page at your current viewport width.

• Display · Campton Bold · text-display · homepage hero H1 · tracking-display (~−0.025em)

  Responsive size: 61 → 45 → 40 → 36 → 34 → 28px. Two lines with an explicit break after “platform”. Tokens: --text-display, --tracking-display.

  A software platform
  exclusively for the government

• Title · Campton Bold · 40px · text-title · letter-spacing normal · btn-fill

  Section H2s on the homepage (Solutions, Intelligent Agents). Steps down with the viewport so display stays above title: 40 → 30 → 28 → 24 → 22px.

  Solutions

  Gov2Biz Intelligent Agents for Governments

• Card · Campton Bold · 30px / 36px line · text-card

  Licensing

• Feature · Campton Medium · 26px · text-feature

  Single place for all departments

• Lead · Asap Medium · 24px, 1px tracking · text-lead

  Hero supporting sentence only. Do not reuse for section body copy under a title.

  Software to power the government, delivered from a cloud platform.

• Body · Asap Regular · 18px · text-body · letter-spacing normal

  Card descriptions and section supporting lines (e.g. under Intelligent Agents). Live often uses 1px tracking here; we keep normal spacing for readability.

  AI agents that answer questions, fulfill requests, recommend next steps—and take action.

  Online applications, issuance, renewals, amendments and regulatory controls.

• Label · Asap Medium · 12px, 2px tracking · text-label

  Read more

Header and footer

The bar, the menu, and the footer still use their own sizes. Those stay as written until a second component needs the same one.

• Navigation · Campton Medium · 14px, then 18px from 1301px

  Solutions

• Menu title · Campton Medium · 20px / 28px line

  Alcoholic Beverage Control

• Footer heading · Asap Medium · 16px, then 18px from 1200px

  Platform

Components

Marketing CTAs match the live homepage wipe buttons. The header Contact Us pill stays chrome and is separate.

Marketing buttons

Classes: btn btn-primary,btn btn-ghost,btn btn-on-dark. Hover fills with btn-fill (#d81b24), not accent. Type and padding step down with the viewport (slightly larger than live’s 12px base so CTAs balance the display H1):

• Default (≥1500px): 14px / 20px line-height, padding 14×28, min-width 280px, letter-spacing 2px
• ≤1499px: 13px / 19px, padding 12×22, min-width 250px
• ≤1199px: 12px / 18px, padding 10×16, min-width 210px, letter-spacing 1px
• ≤767px: 12px, padding 10×14, min-width 190px
• ≤575px: 11px, padding 9×12, min-width 163px, letter-spacing 0, 4px margin

Header chrome

Rounded Contact Us in the bar. Do not replace it with the marketing button classes.