Brand & design system

The Evergreen Veterans system

Everything Code needs to build the rest: a deep-green-led palette with restrained Americana, a warm humanist type pairing, three logo directions, and a token-driven component kit.

“Trusted, modern healthcare that honors service.”

Color

Evergreen is the protagonist. Navy supports. Heritage red and honor brass are seasoning — under 10% of any screen. Backgrounds are warm, never pure white.

Primary

Pine#1C3D32Brand anchor, headers, dark sections

Primary-bright

Evergreen#2D6A4FPrimary CTAs, links, active states

Secondary

Service Navy#1B2A4AAmericana w/o the flag; alt sections

Accent

Heritage Red#9B2D20Urgent CTAs, crisis line, honor

Accent

Honor Brass#C9A227Stars, medals, dividers — very sparing

Neutral-bg

Linen#F7F4ECWarm page background

Neutral-card

Warm White#FCFBF7Cards / surfaces

Neutral-ink

Bark#22302BBody text on light

Usage rules

Green leads.Pine for dark sections & headers; Evergreen for primary CTAs, links and active states.
Navy supports. Service Navy carries the Americana note for alternate sections and B2B — no flags required.
Red & brass are sparing. Heritage Red is reserved for the crisis line and genuinely urgent CTAs; Honor Brass for stars, dividers and accents only.
Warm neutrals. Default to Linen and Warm White surfaces. All pairings meet WCAG AA (AAA for body where feasible).

Typography

Source Serif 4 brings government-adjacent gravitas to display and headings. Public Sans — the U.S. design-system typeface — keeps the body highly legible. Base size 18px, line-height ~1.6, max line length ~70ch.

Display / Headings — Source Serif 4

ABCDEFGHIJKLM · abcdefghijklm · 1234567890

Body / UI — Public Sans

ABCDEFGHIJKLM · abcdefghijklm · 1234567890

Type scale

5xl / 72Care for those who served

4xl / 56Care for those who served

3xl / 42Care for those who served

2xl / 32Care for those who served

xl / 26Care for those who served

base / 18Body copy is set in Public Sans at 18px with generous 1.6 line-height for older eyes.

Logo directions

Evergreen / pine crossed with service. Three directions to explore — each works in one color, on dark Pine, and at favicon scale. No eagles, literal flags, or anything resembling an official VA seal.

01 · Pine as chevron

An evergreen built from rank-insignia chevrons — service + growth.

02 · Pine + honor star

An evergreen with a single brass star — honor without the flag.

03 · Monogram mark

A pine inside an “E” tile — built for favicons and app icons.

Primary lockup

EvergreenVETERANS

Resilience checks — favicon, one-color, reversed

Favicon

One color

Reversed

Component kit

Soft 8–12px corners, gentle shadows, generous space, calm motion. Buttons are large and high-contrast; targets are 44px+; focus is always visible.

Buttons

Buttons on dark

On dark Outline

Badges & chips

Veteran-ownedCommunity Care HonorCrisis line

Service card

Icon, title and a sentence of plain-language description. Lifts gently on hover.

Stat block

2,400+

Veterans cared for

Cited fact

2 in 3 who qualify never claim it.

Informational — not a VA determination.

Trust bar

Optum CCN Veteran-owned Accredited agency

Form fields & option cards

Large accessible field

Select

Selected option
Big tappable targetUnselected option
Min height 64px

Sticky click-to-call + crisis reference

Talk to a care navigator Veterans Crisis Line — Dial 988, then press 1

Spacing, radius & elevation

An 8-pt spacing scale, soft radii, and three gentle shadow levels. Tokens ship as CSS variables and a Tailwind theme.

Corner radius

pill

Elevation

base

Developer handoff

Canonical tokens as CSS variables and a Tailwind theme — consume directly in Code.

Download tokens.css Download tailwind.theme.js

Binding requirement

Accessible by default

WCAG 2.1 AA minimum. 18px+ base text. 44px+ targets. Visible focus, keyboard-complete flows, plain language, and a click-to-call that’s always reachable. The end user often has low vision and low digital confidence — these are requirements, not nice-to-haves.