Dark Interface Design

Dark Mode

Elegant dark interface with comfortable contrast, subtle borders, and focused highlights. Built for professional tools and extended sessions.

Color Palette

Background

#0f172a

Surface

#1e293b

Border

#334155

Primary

#3b82f6

Success

#22c55e

Buttons

Variants

Sizes

Cards

Dashboard

Real-time analytics with comfortable dark interface for monitoring.

Performance

Optimized rendering for smooth interactions and fast load times.

Eye Comfort

Reduced brightness with careful contrast ratios for extended use.

Form Elements

Password

Message

Tabs

Overview content - Monitor your system status and recent activity in real-time.

Badges

Status Badges

PrimarySuccessWarningErrorDefault

Solid Badges

NewActiveProArchived

Progress

Storage Used75%

Upload Progress45%

CPU Usage90%

Alerts

Information

A new software update is available for download.

Success

Your changes have been saved successfully.

Warning

Your session will expire in 5 minutes.

Error

Failed to connect to the server. Please try again.

Controls

Toggles

Dark Mode

Notifications

Checkboxes

Email alertsPush notificationsWeekly digest

Radio Group

DailyWeeklyMonthly

Dropdown

Table

Name	Status	Role
Alex Johnson	Active	Admin
Sarah Chen	Active	Editor
Mike Brown	Inactive	Viewer

Statistics

Active Users

12.4K

+12%

Storage

2.4TB

+8%

Uptime

99.9%

Avg Response

45ms

-5%

Avatars

Sizes

With Status

Stacked Group

Core Rules

Must Use

- Dark backgrounds: bg-slate-900
- Surface cards: bg-slate-800
- Subtle borders: border-slate-700
- Text: slate-100 primary, slate-400 secondary
- Accent: blue-500, green-500
- Hover: bg-slate-700, bg-white/5
- Rounded corners: rounded-lg, rounded-xl

Must Avoid

- Pure white text (too harsh)
- High contrast borders
- Pure black background (#000)
- Dark text on dark backgrounds
- Too many highlight colors
- Light-colored shadows

Dark Interface Design

Dark Mode

Elegant dark interface with comfortable contrast, subtle borders, and focused highlights. Built for professional tools and extended sessions.

Color Palette

Background

#0f172a

Surface

#1e293b

Border

#334155

Primary

#3b82f6

Success

#22c55e

Buttons

Variants

Sizes

Cards

Dashboard

Real-time analytics with comfortable dark interface for monitoring.

Performance

Optimized rendering for smooth interactions and fast load times.

Eye Comfort

Reduced brightness with careful contrast ratios for extended use.

Form Elements

Password

Message

Tabs

Overview content - Monitor your system status and recent activity in real-time.

Badges

Status Badges

PrimarySuccessWarningErrorDefault

Solid Badges

NewActiveProArchived

Progress

Storage Used75%

Upload Progress45%

CPU Usage90%

Alerts

Information

A new software update is available for download.

Success

Your changes have been saved successfully.

Warning

Your session will expire in 5 minutes.

Error

Failed to connect to the server. Please try again.

Controls

Toggles

Dark Mode

Notifications

Checkboxes

Email alertsPush notificationsWeekly digest

Radio Group

DailyWeeklyMonthly

Dropdown

Table

Name	Status	Role
Alex Johnson	Active	Admin
Sarah Chen	Active	Editor
Mike Brown	Inactive	Viewer

Statistics

Active Users

12.4K

+12%

Storage

2.4TB

+8%

Uptime

99.9%

Avg Response

45ms

-5%

Avatars

Sizes

With Status

Stacked Group

Core Rules

Must Use

- Dark backgrounds: bg-slate-900
- Surface cards: bg-slate-800
- Subtle borders: border-slate-700
- Text: slate-100 primary, slate-400 secondary
- Accent: blue-500, green-500
- Hover: bg-slate-700, bg-white/5
- Rounded corners: rounded-lg, rounded-xl

Must Avoid

- Pure white text (too harsh)
- High contrast borders
- Pure black background (#000)
- Dark text on dark backgrounds
- Too many highlight colors
- Light-colored shadows