Styles · 1,217 design systems

Give your AI design taste.

The design system behind every AnimatedWebs template: palette, typography and mood, with a ready DESIGN.md, Tailwind v4 theme, CSS variables and design tokens to paste into Claude, Cursor or Lovable.

FreeGet the style of any website →

From the web 43 sites

See all →

Measured from the live pages of the sites designers study most: colours, type scale, radius and buttons, as a ready DESIGN.md.

Apple iPhone

SF Pro Display · light

Stripe

sohne-var · light

Linear

Inter Variable · dark

Apple

SF Pro Display · light

Vercel

GeistSans · light

Notion

NotionInter · light

Figma

figmaSans · light

Framer

GT Walsheim Medium · dark

From AnimatedWebs templates

Outfit

Wayfinder Academy

Get started

Reveal-on-Scroll Wrapper

clean, friendly, consistent, lightweight

Education · light

Libre Caslon Display

Marginalia

Get started

Animated Film Grain Overlay

tactile, analog, literary, understated

Editorial · light

Monoton

Neon Relic

Get started

CRT Scanline Post Overlay

retro, electric, warm glow, gritty

Gaming & Entertainment · dark

Manrope

Kitewire

Get started

Morphing Menu Icons Set

crisp, friendly, efficient, polished

AI / SaaS · light

Quicksand

Driftwell

Get started

Animated Weather Icon Set

breezy, friendly, optimistic, gentle

Travel · light

Nunito

Bloomcycle

Get started

Squash-and-Stretch Toggle

soft, joyful, gentle, squishy

Health & Wellness · light

Plus Jakarta Sans

Tallwise

Get started

Sliding Segmented Control

clear, calm, smart, tactile

Fintech · light

Gelasio

Seedline

Get started

Confetti Burst Checkbox

hopeful, warm, rewarding, grassroots

Nonprofit · light

SF-style fallback: Inter

Voltaic

Get started

Dynamic Island Notification

sleek, alive, premium, precise

Automotive · dark

Recoleta fallback: Fraunces

Parsnip & Pea

Get started

Drag-to-Dismiss Bottom Sheet

fresh, cheerful, homey, snappy

Food & Hospitality · light

Inter

Promptdeck

Get started

Spring Command Palette

fast, focused, premium, keyboard-first

AI / SaaS · dark

Barlow

Pulsepath

Get started

Activity Ring Gauge Counter

energetic, motivating, precise, vivid

Health & Wellness · dark

Bebas Neue

Nightbloom Festival

Get started

Flip Clock Countdown

anticipatory, lush, nocturnal, celebratory

Music & Events · dark

Spectral

Footnote

Get started

Table-of-Contents Minimap

scholarly, orderly, calm, precise

Editorial · light

Shrikhand

Sodalune

Get started

Liquid Bottle Scroll Progress

bubbly, fun, sunny, refreshing

Food & Hospitality · light

Cormorant Garamond

Altitude Lodges

Get started

Frosted Glass Parallax Card

crisp, serene, alpine, luxurious

Travel · light

Satoshi fallback: General Sans

Oarlock Studio

Get started

Magnifying Dock Navigation

playful-precise, polished, warm, tactile

Portfolio · dark

Inter

Stackform

Get started

Faded Logo Wall Marquee

credible, calm, clean, modern

AI / SaaS · light

Neue Haas fallback: Inter Tight

Brightwire

Get started

Stagger Roll Nav Links

sharp, witty, kinetic, minimal

Agency · dark

Caveat Brush

Commonground

Get started

Hand-Drawn Highlighter Marks

human, grassroots, warm, urgent

Nonprofit · light

Red Hat Display

Quarrystone Residences

Get started

Tile Flip Image Reveal

solid, crafted, rhythmic, architectural

Real Estate & Architecture · light

Shippori Mincho

Onsen Veil

Get started

Water Ripple Image Hover

tranquil, sensory, quiet, luxurious

Health & Wellness · light

Chakra Petch

Voltara Motors

Get started

Click-Origin Circle Transition

electric, fast, confident, clean

Automotive · dark

Inter Variable

Lumina Type

Get started

Morphing Path Text

fluid, precise, futuristic, editorial

Editorial · dark

Fraunces

PageFlow Labs

Get started

Fold Paper Page Transition

crisp, tactile, editorial, smooth

Editorial · light

Recursive VF

Kinetype Studio

Get started

Glyph Wave Propagation

dynamic, playful, precise, futuristic

Editorial · dark

Outfit

Navix Labs

Get started

Compass Target Cursor

clean, utilitarian, subtle, trustworthy

Portfolio · light

Fraunces

Amorphic Agency

Get started

Morphing Blob Transition

organic, fluid, premium, mysterious

Agency · dark

Cormorant Garamond

Vitreo Goods

Get started

Refraction Glass Hover

crystalline, elegant, tactile, serene

Ecommerce · light

Space Grotesk

Nexum Labs

Get started

Chromatic Glitch Text

technical, vibrant, dynamic, dark

AI / SaaS · dark

Outfit

Lumina Studio

Get started

Orbiting Halo Cursor

playful, precise, airy, light

Portfolio · light

Playfair Display

Aurelia Atelier

Get started

Pulse Wave Preloader

elegant, rhythmic, premium, dark

Fashion & Luxury · dark

Syne

Flux Narrative

Get started

Liquid Mesh Page Transition

fluid, immersive, cinematic, dark

Storytelling · dark

Fraunces Variable

Solaris Type

Get started

Scroll Path Text

elegant, fluid, expressive, light

Storytelling · light

Outfit

Meridian Motion

Get started

Elastic Cursor Band

dynamic, tactile, futuristic, dark

Portfolio · dark

Rajdhani

Aether UI

Get started

Pixel Sort Transition

glitchy, high-tech, mysterious, dark

3D / WebGL · dark

Space Grotesk variable

Briar Institute

Get started

Magnetic Letter Attractor

playful, precise, inviting, technical

Education · light

Syne

Nebula UI

Get started

Orbital Cursor Ring

futuristic, precise, energetic, dark

AI / SaaS · dark

Playfair Display

Silverplate Photography

Get started

Shutter Page Transition

elegant, mechanical, crisp, immersive

Portfolio · light

Orbitron

ThermoScape

Get started

Thermal Image Hover

scientific, immersive, high-contrast, mysterious

3D / WebGL · dark

Space Grotesk

Lumina Type Co.

Get started

Neon Tube Text

nocturnal, electric, tactile, cinematic

Portfolio · dark

Roboto Flex variable

TypoKinetic

Get started

Optical Size Parallax Type

dimensional, precise, editorial, calm

Portfolio · light

Space Grotesk

Trailblaze UI

Get started

Ink Trail Cursor

expressive, tactile, playful, premium

Portfolio · dark

Syne

Await Interactive

Get started

Fluid Fill Preloader

viscous, futuristic, precise, satisfying

AI / SaaS · dark

PP Neue Montreal

Morphway

Get started

Cloth Drape Page Transition

tactile, theatrical, smooth, premium

Agency · dark

Space Grotesk

Luminix

Get started

Morphing Icon Button

crisp, responsive, playful, precise

Agency · dark

Plus Jakarta Sans

Kineo

Get started

Momentum Drag Carousel

fluid, tactile, confident, modern

Ecommerce · light

Cormorant Garamond

Quillforge

Get started

Ink Spread Text Reveal

organic, warm, tactile, deliberate

Editorial · light