---
version: alpha
name: 1Password
description: "A near-black vault, one signal-blue key, a wheat ribbon overhead."
colors:
  on-surface: "#1D1D21"
  surface: "#FFFFFF"
  primary: "#145FE4"
  slate: "#303136"
  wheat: "#CBB88E"
  black: "#000000"
typography:
  caption-meta:
    fontFamily: Agile Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  body-button:
    fontFamily: Agile Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  body-large:
    fontFamily: Agile Sans
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  lead:
    fontFamily: Agile Sans
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  section-heading:
    fontFamily: Agile Sans
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0em
  heading:
    fontFamily: Agile Sans
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0em
  large-heading:
    fontFamily: Agile Sans
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.08
    letterSpacing: 0em
  display:
    fontFamily: Agile Sans
    fontSize: 88px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: 0em
rounded:
  buttons-pills-toggle: 9999px
  product-card: 25px
  card: 24px
  panel-tile: 16px
  chip-small-control: 4px
  link-underline-offset-hairline: 2px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
---
# 1Password — Style Reference
> A near-black vault, one signal-blue key, a wheat ribbon overhead.

**Theme:** mixed

1Password runs on restraint: a near-black hero (`#1D1D21`) that deepens into blue toward the fold, a bright white product stage below it, and exactly one saturated accent — signal blue `#145FE4` — reserved for actions, links, and the focus ring. The one warm note in the whole system is a single wheat ribbon (`#CBB88E`) running along the top announcement bar, and it never appears anywhere else. The type does the emotional work: Agile Sans, 1Password's proprietary variable sans, set at a hairline weight of 300 for display, produces a headline ("Secure access for every human and AI agent") that feels calm and enormous at 88px rather than loud. Everything is pill-shaped — buttons resolve to full `9999px` radii — while product surfaces sit on gently rounded `16–25px` cards with a whisper-soft 7%-opacity shadow. The rhythm is confident and quiet: giant light-weight heads, generous air, a floating console screenshot as the single hero prop.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Ink | `#1D1D21` | `--color-ink` | Hero canvas AND primary body text — the near-black does double duty; the whole brand rests on it. |
| Slate | `#303136` | `--color-slate` | Secondary heading ink on light surfaces (the 32px section heads); softer than pure ink, never used on dark. |
| White | `#FFFFFF` | `--color-white` | Nav bar, product stage, card fills, and all hero text; the light half of the mixed register. |
| Signal Blue | `#145FE4` | `--color-blue` | The ONLY saturated accent — primary pill fill, links, the Business/Personal toggle, and the focus ring. Never decorative; if it's blue, it's interactive. |
| Wheat | `#CBB88E` | `--color-wheat` | Announcement-bar background only — the single warm tone in the system. Do not promote it to a CTA or heading color. |
| Black | `#000000` | `--color-black` | True-black text on nav text-links and the inline label inside the primary pill; distinct from Ink, used for maximum-contrast small text. |

## Tokens — Typography

### Agile Sans — proprietary variable sans; the entire voice. Display at 300, UI at 350–400 · `--font-sans`
- **Substitute:** Inter, Söhne, ui-sans-serif / system-ui (Agile Sans is a licensed 1Password typeface, not public)
- **Weights:** 300 (light — all display and section heads), 350 (the signature in-between — buttons, nav links, body), 400 (regular — outlined buttons, emphasis)
- **Sizes:** 88px, 64px, 40px, 32px, 20px, 18px, 16px, 14px
- **Line height:** tight on display (~1.05–1.1), open on body (~1.5)
- **Letter spacing:** near-zero; the light weight and large size carry the elegance without tracking tricks
- **Role:** Every headline, label, and paragraph. The 300-weight display is the brand's signature move — huge and hushed.

