Skeuomorphism
Realism. Texture. Leather, Metal, Glass. Physical depth.
01 — The Cards
Leather Wallet
Stitched edges. Texture. Warmth. Feels like a premium object.
VIP
Gold Member
Metallic sheen. Reflections. High value.
System Status
CPU Load98%
Memory42%
Activator Code:
css
1
2
3
.style-skeuo-card {
@apply bg-[#3a3a3a] rounded-xl shadow-[inset_0_1px_0_rgba(255,255,255,0.1),0_10px_20px_rgba(0,0,0,0.5)] border-t border-white/10;
}
02 — The Buttons
Activator Code:
css
1
2
3
.style-skeuo-btn {
@apply bg-gradient-to-b from-[#f0f0f0] to-[#b0b0b0] text-gray-800 shadow-[0_4px_6px_rgba(0,0,0,0.5),inset_0_1px_0_rgba(255,255,255,0.8)] border-b-2 border-[#777];
}
03 — The Input
Not Secure
Port 8080Activator Code:
css
1
2
3
.style-skeuo-input {
@apply bg-[#111] font-mono text-[#0f0] shadow-[inset_0_5px_10px_rgba(0,0,0,0.5)];
}
04 — The Table
Transaction Log
| ID | User | Role | Status |
|---|---|---|---|
| #001 | Neo | The One | Active |
| #002 | Trinity | Admin | Active |
| #003 | Smith | Agent | ERROR |
End of Receipt
Activator Code:
css
1
2
3
.style-skeuo-receipt {
@apply bg-white font-mono text-gray-700 border-4 border-[#ddd];
}
05 — The Modal
SYSTEM FAILURE
Critical error detected in Sector 7G. Initiate protocol Omega?
Activator Code:
css
1
2
3
.style-skeuo-panel {
@apply bg-gradient-to-br from-[#dcdcdc] to-[#a0a0a0] shadow-[0_20px_50px_rgba(0,0,0,0.8)] border border-white/50;
}