Aesthetics

Static design styles that define visual personality. Colors, textures, and treatments—from brutalist to maximalist—that establish your product's look at rest.

10 newUpdated Jan 2025

BRUTALIST

RAW CONCRETE—EXPOSED—NO POLISH

USED BY:BALENCIAGABLOOMBERG

Minimalist

Clean, sparse, whitespace-heavy design with only essential elements

Visual Comparison

Cluttered

Minimal

Used by:AppleMujiStripe

Neo-Brutalism

Modern brutalism with vibrant colors, thick borders, hard shadows, playful yet bold

Signature Style

CLICK ME

CARD

Material Design

Google's design language—elevation shadows, bold colors, paper-like layers

Glassmorphic

Frosted glass blur effects with translucent layers, transparency, and soft depth

Live Example

Multiple translucent layers create depth

Used by:AppleMicrosoft

Neumorphic

Soft embossed/debossed shadows creating tactile, pressable depth with subtle lighting

Used by:Smart Home AppsApple Design

Note: Works best with monochromatic color schemes and consistent lighting direction

Claymorphic

Soft 3D renders, inflated shapes, pastel colors, rounded edges

3D Elements

Used by:MailchimpAsana

MAXIMALIST

Dense layering, rich patterns, abundant ornamentation, and vibrant colors— controlled chaos with maximum visual impact

MINIMALIST

MAXIMALIST

Skeuomorphic

Realistic textures and physical material mimicry—leather, wood, stitching

Flat Design

No depth, no gradients, solid colors, simple shapes—anti-skeuomorphic

Used by:Windows 8Duolingo

Gradient

Bold gradient overlays, vibrant color meshes, neo-retro aesthetic

Gradient Types

"Create a gradient-heavy design with vibrant color meshes, bold overlays, and modern neo-aesthetic"

Used by:InstagramFigmaStripe

Monochromatic

Single color palette, minimal variation, austere and formal

Tonal Range

Dark Mode

Dark backgrounds, high contrast, OLED-optimized, reduced eye strain

Comparison

Light Mode

Dark Mode

Used by:DiscordGitHubSpotify

MEMPHIS

Bold geometric shapes, clashing colors, 80s revival, playful asymmetry

Signature Elements

Used by:MTVSwatch

Organic

Curved forms, nature-inspired shapes, flowing layouts, soft edges

Natural Forms

Angular

Organic

Geometric

Decorative shapes as art—triangles, circles, hexagons, colorful geometric patterns

Decorative Shapes

"Create a geometric design with colorful shapes as decoration"

Swiss Style

Mathematical grids, Helvetica font, asymmetric typography, objective clarity

• Helvetica typography

• Mathematical grids

• Asymmetric balance

BAUHAUS

Form follows function—primary colors only, basic shapes, no ornamentation

• Red/Yellow/Blue only

• Circle/Square/Triangle

• No decoration

• Function first

RETRO

Aged textures, nostalgic palettes, old-school typography, vintage aesthetics

Vintage Palette

Used by:Coca-ColaLevi's

美学

ＶＡＰＯＲＷＡＶＥ

90s nostalgia, pink/purple gradients, Japanese text, surreal internet aesthetic

ＡＥＳＴＨＥＴＩＣ

９０ｓ

🗿

SYNTHWAVE

80s retro-futuristic—neon sunsets, perspective grids, chrome, outrun aesthetic

Retro Future

NEON

GRID

"Create a SYNTHWAVE design with neon sunset gradients, perspective grids, 80s retro-futuristic aesthetic, and chrome accents"

Used by:Stranger ThingsHotline Miami

✨

⭐

💫

Y2K

Futuristic 2000s—metallic, bubbly, chrome, translucent plastics, optimistic tech aesthetic

CYBERPUNK

High contrast neon, dark backgrounds, sci-fi inspired, glitch effects

Used by:Cyberpunk 2077Razer

PIXEL ART

Retro gaming aesthetic—8-bit/16-bit, limited palette, pixel-perfect grid

8-Bit Graphics

PRESS START

GAME OVER

NEON

Glowing signs aesthetic—bright tubes, urban nightlife, retro storefronts, electric glow

Glowing Signs

OPEN

BAR

"Create a NEON design with glowing sign aesthetics, electric tube lights, urban nightlife vibe, and bright neon colors"

Used by:Red BullLas Vegas

ART DECO

Luxury geometric patterns, 1920s glamour, symmetrical elegance, metallic accents

Signature Patterns

Used by:Tiffany & CoChrysler Building

Corporate

Blue/gray palette, conservative, hierarchical, trust-focused, enterprise-grade

Enterprise Layout

Editorial

Print-inspired—serif typography, column layouts, high contrast, magazine aesthetic

The Future of Design

"Typography is the voice of the written word."

ISSUE #42

Lexicon

Technical editorial—dictionary pages, serif authority, monospace precision, knowledge delivery

EMBEDDINGS

/ɪmˈbɛdɪŋz/

noun. Numerical representations of data in high-dimensional space, enabling AI to process semantic meaning.

See Also

Tokens, Vectors, Semantic Search

2 min read

Characteristics:

• Serif headlines, monospace labels

• Dictionary-page layouts

• Editorial red accents

• Generous whitespace

Handcrafted

Hand-drawn elements, imperfect lines, human touch, warm and approachable

Click Me!

GRUNGE

Rough textures, distressed overlays, rebellious, unpolished, raw energy

Distressed Textures

WORN

ROUGH

"Create a grunge design with rough textures, distressed overlays, scratched surfaces, and rebellious aesthetic"

Used by:SupremeNirvana

Gothic

Dark cathedral—ornate details, dramatic shadows, deep purples and blacks, gold accents, luxury meets darkness

Characteristics:

• Deep blacks and purples

• Gold/silver accents

• Ornate decorative elements

• Dramatic shadows

Miami Vice

80s neon paradise—hot pink, electric cyan, purple nights, palm trees, sunset gradients, retro futurism

🌴

NEON NIGHTS

Bohemian

Free-spirited artisan—earthy tones, textures, handcrafted, organic shapes, eclectic patterns, wanderlust vibes

🌿

Natural Beauty

Nordic

Scandinavian simplicity—clean lines, natural materials, white space, light wood, functional beauty, hygge warmth

❄️

Clean & Functional

Steampunk

Victorian industrial—brass gears, copper pipes, rivets, mechanical details, vintage machinery, retro-futurism

⚙️

Mechanical Beauty

• Brass, copper, bronze tones

• Mechanical gear patterns

• Rivets and industrial details

• Victorian era typography

🌸

🌿

🦋

Cottagecore

Pastoral romance—soft pastels, floral patterns, handmade quilts, wildflowers, cozy cottages, countryside charm

🌻

Countryside Bliss

• Soft pastel color palette

• Floral and botanical patterns

• Handmade, quilted textures

• Romantic, nostalgic mood

Luxury Minimalism

Refined restraint—premium materials, precise details, subtle elegance, expensive simplicity, Apple aesthetic, quiet luxury

◆

Precision & Quality

Characteristics:

• Monochromatic neutrals

• Maximum negative space

• Premium materials

• Precise details

Used by:AppleTesla

Art Nouveau

Organic elegance—flowing curves, botanical motifs, nature-inspired

🌺

Natural Forms

Maximalist Luxury

Opulent abundance—rich gold, jewel tones, ornate patterns, baroque details, Versace vibes, more is more

Characteristics:

• Gold and jewel tones

• Baroque patterns

• Abundant details

• Luxurious textures

HIGH FASHION

Editorial drama—stark contrast, bold typography, runway aesthetics, magazine layouts, Vogue vibes, timeless elegance

◇

EDITORIAL EXCELLENCE

Wabi-Sabi

Japanese philosophy of imperfect beauty—natural textures, asymmetry, weathered surfaces, embracing age and wear

• Embrace imperfection

• Natural, muted colors

• Asymmetric layouts

Soft Brutalism

Bold brutalist layouts meet soft pastels—thick borders, heavy type, rounded corners, gentle colors

Bold + Soft

HELLO

Characteristics:

• Bold, heavy typography

• Thick borders (4-8px)

• Soft pastel colors

GRAFFITI

Street art—spray paint, wild style letters, tags, throws, drips

TAG

• Wild style lettering

• Vibrant spray colors

• Drips & splatters

• Tags, throws, pieces

SPACE AGE

1960s retro-futurism—chrome, orbs, atomic age, space race optimism

• Chrome & metallic finishes

• Orbs, spheres, curves

• Atomic starbursts

• Optimistic futurism

Dark Academia

Vintage scholarly aesthetic—library vibes, leather & wood, classical references, old books, gothic romance

• Leather and wood textures

• Classical references

Frutiger Aero

2000s tech optimism—glossy buttons, aqua colors, bubbles, nature meets technology

Highlight on top, shadow below

Signature Colors:

Key Elements:

• Glossy gradients

• Aqua + white palette

"Design with Frutiger Aero style: glossy buttons, aqua blues and greens, skeuomorphic bubbles, glass reflections, nature imagery, optimistic tech aesthetic"

Solarpunk

Eco-futurism—green tech, renewable energy, nature-tech harmony

• Bright greens + golds

• Solar/wind symbols

• Plants + technology

• Optimistic future

• Natural lighting

• Eco-friendly icons

"Design in Solarpunk aesthetic: eco-futurism, green technology, renewable energy, hopeful sustainability, nature integrated with tech, bright greens and golds"

Afrofuturism

African diaspora meets sci-fi—cultural heritage, advanced technology, geometric patterns, rich symbolism

• Rich golds + purples

"Design in Afrofuturism aesthetic: African diaspora meets sci-fi, rich golds and purples, geometric patterns, cultural symbolism, advanced technology with African roots"

Anti-Design

Intentional rule-breaking—chaotic typography, clashing colors, experimental, rebellious

REBEL

"Design with Anti-Design aesthetic: intentionally broken rules, chaotic typography, clashing colors, experimental layouts, rebellious and provocative"

SOVIET

CONSTRUCTIVISM

Revolutionary propaganda—bold geometry, red/black/white, diagonal lines, avant-garde

★

Revolutionary Palette:

• Political messaging

"Design in Soviet Constructivism style: bold red and black, diagonal geometry, revolutionary propaganda, photomontage, strong political messaging, avant-garde"

