# Orrick design system

> Captured from https://www.orrick.com/ on 2026-10-06 by Brooks New Media (https://design.brooksnewmedia.com/styles/orrick/). An independent analysis for reference: Orrick and its marks belong to their owner. Learn from the system; don't copy the brand.

## Overview

Orrick uses white and #333447 slate navy, both as ink and as solid panels, with #6aaae4 sky blue for headings on dark and links. Azo Sans runs the page, with regular weight 40px headings at a 1.43 line height and 15px body. Rows of attorney portraits carry small dark name tags, and corners stay at about 1px.

- Theme: light
- Mood: navy, sky blue, portraits, geometric, professional
- Category: Law firm

## Colors

| Role | Hex | Use |
|---|---|---|
| Background | `#ffffff` | The page ground |
| Surface | `#333447` | Raised panels, bands and cards |
| Text | `#333447` | Primary ink, 12.2:1 on the background |
| Muted text | `#b1a99f` | Supporting copy, 2.3:1 on the background |
| Accent | `#6aaae4` | Primary actions |
| Border | `#e8e4df` | Hairlines and dividers |

Full palette, most used first: `#ffffff`, `#333447`, `#6aaae4`, `#b1a99f`, `#292938`.

## Typography

- **Azo Sans**: display and body, 100% of the text. Use Figtree. Azo Sans is a paid typeface. Figtree is a free stand-in, not a match.

| Role | Family | Size | Weight | Line height | Tracking |
|---|---|---|---|---|---|
| Display | Azo Sans | 40px | 400 | 1.43 | 0 |
| Heading | Azo Sans | 40px | 400 | 1.43 | 0 |
| Body | Azo Sans | 15px | 400 | 1.33 | 0 |
| Small | Azo Sans | 14px | 700 | 1.43 | 0 |

Sizes in use, largest first: 40px, 15px, 14px, 0px.

## Spacing

No single base unit: the values below are what the page repeats.
Values in use: 4px, 10px, 15px, 150px.

## Shape

Corner radii, smallest first: 1px, pill (9999px).

Shadows, most used first:

- `rgb(211, 203, 193) 0px 1px 0px 0px inset`
- `rgba(0, 0, 0, 0.2) 0px 4px 8px 0px`

## Components

No repeated button or card treatment was found above the fold.

## Do

- Set headings in a regular weight geometric sans, not bold.
- Alternate white blocks with slate navy blocks that carry sky blue headings.
- Show people in tight portrait rows with name tags along the bottom.

## Don't

- Use the sky blue on white for text: it reaches only 2.5:1.
- Round corners beyond a pixel.
- Use pure black ink; the dark tone is slate navy.

## CSS variables

```css
:root {
  --color-background: #ffffff;
  --color-surface: #333447;
  --color-text: #333447;
  --color-text-muted: #b1a99f;
  --color-accent: #6aaae4;
  --color-border: #e8e4df;
  --font-display: "Azo Sans", "Figtree", system-ui, sans-serif;
  --text-display: 40px;
  --weight-display: 400;
  --font-heading: "Azo Sans", "Figtree", system-ui, sans-serif;
  --text-heading: 40px;
  --weight-heading: 400;
  --font-body: "Azo Sans", "Figtree", system-ui, sans-serif;
  --text-body: 15px;
  --weight-body: 400;
  --font-small: "Azo Sans", "Figtree", system-ui, sans-serif;
  --text-small: 14px;
  --weight-small: 700;
  --space-1: 4px;
  --space-2: 10px;
  --space-3: 15px;
  --space-4: 150px;
  --radius-1: 1px;
  --radius-2: 9999px;
}
```

## Notes for AI coding tools

- Start from the CSS variables above and build components from them, not from new values.
- Use the font substitutes listed. Never embed a commercial or platform-only typeface without a license.
- Keep body text at 4.5:1 contrast or better against its ground.
- These values were measured from the live page at 1440x900; the site may have changed since 2026-10-06.