---
title: "1Password design system"
variant: extended
source: https://1password.com/
captured_at: 2026-10-12
theme: dark
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/1password-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# 1Password · Design System

> Calm dark surfaces, bright blue security signals

**Theme:** dark · **Industry:** saas · **Source:** https://1password.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A spacious enterprise SaaS homepage pairs a dark canvas and large, restrained typography with vivid blue calls to action and product imagery. White navigation and editorial testimonial sections create contrast between a polished product interface and its supporting story.

## North star

Use a calm charcoal canvas and lightweight, spacious typography, then reserve vivid blue for decisive actions and emphasis.

## Overview

The page alternates a crisp white announcement and navigation area with a deep charcoal hero and expansive dark content sections. White headings and copy sit against the dark canvas; saturated blue is reserved for primary actions, prominent promotional panels, and the hero’s upward blue gradient. Warm sand appears in the announcement strip, while pale blue and muted gold are minor accents rather than dominant page colours. AgileSans supplies the typography: large, lightweight headings with tight tracking give the hero an editorial feel, while compact body copy keeps dense enterprise information legible. The centered hero gives way to broad, left-aligned product storytelling, a four-column offering showcase, and a strong blue award panel. Product screenshots and customer marks provide proof; a real customer image anchors the white testimonial section. Generous section separation, pill-shaped buttons, restrained hairlines, and minimal elevation keep the composition calm and deliberate.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | White navigation and testimonial surfaces, hero headings and copy, and light product-interface imagery. |
| Vault Charcoal | `#1d1d21` | `--color-vault-charcoal` | brand | Main hero and content canvas, dark feature sections, closing CTA, and footer. |
| Soft Silver | `#d2d2d3` | `--color-soft-silver` | neutral | Muted supporting copy and secondary text against dark surfaces, especially in the footer. |
| Signal Blue | `#145fe4` | `--color-signal-blue` | accent | Primary CTA emphasis, blue promotional panel, and the hero gradient’s vivid transition. |
| Graphite Gray | `#303136` | `--color-graphite-gray` | neutral | Subdued navigation, footer, and secondary text details on dark surfaces. |
| Glacier Blue | `#99beff` | `--color-glacier-blue` | accent | Pale blue endpoint in the hero gradient and subtle navigation accent. |
| Announcement Sand | `#cbb88e` | `--color-announcement-sand` | semantic | Warm announcement-bar accent at the very top of the page; not a general content background. |

### Semantic aliases

`--color-canvas` → `#1d1d21` (Vault Charcoal) · `--color-surface` → `#ffffff` (Gallery White) · `--color-text` → `#ffffff` (Gallery White) · `--color-text-muted` → `#d2d2d3` (Soft Silver) · `--color-text-subtle` → `#303136` (Graphite Gray) · `--color-border` → `#145fe4` (Signal Blue) · `--color-accent` → `#145fe4` (Signal Blue) · `--color-accent-2` → `#99beff` (Glacier Blue) · `--color-accent-3` → `#cbb88e` (Announcement Sand)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#1d1d21` | 16.8:1 | AAA |
| `#d2d2d3` | `#1d1d21` | 11.12:1 | AAA |
| `#d2d2d3` | `#ffffff` | 1.51:1 | fail |
| `#303136` | `#1d1d21` | 1.29:1 | fail |
| `#303136` | `#ffffff` | 12.98:1 | AAA |
| `#145fe4` | `#1d1d21` | 3.03:1 | AA-large |
| `#145fe4` | `#ffffff` | 5.55:1 | AA |

### Gradients

- `linear-gradient(rgb(29, 29, 33) 0px, rgb(29, 29, 33) 25%, rgb(20, 95, 228) 70%, rgb(153, 190, 255) 100%)`
- `linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))`
- `linear-gradient(rgb(48, 49, 54), rgb(48, 49, 54))`
- `linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| agileSans | `--font-body` | webfont | 350, 300, 400 | Primary display, headings, body copy, navigation, and button text. | Inter |

- **agileSans:** Use light weights for large headings, restrained regular weights for interface copy, and consistently tight negative tracking; avoid uppercase styling.

### Type scale — Augmented Fourth (ratio ≈ 1.406, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 88px | 300 | 1.1 | -0.02em | — | agileSans | Large hero-scale statements and headline moments. |
| h1 | 64px | 300 | 1.1 | -0.02em | — | agileSans | Primary hero heading and major page-level statement. |
| h2 | 48px | 300 | 1.1 | -0.02em | — | agileSans | Section headings for platform and customer content. |
| h3 | 40px | 350 | 1.2 | -0.02em | — | agileSans | Product category titles and secondary feature headings. |
| h4 | 20px | 300 | 1.5 | -0.02em | — | agileSans | Compact feature titles or supporting subheads. |
| body | 16px | 350 | 1.6 | -0.02em | — | agileSans | Product explanations, testimonial copy, and general reading text. |
| caption | 14px | 350 | 1.43 | -0.023em | — | agileSans | Eyebrows, attribution details, and compact supporting labels. |
| button | 16px | 350 | 1.6 | 0 | — | agileSans | Pill-shaped primary and secondary action labels. |
| nav | 16px | 400 | 1.5 | -0.02em | — | agileSans | Top navigation and major menu labels. |
| link | 16px | 400 | 1.5 | 0 | — | ui-sans-serif | Inline exploration links and understated text actions. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 3, 4, 8, 10, 12, 16, 20, 24, 32, 48, 64, 72, 96, 128 px.
- Section rhythm 96px · element gap 8px · card padding — · max content width 1248px.

The measured page uses a 1248px maximum content width and a spacious rhythm built on a 4px base unit, with 96px section gaps. The first viewport starts with two full-width horizontal bars, followed by a centered hero and broad product-interface showcase. Lower content shifts to left-aligned editorial sections and a four-column product lineup. Keep generous separation between major sections, align content consistently to the page frame, and avoid crowding the dark canvas with excess modules.

## Shape & elevation

- Radius: button `9999px` · link `2px` · xs `2px` · sm `4px` · md `16px` · lg `25px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page reads as mostly flat: dark and white surfaces, broad colour bands, and product imagery provide hierarchy without a measured shadow system. Use thin, restrained outlines for secondary controls and visible interface boundaries. Reserve stronger layering for the hero’s blue gradient behind the product showcase; do not add decorative shadows or stacked card effects.

