ui-templates

name	ui-templates
title	UI Templates
description	Collection of distinctive UI design templates. Each template provides a complete design system with colors, typography, components, and layouts. Use these when building production-ready interfaces.
tags	ui, template, design-system, theme

UI Templates

A collection of distinctive UI design templates with complete design systems.

Inspiration

This collection is inspired by designprompts.dev - AI-Powered Design Style Explorer.

Design Templates

Template	Description	Reference
Academia	Scholarly gravitas meets timeless elegance. Channels the atmosphere of centuries-old university libraries and Renaissance manuscripts.	references/academia.md
Art Deco	The visual embodiment of the Roaring Twenties—opulence, mathematical precision, and architectural grandeur.	references/art-deco.md
Bauhaus	Form follows function with pure geometric beauty and primary color theory. Constructivist modernism.	references/bauhaus.md
Bold Typography	Typography isn't decoration—it's the entire visual language. Poster design translated to web.	references/bold-typography.md
Botanical	Digital ode to nature—breathes, flows, and grounds itself in organic beauty. Soft, sophisticated, and deeply intentional.	references/botanical.md
Claymorphism	High-fidelity simulation of premium digital clay. Tactile, voluminous, and physically grounded.	references/claymorphism.md
Cyberpunk	"High-Tech, Low-Life." Digital dystopia colliding with high-tech noir reality. Neon, glitch, and industrial brutality.	references/cyberpunk.md
Enterprise	Modern enterprise SaaS aesthetic—professional yet approachable, sophisticated yet friendly.	references/enterprise.md
Flat Design	Removes all artifice. Rejects three-dimensionality—hierarchy through size, color, and typography only.	references/flat-design.md
Industrial	Industrial Realism—tactile precision, mechanical reliability, and the soul of physical objects.	references/industrial.md
Kinetic	Typography is the entire visual structure. Text becomes image, headline becomes hero, motion becomes rhythm.	references/kinetic.md
Luxury	Elegance through restraint, precision, and depth. High-end fashion magazine aesthetic.	references/luxury.md
Material Design	Material You (MD3)—organic, expressive system with soft curves and tonal surfaces.	references/material-design.md
Maximalism	MORE IS MORE. Sensory overload, visual abundance, and unapologetic excess. Y2K-meets-Gen-Z aesthetic.	references/maximalism.md
Minimal Dark	Atmospheric depth through layers of darkness. Warm amber accents glow like embers in the night.	references/minimal-dark.md
Modern Dark	Precision, depth, and fluidity. Cinematic meets technical minimalism. Premium developer tools aesthetic.	references/modern-dark.md
Monochrome	Reduction to essence—black, white, and typography. Design as discipline where restraint becomes expression.	references/monochrome.md
Neo Brutalism	Digital punk rebellion. Vibrant, performative, intentionally distinct. Thick hard-edged lines and solid offset shadows.	references/neo-brutalism.md
Neumorphism	Physical depth through dual shadows—tactile, calm, modern, and physically grounded.	references/neumorphism.md
Newsprint	Editorial newspaper style reimagined for web. High-contrast typography, grid-based layouts, sharp geometric precision.	references/newsprint.md
Organic	Embraces wabi-sabi—warmth, softness, and natural connection. No straight lines in nature.	references/organic.md
Playful Geometric	Optimism, clarity, and tactile fun. Stable grid, wild decoration. Memphis Group inspired.	references/playful-geometric.md
Professional	Typographic elegance through classical restraint. Editorial, timeless, warm, refined.	references/professional.md
Retro	Raw, unfiltered aesthetic of the early web. 90s nostalgia—beveled buttons, system fonts, playful chaos.	references/retro.md
SaaS	Modern SaaS dashboard style. Clarity through structure, character through bold detail.	references/saas.md
Sketch	Hand-drawn style celebrates authentic imperfection. Organic, playful irregularity like sketches on paper.	references/sketch.md
Swiss Minimalist	International Typographic Style—objective communication, mathematical precision, and logical structure.	references/swiss-minimalist.md
Terminal	CLI aesthetic homage. Brutally functional, high-contrast, authentically retro. Monospace supremacy.	references/terminal.md
Vaporwave	Digital nostalgia meets neon future. 80s retro-futurism, synthetic reality drenched in retro-futuristic excess.	references/vaporwave.md
Web3	Bitcoin DeFi aesthetic—sophisticated fusion of precision engineering, cryptographic trust, and digital gold.	references/web3.md

Usage

1. Choose a design template that matches your project needs
2. Read the design system documentation in the reference file
3. Implement using the provided color tokens, typography, and components
4. Follow the layout and animation guidelines for consistency

Template Structure

Each template includes:

• Design Philosophy: Core principles and vibe
• Design Tokens: Colors, typography, spacing, borders, shadows
• Components: Buttons, cards, inputs, icons
• Layout: Grid systems, responsive breakpoints
• Animation: Transitions and micro-interactions
• Accessibility: Focus states, contrast requirements