Explore the complete component library and design principles of the Minimal Design System.
The Minimal Design System follows clear design principles for modern, professional interfaces.
Large gaps between sections create clarity and focus
Typography-driven visual hierarchy through size and weight
Only black, white, and subtle grays for maximum clarity
Optimal line length of 65-75 characters for text content
Perfect light/dark mode symmetry with automatic detection
Built with Tailwind CSS for fast, consistent development
This page itself is built with the Minimal Design System. Here are all included components:
Button Variants
Button Sizes
With Icons
Rounded Buttons (Pill Style)
Rounded Button Sizes
Rounded Icon Buttons
Login Form
Don't have an account? Sign up
Input Fields
Preferred Contact Method
Basic Cards
Basic card with title and description. Perfect for features or services.
Consistent styling across all card components with subtle hover states.
Minimal design with clear hierarchy and generous padding.
Stats Cards
Image Cards
Description of the project with key highlights and features.
Another project card with consistent layout and spacing.
Third card showcasing the flexible card design system.
Feature Cards
Lightning quick load times and smooth interactions
Enterprise-grade security built into every layer
Perfect experience on any device or screen size
| Name | Status | Role | |
|---|---|---|---|
| John Doe | Active | Admin | john@example.com |
| Jane Smith | Active | Editor | jane@example.com |
| Bob Johnson | Pending | Viewer | bob@example.com |
| Alice Williams | Inactive | Viewer | alice@example.com |
Checklist
Features with Icon Boxes
Optimized for speed with minimal CSS
Easy to adapt to your brand
Works perfectly on all devices
Feature List
Ordered List
Status Badges
Tags
Alert Messages
Progress Bars
Bar Chart
Metrics Grid
Headings
Body Text
Large body text (18px) - Perfect for introductory paragraphs or emphasis. The quick brown fox jumps over the lazy dog.
Default body text (16px) - The standard for most content. Readable and comfortable for extended reading. The quick brown fox jumps over the lazy dog.
Small body text (14px) - Great for secondary information, captions, or supplementary details. The quick brown fox jumps over the lazy dog.
Muted text - Used for less important information with reduced visual weight while maintaining readability.
Font Weights
Normal (400) - Regular body text
Medium (500) - Slightly emphasized
Semibold (600) - Headings and emphasis
Bold (700) - Strong emphasis
Primary & Secondary Colors
Light Mode
Primary
black (#000000)
Secondary
gray-50 (#f9fafb)
Dark Mode
Primary
white (#ffffff)
Secondary
gray-950 (#030712)
Base Colors
Light Mode
Background
white (#ffffff)
Foreground
black (#000000)
Muted
gray-600 (#525252)
Border
gray-200 (#e5e7eb)
Dark Mode
Background
black (#000000)
Foreground
white (#ffffff)
Muted
gray-400 (#a3a3a3)
Border
gray-800 (#1f2937)
Semantic Colors
Success
Background
green-50 (#f0fdf4)
green-950 (#052e16)
Foreground
green-600 (#16a34a)
green-400 (#4ade80)
Badge
green-100 (#dcfce7)
green-900 (#14532d)
Info
Background
blue-50 (#eff6ff)
blue-950 (#172554)
Foreground
blue-600 (#2563eb)
blue-400 (#60a5fa)
Badge
blue-100 (#dbeafe)
blue-900 (#1e3a8a)
Warning
Background
yellow-50 (#fefce8)
yellow-950 (#422006)
Foreground
yellow-600 (#ca8a04)
yellow-400 (#facc15)
Badge
yellow-100 (#fef9c3)
yellow-900 (#713f12)
Error
Background
red-50 (#fef2f2)
red-950 (#450a0a)
Foreground
red-600 (#dc2626)
red-400 (#f87171)
Badge
red-100 (#fee2e2)
red-900 (#7f1d1d)
Neutral
Background
gray-50 (#f9fafb)
gray-950 (#030712)
Foreground
gray-600 (#4b5563)
gray-400 (#9ca3af)
Badge
gray-100 (#f3f4f6)
gray-800 (#1f2937)