Design System

Federal Night

A dark-themed design system inspired by government digital services. Accessible, structured, built for mission-critical interfaces.

01 — Foundation

Color Palette

A palette rooted in trust and authority. Deep navy backgrounds with vivid blue and gold accents provide clear hierarchy and accessible contrast ratios against dark surfaces.

Primary
Blue Vivid
#2491ff
Blue Bright
#58b4ff
Blue Core
#005ea2
Blue Deep
#1a4480
Blue Darkest
#162e51
Backgrounds
Base
#0d1b2a
Elevated
#132338
Surface
#1a2e47
Muted
#0a1420
Accents & Alerts
Gold Star
#e5a000
Red Alert
#d83933
Green Success
#00a91c
Cyan Info
#00bde3
Hub Categories
Health
#5a7fd4
Education
#54a8a5
Disability
#d45a5a
Housing
#c49460
Pension
#5fa86a
Records
#a86fa3
Employment
#4a8fe8
Benefits
#d16ba5
02 — Foundation

Typography

Three typefaces form a clear hierarchy. Bitter for authoritative headings, Source Sans 3 for readable body text, Roboto Mono for data and code.

Display / H1 — Bitter 700
Mission-Critical Interfaces
font-size: 2.5rem · line-height: 1.15 · letter-spacing: -0.02em
H2 — Bitter 600
Section Heading
font-size: 1.75rem · line-height: 1.2
H3 — Source Sans 3, 600
Subsection Title
font-size: 1.25rem · line-height: 1.3
Body Large — Source Sans 3, 400
Government digital services require design systems that prioritize clarity and accessibility above all else. Every element must serve the mission of helping citizens navigate complex processes with confidence.
font-size: 1.15rem · line-height: 1.6
Body — Source Sans 3, 400
The standard body text size provides comfortable reading at any distance. Designed for long-form content, form instructions, and descriptive passages. Line length should not exceed 72 characters for optimal readability.
font-size: 1rem · line-height: 1.6
Caption / Small — Source Sans 3, 400
Supplementary information, timestamps, and metadata use a smaller size with reduced contrast to indicate secondary importance.
font-size: 0.85rem · line-height: 1.5
Monospace — Roboto Mono, 400
const MISSION_STATUS = "ACTIVE";
console.log(`Uptime: ${days}d ${hours}h`);
font-size: 0.9rem · line-height: 1.6
Overline / Label — Source Sans 3, 600
Section Label · Status Indicator
font-size: 0.7rem · font-weight: 600 · uppercase · letter-spacing: 0.15em
03 — Foundation

Spacing

An 8px base grid provides consistent rhythm. Values scale predictably and align with standard screen dimensions.

space-0p5
4px
space-1
8px
space-1p5
12px
space-2
16px
space-3
24px
space-4
32px
space-5
40px
space-6
48px
space-8
64px
space-10
80px
04 — Components

Buttons

Six variants cover every interaction pattern. Primary for key actions, secondary for alternatives, gold for high-visibility calls to action.

Variants

Sizes

States

Full Width

05 — Components

Forms

Form elements designed for clarity in low-light interfaces. Strong focus indicators and accessible error states ensure usability.

As it appears on your government ID
Select the level required for this request
Access level not recognized. Contact your security administrator.
06 — Components

Cards

Cards organize content into scannable units. Hub-colored left borders provide instant category recognition.

⚕
Healthcare
Access health benefits, schedule appointments, and manage prescriptions through a unified portal.
12 Services Active
◈
Education
GI Bill benefits, tuition assistance, and vocational training programs for eligible service members.
8 Programs Updated
▲
Employment
Career counseling, job placement services, and employer partnerships for transitioning members.
6 Resources Featured

Compact Cards

System Status
All systems operational. Last check: 2 minutes ago.
Pending Reviews
14 access requests awaiting supervisor approval.
07 — Components

Alerts

Four severity levels provide clear system communication. Each uses a distinct color and left-border accent for rapid scanning.

Informational
Scheduled maintenance window: Saturday 0200-0600 EST. Non-critical systems may be temporarily unavailable.
Success
Your access request has been approved. New credentials have been sent to your registered email.
Warning
Your PIV certificate expires in 14 days. Visit the badging office to renew before expiration to avoid access disruption.
Error
Authentication failed. Your account has been temporarily locked after 5 unsuccessful attempts. Contact the help desk at ext. 4357.
08 — Components

Navigation

Tab-style navigation for sectioned interfaces. Active states use vivid blue for clear wayfinding.

Tab Navigation

Badges & Status Indicators

Active Duty Pending Review Approved Denied In Processing
09 — Components

Data Display

Tables, code blocks, and progress indicators for presenting structured information in dark interfaces.

Data Table

System Status Uptime Last Incident
Auth Gateway Operational 99.98% 14 days ago
Document Service Operational 99.95% 31 days ago
Benefits Portal Degraded 98.72% 2 hours ago
Notification Engine Operational 99.99% 62 days ago

Code Block

# System health check $ curl -s https://api.service.gov/health | jq . { "status": "healthy", "uptime": 99.98, "version": "3.2.1", "last_deploy": "2026-02-12T08:00:00Z" }

Progress Indicators

Application Processing 78%
Security Clearance Review 45%
Benefits Enrollment 100%
10 — Philosophy

Design Principles

The values that guide every design decision in this system.

◆
Accessible First
Every color combination meets WCAG AA contrast minimums. Focus states are always visible. No information is conveyed by color alone. Dark themes must not sacrifice readability.
◇
Clear Hierarchy
Three distinct text colors, sized typography scale, and consistent spacing create unambiguous visual hierarchy. Users should never wonder what to read first.
◈
Structured Trust
Government interfaces carry an implicit responsibility. Clean grid alignment, consistent component patterns, and predictable interactions build confidence in the system.
○
Reduced Fatigue
Dark backgrounds reduce eye strain during extended sessions. Muted surfaces with careful contrast prevent the harsh feel of pure-black interfaces while maintaining readability.