Themes
Emerald Clean
Professional balanced green — stable and trustworthy for finance brands.
Emerald Clean pairs the emerald gemstone with clean crystallization for a professional, balanced dark-green theme. Standard radii and understated shadows create a stable, trustworthy interface.
Mode: Dark | Gemstone: Emerald | Personality: Clean | Portfolio: Modolla
Color Palette
Emerald Clean Colors
Background
--crystal-bg-primaryBackground Subtle
--crystal-bg-tertiaryBackground Muted
--crystal-bg-secondarySurface
--crystal-surface-primarySurface Elevated
--crystal-surface-elevatedBorder
--crystal-border-defaultBorder Subtle
--crystal-border-subtleText
--crystal-fg-primaryText Secondary
--crystal-fg-secondaryText Muted
--crystal-fg-tertiaryPrimary
--crystal-accent-primaryPrimary Hover
--crystal-accent-secondaryAccent
--crystal-accent-primaryAccent Subtle
--crystal-accent-subtleCool
--crystal-brand-coolWarm
--crystal-brand-warmClick any swatch to copy the CSS variable.
Emerald Clean Token Values
| Token | Variable | Value | Preview |
|---|---|---|---|
Background | --crystal-bg-primary | #022c22 | |
Surface | --crystal-surface-primary | #064e3b | |
Text | --crystal-fg-primary | #ecfdf5 | |
Text Secondary | --crystal-fg-secondary | #a7f3d0 | |
Primary | --crystal-accent-primary | #047857 | |
Accent | --crystal-accent-primary | #fbbf24 | |
Border | --crystal-border-default | rgba(4, 120, 87, 0.3) | |
Cool | --crystal-brand-cool | #6ee7b7 | |
Warm | --crystal-brand-warm | #fbbf24 |
Click any row to copy the CSS variable.
Usage
<html data-crystal="emerald-clean">- Emerald Clean + Clean — Default professional finance look (recommended)
- Emerald Clean + Edge — Sharper, data-dashboard style
When to Use
- Finance and accounting applications
- Growth and sustainability dashboards
- Banking and investment platforms
- Brands communicating stability and trust