Themes
Ruby
Bold red, high-energy — a powerful dark theme for action-oriented apps.
Ruby uses deep red backgrounds with bright red primaries and gold accents. High-energy, bold, and attention-grabbing.
Mode: Dark | Accent: Gold #fbbf24 | Portfolio: ACModels
Color Palette
Ruby 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 Token Values
| Token | Variable | Value | Preview |
|---|---|---|---|
Background | --crystal-bg-primary | #1a0505 | |
Surface | --crystal-surface-primary | #2d0a0a | |
Text | --crystal-fg-primary | #fef2f2 | |
Primary | --crystal-accent-primary | #ef4444 | |
Accent | --crystal-accent-primary | #fbbf24 | |
Border | --crystal-border-default | #7f1d1d |
Click any row to copy the CSS variable.
Usage
<html data-crystal="ruby">Recommended pairings:
- Ruby + Bold — Maximum impact (ACModels uses this)
- Ruby + Edge — Sharp and intense
- Ruby + Clean — Controlled energy
When to Use
- Talent and modeling agencies
- Sports and fitness brands
- Gaming and entertainment
- Applications requiring boldness and confidence