Themes
Onyx Luxe
Elegant refined dark neutral — premium sophistication for agency portfolios.
Onyx Luxe pairs the onyx gemstone with luxe crystallization for a premium, editorial dark theme. Wider radii, slow motion, and whisper-thin borders create refined elegance.
Mode: Dark | Gemstone: Onyx | Personality: Luxe | Portfolio: artasce.com
Color Palette
Onyx Luxe 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.
Onyx Luxe Token Values
| Token | Variable | Value | Preview |
|---|---|---|---|
Background | --crystal-bg-primary | #0a0a0a | |
Surface | --crystal-surface-primary | #141414 | |
Text | --crystal-fg-primary | #fafafa | |
Text Secondary | --crystal-fg-secondary | #a3a3a3 | |
Primary | --crystal-accent-primary | #fafafa | |
Accent | --crystal-accent-primary | #06b6d4 | |
Border | --crystal-border-default | rgba(250, 250, 250, 0.05) | |
Cool | --crystal-brand-cool | #06b6d4 | |
Warm | --crystal-brand-warm | #f59e0b |
Click any row to copy the CSS variable.
Usage
<html data-crystal="onyx-luxe">- Onyx Luxe + Luxe — Full premium look (recommended)
- Onyx Luxe + Dream — Softer luxury
When to Use
- Agency portfolios and creative showcases
- Premium brand experiences
- Editorial and magazine layouts
- High-end product landing pages