### Agile Mono — proprietary variable monospace for code, secrets, and technical labels · `--font-mono`
- **Substitute:** ui-monospace, SFMono-Regular, Menlo, monospace
- **Weights:** 200–700 (variable range as loaded)
- **Sizes:** inherits the 14–16px UI band for inline technical text
- **Line height:** ~1.5
- **Letter spacing:** default monospace metrics
- **Role:** Credentials, service-account keys, and developer-console values — the places 1Password literally shows secrets.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Caption / meta | 14px | 1.4 | 0 | `--text-caption` |
| Body / button | 16px | 1.5 | 0 | `--text-body` |
| Body large | 18px | 1.5 | 0 | `--text-body-lg` |
| Lead | 20px | 1.5 | 0 | `--text-lead` |
| Section heading | 32px | 1.15 | 0 | `--text-h3` |
| Heading | 40px | 1.1 | 0 | `--text-h2` |
| Large heading | 64px | 1.08 | 0 | `--text-h1` |
| Display | 88px | 1.05 | 0 | `--text-display` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| xs | 4px | `--spacing-xs` |
| sm | 8px | `--spacing-sm` |
| md | 16px | `--spacing-md` |
| lg | 24px | `--spacing-lg` |
| xl | 40px | `--spacing-xl` |

### Border Radius
| Element | Value |
|---------|-------|
| Buttons / pills / toggle | 9999px (full) |
| Product card (outer) | 25px |
| Card (inner) | 24px |
| Panel / tile | 16px |
| Chip / small control | 4px |
| Link underline offset / hairline | 2px |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Card | `rgba(0, 0, 0, 0.07) 0px 2px 8px 0px, rgba(0, 0, 0, 0.07) 0px 0px 0px 1px` | `--shadow-card` |
| Focus ring | `rgb(20, 95, 228) 0px 0px 0px 0px` | `--shadow-focus` |

### Layout
- **Page max-width:** contained centered column (~1200px), hero content centered
- **Section gap:** generous — large vertical air between hero, product stage, and content
- **Card padding:** ~24px inside product/console cards
- **Element gap:** 16–24px between stacked controls; nav items ~24px apart

## Components

### Announcement Bar
**Role:** Top-of-page brand ribbon for a single high-priority message ("Secure credentials for humans, machines, and AI agents. Switch to 1Password.").
Full-width wheat `#CBB88E` band with Ink `#1D1D21` text and a right-aligned "Sign in" link plus a forward arrow. The only warm surface in the system; keep it to one line.

### Primary Navigation
**Role:** Persistent white top nav below the ribbon.
White `#FFFFFF` background, the circular 1Password mark + wordmark at left, text links (Business, Personal, Developers, Partners, Resources, Pricing) at weight 350 in `#000000` with dropdown carets, and a right cluster of a "Talk to sales" text link + the primary pill. Nav height ~4.94rem.

### Primary Button — "Get started free"
**Role:** The single highest-priority action.
Signal Blue `#145FE4` fill, full `9999px` pill, white label at 16px / weight ~350, padding tight around the label. This is the only solid-blue element in the chrome.

### Outlined Pill — light on dark ("View plans")
**Role:** Secondary hero action on the dark canvas.
Transparent fill, 1px white `#FFFFFF` border, white label, radius 9999px, padding 10px 24px, weight 400. Reads as a quiet companion to the solid white "Talk to sales" pill.

### White Pill — "Talk to sales"
**Role:** Primary hero action on the dark canvas.
Solid white `#FFFFFF` fill with Signal Blue `#145FE4` label, full pill radius, padding 10px 24px. Inverts the primary-button logic for the dark hero.

### Blue Outlined Pill
**Role:** Secondary action on light surfaces.
Transparent fill, 1px `#145FE4` border, `#145FE4` label, radius 9999px, padding 10px 24px, weight 400.

### Text Link Button
**Role:** Inline/tertiary action ("Learn more").
No border, `#145FE4` label, radius 2px, 16px / weight 400, minimal padding — the flattest action tier.

### Business / Personal Toggle
**Role:** Audience switch above the hero headline.
Full-pill `#145FE4` track with a white circular knob; flanking labels "Business" and "Personal" in white. Same blue as every other interactive accent.

### Display Heading
**Role:** The hero statement.
Agile Sans at 88px (64px at the next breakpoint), weight 300, white `#FFFFFF`, tight ~1.05 line height. The hairline weight at massive size is the brand's signature — calm, not shouty.

### Product Console Card
**Role:** The floating hero prop — an admin-console screenshot proving the product.
White `#FFFFFF` card, ~25px outer radius, lifted with the soft `--shadow-card` (7% black, 2px/8px blur + 1px hairline). Sits half-overlapping the hero/gradient seam.

