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