## Imagery

Use product UI screenshots as the main proof point: show a large, crisp admin-console interface beneath the hero, then smaller interface cards in the platform section. Customer logos sit quietly on dark backgrounds. Use a real customer or use-case photograph in the contrasting white testimonial section. Keep imagery clean and rectangular or softly rounded; the measured palette’s unusual screenshot colours may belong to product mockups, not the brand system.

## Components

### Announcement strip

A shallow warm sand band above the white navigation, with a short product announcement, learn-more cue, and sign-in link.

### Primary navigation

White horizontal bar with the 1Password mark, compact business and personal menus, resource links, sales action, and bright blue pill CTA.

### Hero

Centered white headline and supporting copy on charcoal, followed by contrasting pill actions and a blue gradient beneath the product screenshot.

### Product showcase

Large admin-console screenshot framed within the dark hero area; smaller product-interface cards support the following platform section.

### Platform feature grid

Left-aligned introduction followed by four product categories with interface imagery, concise descriptions, and understated text links.

### Promotional panel

High-contrast saturated blue rounded panel with centered award statement, concise supporting copy, and two CTA buttons.

### Footer

Dense multi-column link directory on charcoal, with muted text, download links, brand mark, legal links, and social icons.

### Measured component styles

- **Primary button** (“Get started free”): transparent background · text #ffffff · border 1px solid · radius 9999px · padding 10px 24px · 400 16px agileSans
- **Link** (“Explore Unified Access”): transparent background · text #ffffff · radius 2px · padding 0px · 400 16px agileSans
- **Navigation item** (“1Password Privileged Access: Zero standi”): transparent background · text #000000 · radius 0px · padding 0px · 350 16px agileSans

## Do

- Keep the core content canvas deep charcoal.
- Use white for high-contrast headings and navigation surfaces.
- Reserve Signal Blue for decisive actions and promotional emphasis.
- Set display headings in lightweight AgileSans with tight tracking.
- Give major sections generous vertical breathing room.
- Use product UI imagery as concrete evidence of the software.

## Don't

- Do not make every section blue or gradient-filled.
- Do not replace the dark canvas with a generic light SaaS template.
- Do not use heavy display weights or all-caps headings.
- Do not add unmeasured shadows to cards and buttons.
- Do not treat screenshot colours as brand colours.
- Do not crowd the hero with extra copy or interface controls.

## Agent prompt

Build a new 1Password-style SaaS page with a calm, spacious composition. Use Vault Charcoal (#1d1d21) for the principal content canvas and Gallery White (#ffffff) for clear type and selected light surfaces. Keep Signal Blue (#145fe4) focused on primary actions and key emphasis; use Glacier Blue (#99beff) only as a restrained gradient highlight. Set large headlines in a lightweight AgileSans-like sans serif with tight tracking, then use readable regular-weight body and navigation text. Start with compact announcement and navigation bands, followed by a centered statement and realistic product UI showcase. Organize supporting content into broad sections with generous separation, product screenshots, concise links, and occasional white editorial content. Use rounded pill controls, minimal borders, and little or no shadow; keep warm Announcement Sand (#cbb88e) confined to a narrow announcement accent.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two horizontal header bars lead into a centered dark hero with a wide product screenshot and later full-width sections. | Announcement with learn-more link, Primary and secondary CTA, Product proof above the fold | White navigation bar, Centered lightweight headline, Charcoal canvas with blue gradient, Pill-shaped buttons |

## Source CSS custom properties (selected)

```css
--tw-text-opacity: 1;
--tw-bg-opacity: 1;
--tw-border-opacity: 1;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/1password-com