### Console Sidebar
**Role:** In-product left nav inside the console card (Dashboard, People, Groups, Invitations, Vaults, Reports).
Light rail with 16px-ish rounded row hover states, small icon + label rows at ~14–16px, `#1D1D21`/`#303136` text.

### Tabs
**Role:** Section switcher inside the console (Directory · Service Accounts · Connect Server · Permissions).
Underlined active tab in `#145FE4`, inactive labels in Slate `#303136`; a 2px active underline echoes the link radius.

## Do's and Don'ts

### Do
- Keep `#145FE4` exclusively for interactive things — buttons, links, toggle, focus ring. If it's blue, it must do something.
- Set display and section heads at weight **300**; let size, not weight, create presence.
- Make every button a full `9999px` pill; use `16–25px` radii only for content cards and panels.
- Let the hero live on Ink `#1D1D21` and let it deepen into blue toward the fold as a gradient.
- Use the soft 7%-opacity card shadow to float product screenshots; keep it barely-there.

### Don't
- Don't let Wheat `#CBB88E` leave the announcement bar — no wheat CTAs, headings, or icons.
- Don't add a second accent color; the system's power is one blue against near-black and white.
- Don't set headlines bold — heavy weight breaks the hushed, editorial calm.
- Don't square off buttons; the pill geometry is non-negotiable.
- Don't drop heavy shadows; elevation here is a whisper (2px/8px at 7%), never a slab.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Hero canvas | `#1D1D21` | The dark stage the brand opens on; deepens toward blue at the fold. |
| 0 | Light canvas | `#FFFFFF` | The bright product/content half below the hero. |
| 1 | Announcement ribbon | `#CBB88E` | The one warm surface, top of page only. |
| 1 | Product card | `#FFFFFF` | Floating console/screenshot cards, lifted by `--shadow-card`. |
| — | Accent surface | `#145FE4` | Filled primary pill and toggle track. |

## Elevation
Depth is conveyed two ways, both restrained. On the dark hero, elevation is **luminance and gradient**: the near-black canvas brightens into blue toward the fold, and the product card straddles that seam. On light surfaces, elevation is a single **whisper shadow** — `rgba(0,0,0,0.07)` at 2px/8px plus a 1px `rgba(0,0,0,0.07)` hairline — never a hard drop. Interactive focus is its own layer: a Signal Blue ring (`rgb(20, 95, 228)`) that grows from the collapsed `0 0 0 0` state.

## Imagery
Real product UI, not decoration. The single hero prop is a pixel-accurate admin-console screenshot (People, Groups, Vaults, Service Accounts) on a white card — 1Password shows the actual software rather than abstract art. The brand mark is a solid black circular glyph beside the wordmark. Iconography is thin-stroke, functional, and monochrome. No stock photography, no gradients-as-art beyond the hero's near-black-to-blue wash.

## Layout
Contained, centered, and vertically generous. A full-bleed wheat ribbon and white nav stack at the top; the hero is a centered single column on Ink with a toggle, a massive light-weight headline, a lead line, and a two-button row. Below, the console screenshot floats over the hero/light seam, then content resumes on white. The register is deliberately two-zone — dark theatrical hero, bright practical product — bridged by the floating card.

## Typography Signature
Two modes, one family. **Display mode** is Agile Sans at 300 weight and 64–88px: the hairline strokes at huge scale read as premium and composed, the opposite of a heavy security-vendor shout. **UI mode** leans on the unusual **350 weight** — a half-step above light that gives buttons and nav links substance without tipping into bold, plus 400 for outlined controls. Body sits at 16–20px / ~1.5. The move that makes it work: 1Password never uses weight to signal importance in headlines; it uses size and air, keeping the whole page quiet even at billboard scale. Agile Mono carries the literal secrets and keys — a fitting nod that the product's job is displaying credentials.

## Agent Prompt Guide

## Quick Color Reference
- background: `#1D1D21` (dark hero) / `#FFFFFF` (light)
- text: `#FFFFFF` on dark, `#1D1D21` / `#303136` / `#000000` on light
- surface: `#FFFFFF` (cards) / `#CBB88E` (announcement ribbon only)
- border: `#FFFFFF` (on dark) / `#145FE4` (blue outlined controls)
- accent: `#145FE4`
- primary action: `#145FE4` (solid pill on light; inverted to solid white pill with `#145FE4` label on dark)

