An unofficial, original 1Password-inspired interface study with 14 focused specimens supported by the live product and content experience.
Includes DESIGN.md, tokens.json, full CSS, Tailwind v4 token mapping and matching UI specimens. Preview for free; protected guidance and style downloads require Starter or Super. Framework installation and theme support are verified only where listed.
Delivered component specimen
Inspect the kit's typography, palette, icons, spacing and motion.
Style identity
A calm access-management language: cool blue-violet trust cues, a restrained white canvas, dark security product panels, and conversion paths that move from human access to machine and AI-agent governance.
Reference style: adaptive light and dark; cool access-management paletteTypography
Agile Sans Variable
display, body, navigation, controls, and product storytelling
Agile Sans Variable, Arial, sans-serifFallback: Arial, ui-sans-serif, system-ui, sans-serif
Agile Mono Variable
credential labels, policy values, metadata, and technical access details
Agile Mono Variable, SFMono-Regular, Consolas, monospaceFallback: SFMono-Regular, Menlo, Consolas, monospace
Palette
Midnight canvas
#111525dark access product canvas
Cloud canvas
#f7f8felight page background
White surface
#ffffffhero and product cards
Blue-violet raised
#eff1ffselected cards and switcher states
Ink
#17203bprimary copy
Slate
#65718dsecondary copy and helper text
Access blue
#4775e9primary actions and trust cues
Bright access blue
#6c93ffhover and selected states
Lavender signal
#9a71e8AI-agent and secondary product emphasis
Success
#2e9e7ahealthy access and completed review
Warning
#d4992freview or policy attention
Danger
#d65b68blocked or revoked access
Type scale
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| Hero | 70px | 600 | 0.96 | -0.055em |
| Hero mobile | 44px | 600 | 1.0 | -0.045em |
| Section | 44px | 600 | 1.04 | -0.04em |
| Product title | 24px | 600 | 1.15 | -0.025em |
| Body | 17px | 400 | 1.55 | 0 |
| Interface | 14px | 600 | 1.35 | -0.01em |
| Policy metadata | 12px | 500 | 1.4 | 0.02em |
Spacing & shape
Iconography
Keep icons quiet beside explicit labels; use a single original vault mark for the pack and do not reproduce the source mark.
System metrics
Radius
Spacing
Motion
Elevation
flat card
1px border; no shadowproduct panel
0 24px 64px rgba(23,32,59,.14)menu
0 16px 48px rgba(17,21,37,.2)focus
0 0 0 3px rgba(71,117,233,.28)Surfaces & shape
light canvas
#f7f8fepage background
white surface
#ffffffhero and capability cards
raised light
#eff1ffswitcher and selected controls
dark canvas
#111525access product panel
dark surface
#1a2036credential rows and panels
dark raised
#252e4chover and active states
Guidelines
Imagery
Use original vault diagrams, permission graphs, abstract identity cards, and geometric access signals. Avoid the source site’s mark, product screenshots, customer vehicle imagery, and proprietary campaign photography.
Layout
Keep announcement, navigation, mode switcher, hero, capability cards, trust proof, and conversion footer in one 1200px rail. Use a two-column hero and four-up capability grid on wide screens; stack cards and make actions full-width below 700px.
Assigned collection
14 published components in collection order
Components
These working component previews are supplied with the kit. Open a component to inspect its code; the reference screenshots show the original website.
More AI Kits
An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.
An unofficial, original v0-inspired Prompt Workshop system grounded in 16 retained, evidence-backed interface patterns.
13 focused, original elements for Borderless Ledger.
A high-contrast studio language for a platform that moves between creative production, developer workflows, robotics, research, and enterprise. The system uses a dark stage, warm action color, and compact cross-platform wayfinding without copying Runway's wordmark, content, or media. Responsive previews and 8 evidence-backed interface elements.
An original, unofficial Observable-inspired system for reactive notebooks, executable explanations, and data visualization surfaces. It retains only 11 focused elements supported by Observable's live notebook and chart workflows.
A friendly builder language for moving from prompt to app: vivid purple/green accents, a prominent idea field, artifact type selection, parallel execution, built-in infrastructure, team plans, agent chat, and a clear publish handoff. It is an original study without Replit's logo, pixel font, testimonials, screenshots, or protected copy. Responsive previews and 14 evidence-backed interface elements.
