Styles with direct UI/UX pattern applications for building functional software interfaces.
Styles focused on visual identity, marketing, and brand expression.
Styles born from internet culture, digital eras, and online subcultures.
Styles focused on mood, atmosphere, and lifestyle theming.
Styles rooted in specific historical eras and art movements.
Styles primarily suited for graphic design, print, and illustrative applications.
Styles tied to specific themes, places, or genre conventions.
Typography
Master the language of type to create consistent, expressive, and legible interfaces across your entire platform.
Anatomy
Baseline, x-height, cap height, ascenders, descenders
Spacing
Tracking (letter-spacing), leading (line-height), kerning
Properties
Weight, width, optical size, stroke contrast
Old Style Serif
Transitional
Modern/Didone
Slab Serif
Grotesque
Neo-Grotesque
Geometric Sans
Humanist Sans
Monospace
x-height
Small
Large
Taller = more modern, readable at small sizes
Aperture
Closed
Open
Open = friendly; Closed = formal
Stroke Contrast
Low
High
High = elegant; Low = utilitarian
For headlines, hero text, and brand moments. Ask: Does this express our territory? Will users recognize this as "ours"?
Fraunces
Playfair
Inter Black
Excellent legibility at 14-18px. Clear Il1, 0O distinction. Comfortable for extended reading.
Critical for AI products: code blocks, data, technical identifiers. Clear character distinction.
Display
Fraunces
Body
Source Sans
Mono
Recursive
Display
Inter Display
Body
Inter
Mono
JetBrains
Display
Space Grotesk
Body
Geist Sans
Mono
Geist Mono
Display
48px
Hero headlines
H1
32px
Page titles
H2
24px
Section headers
H3
18px
Card titles
Body
16px
Paragraphs
Small
14px
Captions, labels
Micro
12px
Badges, timestamps
wght
Weight: 100-900 (thin to black)
wdth
Width: 75-125 (condensed to expanded)
opsz
Optical size: auto-adjusts for display/text
ital/slnt
Italic or slant angle (-15 to 0 degrees)
swap
Show fallback immediately, swap when loaded
optional
Use if cached, otherwise skip (fast networks)
preload
Add <link rel="preload"> for critical fonts
subset
Load only needed character ranges
Display
Playfair Display
Body
Lato / Open Sans
Mono
Fira Code
Display
Poppins Bold
Body
Nunito Sans
Mono
Source Code Pro
Display
system-ui (SF Pro, Segoe)
Body
system-ui
Mono
ui-monospace
Don't
Avoid
Two decorative fonts together
Avoid
More than 3 font families
Avoid
Similar fonts that clash subtly
Dashboard Typography
Monospace for numbers, uppercase labels, high contrast for scannability
Build faster
with AI
The future of development is here
Marketing Typography
Expressive serif display, generous line height, emotional impact
Getting Started
Install the package using npm install and configure your API keys in the environment file.
Documentation Typography
Readable body text, clear hierarchy, inline code styling
UX Principles
Build trust, clarity, and delight in AI products through intentional interaction design.
1
Transparency Over Magic
Show reasoning behind AI decisions. Indicate confidence levels. Make limitations explicit.
Avoid
"2 weeks"
Better
"Based on 3 similar projects: ~2 weeks"
2
User Agency & Control
Always provide override mechanisms. Let users correct AI mistakes. Never take irreversible actions without confirmation.
3
Appropriate Anthropomorphism
Be honest about AI nature. Use personality thoughtfully. Avoid implying emotions or consciousness.
4
Graceful Degradation
AI features should fail safely. Provide fallbacks. Communicate uncertainty honestly.
5
Progressive Trust Building
Earn trust through consistent behavior. Allow users to start with limited AI. Increase autonomy as comfort grows.
< 1s
Skeleton screens showing content shape
1-5s
Progress indicators with context
5-30s
Stage indicators: "Reading... Understanding..."
> 30s
Background processing with notification
What
Clear, non-technical explanation
Why
If knowable and helpful
Action
Specific next steps
Recovery
How to get back on track
Layer 1
Always visible: essential for decisions
Layer 2
One click: supporting details
Layer 3
Discoverable: technical deep-dive
Micro-interactions
100-200ms
Simple transitions
200-300ms
Complex transitions
300-500ms
Attention animations
2000-3000ms loop
Enter
ease-out — fast start, gentle landing
Exit
ease-in — gentle start, fast exit
Movement
ease-in-out — natural acceleration
Avoid
linear — feels mechanical
Respect prefers-reduced-motion
Never convey info through motion alone
Provide instant alternatives
L1
Functional Trust
System works reliably. Responses are timely. Errors handled gracefully.
L2
Competence Trust
AI produces quality outputs. Accuracy meets expectations. Knows its limitations.
L3
Transparency Trust
Users understand how AI works. Decisions are explainable. Data usage is clear.
L4
Alignment Trust
AI acts in user's interest. Values align. Long-term reliability and ethical behavior.
Mobile
Bottom tabs, 3-5 items, icons + optional labels
Desktop
Top horizontal tabs with underline indicators
Tip
Active state should be clear and immediate
Collapsible
Icon-only when collapsed, expand on hover or click
Persistent
Always visible, good for frequent navigation
Nested
Expandable sections for deep hierarchies
Trigger
Cmd/Ctrl + K for quick access
Search
Fuzzy matching, recent commands, categories
Actions
Show shortcuts, execute immediately on select
Breadcrumbs
Show path, allow jumping back, truncate middle
Mega Menu
Large panels for complex navigation trees
Delay
Add ~300ms hover delay to prevent accidental opens
When
Validate on blur, not on every keystroke
Success
Subtle green check, don't over-celebrate
Error
Red border + text below field, be specific
Progress
Show step indicators with names, not just dots
Navigation
Allow back navigation, save partial progress
Review
Summary step before final submission
Pre-fill
Use context: location, timezone, recent values
Suggestions
AI-powered autocomplete for text fields
Clear
Make defaults obvious, easy to change
Preserve
Never lose user input on validation errors
Focus
Jump to first error, scroll into view
Guidance
Explain how to fix, not just what's wrong
Debounce
Wait 150-300ms after typing to search
Highlight
Bold matching characters in results
Recent
Show recent searches when field is focused
Sidebar
Filter categories with checkboxes/ranges
Counts
Show result count per facet option
Applied
Show active filters above results
Inline
Quick toggle filters as pill buttons
Removable
X button to remove, clear all option
Multi
Allow multiple selections within category
No Results
Helpful message + suggestions to broaden search
First Use
Onboarding content or sample data
Action
Clear filters or try different terms CTA
Position
Bottom-center or top-right, consistent
Timing
3-5s for info, persistent for errors
Stack
Queue multiple, limit to 3 visible
When
Destructive or irreversible actions only
Copy
Action verbs, not Yes/No. "Delete" vs "Confirm"
Risk
Red for destructive, explain consequences
Toast
"Deleted. Undo" with action button
Window
5-10 seconds to undo before permanent
History
Cmd/Ctrl+Z should work everywhere
Success
Brief flash or check, don't interrupt
Error
Red highlight, inline message, focus
Progress
Spinner or bar during async operations
Tab
Logical tab order, skip to content link
Arrow
Within components: menus, tabs, grids
Escape
Close modals, dropdowns, clear selection
Visible
Always show focus ring, never outline: none
Trap
Keep focus inside modals and dialogs
Return
Restore focus to trigger after modal closes
Ratio
4.5:1 for text, 3:1 for large text/icons
Color
Don't rely on color alone for meaning
Test
Check with colorblindness simulators
Labels
aria-label for icon buttons, form fields
Live
aria-live for dynamic content updates
Roles
Proper semantic HTML, ARIA roles when needed
Design Studio
Explore design history, compare territories side-by-side, and build your own visual identity system.