Design System

A comprehensive design system built for modern applications. Clean, minimal, and purposeful.

Typography

Carefully crafted typography hierarchy for clarity and visual impact.

Heading 1

text-5xl font-bold

Heading 2

text-4xl font-bold

Heading 3

text-3xl font-semibold

Heading 4

text-2xl font-semibold

Body Large - The quick brown fox jumps over the lazy dog

text-lg

Body Regular - The quick brown fox jumps over the lazy dog

text-base

Body Small - The quick brown fox jumps over the lazy dog

text-sm

Caption - The quick brown fox jumps over the lazy dog

text-xs

Buttons

Button components designed for clarity and user interaction.

Primary

Secondary

Ghost

Button States

Colors

A thoughtful color palette that works in both light and dark modes.

Primary - Cyan

Cyan 50

#ecfeff

Cyan 100

#cffafe

Cyan 200

#a5f3fc

Cyan 300

#67e8f9

Cyan 400

#22d3ee

Cyan 500

#06b6d4

Cyan 600

#0891b2

Cyan 700

#0e7490

Neutral - Gray

Gray 50

#f9fafb

Gray 100

#f3f4f6

Gray 200

#e5e7eb

Gray 300

#d1d5db

Gray 400

#9ca3af

Gray 500

#6b7280

Gray 600

#4b5563

Gray 700

#374151

Components

Essential UI components built with consistency and accessibility in mind.

Cards

Modern minimal workspace with laptop, coffee cup, and notebook on clean white desk

Card Title

This is a sample card component with image, title, and description text.

Simple Card

A clean card component without image for text-focused content.

Form Elements

Input Field

Select Dropdown

Textarea

I agree to the terms and conditions

Spacing & Layout

Consistent spacing system for harmonious layouts and visual rhythm.

Spacing Scale

4px Extra Small (1)

8px Small (2)

16px Medium (4)

24px Large (6)

32px Extra Large (8)

48px 2X Large (12)

Icons & Illustrations

Visual elements that enhance usability and brand expression.

Mail

User

Settings

Heart

Chart

Sun

Start building stunning tailwind UIs!