Themes
Ruby Bold
Energetic confident red — bold and action-oriented for creative agencies.
Ruby Bold pairs the ruby gemstone with bold crystallization for an energetic, confident dark-red theme. Bouncy easing and thicker borders create a strong, action-oriented identity.
Mode: Dark | Gemstone: Ruby | Personality: Bold | Portfolio: Artasce Creative
Color Palette
Ruby Bold 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.
Ruby Bold Token Values
| Token | Variable | Value | Preview |
|---|---|---|---|
Background | --crystal-bg-primary | #0c0406 | |
Surface | --crystal-surface-primary | #1a0a0e | |
Text | --crystal-fg-primary | #fff1f2 | |
Text Secondary | --crystal-fg-secondary | #fecdd3 | |
Primary | --crystal-accent-primary | #9f1239 | |
Accent | --crystal-accent-primary | #fb923c | |
Border | --crystal-border-default | rgba(159, 18, 57, 0.3) | |
Cool | --crystal-brand-cool | #fda4af | |
Warm | --crystal-brand-warm | #fb923c |
Click any row to copy the CSS variable.
Usage
<html data-crystal="ruby-bold">- Ruby Bold + Bold — Full energetic creative look (recommended)
- Ruby Bold + Edge — Sharper, more focused
When to Use
- Creative agency sites and brand experiences
- Marketing and advertising platforms
- Call-to-action-heavy pages
- Brands that need to project confidence and energy