Maricopa Design System Deep Dive

1. Brand Overview

Maricopa County’s official site isn’t here to entertain you. It’s here to inform and direct you to what you need — quickly. The design language is government-grade: authoritative, utilitarian, but with enough polish to avoid feeling dated. You’re not getting whimsical rounded corners or playful animations here. You’re getting solid typography, high-contrast color pairings, and interaction states that make sense for accessibility.

The vibe is “functional civic interface.” The primary blue (#006eb5) reads trustworthy and institutional, leaning toward the cooler spectrum that’s common in public sector branding. Dark navy (#132048) adds weight and formality, and the orange accent (#f26724) cuts through as a clear call-to-action. This triad — blue for trust, navy for authority, orange for urgency — is a classic government palette move. They’re not reinventing the wheel, but they don’t need to.

Buttons are squared off, borders are unapologetically solid, and shadows are restrained. The grid sticks to an 8px scale, which keeps spacing consistent across modules. Typography is sans-serif throughout, with Poppins and Roboto doing most of the heavy lifting. Poppins handles headings and links with bold weights, while Roboto fills in for body content and less prominent text. There’s no serif anywhere — no “heritage newspaper” look — which keeps things modern.

The intended audience is broad: residents, businesses, and visitors looking for county services. The design has to serve mobile-first users who just need an address or a form, as well as desktop users navigating complex department pages. That means responsiveness, clear hierarchy, and predictable UI patterns matter more than aesthetic experimentation.

This is a site that values clarity over novelty. States are explicitly defined — hover, active, focus — with visible color changes and outlines. Accessibility cues (3px orange focus outlines, underline on hover for links) are baked into the DNA. If you’re designing for Maricopa, your job is to respect that clarity. Stick to the palette, honor the grid, and don’t get clever with rounded corners or shadow play unless you want to break the brand.

2. Color System

2.1 Primary Colors

The main brand color is #006eb5 — a strong, medium-dark blue. It’s used for CTAs, links, and certain button states. Psychologically, this blue communicates trust, stability, and professionalism. It’s similar to what you’d see in banking or municipal sites. Competitors (other counties) often opt for darker blues or green-based palettes; Maricopa’s choice leans slightly more vibrant, which helps links stand out without being garish.

The secondary anchor is #132048 — a deep navy. This is the authority color. It’s seen in headings, button backgrounds, and certain borders. It pairs perfectly with the blue, keeping the system grounded.

The accent is #f26724 — a saturated orange. This is the “do this now” color. It appears in search submit buttons, focus outlines, and hover borders for key buttons. It’s high contrast against both white and navy backgrounds, which makes it ideal for drawing attention to actions.

2.2 Complete Palette

2.3 Color Relationships

Contrast ratios are solid. White text on navy (#ffffff on #132048) is well above WCAG AA. The blue (#006eb5) against white also passes easily. The orange accent (#f26724) against white is borderline for small text but fine for large UI elements.

They’re not doing dark mode here, but the palette is flexible enough to invert — navy background with white text, orange accents — without breaking contrast rules.

2.4 Usage Guide

• Best combos: Navy background + white text + orange CTA. White background + blue links.
• Avoid: Orange text on navy — low contrast for small sizes. Blue text on navy — fails for accessibility unless bold and large.
• For focus states: Orange outline is non-negotiable. It’s a brand accessibility cue.
• For hover: Links shift from blue to dark gray — subtle but noticeable.

3. Typography

3.1 Font Families

Primary headings and links use Poppins, sans-serif. Body copy often uses Roboto, sans-serif. There’s also Lato in certain headings and Schibsted Grotesk for some UI labels, with fallbacks to Inter, Helvetica, Arial. Google Fonts sources include Lato and Muli. No Adobe fonts, but variable fonts are enabled.

The stack is modern sans all the way. This keeps the interface clean and legible, especially for mobile.

3.2 Type Scale

3.3 Hierarchy

Hierarchy is driven mostly by weight and uppercase rather than massive jumps in size. The largest heading is 36px bold Poppins. Many headings sit in the 17–20px range but use uppercase and heavy weights to stand out. This creates a consistent visual rhythm across modules. Body text sits around 14–15px, keeping dense information legible.

4. Spacing & Layout

4.1 Spacing Scale

Base scale is 8px — actually fractional multiples too, which is unusual. Here’s the extracted values:

4.2 Layout

Breakpoints cover everything from 360px to 1400px. Mobile-first is clear. They have multiple micro-breakpoints (400px, 415px, 444px) — likely to handle specific device quirks. Desktop kicks in around 992px, with large layouts at 1366px+.

5. Visual Elements

Border Radius

Zero. The data shows no rounded corners in use. Border radius values are empty. This keeps the look sharp and formal.

Shadows

A few shadows are used:

• rgba(0, 0, 0, 0.125) 0px 0px 10px 0px — soft, subtle depth.
• rgba(0, 0, 0, 0.25) 0px 3px 5px 0px — more pronounced.
• Rare inset shadows and light grays, but nothing flashy.

Borders

Solid borders dominate — 2px orange for CTAs, 3px orange on hover, 4px white/navi for spans. Borders are often used instead of shadows for separation.

6. Components

6.1 Buttons

Search Submit Button (maricopawidgetsearchformsubmitbutton):

• Default: Transparent BG, #222 text, 2px solid orange border.
• Hover: 1px solid dark gray, 0.8 opacity.
• Active: BG #ecf5ff.
• Focus: 3px solid orange outline, 2px solid blue border, orange box shadow.

Accessible Menu Button (ae-accessible-menu-button):

• Default: Light gray BG, #222 text, 2px outset black border.
• Hover: Text turns blue, BG clears.
• Active: Darker gray BG, text blue.
• Focus: Light gray BG, text blue, orange outline and box shadow.

Fancy Button (fancyButton6848):

• Default: Navy BG, blue text.
• Hover: Light gray BG, navy text, 3px orange border, shadow, transform translate/rotate.
• Active: Darker gray BG, navy text, same border/shadow/transform.
• Focus: Light gray BG, dark gray text, 3px orange border, orange shadow, transform.

6.2 Links

Six variations. Common patterns:

• Default blue (#006eb5) or black text, underline.
• Hover shifts color to dark gray and keeps underline.
• Bold links drop underline on default and add it on hover.

6.3 Forms

Text inputs:

• Default: Transparent BG, dark gray text, 2px solid orange border.
• Focus: 2px solid blue, 3px orange outline, orange box shadow.

6.4 Cards

Not explicitly defined, but shadows and padding values suggest card modules use 28.8px padding and the soft 10px shadow.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-primary-blue: #006eb5;
  --color-deep-navy: #132048;
  --color-dark-gray: #333333;
  --color-accent-orange: #f26724;
  --color-sky-blue: #059bff;
  --color-deep-blue: #005fcc;
  --color-bright-blue: #4087f1;
  --color-module9: #ff8f5c;
  --color-module2: #ebebeb;
  --color-module11: #f3f3f3;
  --color-body-font: #000000;
  --color-subhead-font: #333333;

  /* Typography */
  --font-poppins: "Poppins", sans-serif;
  --font-roboto: "Roboto", sans-serif;
  --font-lato: "Lato", sans-serif;
  --font-schibsted: "Schibsted Grotesk", Inter, Helvetica, Arial;
  --font-sans: sans-serif;

  /* Spacing */
  --space-0-72: 0.72px;
  --space-1: 1px;
  --space-3-6: 3.6px;
  --space-3-96: 3.96px;
  --space-4-86: 4.86px;
  --space-6-48: 6.48px;
  --space-7-2: 7.2px;
  --space-7-92: 7.92px;
  --space-10-8: 10.8px;
  --space-14-4: 14.4px;
  --space-15-84: 15.84px;
  --space-16: 16px;
  --space-17-28: 17.28px;
  --space-20-16: 20.16px;
  --space-20-592: 20.592px;
  --space-25-92: 25.92px;
  --space-28-8: 28.8px;
  --space-43-2: 43.2px;
  --space-120: 120px;
  --space-200: 200px;

  /* Shadows */
  --shadow-soft: rgba(0, 0, 0, 0.125) 0px 0px 10px 0px;
  --shadow-medium: rgba(0, 0, 0, 0.25) 0px 3px 5px 0px;
}

8. AI Coding Assistant Prompt

# Maricopa Design System Specification

You are a Maricopa County design expert. Build UIs matching their visual language exactly.

## Brand Context
Maricopa County’s web design prioritizes clarity, authority, and accessibility. Colors are formal and functional. Typography is modern sans-serif with consistent weight-driven hierarchy. Spacing follows an 8px grid with occasional fractional adjustments.

## Color Palette
- White: #ffffff — Backgrounds, text on dark
- Primary Blue: #006eb5 — Links, CTAs, primary actions
- Deep Navy: #132048 — Headings, button backgrounds
- Dark Gray: #333333 — Secondary text
- Accent Orange: #f26724 — Focus outlines, CTA borders
- Sky Blue: #059bff — Secondary accents
- Deep Blue: #005fcc — Hover/focus states
- Bright Blue: #4087f1 — Alternative hover states
- Module Color9: #ff8f5c — Alerts/promos
- Module Color2: #ebebeb — Section backgrounds
- Module Color11: #f3f3f3 — Surface backgrounds
- Body Font Color: #000000 — Default body text
- Subhead Font Color: #333333 — Secondary headings

## Typography
- Headings: Poppins, sans-serif
- Body: Roboto, sans-serif
- UI Labels: Schibsted Grotesk, Inter, Helvetica, Arial
- Other: Lato, sans-serif

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 36px | 700 | 1.70 | Page titles |
| H2 | 25.92px | 700 | 1.70 | Section headings |
| H2 Roboto | 25.92px | 400 | 1.20 | Subheadings |
| Body | 14.4px | 400 | 1.70 | Paragraph text |
| Link | 17.28px | 700 | 1.70 | Nav links |

## Spacing & Grid
Base: 8px
Scale: 0.72px, 1px, 3.6px, 3.96px, 4.86px, 6.48px, 7.2px, 7.92px, 10.8px, 14.4px, 15.84px, 16px, 17.28px, 20.16px, 20.592px, 25.92px, 28.8px, 43.2px, 120px, 200px
Use multiples for padding, margins, and gaps.

## Border Radius
- none: 0 — All components

## Shadows & Depth
- Soft: rgba(0, 0, 0, 0.125) 0px 0px 10px 0px
- Medium: rgba(0, 0, 0, 0.25) 0px 3px 5px 0px

## Component Specifications

### Primary Button (Search Submit)
Default: transparent BG, #222 text, 2px solid #f26724 border, padding 1px 6px
Hover: 1px solid #515151, opacity 0.8
Active: BG #ecf5ff
Focus: 3px solid #f26724 outline, 2px solid #0098f7 border, orange shadow

### Secondary Button (Menu)
Default: #efefef BG, #222 text, 2px outset #000 border
Hover: BG clear, text #0098f7
Active: BG #d6d6d6, text #0098f7
Focus: BG #ebebeb, text #0098f7, orange outline/shadow

### Fancy Button (Promo)
Default: #132048 BG, #006eb5 text
Hover: #e8e8e8 BG, #132048 text, 3px solid #f26724 border, shadow, transform translate/rotate
Active: #c2c2c2 BG, same border/shadow/transform
Focus: #e8e8e8 BG, #333 text, orange border/shadow

### Navigation Links
Default: #006eb5 text, underline
Hover: #333 text, underline

### Input Fields
Default: transparent BG, #333 text, 2px solid #f26724 border, padding 1px 14px
Focus: 2px solid #0098f7 border, 3px solid #f26724 outline, orange shadow

## Layout & Responsive Rules
Max content width: fluid, breakpoints at 360px, 400px, 415px, 444px, 500px, 535px, 600px, 640px, 700px, 760px, 768px, 991px, 992px, 1024px, 1199px, 1200px, 1366px, 1367px, 1400px
Mobile padding: ~14.4px
Desktop padding: ~28.8px

## Interaction Rules
Transition timing: 150ms ease for state changes
Focus indicators: 3px solid #f26724 outline

## DO
- Use ONLY colors from the palette
- Maintain 8px grid (including fractional values from scale)
- Use Poppins for headings, Roboto for body
- Always show focus outlines
- Keep corners square

## DON'T
- Add custom colors
- Round corners
- Remove hover underline from links
- Use shadows heavily — keep them subtle

## Code Examples

### Button
```css
.btn-primary {
  background: transparent;
  color: #222;
  padding: 1px 6px;
  border: 2px solid #f26724;
  font-size: 14.4px;
}
.btn-primary:hover {
  border: 1px solid #515151;
  opacity: 0.8;
}
.btn-primary:focus {
  outline: 3px solid #f26724;
  border: 2px solid #0098f7;
  box-shadow: #f26724 0 0 5px;
}
```

### Card
```css
.card {
  background: #ffffff;
  padding: 28.8px;
  box-shadow: rgba(0,0,0,0.125) 0px 0px 10px 0px;
}
```

### Input
```css
.input {
  border: 2px solid #f26724;
  padding: 1px 14px;
  font-size: 14.4px;
}
.input:focus {
  border: 2px solid #0098f7;
  outline: 3px solid #f26724;
  box-shadow: #f26724 0 0 5px;
}
```

9. Summary

TL;DR — Maricopa County’s design system is square, clear, and trustworthy. Blue for trust, navy for authority, orange for action. Sans-serif typography and an 8px grid keep it structured. Accessibility cues are baked in, and there’s zero tolerance for rounded corners.

Brand Keywords: civic-functional, square-formal, accessible-clear, blue-orange-authority