Style identity
Identity Atlas
A polished identity component study for sign-in, profiles, organizations, and security workflows.
Light-first lavender SaaS component tour with dark-mode-ready surfaces themeDesign system Pro AI Kit13 components
Identity Atlas — Clerk-inspired AI Kit
13 focused, original elements for Identity Atlas; categories are retained only when supported by the live reference. Published flags remain disabled.
Desktop · 1440 × 7616
Foundations
The visual decisions behind the system
A public overview of the typography, palette, icon language, spacing, shape, and motion used throughout this AI Kit.
Visit website
Typography
Font families
Suisse
Primary product-tour typography and component copy
suisse, "suisse Fallback", ui-sans-serif, system-ui, sans-serif- Weights
- 400, 450, 500, 600, 700 observed
- Sizes
- 13px eyebrow; 16px body/control; 64px hero
- Line height
- 1.125 hero; 1.5 body
- Tracking
- -0.025em hero; normal body
Fallback: "suisse Fallback", ui-sans-serif, system-ui, sans-serif
Söhne Mono
Small labels, component metadata, and security state
soehneMono, "Söhne Mono Fallback", ui-monospace, monospace- Weights
- 400, 500 observed
- Sizes
- 11–13px
- Line height
- 1.4–1.6
- Tracking
- 0.02em labels
Fallback: "Söhne Mono Fallback", ui-monospace, SFMono-Regular, Menlo, monospace
Geist Numbers
Numeral metrics and number shaping observed on the live page
geistNumbers, suisse, "suisse Fallback", ui-sans-serif, sans-serif- Weights
- 400 observed
- Sizes
- 16–64px metrics
- Line height
- 1.1–1.5
- Tracking
- normal
Fallback: suisse, ui-sans-serif, sans-serif
Palette
Core colors
canvas / light
#f7f7f8light page backdrop
surface / light
#fffffflight card/control surface
border / light
#e4e4e7light hairline separation
text / light
#131316light primary text
muted / light
#6b6b74light supporting text
accent / light
#6c47fflight action signal
accent2 / light
#a78bfalight secondary action signal
canvas / dark
#0e0e12dark page backdrop
surface / dark
#18181ddark card/control surface
border / dark
#34313fdark hairline separation
text / dark
#f7f7fadark primary text
muted / dark
#b8b4c2dark supporting text
accent / dark
#9b8cffdark action signal
accent2 / dark
#d8b4fedark secondary action signal
Success
#16a34apositive completion
Warning
#ca8a04caution
Type scale
Responsive hierarchy
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| Hero | 64px | 700 | 72px | -1.6px |
| Section | 40px | 600 | 48px | -1px |
| Body | 16px | 400 | 24px | 0 |
| Eyebrow | 13px | 500 | 24px | 0 |
| Metadata | 12px | 500 | 18px | 0.02em |
Spacing & shape
Layout rhythm
- Density
- Airy product-tour rhythm
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 96px
- Card padding
- 20px
- Element gap
- 16px
Iconography
Light outlined utility icons with rounded terminals
1.5px stroke · 16px / 20px / 24px
Keep icons secondary to component labels; name icon-only affordances and align inside 32–40px controls.
System metrics
Radius
Control 8pxCard 12pxDialog 16pxFeature 24px
Spacing
Base unit 4pxInline gap 8pxControl gap 12pxCard padding 20pxSection gap 96px
Motion
Interaction 160ms ease-outReveal 500ms cubic-bezier(.2,.8,.2,1)
Elevation
Soft
0 4px 16px rgba(15,23,42,.08)quiet surface separation
Lifted
0 18px 48px rgba(15,23,42,.14)focused proof surface
Surfaces & shape
Canvas
#f7f7f8 / #0e0e12page backdrop
Surface
#ffffff / #18181dcard and control surfaces
Accent
#6c47ff / #9b8cffaction and status emphasis
Guidelines
Do
- Show the observed mechanism beside its claim.
- Keep states and next actions close to their explanation.
- Use semantic color and explicit focus in both themes.
- Let long content wrap or scroll without clipping.
Don't
- ×Do not copy brand marks or protected text.
- ×Do not add generic categories just to increase the count.
- ×Do not make decorative gradients carry essential meaning.
Imagery
Use original avatar initials, abstract lavender geometry, and neutral component chrome; never copy profile photographs, logos, or screenshots.
Layout
Centered marketing shell with compact product-resource nav, a large identity claim, embedded component cards, and a linear mobile tour.
Concept
A complete visual language, ready to inspect.
Use the file tree to move between the full reference preview, implementation guidance, portable tokens, and framework-ready styles. Each surface stays focused, so you can understand the system before copying code.
Assigned collection
Identity Atlas Interface Elements
13 published components in collection order
Components
Built from the same system
Production-ready specimens from this AI Kit's approved collection.
More like this
Postman-inspired API Orbit
An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.
v0-inspired Prompt Workshop
An unofficial, original v0-inspired Prompt Workshop system grounded in 17 retained, evidence-backed interface patterns.
Borderless Ledger — Wise-inspired AI Kit
13 focused, original elements for Borderless Ledger; categories are retained only when supported by the live reference. Published flags remain disabled.
Runway-inspired Real-World Studio
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.
Observable-inspired Signal Notebook
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.
Replit-inspired Build Canvas
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.