1Password
Secure Airlock Behind Glass. A system that moves from the protective dark of an airlock to the bright clarity of a control room.
The design feels like a high-security airlock transitioning into a well-lit control room. An immersive, deep-space dark hero (#1D1D21) establishes a serious, secure atmosphere, which gives way to crisp white (#FFFFFF) content sections focused on informational clarity. The signature brand blue (#145FE4) is used exclusively for calls-to-action and active states, acting like an indicator light confirming interaction. Typography is a key differentiator; the custom font `agileSans` at large sizes with tight negative letter-spacing creates dense, architectural headlines. Buttons are distinctly full-pill (9999px radius), contrasting with the generally sharp, un-rounded cards, creating a focused tension between interactive and container elements.
⚡️ Build with this templatehttps://1password.comColor Palette
Typography
Heading: inherit
Body: inherit
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
# 1Password — Style Reference > Secure Airlock Behind Glass. A system that moves from the protective dark of an airlock to the bright clarity of a control room. Theme: light The design feels like a high-security airlock transitioning into a well-lit control room. An immersive, deep-space dark hero (#1D1D21) establishes a serious, secure atmosphere, which gives way to crisp white (#FFFFFF) content sections focused on informational clarity. The signature brand blue (#145FE4) is used exclusively for calls-to-action and active states, acting like an indicator light confirming interaction. Typography is a key differentiator; the custom font `agileSans` at large sizes with tight negative letter-spacing creates dense, architectural headlines. Buttons are distinctly full-pill (9999px radius), contrasting with the generally sharp, un-rounded cards, creating a focused tension between interactive and container elements. ## Colors | Name | Value | Role | |------|-------|------| | Brand Blue | `#145fe4` | Primary CTAs, active links, focus indicators — the single point of interactive confirmation. | | Hero Fade | `#145fe4` | Hero background — creates a deep, atmospheric transition from dark space to brand blue. | | White | `#ffffff` | Main content backgrounds, card surfaces, text on dark backgrounds. | | Onyx | `#000000` | Primary text on light backgrounds. | | Deep Space | `#1d1d21` | Hero and footer backgrounds. | | Void | `#242529` | Secondary dark surfaces. | | Graphite | `#303136` | Secondary text on light backgrounds, navigation links. | | Ash | `#d7d7db` | Borders on light backgrounds, disabled states. | | Warning Tan | `#cbb88` | Top announcement banner background — a muted, temporary accent for site-wide notices. | ## Typography | Family | Role | |--------|------| | agileSans | The primary brand font, used for everything from display headlines to body copy. Its tight negative letter-spacing at large sizes creates a dense, architectural look. Lighter weights (300) are reserved for the largest headlines, creating authority through restraint, while mid-weights (400, 500) are used for body copy and UI elements. | | ui-sans-serif | Used for minor body text, likely as a fallback or for specific cross-platform UI contexts where the custom font might not load. |