---
version: alpha
name: 1Password landing-page reference
description: A security-platform landing page combining airy light-weight sans-serif
  headlines, charcoal backgrounds and an electric-blue hero gradient. White admin-console
  imagery, a four-column product lineup, a cobalt proof panel and an editorial racing
  testimonial balance enterprise detail with a calm visual hierarchy.
colors:
  primary: '#145FE4'
  surface: '#1D1D21'
  on-surface: '#FFFFFF'
  secondary: '#CBB88E'
  accent: '#303136'
typography:
  headline:
    fontFamily: agileSans, "agileSans Fallback", sans-serif
    fontSize: 88px
    fontWeight: '300'
    lineHeight: 96.8px
    letterSpacing: -1.76px
  body:
    fontFamily: agileSans, "agileSans Fallback", sans-serif
    fontSize: 20px
    fontWeight: '300'
    lineHeight: 30px
    letterSpacing: -0.4px
  mobile-headline:
    fontFamily: agileSans, "agileSans Fallback", sans-serif
    fontSize: 48px
    fontWeight: '300'
    lineHeight: 52.8px
    letterSpacing: -0.96px
---

# 1Password landing-page reference

## Overview

Observed at https://1password.com/ on 2026-09-19T06:04:49.330034+00:00, using a 1440 × 1000 desktop viewport at device scale 1 and a 390 × 844 mobile opening view. The business-facing landing page presents unified access through light-weight typography and substantial product imagery, rather than dense technical diagrams. This is an independent reference for the observed composition, not an official brand system.

## Colors

Measured surfaces include charcoal #1D1D21, white #FFFFFF, cobalt #145FE4 and the warm announcement-strip color #CBB88E. Testimonial text measures #303136. The hero transitions from charcoal into a vivid blue field around the white admin-console image; gradient positions are visually observed, not extracted CSS stops. Keep white type on dark sections, blue text on the desktop white primary action, and dark type on the white navigation/testimonial area. Product mockups have their own semantic colors and should not be treated as marketing palette tokens.

## Typography

The hero heading declares agileSans at 88px, weight 300, line-height 96.8px and tracking -1.76px. Secondary marketing headings measure 64px/70.4px, weight 300, with -1.28px tracking. The mobile headline is 48px/52.8px with -0.96px tracking; mobile secondary headings are 40px/44px. Main supporting paragraphs remain 20px/30px, weight 300, tracking -0.4px. Control labels use 16px/24px at weight 400. The large testimonial paragraph measures 40px/48px on desktop and 32px/38.4px on mobile, weight 350. Preserve this airy, relatively light hierarchy instead of substituting bold SaaS display type. Font families are computed declarations; not all nested heading children share the parent's sampled size, so the product-card display text is described visually instead of assigned the parent H3's 16px value.

## Layout

Stack a slim tan announcement strip above white navigation. The desktop navigation aligns to roughly 96px left/right insets and separates product categories from sales and free-start actions. The centered hero starts with a Business/Personal switch, a three-line statement, supporting copy and two adjacent actions. Its headline and paragraph boxes are 822px wide at x=309. Set a large white admin-console preview below, against the blue glow, followed by a muted customer-logo field.

The next charcoal section is left aligned and introduces a four-column product lineup. Measured body-copy boxes are 268px wide at x=96, 412, 728 and 1044; each column has a white image tile, a large multi-line product name, a concise explanation and an underlined link. Follow with a rounded cobalt report panel inside white margins, then a two-column racing photograph/testimonial section on white. End with a centered charcoal sales panel and a dense multi-column dark footer. Give each major chapter breathing room; no exact reusable section-spacing scale was measured.

At 390px, navigation collapses to a wordmark and hamburger. The announcement wraps above it. The hero heading becomes four lines in a 342px box at x=24; copy and actions stack below it. Both visible mobile actions are broad outlined pills in the captured state. Measured product-copy boxes align to x=24 and become 310px wide, consistent with a vertical sequence. The testimonial copy box becomes 326px at x=32. Document scroll width equals the viewport at both inspected sizes. The site uses a body-level nested scroller; this was explicitly traversed before reviewing the complete desktop image. Only the mobile opening and computed mobile layout were inspected, not the full mobile journey or exact breakpoint thresholds.

## Elevation & Depth

The admin-console preview sits on a broad blue glow rather than a floating glass panel. Smaller product illustrations use soft shadows within white rounded image tiles; keep these distinct from the mostly flat marketing sections. The report and final-sales panels establish depth through color boundaries and white outer gutters. Exact shadow parameters were not measured.

## Shapes

Use large rectangular panels with softened corners, balanced by fully rounded acquisition controls. Desktop action links have a measured 9999px radius, 10px 24px padding and approximately 204px width in the hero. The blue audience switch measures 54px wide with a 99999px radius. Image-tile and photograph radii are visual estimates, not asserted global tokens. Avoid turning the airy product lineup into a wall of heavily bordered cards.

## Components

Keep the announcement, navigation and audience switch separate in hierarchy. Pair a sales action with a plans action; do not give every navigation item button treatment. The white product image tiles should lead into large product names outside the tiles, followed by short copy and underlined links. Preserve the alternation between product proof, an industry-report panel and an editorial customer story. The quote is paired with a large racing photograph and small attribution; the visual reference does not independently substantiate the customer's claims.

The initial narrow capture was obscured by late-loading cookie consent. The final mobile image follows the visible Reject Non-Essential Cookies control; the dialog is not part of the intended page composition. The screenshot captures one admin-console preview and one customer-logo-carousel state. The business/personal switch, menus, forms and hover/focus states were not tested. Treat these as static observed components, not a complete interaction specification.

## Do's and Don'ts

- Do preserve the light-weight heading treatment, wide line lengths and controlled blue emphasis.
- Do separate white product imagery from the large titles beneath it.
- Do retain clear primary/secondary action hierarchy and mobile stacking.
- Don't apply the gold announcement color to unrelated primary controls.
- Don't turn product screenshots into evidence for unverified performance claims.
- Don't infer all carousel, switch or consent states from one reviewed frame.