Automatic Web Theme Generator

Enter one color, get a complete design system.

Primary Color

Core Colors

Buttons

Cards

Card (no border)

Default — shadow only

Default cards have no border, just shadow for elevation.

Card (bordered)

.card-bordered

Add .card-bordered for a visible border.

Simple Card

Cards adapt between light and dark themes.

Forms

Text input

Password

Number

Date

URL

Tel

Textarea

Select

File upload

Click to upload or drag and drop

PNG, JPG, PDF up to 10MB

Range

Checkbox Unchecked Disabled Radio 1 Radio 2 Radio 3

Alerts

Primary

This is a primary alert with an icon and close button.

Info

This is an informational message.

Success

Operation completed successfully.

Warning

Proceed with caution — this action cannot be undone.

Danger

Something went wrong. Please try again.

Badges & Tags

Primary Secondary Accent Success Warning Danger Neutral

tag-primary tag-accent

Tabs

Tab content goes here.

Table

Name	Status	Role
Alice	Active	Admin
Bob	Pending	Editor
Carol	Banned	Viewer

Modal

Dropdown

List

First item
Description text
Second item
Description text
Third item
Description text

Pagination

Toast

Accordion

Content for section one.

Content for section two.

Avatar

Progress & Loading

70% 40%

Native Details / Accordion

Account settings

Manage your account preferences, password, and two-factor authentication.

Notification preferences

Choose how and when you receive email, push, and SMS notifications.

Privacy & security

Control who can see your profile, posts, and activity status.

Native Dialog

Form Features

Required field

⚠ This field is required

Validated field

Invalid field

⚠ Please enter a valid email address

Read-only

Fieldset with legend

Option A Option B Plan 1 Plan 2

Volume 50%

Inline Elements

Press ⌘ + K to open the command palette.

As Albert Einstein once said: Imagination is more important than knowledge. — Unknown source

Image placeholder

Figure caption describing the image above.

Unordered list with accent marker
Second item

Ordered list with primary marker
Second item

Layout System

Responsive grid columns, flex utilities, spacing, and sizing classes.

col-12

col-6

col-4

col-md-2

col-md-10

col-sm-10

col-sm-2

col-md-3

Flex utilities

flex

items-center

gap-4

flex-wrap

chip

justify-between badge

.center (flex + items-center + justify-center)

Grid utilities

grid-cols-4

grid-md-cols-3

Spacing & sizing

Typography

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

Body text paragraph with bold, italic, and inline code. The quick brown fox jumps over the lazy dog. Fluid typography scales smoothly across breakpoints.

Small text for captions and footnotes.

A blockquote with italic styling, using the heading font for visual hierarchy.

const theme = generate(color);
// Mono font for code

This has highlighted text and a link in context.