Soft UI
Gentle. Approachable. Pastel. No sharp edges.
01 — The Cards
Cloud Sync
Everything is stored safely in the soft clouds.
Favorites
Your most loved items, kept close.
Activator Code:
css
1
2
3
.style-soft-card {
@apply bg-[var(--soft-bg)] rounded-[30px] shadow-[-10px_-10px_30px_var(--soft-shadow-light),10px_10px_30px_var(--soft-shadow-dark)];
}
02 — The Controls
Activator Code:
css
1
2
3
.style-soft-btn {
@apply bg-[var(--soft-bg)] rounded-xl shadow-[-5px_-5px_10px_var(--soft-shadow-light),5px_5px_10px_var(--soft-shadow-dark)] text-slate-600 font-bold hover:text-brand-primary transition-colors;
}
03 — The Input
***
Activator Code:
css
1
2
3
.style-soft-input {
@apply bg-[var(--soft-bg)] rounded-2xl shadow-[inset_5px_5px_10px_var(--soft-shadow-dark),inset_-5px_-5px_10px_var(--soft-shadow-light)] text-slate-600;
}
04 — The Table
| ID | Name | Role | Active |
|---|---|---|---|
| #1024 | Alice Wonder | Design | |
| #1025 | Bob Builder | Engineering | |
| #1026 | Charlie Day | Product |
05 — The Modal
System Alert
Are you sure you want to delete this memory? It will be lost in the clouds forever.