## Example Component Prompts
1. **Primary pill button**: Full-radius (9999px) pill, fill `#145FE4`, white label in Agile Sans 16px weight 350, padding ~10px 24px, no border; focus shows a `rgb(20,95,228)` ring.
2. **Dark hero**: Full-width section, background `#1D1D21` deepening into a `#145FE4` blue gradient toward the bottom, centered column: a `#145FE4` pill toggle (white knob) labeled Business/Personal, then an 88px weight-300 white Agile Sans headline (~1.05 line height), a 20px white lead, and a two-button row (solid white pill with `#145FE4` label + transparent pill with 1px white border).
3. **Announcement ribbon**: Full-width bar, background `#CBB88E`, single line of `#1D1D21` text at 14–16px with a right-aligned "Sign in" link and forward arrow; used only once at page top.
4. **Floating product card**: White `#FFFFFF` card, 25px radius, shadow `rgba(0,0,0,0.07) 0px 2px 8px 0px, rgba(0,0,0,0.07) 0px 0px 0px 1px`, containing an admin console with a light sidebar and underlined active tab in `#145FE4`.
5. **Text link**: `#145FE4` label, Agile Sans 16px weight 400, 2px underline offset, no background or border — the flattest action tier.

## Similar Brands
- **Stripe** — the same discipline of one saturated accent against near-neutral canvases and real product UI as the hero image.
- **Linear** — near-black surfaces, hairline-weight large type, and pill-clean geometry with a single interactive color.
- **Vercel** — stark black-and-white register broken by minimal accents, product-screenshot-as-hero storytelling.
- **Notion** — calm editorial sans, generous white space, and a warm-neutral secondary tone used sparingly.
- **Framer** — full-pill controls, big light-weight display type, and a dark-hero-into-light-product rhythm.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-ink: #1D1D21;
  --color-slate: #303136;
  --color-white: #FFFFFF;
  --color-blue: #145FE4;
  --color-wheat: #CBB88E;
  --color-black: #000000;

  /* Typography — Families */
  --font-sans: 'Agile Sans', Inter, ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Agile Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Typography — Scale */
  --text-caption: 14px;
  --text-body: 16px;
  --text-body-lg: 18px;
  --text-lead: 20px;
  --text-h3: 32px;
  --text-h2: 40px;
  --text-h1: 64px;
  --text-display: 88px;
  --leading-display: 1.05;
  --leading-heading: 1.1;
  --leading-body: 1.5;

  /* Weights */
  --weight-light: 300;
  --weight-mid: 350;
  --weight-regular: 400;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;

  /* Border Radius */
  --radius-pill: 9999px;
  --radius-card: 25px;
  --radius-card-inner: 24px;
  --radius-panel: 16px;
  --radius-chip: 4px;
  --radius-hairline: 2px;

  /* Shadows */
  --shadow-card: rgba(0, 0, 0, 0.07) 0px 2px 8px 0px, rgba(0, 0, 0, 0.07) 0px 0px 0px 1px;
  --shadow-focus: rgb(20, 95, 228) 0px 0px 0px 0px;
}
```
### Tailwind v4
```css
@theme {
  /* Colors */
  --color-ink: #1D1D21;
  --color-slate: #303136;
  --color-white: #FFFFFF;
  --color-blue: #145FE4;
  --color-wheat: #CBB88E;
  --color-black: #000000;

  /* Typography — Families */
  --font-sans: 'Agile Sans', Inter, ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Agile Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Typography — Scale */
  --text-caption: 14px;
  --text-body: 16px;
  --text-body-lg: 18px;
  --text-lead: 20px;
  --text-h3: 32px;
  --text-h2: 40px;
  --text-h1: 64px;
  --text-display: 88px;
  --leading-display: 1.05;
  --leading-heading: 1.1;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;

  /* Border Radius */
  --radius-pill: 9999px;
  --radius-card: 25px;
  --radius-card-inner: 24px;
  --radius-panel: 16px;
  --radius-chip: 4px;
  --radius-hairline: 2px;
}
```