Design system
Minimal, trustworthy SaaS UI: strong type hierarchy, generous spacing, 44px touch targets on mobile, and a restrained brand accent for trust moments. Use these tokens and components for a consistent product.
The brand accent, gradient text, aurora background, and dotted grid — used sparingly for trust moments and hero chrome.
Brand gradient text
Aurora background + dotted grid, used at the top of hero and CTA sections.
Brand mark
Gradient tile with monogram · ring-1 · shadow-soft
Numbered brand tile
Step / order indicator
Utility classes scale from comfortable phone reading to crisp desktop headlines.
Display — hero headline
Section headline
Subhead for emphasis
Body text for paragraphs. Line height is relaxed for long reading on small screens.
Muted body for secondary explanations and supporting copy.
Caption / helper text
Form label style
Eyebrow label
Neutral base with a restrained indigo brand accent for trust moments. Semantic success, warning, info, and destructive stay distinct.
Two shared shadow recipes — apply via shadow-soft (default surfaces) and shadow-elevated (emphasis / hover lift).
No shadow
Hairline only — passive surface.
shadow-soft
Default for cards, panels.
shadow-elevated
Pricing highlight, hover state.
Default size is touch-friendly on mobile; use touch for primary CTAs.
Labels stay visible; fields use 44px minimum height on mobile; validation text is explicit.
As it should appear on your resume.
Please enter your name.
We will only use this for your account.
Default cards use a hairline border + shadow-soft. Pass interactive to opt into hover-lift and brand-tinted border for list items.
Horizontal flow that wraps on narrow screens.
Skeleton
Empty state
Start from a template or paste your experience. Preview stays free until you export.
Sheet on small screens; dialog on md+.
On viewports under 768px this opens as a bottom sheet; on desktop it opens as a centered dialog.
Fixed bottom actions with safe-area padding — resize the viewport or open on a phone to see behavior.
The bar below mimics the mobile checkout / export pattern. Content pages should add bottom padding so text is not hidden behind it.
Marketing uses a simple top bar. The authenticated app uses a desktop sidebar and a bottom tab bar on mobile (see /app).
Marketing
Top navigation with large tap targets and minimal chrome. Primary conversion is “Open app”.
App
Sidebar on md+; sticky mobile header + bottom navigation with safe-area insets. Main content uses extra bottom padding on small screens.
Resize the browser across breakpoints to see typography scale, button sizes, and the responsive dialog switch.