California Government (CA.gov) Design System Deep Dive

1. Brand Overview

CA.gov is the official web presence of the State of California. Like most government portals, it’s designed for a huge, diverse audience—from residents looking for DMV forms to businesses checking regulations to tourists planning a visit. That means the interface has to be functional first, but it also has to carry the authority and trust of the state brand.

The vibe here is civic-modern. It’s not flashy. It’s not chasing trends. It’s built for reliability and clarity. The design philosophy feels like:

• Keep it accessible.
• Keep it consistent.
• Don’t get in the way of the content.

You can see this in the restrained color palette—one strong primary blue (#046b99), lots of white backgrounds, and muted neutrals. There’s no gradient-heavy hero sections or gratuitous animation. The typography is clean and modern with Public Sans as the workhorse, plus a custom CaGov typeface for branding moments.

The site’s components feel like they came out of a statewide design system. In fact, there’s evidence of Bootstrap grid conventions and Vuetify components under the hood. That’s a pragmatic choice—government sites often need to be built and maintained by multiple teams, and using established frameworks reduces friction.

The audience here is everyone, so accessibility and responsiveness are non-negotiable. Breakpoints are set to hit all the usual suspects: 576px, 768px, 992px, 1200px, 1400px, etc. The spacing system is a hybrid—rooted in 8px increments, but with some odd fractional values from either font scaling or component-specific tweaks.

Overall, CA.gov’s design system is utilitarian, trustworthy, and slightly understated. It’s not trying to “delight” in the startup sense—it’s trying to make sure you can find the unemployment form you need, on your phone, at 11pm, without confusion.

2. Color System

2.1 Primary Colors

The primary brand color is #046b99 (rgb(4, 107, 153)). It’s a deep, slightly muted teal-blue. This is not a “tech startup” neon blue—it’s serious, professional, and readable against both white and dark backgrounds. This hue suggests trust (blue), stability, and a touch of Californian coastline (teal).

This is used heavily in navigation elements, primary buttons, and calls to action. It’s the central “brand anchor” color.

Compared to other state portals, California’s primary is more teal than navy (which is common in government branding). It’s less conservative than a #002147 navy, but still far from playful.

2.2 Complete Palette

Here’s the complete palette extracted from the site:

Plus, from CSS variables (partial list of key semantic tokens):

• --brand-info: #1c7ab0 — secondary info color
• --brand-success: #30812c — success states
• --brand-warning: #be540e — warnings
• --brand-danger: #cd402d — errors
• --brand-highlight: #e4a317 — accent highlight
• --color-p3: #323a45 — dark neutral
• --color-p2-light: #3689ad — lighter blue variant
• --color-p1-light: #fdc64b — lighter gold
• Many color-mix derivatives for darker/lighter states

2.3 Color Relationships

The palette is built around high-contrast pairs:

• White (#ffffff) + Primary Blue (#046b99) for buttons and nav.
• Black (#000000) on white for primary text.
• Gray neutrals for secondary controls.

Contrast on primary actions is excellent—white text on #046b99 is ~5.8:1 contrast ratio, passing WCAG AAA for normal text.

The gold accent #fdb81e is used sparingly—usually as a border underline on headings. It’s bright enough to draw attention, but on white backgrounds, designers need to check contrast for smaller text.

Dark mode: There’s no dedicated dark theme here, but variables like --outline-dark-mode-color (#85cbf9) suggest some consideration for dark backgrounds in certain components.

2.4 Usage Guide

Works best:

• Primary Blue with white text for CTAs.
• Gold accent as a thin underline or icon fill, not as a background (contrast issues).
• Light Gray backgrounds behind link grids for section separation.

Avoid:

• Putting gold text directly on white.
• Using too many accent colors at once—stick to blue + one accent.

3. Typography

3.1 Font Families

Two main families:

• Public Sans — the workhorse for headings, body, links, buttons. Fallbacks: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans.
• CaGov — custom brand font, used selectively for headings and branding. No fallback stack given in data.

Also, a bit of Roboto appears in small heading contexts.

No Google Fonts or Adobe Fonts are loaded—likely self-hosted or system fonts.

3.2 Type Scale

Extracted sizes and weights:

3.3 Hierarchy

Hierarchy is handled with big jumps for H1 (64px) and then a rapid taper to 39px, 30px, etc. This keeps page titles commanding and scannable, while most UI text sits between 14–20px.

The heavy use of 400 (normal) and 700 (bold) weights keeps things simple—there’s no overuse of medium weights except in buttons (600).

4. Spacing & Layout

4.1 Spacing Scale

The base scale is 8px, but with additional fractional values:

4.2 Layout

Breakpoints: 576px, 768px, 992px, 1200px, 1280px, 1400px.
Bootstrap grid is in use: .container, .row, .col. This means a 12-column layout, with responsive stacking at the above breakpoints.

5. Visual Elements

• Border radius: Common values are 4px (inputs), 5px (buttons, small cards), 10px (larger containers), 50% (avatars/images). No extreme pill shapes except where 50% is used.
• Shadows: None defined—this is essentially a flat design system. Depth is handled with borders and background color shifts, not drop shadows.
• Borders: 1px solid is the default. Colors range from white (#fff) for inverse buttons to #d4d4d7 for dividers, to brand colors for emphasis.

6. Components

6.1 Buttons

Primary Button (btn btn-primary btn-lg):

• Default:

  • Background: #046b99
  • Color: #ffffff
  • Padding: 8px 24px
  • Border-radius: 5px
  • Border: 1px solid #046b99
  • Font-weight: 600
  • Font-size: 19.92px

• Hover:

  • Color: #000000
  • Background: #4a4958 (gray-800)
  • Box-shadow: rgba(0,0,0,0.2) 0px 0.5rem 1rem
  • Transform: scale3d(1.05, 1.05, 1.05)

• Active:

  • Background: transparent
  • Color: #f3f3f4 (gray-100)
  • Box-shadow: rgba(0,0,0,0.5) 0px 2px 4px

• Focus:

  • Background: #4a4958
  • Color: #000000
  • Outline: 2px solid #0f90e6
  • Border: 0px

Secondary Outline Button (btn btn-outline-light):

• Default: Transparent background, white text, 1px white border, padding 6px 12px, radius 5px, font-weight 600, size 17.92px.
• Hover: Black text, #4a4958 background, box-shadow, scale up.
• Focus: Similar to primary focus.

Minimal Button (border-0, rounded-4, bg-white):

• Default: White background, black text, padding 1px 0px, radius 4px, border: none.
• Hover: Light gray background, subtle shadow.
• Focus: Outline 2px solid #0b8ee5.

6.2 Links

Three main styles:

1. Black Underlined: #000000, underline always, hover changes to darker brand primary.
2. Blue Underlined: #046b99, underline default, hover darkens.
3. White Underlined: #ffffff on dark backgrounds, hover to light blue #eef8fb.

6.3 Forms

Search input:

• Default: White background, black text, border-radius 4px, padding 1px 2px 1px 16px, no border.
• Focus: border-color: #86b7fe, box-shadow: 0 0 2px 2px #4993b5, outline 2px solid #0b8ee5.

No checkboxes/radios extracted—likely using browser defaults or Vuetify components.

7. Design Tokens

:root {
  /* Colors */
  --white: #ffffff;
  --black: #000000;
  --brand-primary: #046b99;
  --neutral-gray: #72717c;
  --light-gray: #d4d4d7;
  --light-blue-tint: #eef8fb;
  --accent-gold: #fdb81e;
  --bright-blue: #0b8ee5;
  --brand-info: #1c7ab0;
  --brand-success: #30812c;
  --brand-warning: #be540e;
  --brand-danger: #cd402d;
  --brand-highlight: #e4a317;

  /* Typography */
  --font-public-sans: "Public Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans;
  --font-cagov: "CaGov";
  --font-roboto: "Roboto";

  /* Spacing (px) */
  --space-1: 1px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-13_12: 13.12px;
  --space-13_6: 13.6px;
  --space-14_4: 14.4px;
  --space-16: 16px;
  --space-17_92: 17.92px;
  --space-21_12: 21.12px;
  --space-24: 24px;
  --space-24_32: 24.32px;
  --space-33_92: 33.92px;
  --space-40_32: 40.32px;
  --space-45_12: 45.12px;
  --space-48: 48px;
  --space-63_54: 63.5469px;
  --space-217_11: 217.109px;

  /* Radius */
  --radius-0: 0px;
  --radius-4: 4px;
  --radius-5: 5px;
  --radius-10: 10px;
  --radius-full: 50%;

  /* Borders */
  --border-1-white: 1px solid #ffffff;
  --border-1-light-gray: 1px solid #d4d4d7;
  --border-1-primary: 1px solid #046b99;

  /* Shadows */
  /* Flat design - none */

}

8. AI Coding Assistant Prompt

# CA.gov Design System Specification

You are a California Government (CA.gov) design expert. Build UIs matching their visual language exactly.

## Brand Context
CA.gov prioritizes accessibility, clarity, and trust. The design is flat, with minimal shadows, strong color contrast, and a restrained palette. Typography is modern and easy to read, based on Public Sans with occasional brand font CaGov.

## Color Palette
- White: #ffffff — page backgrounds, input backgrounds
- Primary Blue: #046b99 — primary buttons, links, nav elements
- Black: #000000 — primary text
- Neutral Gray: #72717c — secondary text, icons
- Light Gray: #d4d4d7 — dividers, borders
- Light Blue Tint: #eef8fb — section backgrounds
- Accent Gold: #fdb81e — decorative underlines, highlights
- Bright Blue: #0b8ee5 — focus outlines
- Brand Info: #1c7ab0 — informational highlights
- Brand Success: #30812c — success states
- Brand Warning: #be540e — warnings
- Brand Danger: #cd402d — errors
- Brand Highlight: #e4a317 — accent highlight

## Typography
- Headings & Body: "Public Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans
- Brand Display: "CaGov"
- Alt: "Roboto"

| Level | Size(px) | Weight | Line Height | Use |
|-------|----------|--------|-------------|-----|
| H1    | 64       | 400    | 1.50        | Hero titles |
| H1b   | 39       | 700    | 1.38        | Section titles |
| H2    | 30.92    | 700    | 1.50        | Sub-headings |
| ...   | ...      | ...    | ...         | ... |
| Body  | 16       | 400    | 1.50        | Paragraph text |
| Caption | 14     | 400    | 1.50        | Small labels |

## Spacing & Grid
Base: 8px grid with fractional adjustments
Scale: 1px, 4px, 5px, 6px, 8px, 12px, 13.12px, 13.6px, 14.4px, 16px, 17.92px, 21.12px, 24px, 24.32px, 33.92px, 40.32px, 45.12px, 48px, 63.54px, 217.11px
Bootstrap grid, 12 columns, breakpoints: 576px, 768px, 992px, 1200px, 1280px, 1400px

## Border Radius
- none: 0px — edges of tables
- sm: 4px — inputs
- md: 5px — buttons, cards
- lg: 10px — larger containers
- full: 50% — avatars, circular images

## Shadows & Depth
Flat design—no shadows. Use borders and background colors for separation.

## Component Specifications

### Primary Button
Default:
```css
background: #046b99;
color: #ffffff;
padding: 8px 24px;
border-radius: 5px;
border: 1px solid #046b99;
font-weight: 600;
font-size: 19.92px;

Hover:

color: #000000;
background: #4a4958;
box-shadow: rgba(0,0,0,0.2) 0px 0.5rem 1rem;
transform: scale3d(1.05, 1.05, 1.05);

Focus:

outline: 2px solid #0f90e6;
background: #4a4958;
color: #000000;
border: 0;

Secondary Outline Button

Default: transparent bg, white text, 1px white border, radius 5px, padding 6px 12px, font-weight 600, size 17.92px.

Navigation Links

• Black underlined: hover to brand-primary-darker
• Blue underlined: hover to brand-primary-darker
• White underlined: hover to #eef8fb

Input Fields

Default: white background, black text, radius 4px, padding 1px 2px 1px 16px, no border. Focus: border-color #86b7fe, box-shadow 0 0 2px 2px #4993b5, outline 2px solid #0b8ee5.

Cards

Flat, bordered with #d4d4d7, radius 5px or 10px, padding variable (24–33.92px).

Layout & Responsive Rules

• Max content width: Bootstrap container
• Page padding: 16px mobile, larger on desktop
• Grid gap: multiples of 8px

Interaction Rules

• Transitions: use transform and box-shadow changes on hover, ~150–200ms ease
• Focus indicators: 2px solid #0b8ee5 or #0f90e6

DO List

• Use only defined hex values
• Maintain 8px grid or documented fractional values
• Use Public Sans for all text except brand lockups
• Keep buttons consistent with defined padding and radius
• Use borders for depth instead of shadows

DON'T List

• Add custom colors
• Mix sharp and rounded corners in same context
• Use gold (#fdb81e) for body text
• Add drop shadows to flat UI

Code Examples

Primary Button

.btn-primary {
  background: #046b99;
  color: #fff;
  padding: 8px 24px;
  border-radius: 5px;
  border: 1px solid #046b99;
  font-weight: 600;
  font-size: 19.92px;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: #4a4958;
  color: #000;
  transform: scale3d(1.05,1.05,1.05);
}
.btn-primary:focus {
  outline: 2px solid #0f90e6;
}

Card

.card {
  background: #fff;
  border: 1px solid #d4d4d7;
  border-radius: 5px;
  padding: 24px;
}

Input Field

.input {
  background: #fff;
  color: #000;
  border-radius: 4px;
  padding: 1px 2px 1px 16px;
}
.input:focus {
  border-color: #86b7fe;
  box-shadow: 0 0 2px 2px #4993b5;
  outline: 2px solid #0b8ee5;
}

---

## 9. Summary

**TL;DR**: CA.gov’s design system is a flat, functional, accessible UI built on Bootstrap and Vuetify. It uses a disciplined palette centered on deep teal-blue, with Public Sans typography and an 8px grid. Components are utilitarian with consistent radii, no shadows, and clear focus states.

**Brand Keywords**:
- civic-modern
- functional-accessible
- flat-trustworthy
- restrained-authoritative