Themes
Quartz
Clean, minimal, transparent — a near-monochrome light theme with rose accents.
Quartz is Crystal's most minimal theme. Near-monochrome grays with a single rose accent create a clean, distraction-free environment. Designed for documentation, reading experiences, and interfaces where content is the focus.
Mode: Light | Accent: Rose #e11d48
Color Palette
Quartz 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.
Quartz Token Values
| Token | Variable | Value | Preview |
|---|---|---|---|
Background | --crystal-bg-primary | #fafafa | |
Surface | --crystal-surface-primary | #f5f5f5 | |
Text | --crystal-fg-primary | #171717 | |
Text Secondary | --crystal-fg-secondary | #525252 | |
Primary | --crystal-accent-primary | #e11d48 | |
Accent | --crystal-accent-primary | #f43f5e | |
Border | --crystal-border-default | #e5e5e5 |
Click any row to copy the CSS variable.
Usage
<html data-crystal="quartz">Recommended pairings:
- Quartz + Clean — Maximum readability, documentation
- Quartz + Edge — Minimal but sharp, technical docs
- Quartz + Bold — High contrast minimalism
When to Use
- Documentation and technical writing
- Content-first blogs and articles
- Admin panels where clarity is paramount
- Interfaces that need to get out of the way