Themes
Emerald
Green, growth/finance — a rich dark theme for financial applications.
Emerald uses deep green backgrounds with green primaries and cyan accents. Associated with growth, prosperity, and financial trust.
Mode: Dark | Accent: Cyan #06b6d4 | Portfolio: Modolla
Color Palette
Emerald Colors
Background
--crystal-bgBackground Subtle
--crystal-bg-subtleBackground Muted
--crystal-bg-mutedSurface
--crystal-surfaceSurface Elevated
--crystal-surface-elevatedBorder
--crystal-borderBorder Subtle
--crystal-border-subtleText
--crystal-textText Secondary
--crystal-text-secondaryText Muted
--crystal-text-mutedPrimary
--crystal-primaryPrimary Hover
--crystal-primary-hoverAccent
--crystal-accentAccent Subtle
--crystal-accent-subtleCool
--crystal-coolWarm
--crystal-warmClick any swatch to copy the CSS variable. Colors update live with theme changes.
Emerald Token Values
| Token | Variable | Value | Preview |
|---|---|---|---|
Background | --crystal-bg | #022c22 | |
Surface | --crystal-surface | #064e3b | |
Text | --crystal-text | #ecfdf5 | |
Primary | --crystal-primary | #10b981 | |
Accent | --crystal-accent | #06b6d4 | |
Border | --crystal-border | #059669 |
Values update live with theme changes. Click any row to copy the CSS variable.
Usage
<html data-crystal="emerald">Recommended pairings:
- Emerald + Clean — Professional finance (Modolla uses this)
- Emerald + Luxe — Premium financial
- Emerald + Edge — Data-dense financial dashboards
When to Use
- Finance and banking applications
- Investment and wealth management dashboards
- Sustainability and environmental brands
- Applications requiring trust and growth association