Flat Design 2.0
Clean. Colorful. Subtle depth. Highly functional.
01 — The Cards
Utility Card
Simple container with subtle drop shadow. Clean background.
New
Highlight
Uses color accents and elevation to indicate importance.
System Status
CPU Load98%
Memory42%
View Full Report
Activator Code:
css
1
2
3
.style-flat-card {
@apply bg-white rounded-lg shadow-sm border border-gray-100 transition-shadow hover:shadow-md;
}
02 — The Buttons
Activator Code:
css
1
2
3
.style-flat-btn {
@apply bg-brand-primary text-white rounded font-bold shadow-md shadow-blue-200 hover:-translate-y-0.5;
}
03 — The Input
Secure ConnectionPort 8080
Activator Code:
css
1
2
3
.style-flat-input {
@apply border-2 border-gray-200 rounded focus:border-brand-primary focus:ring-4 focus:ring-blue-50;
}
04 — The Table
| ID | User | Role | Status |
|---|---|---|---|
| #001 | Neo | The One | Active |
| #002 | Trinity | Admin | Active |
| #003 | Smith | Agent | Rogue |
Activator Code:
css
1
2
3
.style-flat-table {
@apply w-full bg-white rounded-lg shadow-sm border border-gray-200;
}
05 — The Modal
System Failure
Critical error detected in Sector 7G. Initiate protocol Omega?
Activator Code:
css
1
2
3
.style-flat-modal {
@apply bg-white p-8 rounded-lg shadow-xl relative;
}