ACID GRAPHICS

Psychedelic distortion—liquid chrome, warped type, iridescent gradients, surreal trippy visuals

"Design with Acid Graphics aesthetic: psychedelic colors, liquid chrome, warped typography, surreal distortions, iridescent gradients, trippy visuals"

Web 1.0

Early internet nostalgia—table layouts, under construction GIFs, basic HTML, blue links

Welcome to My Homepage! 🚧

Visitor #0 0 4 2 3

Guestbook|Links

Classic Palette:

Key Elements:

• Times New Roman

• Blue links (#0000ee)

• Table layouts

• Visitor counters

• Under construction

• Basic HTML/CSS

"Design with Web 1.0 aesthetic: table layouts, under construction GIFs, visitor counters, guestbooks, basic HTML, Times New Roman, blue hyperlinks, retro internet nostalgia"

Corporate Memphis

Modern tech illustration—flat diverse people, pastel colors, geometric shapes, friendly corporate

"Design with Corporate Memphis (Alegria) style: flat illustration, diverse abstract people, pastel colors, geometric shapes, modern tech company aesthetic, friendly and inclusive"

Risograph

Print aesthetic—limited colors, grainy texture, slight misalignment, DIY zine feel

Magenta

Blue

"Design with Risograph aesthetic: limited color printing, grainy texture, slight misalignment, vibrant spot colors, DIY zine feel, analog print imperfections"

KINETIC

TYPOGRAPHY

Motion-first type—animated text, dynamic letterforms, text as primary visual element

Slide

Rotate

Scale

"Design with Kinetic Typography aesthetic: animated text, motion-first design, dynamic letterforms, text as primary visual, experimental typography, movement and energy"

Visual Effects

Interactive polish and micro-details that elevate products from functional to memorable. Strategic use of these patterns adds perceived value and differentiates in crowded markets.

Updated Jan 2025

MAGNETIC CURSOR

Buttons attract cursor when nearby—creating gravity-like pull effect

HOVER NEAR BUTTON

"Create a magnetic cursor effect where buttons attract the cursor within 60-100px range. Use transform with smooth easing for gravity-like pull. Apply to primary CTAs."

Used by:StripeAwwwardsApple

WAVE DIVIDER

Curved organic section breaks using SVG—replaces straight lines between sections

"Create wave dividers with SVG paths using viewBox="0 0 1200 120". Use bezier (C) or quadratic (Q) curves for organic flow. Match fill to section background. Apply between landing page sections."

Used by:WebflowWixSquarespace

STICKY HEADER

Navigation follows scroll—adds backdrop blur and shadow when scrolled for depth

"Create a sticky header with position:sticky that gains backdrop-blur-md and shadow-lg on scroll. Detect scroll with Intersection Observer. Keep z-index high. Apply to navigation bars."

Used by:MediumNotionLinear

SCROLL REVEAL

Elements fade/slide in when entering viewport—cinematic progressive reveal effect

"Create scroll reveal animations using Intersection Observer API. Stagger delays (0ms, 200ms, 400ms) for sequential reveals. Combine opacity + transform for depth. Keep transitions under 800ms."

Used by:AppleStripePitch

3D Card Tilt

Card tilts toward cursor. Fake 3D depth effect. Hover effect that screams "look at me." Portfolio site staple.

Hover over card

Tilt Card

Move your cursor around to see the 3D effect

Key Rules

• Keep tilt angle under 15 degrees
• Add subtle shine/highlight following cursor
• Smooth easing back to flat on mouse leave

Cursor Trail

Graphics follow your mouse. Circles, sparkles, gradient trails. Portfolio site staple. Pure delight.

Move cursor around

Move your cursor here

Key Rules

• Limit trail length (10-20 particles max)
• Fade out smoothly, don't pop
• Can distract from content—use sparingly

Glitch Effect

RGB split, scan lines, distortion. Error aesthetic. Cyberpunk staple. Makes everything look hacker-y.

Auto-glitching

GLITCH

Key Rules

• Use sparingly—constant glitch is annoying
• RGB split = red/cyan offset layers
• Add horizontal displacement bars

Gradient Border

Border that shifts colors or moves. Animated stroke. Neon button effect. Makes CTAs impossible to ignore.

• Use padding trick: gradient bg + inner element
• Rotate gradient angle for animation
• Add box-shadow for neon glow effect

Text Reveal

Words appear as you scroll down. Cinematic effect. Overused in agency sites. Still looks cool when done right.

Auto-revealing

Design

with

Impact

Key Rules

• Stagger word reveals, don't show all at once
• Keep transitions smooth (600-800ms)
• Works best with short, punchy phrases

Morphing Blob

Animated amorphous shapes that pulse and shift. Gradient blobs that look alive. Background decoration gold standard.

Always animating

Blob Magic

Organic movement

Key Rules

• Use blur-3xl for soft organic feel
• Animate scale + rotate for morphing effect
• Layer 2-3 blobs with different speeds

Typography

Text styling fundamentals that form the foundation of clear communication. Understanding these concepts enables precise control over readability and visual hierarchy.

Updated Jan 2025

Font Pairing

Combining typefaces

Elegant Headline

Clean sans-serif body. Creates contrast and readability.

Modern Headline

Traditional serif body. Classic editorial style.

Editorial layouts, magazines, blogs

"Pair serif + sans-serif fonts"

Type Scale

Harmony in sizing

Display

Headline

Subhead

Body text reads comfortably.

Ratio: 1.25× (Major Third)

When to Use:

Editorial sites, blogs, content interfaces

"Use type scale: 14, 16, 20, 24, 32px"

Fluid Typography

No breakpoints needed

clamp(16px, 4vw, 32px)

Scales smoothly—no media queries.

When to Use:

Headlines, hero text, responsive layouts

"Use clamp() for fluid typography"

Contrast

Readable text requires contrast

Poor Contrast

This gray text is hard to read

Good Contrast

Black text is clear and accessible

WCAG AA compliance ensures readability.

When to Use:

All text—especially body copy and interfaces

"Use 4.5:1 contrast for readable text"

Line Width

Optimal reading width

Too Wide (100+ chars)

Long lines force eyes to travel far, making it hard to track back to the next line. Readers lose their place and tire quickly.

Perfect (60 chars)

Comfortable reading. Eyes move smoothly from line to line.

Articles, blogs, any long-form reading

"Limit lines to 50-75 characters"

Hierarchy

Guide readers through content

Primary Headline

Secondary Subhead

Body text follows with smaller size and lighter weight for comfortable reading.

Caption or metadata appears smallest

Tools:

Size • Weight • Spacing • Color

Any content with multiple information levels

"Use size, weight, spacing for hierarchy"

Kerning vs Tracking

Letter spacing fundamentals

Kerning (Pairs)

WAVE

Specific letter pairs adjusted

Tracking (Overall)

LUXURY

All letters spaced evenly

Professional typography, luxury brands, headlines

"Use kerning for pairs, tracking for spacing"

Leading

Line-height spacing

Too Tight (1.2)

Lines blur together when leading is too tight. Hard to track from one line to the next.

Perfect (1.6)

Proper breathing room. Eyes move smoothly line to line.

Named after lead spacers in printing presses. Rhymes with "bedding."

When to Use:

All typography—affects readability and comfort

"Use 1.2-1.3 for headlines, 1.5-1.7 for body"

Interaction Patterns

Response patterns that make interfaces feel alive. Animations, gestures, and feedback systems that react to user input—from hover states to drag-and-drop mechanics.

Updated Jan 2025

KINETIC

Motion-based design—animated transitions, dynamic elements, movement that guides

"Create a kinetic interface with smooth animations, dynamic transitions, and purposeful motion"

Used by:StripeAppleLinear

PARALLAX

Depth through multi-layer scrolling—background moves slower than foreground

"Create a parallax scrolling experience with multi-layer depth, where background elements move slower than foreground"

Used by:AppleFirewatchWebflow

Hover States

Visual feedback on mouse-over—reveals affordances, shows interactivity

HOVER TO SEE EFFECTS!

"Design hover states with clear visual feedback—lift, glow, scale, or color changes to show interactivity"

Used by:StripeLinearGitHub

Drag & Drop

Direct manipulation—grab, move, place objects intuitively

TRY IT! DRAG TO REORDER

"Implement drag and drop for direct manipulation, with clear visual feedback, drop zones, and cursor states"

Used by:TrelloNotionFigma

Microinteractions

Small, delightful moments—button animations, toggle transitions, loading states

"Design microinteractions for small delightful moments—button animations, toggle transitions, loading states"

Used by:DuolingoStripeTwitter

Pull-to-Refresh

Mobile gesture—drag down to reload content, spinner indicates loading

LIVE DEMO (AUTO-ANIMATING)

Idle

Pulling

Refreshing

"Implement pull-to-refresh with threshold detection, spinner feedback, and natural rubber-band physics"

Used by:TwitterInstagramGmail

Infinite Scroll

Endless content loading—scroll to bottom, automatically fetch more

LIVE DEMO (AUTO-SCROLLING)

Items: 5

"Implement infinite scroll with automatic content loading, scroll position detection, and loading indicators"

Used by:TwitterPinterestTikTok

Swipe Gestures

Touch-based navigation—horizontal slides, card dismissal, reveal actions

LIVE DEMO (AUTO-SWIPING)

"Design swipe gestures for touch navigation with velocity detection, spring animations, and clear visual feedback"

Used by:TinderInstagramGmail

Architecture

Structural patterns for organizing content and navigation. From hierarchical trees to flat structures—these determine how users mentally model and navigate your product.

Updated Jan 2025

Card-Based

Grid of self-contained cards—each item is independent, Pinterest/Twitter feed style, scannable

Card Grid Layout

"Organize content in a card-based layout with independent, self-contained units in a grid structure"

Hierarchical

Tree structure navigation—parent-child relationships, folders, nested menus, top-down flow

Interactive Tree Structure

▼Root Folder

►Subfolder 1

►Subfolder 2

"Structure content hierarchically with clear parent-child relationships, nested navigation, and tree structure"

Hub & Spoke

Central dashboard pattern—main hub connects to separate sections, always return to center

"Design a hub-and-spoke architecture with central dashboard connecting to separate feature sections"

Sequential

Step-by-step flow—onboarding wizards, checkout processes, multi-step forms, linear progression

Interactive Stepper

Step 1: Account

Create your account

"Design a sequential flow with step-by-step progression, progress indicators, and clear next/back navigation"

Database

Filterable collection—search, sort, filter large datasets, table views, spreadsheet-like

Search & Filter Demo

Name	Category	Price
Product A	Electronics	$299
Product B	Clothing	$49
Product C	Electronics	$599
Product D	Home	$129

Showing 4 of 4 items

"Organize content as a database with search, filter, and sort capabilities for large datasets"

Flat

Minimal hierarchy—all content at same level, simple navigation, no deep nesting

Single-Level Structure

All pages accessible from top level - no submenus

Equal hierarchy - all same level

"Organize with a flat architecture where all content is accessible at top level with minimal nesting"

Matrix

Two-axis navigation—rows and columns, comparison tables, feature matrices, dual categorization

Interactive Comparison Matrix

	Feature 1	Feature 2	Feature 3	Feature 4
Plan A	✓	✓	✓	✓
Plan B	✓	✓	✓	✓
Plan C	✓	✓	✓	✓

"Organize content in a matrix with two-axis navigation for comparing multiple attributes across options"

Network

Web of connections—nodes and links, Wikipedia-style, cross-references, non-linear exploration

Network Structure

"Create a network architecture with interconnected nodes, cross-references, and non-linear exploration paths"

Tabs

Horizontal categorization—switch between views, same-level sections, keeps context visible

Interactive Tab Switcher

Overview Content

Overview section with general information.

"Organize content with tabs for same-level sections with quick switching and preserved context"

Modals/Layers

Temporary overlays—dialogs, drawers, popups, focused tasks without leaving context

Interactive Examples

"Use modals/layers for temporary focused tasks with overlay patterns that preserve main context"

Accordion

Vertical stack—expand/collapse sections, progressive disclosure, space-efficient content organization

Interactive Accordion

A vertically stacked list where items expand/collapse to show content.

"Organize content with accordion for progressive disclosure and space-efficient vertical stacking"

Breadcrumb

Path trail—shows location, navigational hierarchy, "you are here" indicator, backward navigation

Interactive Path Trail

"Add breadcrumb navigation to show location path and enable backward navigation through hierarchy"

Mega Menu

Expansive dropdown—multi-column panels, rich content, visual categories, complex navigation made simple

Hover to Expand

"Create a mega menu with multi-column panels for complex navigation with visual categories"

Infinite Canvas

Boundless workspace—pan and zoom, spatial thinking, mind maps, whiteboards, free-form exploration

"Create an infinite canvas with pan/zoom for spatial thinking and free-form exploration"

Timeline

Chronological flow—events in sequence, temporal organization, history view, progress tracking

"Organize content with timeline for chronological events and temporal progress tracking"

Layouts

Spatial arrangements that structure content. Grids, splits, bento boxes, and dashboards—the foundational scaffolding that establishes hierarchy and visual flow.

Updated Jan 2025

Bento Box

Mosaic grid layout—tiles of varied sizes, asymmetric arrangement, modern dashboard aesthetic

"Create a bento box layout with mosaic grid tiles of different sizes and asymmetric arrangement"

Hero Section

Full-screen landing—centered content, large headline, prominent CTA, above-the-fold impact

Landing Impact

Centered

Left-Aligned

"Create a hero section with full-screen landing, centered content, large headline, and CTA"

Sidebar

Side navigation—fixed nav panel, main content area, app-style interface, persistent menu

"Create a sidebar layout with fixed navigation panel and main content area"

Dashboard

Widget-based layout—data panels, charts, metrics, multi-section grid, analytics interface

"Create a dashboard layout with data widgets, charts, and metrics grid"

Masonry

Waterfall grid—Pinterest-style columns, varying heights, organic vertical flow

Vertical Flow

COLUMN STRUCTURE

"Masonry grid with Pinterest-style columns, varying heights, waterfall layout"

Split Screen

Dual pane layout—50/50 vertical split, side-by-side content, clear division

"Split screen with 50/50 vertical division, dual pane design"

Card Grid

Uniform grid—equal-sized cards, consistent spacing, clean gallery layout

Equal Cards

"Card grid with uniform cards, equal sizes, clean spacing"

Holy Grail

Classic 5-section—header, footer, left sidebar, right sidebar, central content

"Holy grail with header, footer, two sidebars, central content"

Magazine

Editorial layout—multi-column text, large images, print-inspired typography

Editorial Style

"Magazine layout with multi-column text, large images, editorial style"

Floating Cards

Layered depth—overlapping cards, elevated shadows, z-axis stacking

"Floating cards with overlapping layers, elevated shadows, depth"

Terminal

CLI aesthetic—command-line interface, monospace fonts, dark theme

$ COMMAND_LINE

bash

$npm run dev

→ Starting server...

Local: localhost:3000

$ "Terminal layout with CLI aesthetic, monospace fonts, dark theme"

Forms

Input controls and validation mechanisms for data collection. Text fields, dropdowns, date pickers, and validation states—designed for accuracy and efficiency.

Updated Jan 2025

Input Field

Text entry—labels, placeholders, types (email, password), focus states

✓ Label above field, not inside

✓ Clear focus states (border + ring)

✓ Min height 44px for touch targets

✓ Use correct input type (email, tel, number)

"Input fields with labels, focus states, and input types"

Validation

Error feedback—inline validation, real-time checks, clear error messages, prevent bad data submission

Real-Time Validation

Username

Key Rules:

• Validate on blur, not every keystroke

• Show success states, not just errors

• Clear, specific error messages

"Add validation with error messages"

Autocomplete

Smart suggestions—type-ahead search, filtered results, keyboard navigation, faster data entry

• Highlight matching text in suggestions

• Show results after 2-3 characters

• Support keyboard navigation (up/down)

• Close dropdown on selection or blur

"Add autocomplete with suggestions"

File Upload

Document picker—drag & drop, browse button, progress indication, file type restrictions, multi-file support

Drag & Drop Upload

📁

Drag & drop files

Max 10MB • PDF, JPG, PNG

Key Rules:

• Show visual feedback when dragging

• Display progress for large files

• List uploaded files with remove option

• Validate file type and size limits

"Add file upload with drag & drop"

Checkbox

Multi-select—independent choices, check/uncheck, multiple selections allowed, binary options

Interactive Checkboxes

Notification Settings

✓

📧 Email notifications

• Allow multiple selections at once

• Each checkbox is independent

• Use for "agree to terms" scenarios

"Add checkboxes for multiple selections"

Radio Group

Single choice—mutually exclusive options, one selection only, circular buttons, grouped decisions

Pricing Plans (One Choice)

• Only one option can be selected

• Use for 2-5 mutually exclusive choices

• Always have one option pre-selected

"Add radio groups for single selection"

Toggle Switch

On/Off control—instant action, binary state, physical switch metaphor, immediate effect

• Takes effect immediately (no submit)

• Use for on/off settings only

• Show current state clearly

"Add toggle switches for on/off actions"

Date Picker

Calendar selector—visual date selection, month/year navigation, prevents invalid dates, better than typing

• Show calendar on input click

• Prevent invalid date entry

• Highlight current/selected date

• Allow keyboard input as alternative

"Add a date picker with calendar"

Search Bar

Universal finder—magnifying glass icon, query input, instant results, clear button, the gateway to content

• Show results as user types (debounced)

• Include clear button when input has text

• Always show search icon on left

• Display result count and empty states

"Add a search bar with icon and clear button"

Dropdown

Select menu—expandable list, single selection, space-efficient, better for many options than radio buttons

Custom Dropdown

Select Country

Key Rules:

• Use for 5+ options (radio for fewer)

• Show selected value clearly

• Native select better on mobile

"Add a dropdown for single selection"

Motion & Animation

Timing functions and animation styles that bring interfaces to life. Easing curves, springs, bounces—each creates distinct emotional responses from playful to professional.

Updated Jan 2025

Ease In-Out

Animation that starts slowly, accelerates in the middle, then decelerates smoothly at the end. Creates natural, comfortable motion.

Animation Demo

Key Rules:

• Use for UI transitions and element movements

• Duration should be 200-400ms for most interactions

• Best for natural, comfortable motion that doesn't draw attention

"Animate with ease-in-out timing for smooth, natural motion that accelerates in the middle and gently comes to rest. Use for button transitions, modal openings, and subtle UI movements."

Spring

Physics-based animation that mimics spring behavior with natural overshoot and settling. Creates playful, organic motion.

Animation Demo

Key Rules:

• Perfect for interactive elements and playful interfaces

• Overshoot adds personality but should be subtle

• Use stiffness and damping to control bounce intensity

"Use spring physics for bouncy, playful animations with natural overshoot and settling. Perfect for button presses, drag-and-drop, and interactive elements that need personality."

Snap

Instant animation with no interpolation. Element jumps from one state to another immediately. Creates emphasis and urgency.

Animation Demo

Key Rules:

• Use for instant feedback and state changes

• Perfect for toggles, switches, and binary states

• Combine with other animations for dramatic effect

"Create instant snap animations with no transition time for immediate visual feedback. Use for toggles, visibility changes, and moments where you want sharp, decisive state changes."

Fade

Gradual opacity transition from invisible to visible or vice versa. Creates subtle, elegant appearances and disappearances.

Animation Demo

FADE

Key Rules:

• Use for subtle entrances and exits of elements

• Duration should be 200-400ms for UI, longer for content

• Combine with other transforms for richer effects

"Fade elements in and out for subtle, elegant transitions. Use fade-in for loading content, fade-out for dismissing notifications, and crossfade for smooth content swaps."

Slide

Movement along a single axis from one position to another. Creates directional, purposeful transitions with clear spatial relationships.

Animation Demo

SLIDE

Key Rules:

• Direction should match user action or content flow

• Use for panels, drawers, and navigation transitions

• Combine with fade for smoother effect

"Slide elements from off-screen for dramatic entrances. Use slide-in from right for next content, slide-in from left for previous content, and slide-up for modal appearances."

Scale

Size transformation that grows or shrinks elements from a center point or origin. Creates emphasis and focus.

Animation Demo

Key Rules:

• Scale from center for balanced growth

• Use scale-up for emphasis, scale-down for dismissal

• Keep transforms between 0.8x and 1.2x for subtlety

"Animate scale transforms to create emphasis and focus. Use scale-up on hover for interactive elements, scale-in for appearing modals, and pulse effects for notifications."

Bounce

Animation with elastic rebound effect that simulates physical bounce. Creates playful, energetic motion with personality.

Animation Demo

Key Rules:

• Use sparingly - bounce is high-energy and attention-grabbing

• Perfect for success states and celebration moments

• Reduce intensity for professional/serious contexts

"Create bounce animations with elastic rebound for playful, energetic effects. Use for success notifications, gamification elements, and moments that celebrate user achievement."

Morph

Smooth transformation between different shapes, sizes, or states. Creates fluid, organic transitions that show relationships.

Animation Demo

Key Rules:

• Use to show state changes and transformations

• Keep transition smooth with proper easing

• Combine shape, size, and color changes for rich effects

"Animate smooth morphing between shapes and states to show transformation. Use for loading spinners that become checkmarks, buttons that expand to forms, and icon state changes."

Parallax

Layered animation where elements move at different speeds to create depth. Creates immersive, dimensional scrolling experiences.

• Background layers move slower than foreground

• Use 2-4 layers maximum for performance

• Keep speed differences subtle for natural effect

"Create parallax scrolling with layered elements moving at different speeds. Use for hero sections, storytelling experiences, and immersive landing pages that need depth."

Stagger

Sequential animation where multiple elements animate with progressive delays. Creates rhythm and visual flow.

Animation Demo

Key Rules:

• Delay between items should be 50-100ms for smooth flow

• Use for lists, grids, and groups of related items

• Stagger direction should match reading/scan pattern

"Animate multiple elements with staggered delays for cascading effects. Use for list items appearing, card grids loading, and navigation menus expanding to create visual rhythm."

Voice & Tone

Communication patterns that define brand personality. Voice is consistent identity—tone adapts to context. Reference these for copy across support, marketing, and product.

Updated Jan 2025

Professional

Formal, authoritative voice—expert tone, precise language, credible communication

Example Copy

WELCOME

"We appreciate your business. Our enterprise solutions are designed to optimize operational efficiency and deliver measurable results."

ERROR

"Authentication failed. Please verify your credentials and attempt to access the system again."

Key Traits:

• Formal language structure

• Industry-specific terminology

• Evidence-based claims

"Write in professional voice: formal, authoritative, expert, precise, credible"

Friendly

Warm, conversational voice—approachable, welcoming, personable communication

Example Copy

WELCOME

"Hey there! We're so glad you're here. Our team is ready to help make things easy for you. Feel free to reach out anytime!"

ERROR

"Oops! Something didn't work quite right. Let's try that again together—we're here to help!"

Key Traits:

• Conversational language

• Welcoming greetings

• Personal pronouns (we, you)

"Write in friendly voice: warm, conversational, approachable, welcoming"

Playful

Fun, lighthearted voice—entertaining, energetic, whimsical communication

Example Copy

WELCOME

"Welcome to the party! 🎉 Ready to dive in? We've got some awesome stuff lined up that'll knock your socks off!"

ERROR

"Whoopsie-daisy! Looks like something went sideways. Give it another whirl!"

Key Traits:

• Playful expressions & wordplay

• Emojis and visual elements

• Energetic, upbeat tone

"Write in playful voice: fun, lighthearted, entertaining, energetic"

Authoritative

Commanding, confident voice—expert knowledge, decisive tone, trustworthy delivery

Example Copy

WELCOME

"This platform delivers proven solutions backed by 20 years of industry leadership. Trust the experts."

ERROR

"Access denied. Invalid credentials. Follow protocol and re-enter authorized information."

Key Traits:

• Direct, commanding statements

• Expert credentials emphasized

• Decisive language choices

"Write in authoritative voice: commanding, confident, expert, decisive"

Inspirational

Uplifting, motivational voice—empowering, aspirational, encouraging communication

Example Copy

WELCOME

"Your journey to greatness starts here. Together, we'll unlock your full potential and achieve extraordinary results."

ERROR

"Every setback is a setup for a comeback. Let's try again—you've got this!"

Key Traits:

• Empowering language

• Aspirational messaging

• Growth-oriented framing

"Write in inspirational voice: uplifting, motivational, empowering, aspirational"

Quirky

Unconventional, witty voice—unique personality, memorable, distinctively offbeat

Example Copy

WELCOME

"Plot twist: you just stumbled into the coolest corner of the internet. Buckle up, buttercup—things are about to get interesting."

ERROR

"Well, that was awkward. The digital gremlins are at it again. Let's give this another shot!"

Key Traits:

• Unexpected word choices

• Distinctive personality

• Memorable turns of phrase

"Write in quirky voice: unconventional, witty, unique, offbeat, memorable"

Celebratory

Excited, festive voice—joyful, enthusiastic, achievement-focused communication

Example Copy

WELCOME

"Congratulations! 🎊 You're about to achieve something amazing. Let's celebrate every win, big and small!"

ERROR

"Not quite there yet, but you're so close! One more try and we'll be celebrating together!"

Key Traits:

• Enthusiastic language

• Achievement recognition

• Festive, joyful tone

"Write in celebratory voice: excited, festive, joyful, enthusiastic"

Empathetic

Understanding, compassionate voice—supportive, caring, emotionally aware delivery

Example Copy

WELCOME

"We understand this might feel overwhelming. You're not alone—we're here to support you every step of the way."

ERROR

"We know how frustrating this can be. Let's work through this together—your concerns matter to us."

Key Traits:

• Compassionate language

• Acknowledgment of feelings

• Supportive reassurance

"Write in empathetic voice: understanding, compassionate, supportive, caring"

Urgent

Time-sensitive, critical voice—immediate action required, attention-grabbing delivery

Example Copy

WELCOME

"Action required now! Your immediate attention is needed. Complete these steps within the next 24 hours."

ERROR

"Critical error detected. Immediate action required. Fix this issue now to prevent data loss."

Key Traits:

• Time-sensitive language

• Action-focused directives

• Attention-grabbing tone

"Write in urgent voice: time-sensitive, critical, immediate, action-required"

Educational

Informative, instructive voice—clear explanations, teaching-focused, accessible knowledge

Example Copy

WELCOME

"Let's learn together. This guide will walk you through each concept step-by-step, building your understanding progressively."

ERROR

"This error occurs when the input format is incorrect. Here's what you need to know to fix it."

Key Traits:

• Clear, structured explanations

• Step-by-step guidance

• Accessible terminology

"Write in educational voice: informative, instructive, clear, teaching-focused"

Persuasive

Compelling, influential voice—convincing arguments, benefit-focused, action-driven

Example Copy

WELCOME

"Imagine achieving your goals 3x faster. Our proven system has helped thousands succeed—you could be next."

ERROR

"Don't let this small hiccup stop your progress. Try again now and keep moving toward success."

Key Traits:

• Benefit-focused messaging

• Compelling calls-to-action

• Social proof & credibility

"Write in persuasive voice: compelling, influential, convincing, action-driven"

Casual

Relaxed, informal voice—laid-back, conversational, easy-going communication

Example Copy

WELCOME

"Hey! Good to see you. Just grab what you need and let us know if you have any questions. No pressure!"

ERROR

"Hmm, that didn't work. No worries though—just give it another shot."

Key Traits:

• Relaxed, informal language

• Conversational style

• Low-pressure approach

"Write in casual voice: relaxed, informal, laid-back, conversational"

Data Visualization Patterns

Charts and graphs for displaying metrics and analytics. Line charts, bar charts, KPI cards, and table patterns for dashboards you've seen in Google Analytics, Stripe, and modern SaaS tools.

NEW ✨

Line Chart

100500

JanFebMarAprMayJun

When to Use

Show trends over time. Analytics dashboards, stock prices, traffic metrics.

"Create a line chart showing website traffic over 30 days with hover tooltips, Y-axis labels, and a gradient fill under the line. Include month labels on X-axis."

Bar Chart

Compare discrete categories. Sales by product, signups by channel, revenue by region.

"Build a vertical bar chart comparing sales across 5 product categories. Add value labels on top of bars, colored bars, and hover tooltips showing exact amounts."

KPI Metric Card

Monthly Recurring Revenue

Dashboard overview. Highlight single key metric with context and trend.

What's Inside

• Large value display

• % change indicator

• Mini sparkline

• Trend arrow

"Design a KPI metric card showing Monthly Recurring Revenue with current value, percentage change from last month, and a sparkline trend. Include up/down arrow indicator."

Progress Ring

73%

Profile Complete

When to Use

Fitness goals, profile completion, project progress. More engaging than progress bars.

"Create a circular progress ring showing 73% completion with animated fill, centered percentage text, and label underneath. Support custom colors and size."

Data Table

List structured data. Admin dashboards, transaction history, user lists.

"Build a sortable data table with column headers, alternating row colors, and pagination. Include sort arrows, row hover states, and "No data" empty state."

Donut Chart

Show part-to-whole relationships. Budget breakdowns, traffic sources, market share.

"Create a donut chart showing expense breakdown across 4 categories with legend, hover tooltips, and percentage labels. Center shows total amount."

Heat Map

Less

When to Use

Show patterns across two dimensions. GitHub contributions, website clicks, time-based activity.

"Build a heat map grid showing activity intensity across 7 days and 24 hours, like GitHub contribution calendar. Use color gradient from light to dark blue based on values, with hover tooltips showing exact counts."

Scatter Plot

Show correlation between variables. Customer segmentation, price vs demand, A/B test results.

"Create a scatter plot showing correlation between two variables with X/Y axes, clustered data points in different colors, and trend line. Add hover tooltips with exact values and axis labels."

Area Chart

Show cumulative values over time. Revenue streams, stacked metrics, layered contributions.

"Build a stacked area chart showing cumulative values over time with 3 colored layers, smooth curves, X/Y axes with labels, and hover tooltips showing breakdown at each point."

Funnel Chart

Overall Conversion: 10%

When to Use

Show stage-by-stage drop-off. Sales pipelines, conversion funnels, user journey analysis.

"Create a funnel chart showing conversion stages with 5 levels, each showing count and percentage drop-off. Use inverted pyramid shape with color gradient from blue to cyan, and display conversion rate between stages."

Gauge Chart

Show single metric against thresholds. Health scores, performance ratings, capacity usage.

"Build a semi-circular gauge chart showing single metric against thresholds with color zones (red/yellow/green), needle pointer at current value, and center label showing percentage or score."

Candlestick Chart

Show financial price movements. Stock trading, crypto analysis, commodity prices over time.

"Create a candlestick chart for financial data showing open/close/high/low values with green (up) and red (down) candles, time axis with dates, and hover tooltips showing all 4 values plus volume."

Dashboard Layout Patterns

Layout patterns for composing metrics into cohesive dashboards: grid layouts, drill-down views, tabs, real-time feeds, comparison views, and export controls.

NEW ✨

Metric Grid Dashboard

Executive dashboards, analytics overview pages, SaaS admin panels. Show 4-12 key metrics in scannable grid. Google Analytics, Stripe, Shopify all use this.

"Build a dashboard with a 2x3 grid of metric cards. Each card shows: label, large number, percentage change with up/down arrow. Use responsive grid that stacks on mobile."

Drill-Down Dashboard

Dashboard›Revenue Details

← Click breadcrumb to return

When to Use

Analytics dashboards, financial reporting, sales pipelines. Let users explore details without losing context. Mixpanel, Amplitude use this pattern.

"Create a dashboard where clicking any metric card navigates to detailed breakdown view. Add breadcrumb navigation (Dashboard > Revenue > Details) at top to return to overview. Include back button and drill-down indicator on hover."

Tabbed Dashboard

Multi-faceted dashboards with different views by department. Stripe, Shopify, Google Ads use this.

"Build a tabbed dashboard with 3-5 views (Overview, Sales, Traffic). Each tab shows different metrics. Highlight active tab with underline. Persist selected tab in URL for sharing."

Real-Time Feed

Recent Activity

Live

✓

Order #4821 completed

Operations dashboards, server monitoring, social media analytics. Show live updates, recent transactions, system logs. Twitter Analytics, Datadog use this.

"Create a dashboard with live activity feed showing recent events in reverse chronological order. Add auto-refresh badge ("Updated 5s ago"), timestamp for each event, and ability to pause updates. Include event type icons and color coding."

Comparison Dashboard

A/B testing dashboards, time period comparisons, regional performance. Show growth, decline, or performance gaps. Facebook Ads Manager, Google Analytics use this.

"Build a dashboard with side-by-side metric comparison: this month vs last month, Plan A vs Plan B, or Region 1 vs Region 2. Use columns or split view with matching metrics aligned. Highlight differences with up/down arrows and percentage changes."

Export Controls

• 842 records match filters

• File size: ~1.2 MB

• 12 columns included

When to Use

Financial dashboards, analytics reporting, admin panels. Let users download filtered data for offline analysis. Stripe, QuickBooks, Google Analytics use this.

"Create a dashboard with export controls at top: date range picker, format dropdown (CSV, PDF, Excel), and export button. Add filter chips showing active filters. Disable export button until date range is selected."

Company App Aesthetics

Real-world design systems from leading companies. Analyze fintech apps, SaaS dashboards, and product interfaces—learn what makes Stripe, Cash App, and Robinhood's apps instantly recognizable.

NEWEpoch 14: Fintech App Aesthetics

Company Landing Page Aesthetics

Marketing site design systems from leading brands. Analyze landing pages, hero sections, and conversion flows—learn how companies attract and convert visitors.

Coming SoonFuture Epoch: Company Landing Pages

Feedback

System communication patterns that keep users informed. Toasts, loading states, errors, and confirmations—the signals that explain what's happening in your product.

Updated Jan 2025

Toast

Temporary notification—auto-dismiss, non-blocking feedback

Click to show toast:

Preview:

✅Changes saved successfully!

Key Rules:

• Auto-dismiss in 3-5 seconds

• Bottom or top corner placement

• Color-code by type (success/error/info)

"Add toast notifications with auto-dismiss and color-coded types"

Loading Spinner

Activity indicator—rotating circle, indeterminate progress

• Show immediately for tasks under 1s delay

• Use for unknown duration tasks only

• Add "Loading..." text if over 2 seconds

"Add loading spinner for indeterminate wait times with continuous animation"

Skeleton Screen

Content placeholder—shimmer animation, better perceived performance

Key Rules:

• Match final content layout exactly

• Use subtle pulse animation

• Prefer over spinners for content

"Add skeleton screens matching content layout with pulse animation"

Progress Bar

Visual percentage indicator filling left-to-right for determinate tasks

Uploading file...0%

Key Rules:

• Always show percentage number clearly

• Never animate backwards (only forward)

• Only use for known duration tasks

"Add progress bar with percentage display for determinate tasks"

Empty State

Zero data screen—explain why empty, guidance, clear action

📭

No messages yet

Your inbox is empty. Start a conversation with your team to begin messaging.

🔍

No results

Try different keywords

🎉

All done!

No tasks remaining

Key Rules:

• Explain why empty (be helpful, not judgmental)

• Provide clear next action (specific CTA)

• Use friendly icon matching context

"Add empty states with helpful messages and clear CTAs"

Alert Banner

Full-width system message bar for important dismissible notifications

✅

Success!

Your changes have been saved.

⚠️

Warning

Trial expires in 3 days. Upgrade now.

Key Rules:

• Use sparingly (high priority only)

• Color-code by severity level

• Always include close button

"Add alert banners with color-coded severity and dismissible controls"

Confirm Dialog

Destructive action guard preventing accidents with clear Yes/No choice

Key Rules:

• Explain consequences clearly

• Safe action on left (Cancel first)

• Use only for critical actions

"Add confirm dialogs for destructive actions with clear consequences"

Badge

Notification count—small pill with number, unread indicator

• Use red for high attention notifications

• Cap at 9+ for large numbers (readability)

• Dot indicator for boolean (yes/no)

"Add badges for notification counts with top-right positioning"

Error State

Failure feedback—explain what happened, provide recovery

⚠️

Connection Error

Unable to reach server. Check connection.

🔍

404

Not found

❌

Invalid

Bad input

⏱️

Timeout

Too slow

Key Rules:

• Use plain language (avoid error codes)

• Suggest next steps for recovery

• Friendly tone (don't blame user)

"Add error states with clear messages and recovery actions"

Success Message

Positive confirmation—green checkmark, celebratory language

🎉

Payment Successful!

Order #12345 confirmed. Check email.

✓

Saved

📤

Sent

Key Rules:

• Show immediately after action completes

• Use celebratory, positive language

• Green is universal success color

"Add success messages with green checkmarks and positive copy"

Cybersecurity

Security patterns that protect your application and users. Authentication, authorization, data protection, and threat prevention—the foundations of secure software.

NEW

OAuth

Third-party login—secure delegation

User logs in at provider

• Never store passwords—delegate to provider

• Validate redirect URIs to prevent hijacking

• Use HTTPS only for token transmission

"Implement OAuth 2.0 authentication with secure token handling, refresh flow, and third-party provider integration"

JWT

JSON Web Tokens—stateless authentication

Token Structure

Header

{ alg: 'HS256', typ: 'JWT' }

Payload

{ sub: '123', exp: 1735689600 }

• Set short expiration times (15-60min)

• Use refresh tokens for long sessions

• Never store sensitive data in payload

"Implement JWT authentication with secure token generation, validation, and refresh mechanism"

MFA

Require 2 forms of proof to log in

Text message • Google Authenticator • Security key

Protecting admin panels, banking, healthcare, payment info

"Implement MFA with TOTP or SMS verification"

RBAC

Control who can do what in your app

Assign permissions by role. Admins can delete users, editors can create posts, viewers can only browse.

When to Use:

Team apps, SaaS products, admin dashboards with multiple user types

"Implement RBAC with roles: admin, editor, viewer. Each has specific CRUD permissions."

Input Sanitization

Clean user data before storing or displaying

Dangerous

<script>steal()

Sanitized

Strip HTML tags, escape characters, validate types

When to Use:

Every form, comment section, search bar—anywhere users enter data

"Sanitize input to prevent XSS/SQL injection. Strip HTML, escape chars, validate types."

CORS

Control which websites can call your API

Any API that browsers call—especially with sensitive data or auth

"Configure CORS with specific origins, not wildcard (*). Set Access-Control-Allow-Origin."

Zero Trust

Never trust, always verify every request

Verify identity, device, and every access

When to Use:

Enterprise apps, sensitive data, remote work environments

"Implement zero trust: verify every request, authenticate users/devices/services on every access."

CSP

Control which resources can load on your page

Browser blocks unauthorized scripts and resources

When to Use:

Any web app—prevents malicious scripts from running on your site

"Add CSP headers to prevent XSS. Define which sources can load scripts, styles, images."

XSS Prevention

Stop malicious scripts from running

Frameworks like React auto-escape by default

When to Use:

Anywhere you display user content—comments, profiles, messages

"Prevent XSS by escaping input before display. Use auto-escaping, validate, set CSP headers."

Rate Limiting

Stop users from making too many requests

Limit: 100 req/min → Wait 60s → Reset

When to Use:

APIs, login pages, any endpoint vulnerable to spam or DDoS

"Add rate limiting: 100 req/min per user"

Encryption

Scramble data so only authorized users can read it

Algorithms: AES-256 • RSA • bcrypt

When to Use:

Passwords, credit cards, personal data, API secrets

"Encrypt sensitive data with AES-256 and TLS"

API Keys

Unique tokens to identify and authenticate apps

API Key

sk_live_4eC39HqLyjWDarjtT1zdp7dc

Public APIs, third-party integrations, developer platforms

"Implement API keys with rotation and scopes"

SSO

Single Sign-On

1. Login Once

User signs in to identity provider (Google, Okta)

2. Get Token

Receive auth token from provider

3. Access All Apps

Gmail, Drive, Calendar, etc.

No re-login

One password

Examples: Google Workspace, Microsoft 365

When to Use:

Multiple apps, enterprise login, reduce password fatigue

"Implement SSO for single login across apps"

Session Management

Keep users logged in securely

✓ Auto-logout after 30 min idle

✓ Secure session tokens (HttpOnly)

✓ Refresh tokens before expiry

✓ Clear session on logout

Prevents: Session hijacking, unauthorized access

When to Use:

User authentication, maintain login state, auto-logout

"Implement secure session management"

SQL Injection Prevention

Protect database queries

❌ Bad (Vulnerable)

query = "SELECT * FROM users WHERE id=" + userId

✅ Good (Safe)

query = "SELECT * FROM users WHERE id=?"

Use parameterized queries

Attack Example:

' OR '1'='1

Malicious input exposes all data

Defense: Prepared statements, input validation

When to Use:

All database queries, user input, search forms

"Prevent SQL injection with parameterized queries"

CSRF Protection

Cross-Site Request Forgery

1. Generate Token

csrf_token = "a3f8d..."

2. Include in Form

3. Verify on Submit

Server validates token matches session

Without CSRF:

Malicious site submits form as you

Protects: Form submissions, state changes

When to Use:

All forms, POST/PUT/DELETE requests, payment flows

"Implement CSRF protection with tokens"

Secure Headers

HTTP security headers

Content-Security-Policy:

default-src 'self';

Prevents: XSS, clickjacking, data leaks

When to Use:

All web apps, API responses, production sites

"Add security headers to HTTP responses"

Password Policies

Strong password requirements

Requirements:

✓ Minimum 12 characters

✓ Uppercase + lowercase

✓ Numbers + symbols

✓ No common passwords

Never store plaintext passwords

Tools: bcrypt, Argon2, password strength meters

When to Use:

User registration, password reset, account security

"Enforce strong password policies"

System Design

Architecture patterns for scalable systems. Microservices, databases, caching, communication—the building blocks of robust infrastructure.

NEW

Microservices

Independent services working together

Tools: Docker • Kubernetes

When to Use:

Large apps with different scaling needs per feature

"Design microservices with API gateway and service discovery"

Load Balancing

Distribute traffic across servers

Tools: NGINX • AWS ALB • HAProxy

When to Use:

Multiple servers handling high traffic

"Set up load balancing with health checks"

Caching

Store frequently used data in fast memory

How It Works

Cache hit → Instant (2ms)

Cache miss → Slow (200ms)

Tools: Redis • Memcached • CloudFlare

When to Use:

Data that's read often but changes rarely (user profiles, product catalogs, API responses)

"Implement caching with Redis to reduce DB load"

RESTful API

Standard way apps talk to servers

GET

Read data

POST

Create new

PUT

Update

DELETE

Remove

GET /users/123
POST /users

When to Use:

Any app communicating with a server (mobile apps, web apps, integrations)

"Create RESTful API with GET, POST, PUT, DELETE"

Message Queue

Tasks wait in line

Emails • Payments • Video processing

Tools: RabbitMQ • AWS SQS

When to Use:

Tasks that don't need instant response

"Implement message queue with RabbitMQ for async tasks"

Horizontal Scaling

Add more servers

Tools: AWS • Kubernetes

When to Use:

Traffic spikes (Black Friday, 10k+ users)

"Set up horizontal scaling with auto-scaling groups"

CDN

Files from nearest location

Images • Videos • CSS • JS

Tools: CloudFlare • AWS CloudFront

When to Use:

Global audience or lots of media files

"Set up CDN with CloudFlare for static assets"

Database Sharding

Split data across servers

Tools: MongoDB • PostgreSQL • MySQL

When to Use:

Database too big for one server (millions of rows)

"Set up database sharding to split data across servers"

API Rate Limiting

Limit requests per user

Request 1-100

✓ Allowed

Request 101+

✗ Blocked (429 error)

100 requests/hour per user

Tools: Redis • NGINX • Express

When to Use:

Prevent abuse, manage costs, protect servers

"Add API rate limiting to prevent abuse"

WebSockets

Real-time two-way updates

Client

⟷

Server

Instant updates both ways

Chat • Live scores • Trading • Multiplayer

Tools: Socket.io • Pusher

When to Use:

Need instant updates (chat, live feeds, games)

"Use WebSockets for real-time communication"

GraphQL

Ask for exactly what you need

Query

user { name, email }

Response

{ name: "John", email: "..." }

Single endpoint

No over-fetching

Tools: Apollo • Relay • Hasura

When to Use:

Complex data needs, mobile apps, real-time updates

"Build GraphQL API with flexible queries"

Serverless

Code runs only when triggered

Platforms: AWS Lambda • Vercel • Cloudflare

When to Use:

Event-driven apps, APIs, background jobs

"Deploy serverless functions that auto-scale"

Database Indexing

Speed up searches with shortcuts

Index email, user_id, created_at columns

When to Use:

Slow queries on large tables, frequent lookups

"Add indexes on frequently queried columns"

Monolith

All code in one application

Good for: MVPs, small teams, simple apps

When to Use:

Starting out, small teams, apps that fit one server

"Build monolith with all features in one codebase"

Event-Driven

Services react to events, not direct calls

Services listen for events. Loose coupling, async processing.

Tools: Kafka, RabbitMQ, SNS/SQS

When to Use:

Complex workflows, async tasks, decoupled services

"Design event-driven with async event handlers"

CQRS

Separate reads from writes

Commands change state. Queries fetch data. Different models, different databases.

✓ Benefit

Scale reads/writes independently

⚠ Tradeoff

More complex

Good with: Event Sourcing, Event-Driven

When to Use:

Heavy reads, complex domains, different scaling needs

"Implement CQRS with separate read/write models"

Pub/Sub

Publishers send, subscribers receive

Tools: Google Pub/Sub, SNS, Kafka

When to Use:

Multiple services need same event, broadcast messages

"Implement pub/sub for event broadcasting"

Webhooks

Push notifications via HTTP POST

1. Subscribe

POST https://your-app.com/webhook

2. Event Happens

Payment succeeded

3. HTTP POST

{"event": "payment.success"}

Real-time

No polling

Examples: Stripe, GitHub, Shopify

When to Use:

Notify external systems, integrations, real-time updates

"Implement webhooks for HTTP event notifications"

gRPC

Fast RPC framework using protocol buffers

10x faster than REST. Auto-generate client code.

When to Use:

Microservices, low latency, high throughput needed

"Use gRPC for fast service communication"

Service Mesh

Microservice communication layer

Service A

📦

Mesh

Routes • Monitors
Secures

Service B

📦

Handles:

Traffic routing • Observability • Security • Retries

❌ Without:

Each service does it all

✅ With:

Centralized control

When to Use:

Many microservices, need traffic control & security

"Design a service mesh architecture for managing microservice communication with traffic routing, observability, and security"

Event Sourcing

Store all changes as events

Store every change → Rebuild state by replay

Benefits:

Audit trail • Undo/replay • Time travel • Debugging

When to Use:

Financial transactions, audit requirements, undo/replay features

"Implement event sourcing to store all state changes as events for complete audit trail and time travel"

Circuit Breaker

Prevent cascading failures

API fails 5x → Circuit opens → Return cache → Test after 60s

External APIs, prevent cascading failures, graceful degradation

"Add circuit breaker pattern to prevent cascading failures when external service fails"

Blue-Green Deploy

Zero-downtime releases

Instant, zero downtime

Switch back instantly

When to Use:

Production deploys, need zero downtime, instant rollback

"Set up blue-green deployment for zero-downtime production releases with instant rollback"

DB Replication

Copy data across servers

Scale reads • High availability • Geo-distributed

When to Use:

Read-heavy apps, high availability, global users

"Implement database replication with primary-replica architecture for high availability and read scaling"

Idempotency

Same request = same result

❌ Not Idempotent:

POST /charge
→ $50 charged ✓
→ $50 again! ⚠️
→ $50 again! ⚠️

User triple-charged!

✅ Idempotent:

POST + key:abc
→ $50 charged ✓
→ Ignored ✓
→ Ignored ✓

Same result!

How:

Client sends unique ID → Server checks cache → Return or process

When to Use:

Payment APIs, prevent duplicate charges, unreliable networks

"Make API endpoints idempotent so duplicate requests produce same result without side effects"

AI Vocabulary

Prompt engineering patterns for better AI interactions. Techniques to improve accuracy, control output, and communicate effectively with language models.

NEW

Chain of Thought

Ask AI to show its work

Q: Use microservices for 3-person startup?

1. Team = 3 people

2. Microservices = overhead

→ Start with monolith

Math, logic, or decisions that need explanation

"Think step-by-step before answering"

Few-Shot Learning

Show AI examples first

"great" → Positive

"terrible" → Negative

Need specific format or classification pattern

"Give 2-3 examples before asking"

Temperature

Randomness control—creativity vs consistency

Scale

0.0 ❄️ Deterministic

Same input → Same output

0.7 ⚖️ Balanced

Accuracy + creativity

• Lower = predictable, higher = random

• Use 0 for reproducible results

• Default 0.7 for most tasks

"Set temp to 0 (deterministic), 0.7 (balanced), or 1+ (creative)"

Verbose

Detailed output—comprehensive explanations

"Async/await handles promises:
1. Looks synchronous
2. try/catch errors
3. Ex: await fetch(url)"

• Ask for "detailed" or "step-by-step"

• More tokens but clearer

• Opposite of "concise"

"Explain in detail with step-by-step reasoning"

System Prompt

Define AI personality and rules

Role:

"You are a senior engineer"

Behavior:

"Write clean, tested code"

Set consistent AI behavior for entire conversation

"You are [role]. Be [tone]. Always [behavior]."

RAG

Give AI your docs to answer from

"Here's my API docs. How do I authenticate?"

AI needs to answer from your specific docs or data

"Context: [docs]. Based on this, answer: [question]"

Prompt Chaining

Break big tasks into steps

Each step uses previous output

Complex projects that need multiple stages

"Step 1: [task]. Step 2: Use output for [next]."

Token Limit

Context window—how much AI can remember

What Fits in Context?

~100k tokens

≈ 75k words or ~300 pages

✓ Full conversation history

✓ Multiple files you've shown

✓ All tool outputs and responses

When Context Fills Up:

• AI "forgets" earlier messages

• May lose track of your requirements

• Start a new chat with a summary

When to Use:

• Building large features over long sessions

• Showing AI multiple files to understand codebase

• Complex projects with lots of back-and-forth

"Keep context under 100k tokens. Prioritize recent messages and code. Start fresh with summary if too long."

Structured Output

Get consistent JSON/formatted responses

❌ Unstructured

"The task is urgent and involves..."

CSV: name,email,status

Array: ["item1", "item2"]

Why It Matters:

• Easy to parse programmatically

• Consistent format every time

• No need to clean up responses

When to Use:

• Saving AI output to database

• Processing responses in code

• Building APIs or automation

"Return as JSON: {title: string, priority: "high"|"medium"|"low"}. Exact format only."

Concise

Request brief answers vs detailed explanations

❌ Without "Concise"

"Well, there are several approaches to consider. First, you could use method A which has pros and cons. Alternatively, method B offers..."

Brief: "Answer in one sentence"

Quick: "Yes/No only"

List: "Bullet points, no explanation"

When to Use:

• Quick fact-checking or lookups

• Getting direct answers without context

• Saving tokens in long conversations

• Faster responses for simple questions

💡 Pro Tip: Add "no preamble" to skip intro text like "Sure, I'd be happy to help..."

"Be concise. Answer in 1-2 sentences max, no extra explanation."

Embeddings

Convert words to numbers that capture meaning

[0.8, 0.2, 0.9, 0.1...]

Use: Search, recommendations, RAG

When to Use:

Semantic search, finding similar docs, clustering content

"Convert text to embeddings for semantic search"

Context Window

How much text AI can read at once

Context Window

70k / 100k tokens used

Long documents, chat histories, analyzing entire codebases

"Keep under 100k tokens for context window"

Fine Tuning

Train AI on your specific data

Base Model

Generic knowledge

+ Your training data ↓

Fine-tuned Model

Specialized for your use case

Examples

Medical docs, legal contracts

Benefit

Better accuracy

Cost: Training time + data prep

When to Use:

Domain-specific tasks, consistent style, niche vocabulary

"Fine-tune on custom dataset for better accuracy"

Hallucination

When AI makes things up

❌ Hallucination Example:

Q: Who won the 2025 World Cup?

AI: Brazil won 3-2 against France!

← Completely made up (event hasn't happened)

Why It Happens:

• AI predicts plausible text, not truth

• Training data has gaps

• No fact-checking built in

✅ How to Prevent:

• Tell AI to say "I don't know"

• Ask for sources/citations

• Verify critical facts

When to Use:

Factual queries, research, legal/medical info - always verify important claims

"Don't hallucinate, cite sources"

Zero-Shot

AI task without examples

Zero-Shot (No Examples):

Prompt: Classify as positive/negative:

"This movie was amazing!"

→ AI: Positive ✓

vs. Few-Shot (With Examples):

Examples:

"Great!" → Positive

"Terrible" → Negative

Then: "This movie was amazing!"

Quick tasks, general classification, when you don't have examples ready

"Classify without examples"

Persona

Role AI should play

Example Personas:

🎓 "Expert professor explaining to beginners"

💼 "Professional consultant, formal tone"

🤝 "Friendly mentor, casual and supportive"

⚡ "Pirate captain, arr matey!"

Persona Changes Output:

Default: "Here's how APIs work..."

Pirate: "Ahoy! APIs be like messages in bottles between ships!"

What to Define:

• Role/expertise

• Tone (formal/casual)

• Communication style

When to Use:

Customer support bots, tutoring, creative writing, brand voice matching

"You are a [role]..."

JSON Mode

Force structured output

❌ Without:

"Costs $49.99, ships 2-3 days"

Hard to parse

✅ With JSON:

{ "price": 49.99, "ship": "2-3d" }

Easy to parse

Use Cases:

Data extraction, APIs, databases, forms

When to Use:

Data extraction, API responses, database inserts, structured forms

"Return as JSON only"

Top-K Sampling

Limit word choices

How It Works:

Next word: "The cat is ___"
AI considers top K most likely words only

K = 10 (Low)

Only 10 choices

→ Predictable

"sitting, sleeping, eating..."

K = 100 (High)

100 choices

→ Creative

"juggling, teleporting..."

Typical Values:

K=10: Very focused

K=40: Balanced (default)

K=100: More random

When to Use:

Control creativity vs consistency - low K for facts, high K for stories

"Use Top-K sampling K=40"

Stop Sequence

Token that ends generation

Example - List Generation:

1. First item
2. Second item
3. Third item
### ← Stop here!

Common Stop Sequences:

• "###" - End of section

• "\n\n" - Double newline

• "---" - Separator

• "END" - Explicit stop

✅ Benefits

Control length, save tokens

Use For

Lists, chat, sections

When to Use:

Multi-turn chat, list generation, precise output control, token limits

"Stop at ###"

Product Management

Frameworks and metrics for building the right product. Validate ideas, measure success, and align teams around what matters to users.

NEW

North Star Metric

One metric that captures your product's value

Pick the one metric that shows users are getting value. All teams should move this number.

Align teams, measure growth, focus on what matters

"Define North Star Metric for core value"

Product-Market Fit

When your product solves a real problem

Survey Question:

"How would you feel if you could no longer use this product?"

>40% "very disappointed" = good fit

Signals: Organic growth, high retention, word-of-mouth

When to Use:

Validate product, decide to scale, measure user satisfaction

"Measure PMF with 40% disappointment test"

MVP

Ship the smallest thing that tests your idea

✓ MVP

Landing page + email signup + manual fulfillment

✗ Not MVP

Full app, payments, mobile, analytics dashboard

Goal

Learn if people want this, not build perfect product

Timeline: Days or weeks, not months

When to Use:

Test new idea, validate assumption, launch quickly

"Build MVP with core features to test fast"

OKRs

Objectives and Key Results for alignment

Objective

Launch in Europe by Q4

Objectives = what you want. Key Results = how you measure it. Review quarterly.

Align teams, set goals, track progress across company

"Set OKRs with 3-5 key results per objective"

RICE Score

Prioritize features with data

(500 × 3 × 0.8) / 2 = 600

Higher score = higher priority. Compare features objectively.

Prioritize roadmap, compare features, justify decisions

"Calculate RICE: Reach × Impact × Confidence / Effort"

Retention Rate

How many users keep coming back

Formula

(Users at end / Users at start) × 100

Good retention: Users return weekly or monthly

When to Use:

Measure product stickiness, track engagement over time

"Track retention rate over time"

TAM/SAM/SOM

Market sizing framework

TAM - Total Addressable

$10B

Everyone who could use product

SAM - Serviceable

$2B

Segment you can reach

SOM - Obtainable

$200M

Realistic capture in 3 years

Example: SaaS for healthcare

When to Use:

Pitch decks, fundraising, market validation

"Calculate TAM/SAM/SOM"

LTV

Lifetime Value

Formula:

LTV = ARPU × Customer Lifetime

Example:

$50/mo × 24 months = $1,200

Golden Ratio

LTV / CAC ≥ 3:1

Healthy unit economics

Use for: Pricing, acquisition, retention

When to Use:

Business health, CAC targets, retention budget

"Calculate LTV"

CAC

Customer Acquisition Cost

Formula:

CAC = (Marketing + Sales) / New Customers

Acquired 100 customers

$150

CAC per customer

Tip: Track by channel

When to Use:

Marketing optimization, channel comparison, LTV:CAC ratio

"Calculate CAC"

A/B Testing

Compare two versions

Test: Button color, headline, CTA

When to Use:

Optimize conversions, validate changes, data decisions

"Design A/B test"

User Persona

Representative user archetype

Sarah, Marketing Manager

35 years old • Tech-savvy • B2B SaaS

Goals:

• Increase lead generation

• Prove marketing ROI

Slack, HubSpot, Analytics daily

When to Use:

Product design, marketing, feature prioritization

"Create user personas"

Value Prop Canvas

Product-market fit framework

Fit = Products solve Pains & create Gains

When to Use:

Product-market fit, validate ideas, positioning

"Value Prop Canvas for PMF"

Diminishing Returns

When your product becomes the problem

Oura Ring: Power user wears for 6 years, builds sleep habits, reaches goals. Ring notifications now feel like nagging. Success = Product obsolescence.

The Trap:

Best users succeed → stop needing you → churn from achievement

When to Use:

Habit-building apps, health trackers, productivity tools where success means independence

"Analyze diminishing returns risks"

Sustainability Risk

When the world can't support your scale

The Math:

McDonald's = 70M customers/day

Eggplant sandwich idea 🍆

❌ Not enough eggplants on planet

Can this work at 10x? 100x? 1M users?

When to Use:

Physical products, artisan services, resource-heavy offerings before scaling

"Evaluate sustainability constraints"

Sniff Test

Quick gut-check before building

🤔

1. Real Problem?

Pain people pay to solve today

🛠️

2. Can I Build?

Skills, time, resources available

💰

3. Will They Pay?

Clear willingness to pay exists

📈

4. Can It Scale?

Path from 10 → 10,000 users

All 4 = ✅ Green light • Any ❌ = Rethink or pivot

When to Use:

First 24 hours of idea, before writing code, when validating pivots

"Run a sniff test on this idea"

Product-Market Risk

Why most products fail

Top Failure Modes:

42% - No market need

29% - Ran out of cash

23% - Wrong team

19% - Got outcompeted

Market Too Small

TAM < $10M = hobby not business

Timing Wrong

Too early or too late to market

The Trap:

Building solution before validating problem exists

De-Risk:

Talk to 50+ users before writing code

When to Use:

Idea validation, pivot decisions, market research, competitor analysis

"Identify product-market risks"

Unit Economics

Does the math actually work?

The Formula:

LTV - CAC = Profit per customer

Should recoup CAC in < 12 months or you'll run out of cash

Golden Rule: LTV should be 3x CAC minimum

When to Use:

Fundraising, pricing decisions, channel evaluation, profitability planning

"Analyze unit economics"

Competitive Moat

Why "better" isn't enough

Network Effects

More users = more value (e.g. Slack)

Switching Costs

Hard to leave (e.g. Salesforce)

Proprietary Data

Unique dataset (e.g. Waze)

Brand/Trust

Years to build (e.g. Stripe)

❌ Weak Moats:

• "Better UX" - easily copied

• "First mover" - advantage fades fast

• "More features" - feature parity in months

Ask: Can Google/Amazon copy this in 6 months?

When to Use:

Strategy planning, investor pitches, competitive analysis, roadmap prioritization

"Identify competitive moats"

Churn Rate

% of customers who cancel

Formula:

Churn = (Lost Customers / Start Customers) × 100

Example:

Started month: 1,000 customers
Lost: 50 customers
Churn Rate: 5%/month

5% monthly = 60% annual churn = big revenue leak

When to Use:

SaaS health tracking, investor reports, retention strategy planning

"Calculate churn rate"

DAU/MAU

Daily vs Monthly Active Users

Formula:

Stickiness = (DAU / MAU) × 100

Example:

DAU: 6,000 daily users

MAU: 30,000 monthly users

Facebook: ~65% • Instagram: ~55%

When to Use:

Measuring product stickiness, engagement tracking, growth metrics

"Calculate DAU/MAU ratio"

Time to Value

Speed to first win

Days/weeks → users abandon

✅ Ideal

Minutes → users convert

How to Shorten:

• Pre-fill demo data

• Remove setup friction

• Show quick wins first

When to Use:

Onboarding optimization, activation rate improvement, trial conversion

"Analyze Time to Value"

Feature Flag

Toggle features on/off

• Deploy without release

Tools: LaunchDarkly, Flagsmith, Unleash, Split.io

When to Use:

New feature rollouts, A/B tests, beta programs, gradual migrations

"Implement feature flags"

Jobs to Be Done

What users "hire" you for

The Question:

"When I _____, I want to _____, so I can _____."

Example (Milkshake):

When I drive to work,
I want to make commute interesting,
So I can stay alert and satisfied

Functional Job

Fill hunger, pass time

Emotional Job

Feel productive, ease boredom

Insight: Compete with bananas, NPR, boredom - not other shakes!

When to Use:

Product development, positioning, feature prioritization, user research

"Use Jobs to Be Done framework"

ICE Score

Impact × Confidence × Ease

(8 + 7 + 6) / 3 = 7.0

Build Feature A first!

When to Use:

Roadmap planning, sprint prioritization, resource allocation decisions

"Prioritize using ICE Score"

Marketing

Digital marketing fundamentals for growth. From cold email to SEO, learn tactics to attract, convert, and retain customers.

NEW

Cold Email

Outbound email outreach strategy

Email 1: Intro (Day 0)

Subject: Quick question about [pain point]

Hook: Noticed you're [specific observation]

Value: We help companies like [similar] do [outcome]

Email 2 (Day 3)

Case study + social proof

Email 3 (Day 7)

Breakup + final CTA

Golden Rules:

• Personalize first line (research)

• Keep under 100 words

• One clear CTA

When to Use:

B2B sales, partnership outreach, investor pitches, customer development

"Write cold email sequence"

ROAS

Return on Ad Spend metric

Formula:

ROAS = Revenue / Ad Spend

Paid ads evaluation, channel comparison, marketing budget allocation

"Calculate ROAS for campaign"

CTA

Call to Action design

Primary CTA

Start Free Trial →

High contrast, action-oriented

Secondary CTA

Watch Demo

Lower commitment option

CTA Formula:

✅ Verb + Value + Urgency

"Get your free audit today"

"Start saving 10 hours/week"

❌ Weak

Submit, Click Here, Learn More

✅ Strong

Get Started, Try Free, Join Now

When to Use:

Landing pages, emails, ads, product onboarding, checkout flows

"Create compelling CTAs"

SEO

Search Engine Optimization

On-Page SEO:

• Title (60 chars, keyword first)

• Meta description (160 chars)

• H1 → H2 structure

• Alt text on images

Keywords

Tools: Google, Ahrefs

Backlinks

Quality over quantity

Content + Technical + Links = Rank

When to Use:

Blog posts, landing pages, product pages, documentation, all web content

"Optimize SEO for this page"

Email Drip Campaign

Automated email sequence

Day 0

Welcome + set expectations

Day 2

Feature highlight #1

Day 5

Case study + social proof

Triggers (Behavior-based):

• Signed up → Welcome series

• Used feature X → Advanced tips

• Inactive 7 days → Re-engagement

Goal: Move from awareness → consideration → conversion

When to Use:

Onboarding, lead nurture, trial conversion, re-engagement campaigns

"Design email drip campaign"

Lead Magnet

Free resource to capture emails

Calculator, spreadsheet

What Makes It Work:

✅ Solves immediate pain point

✅ Quick to consume (not 100-page ebook)

✅ High perceived value

✅ Related to your product

The Exchange:

Email Address ⟷ Valuable Resource

When to Use:

Building email list, content marketing, paid ads landing pages, SEO traffic

"Create lead magnet strategy"

E-commerce Patterns

Core UI patterns for online stores. Shopping carts, checkout flows, product filters, and conversion-focused features you've seen on Amazon, Shopify, and modern e-commerce sites.

NEW ✨

Shopping Cart

Every store. Desktop: drawer. Mobile: sheet. Show badge count.

"Build a shopping cart drawer with product thumbnails, quantity +/- controls, price breakdown, and a checkout button. Add a badge count in the nav that updates when items are added."

Product Page

Every product needs this. Images + CTA above fold. Mobile-first.

What's Inside

• Product images

• Size/variant selector

• Price display

• Add to cart CTA

"Create a product page with image gallery, size/color variant selector, price, and add to cart button. Include product description, reviews section, and related products below the fold."

Checkout Flow

Essential for all e-commerce. 3-4 steps max, guest checkout option.

What's Inside

• Progress stepper

• Form validation

• Address autocomplete

• Order summary

"Build a 3-step checkout flow with progress stepper, form validation, and address autocomplete. Include guest checkout option and order summary sidebar showing items and total."

Product Filters

Filters

🔍

Wishlist

Fashion, home goods, gifts. Requires account to persist across sessions.

• Share wishlist option

"Add wishlist feature with heart icon toggle, saved items page, and quick move to cart button. Requires login to persist across sessions and include share wishlist link."

One-Click Buy

Repeat purchases (books, consumables). Use modal to confirm order.

What's Inside

• Saved payment info

• Saved shipping address

• Instant checkout CTA

• Order confirmation

"Add one-click buy button that uses saved payment and shipping info to skip checkout entirely. Show confirmation modal with order details and last 4 digits of card used."

Roles

Core team roles for building digital products. Understand what each role does, their key skills, and how they contribute to product success.

NEW ✨

Product Manager

Strategic role that defines what to build and why—prioritizes features, gathers feedback, aligns team with business goals

Core Responsibilities:

🎯

Define roadmap: Prioritize features based on user needs & business goals

📊

Gather insights: User interviews, analytics, market research

🤝

Align teams: Bridge eng, design, marketing, sales

Key Skills:

StrategyUser ResearchCommunicationData AnalysisPrioritization

When to Hire:

• Building complex product with multiple features

• Need someone to define "what" to build

• Team needs direction & prioritization

"Explain the product manager role and responsibilities"

Full-Stack Developer

Engineers who build both frontend interfaces and backend systems—handle databases, APIs, and user interfaces

Technical Skills:

💻

Frontend: React, Vue, HTML/CSS, responsive design

⚙️

Backend: Node.js, Python, APIs, authentication

🗄️

Database: SQL, NoSQL, data modeling, queries

Common Tech Stack:

ReactNode.jsPostgreSQLTypeScriptGit

When to Hire:

• Building MVP—need versatility over specialization

• Early-stage startup with limited budget

• Want one person to ship complete features

"Explain the full-stack developer role and key technologies"

UX/UI Designer

Designers who create user experiences and visual interfaces—research user needs, craft look and feel

UX vs UI:

🧠

UX (Experience): User research, flows, wireframes, usability testing

🎨

UI (Interface): Visual design, colors, typography, components

🤝

Together: Create beautiful products that actually work for users

Common Tools:

FigmaAdobe XDSketchPrototypingUser Testing

When to Hire:

• Users find product confusing or ugly

• Need professional brand identity

• Want to improve conversion & engagement

"Explain the UX/UI designer role and difference between UX and UI"

QA Engineer

Quality assurance specialists who test software for bugs and ensure reliability—write test plans, automate testing

Core Responsibilities:

🐛

Find bugs: Manual testing, edge cases, user flows

🤖

Automate tests: Write scripts for regression testing

✅

Validate features: Ensure requirements are met

Key Skills:

TestingAutomationBug TrackingAttention to DetailSelenium/Cypress

When to Hire:

• Bugs reaching production regularly

• Manual testing slowing down releases

• Need confidence in code quality

"Explain the QA engineer role and testing responsibilities"

DevOps Engineer

Infrastructure specialists who manage deployment, hosting, and system reliability—automate CI/CD, monitor uptime

Core Responsibilities:

🚀

Deploy code: CI/CD pipelines, automated releases

📊

Monitor systems: Uptime, performance, error tracking

☁️

Manage infrastructure: AWS, Docker, Kubernetes

Common Tools:

DockerKubernetesAWS/GCPTerraformGitHub Actions

When to Hire:

• Manual deployments taking too long

• Infrastructure getting complex (scaling issues)

• Need better monitoring and uptime

"Explain the DevOps engineer role and infrastructure management"

Data Analyst

Analytics experts who measure product performance and user behavior—create dashboards, run A/B tests, translate metrics into insights

Core Responsibilities:

📊

Track metrics: KPIs, user behavior, conversion rates

🔬

Run experiments: A/B tests, feature impact analysis

💡

Generate insights: Actionable recommendations from data

Common Tools:

SQLMixpanelAmplitudeLookerPython

When to Hire:

• Making decisions based on gut, not data

• Too much data, not enough insights

• Need to optimize conversion or retention

"Explain the data analyst role and analytics responsibilities"

Complex UI Patterns

Battle-tested implementation prompts for the hardest UX problems. These are the "$10k features" every app needs. Click any card to see the full planning prompt.

11 patternsNEW ✨Click to expand

👆 Select a pattern above to view the prompt

Each pattern includes conversational AI prompts designed for production-grade implementation

More patterns in development: Chat Interface, Activity Feed, Multi-tenant System, Admin Dashboard

Knowledge Delivery

Get One AI Power Word Daily

From embeddings to fine-tuning—master AI terminology one word at a time. Delivered to your inbox like pages from a living dictionary.

Learn More + Subscribe →

Curated by Claude Code

Deployed by John Hashem, product engineer

Use these patterns with Claude Code Starter to build AI-powered projects

Profile•@hashbuilds•claude.com/code