1Password DESIGN.md

Brands

Identity and access security with a calm, premium SaaS frame. 1Password's public site uses deep indigo and blue gradients, white surfaces, rounded cards, and a modern sans stack to make security feel approachable and…

Raw DESIGN.md

At a glance

Group: Brands
Main color: #13233aBlue design systems
Fonts: Inter SF Mono

Colors in this file

#dce4f0
Unnamed
#3b82f6
Unnamed
#172033
Unnamed
#13233a
Unnamed
#eaf2ff
Unnamed
#ffffff
Unnamed
#667085
Unnamed
#16825d
Unnamed

Identity and access security with a calm, premium SaaS frame. 1Password's public site uses deep indigo and blue gradients, white surfaces, rounded cards, and a modern sans stack to make security feel approachable and controlled.

1. Visual Theme & Atmosphere

Overall Aesthetic

1Password feels like security software with product warmth. It balances enterprise seriousness with polished, rounded, modern UI.

Mood & Feeling

Trustworthy
Modern
Calm
Security-forward
AI-era enterprise

Design Density

Medium density. Dashboards, cards, and proof points are rich, but spacing keeps the experience breathable.

Visual Character

Indigo and blue foundations
White elevated cards
Rounded dashboard shells
Controlled gradients

2. Color Palette & Roles

Token	Hex	Role
`--onepass-indigo`	`#13233A`	Deep brand background
`--onepass-blue`	`#3B82F6`	Primary action
`--onepass-blue-soft`	`#EAF2FF`	Soft surface tint
`--onepass-white`	`#FFFFFF`	Cards and main canvas
`--onepass-ink`	`#172033`	Primary text
`--onepass-muted`	`#667085`	Secondary text
`--onepass-border`	`#DCE4F0`	Borders
`--onepass-success`	`#16825D`	Positive state

3. Typography Rules

Font Stack

css--font-display: "Inter", "Helvetica Neue", Arial, sans-serif;
--font-sans: "Inter", system-ui, sans-serif;
--font-mono: "SF Mono", Menlo, monospace;

Type Scale

Element	Size	Weight	Line Height
Hero	60px	700	1.04
H1	42px	700	1.08
H2	30px	700	1.14
Body	16px	400	1.6
Small	14px	400	1.5

Typography Philosophy

Use crisp, readable sans-serif type with strong hierarchy and minimal flourish.

4. Component Stylings

css.button-primary { background:#3b82f6; color:#fff; border:none; border-radius:999px; min-height:46px; padding:0 20px; font-weight:600; }
.button-secondary { background:#fff; color:#172033; border:1px solid #dce4f0; border-radius:999px; min-height:46px; padding:0 20px; }
.card { background:#fff; border:1px solid #dce4f0; border-radius:24px; box-shadow:0 14px 28px rgba(19,35,58,.08); }
.input { background:#fff; border:1px solid #dce4f0; border-radius:14px; min-height:46px; padding:12px 14px; }

Component Notes

Rounded analytics cards
Strong CTA pills
Security dashboards framed as approachable modules

5. Layout Principles

Spacing Scale

4, 8, 12, 16, 24, 32, 48, 64px

Layout Behavior

Lead with trust and governance outcomes
Pair copy with dashboard proof
Use wide hero rows and modular feature grids

6. Depth & Elevation

1Password uses soft premium elevation.

css--shadow-soft: 0 8px 18px rgba(19,35,58,.06);
--shadow-card: 0 16px 32px rgba(19,35,58,.1);

7. Do's and Don'ts

Do

Keep it calm, modern, and security-trustworthy
Use indigo and blue as the stable brand frame
Preserve rounded premium cards

Don't

Don’t make it flashy fintech neon
Don’t crowd dashboards or proof modules

8. Responsive Behavior

Breakpoints

Mobile: < 768px
Tablet: 768px - 1023px
Desktop: 1024px+

Responsive Rules

Stack dashboard demos on mobile
Keep CTAs large and clear
Preserve readable metrics and labels

9. Agent Prompt Guide

Quick Reference

Indigo security SaaS
Rounded white cards
Blue pill CTAs
Calm dashboard-led trust

Prompt Template

textDesign this like 1Password: indigo-and-blue security SaaS, rounded white dashboard cards, crisp modern sans typography, strong trust cues, and premium but calm enterprise polish.

Use it with your agent

Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.

Download

curl -o DESIGN.md https://www.uiskillbook.com/design-md/1password.md

MCP server

https://www.uiskillbook.com/mcp

MCP tool call

get_design_md({ "slug": "1password" })

Coursera

Brands · Source Sans 3

Online learning with marketplace breadth, academic trust, and blue-led clarity. Coursera's public site uses a clean sans system, white and pale-blue surfaces, structured category browsing, and strong Coursera blue…

Wix

Brands · Wix Madefor

Friendly no-code web-design platform with bright utility color and high customization energy. Wix combines the custom Madefor typeface, bold brand colors, theme-driven site styling, and flexible visual tooling to…

Zillow

Brands · Zillow Sans

Real-estate discovery with high-trust search flows and map-driven clarity. Zillow's public site uses a white and soft-blue foundation, dark text, large search-led hero areas, and the strong Zillow blue (#006AFF) to…

Trello

Brands · Charlie Display

Visual task management with playful productivity and board-first clarity. Trello's public site uses a bright, approachable design language rooted in white, pale blue, bold blue gradients, rounded cards, and simple…

Heptabase

Brands · Instrument Sans

Heptabase is a visual note-taking and knowledge-management app built around an infinite whiteboard of cards, and its marketing site mirrors that product ethos: calm, paper-like, and almost editorial. The canvas is a…

Atlassian