# Crystl — Brand One-Pager

*The essentials for using Crystl's marks and colors correctly. Full living design system:
crystl.dev `/style-guide`.*

---

## Logo

Files in `logos/` (all transparent PNG):

| File | Use |
|---|---|
| `crystl-logo-primary-gradient.png` | Primary mark — crystal + wordmark, stacked, on dark |
| `crystl-logo-horizontal-gradient.png` | Horizontal lockup — for wide/nav placements |
| `crystl-logo-primary-white.png` | Mono/white, stacked — busy or single-color backgrounds |
| `crystl-logo-horizontal-white.png` | Mono/white, horizontal |
| `crystl-app-icon.png` | App icon (1024px) — do not use as the logo in text |
| `crystl-wordmark-white.svg` | **Vector** wordmark (text only), white — for dark backgrounds |
| `crystl-wordmark-gradient.svg` | **Vector** wordmark, brand gradient (morganite → blue) |
| `crystl-wordmark-dark.svg` | **Vector** wordmark, near-black — for light backgrounds |

The wordmark is set in **Cormorant Garamond** (the brand serif / logo font). The SVGs are
outlined paths traced from the wordmark artwork, with the letter-spacing evened out
(s-t tightened, t-l opened, y-s tucked) and the period shrunk ~15% to sit at the stroke
weight. Every gap reads consistent. They render identically anywhere, no font install needed.

**Rules**
- Give the mark clear space of at least the height of the crystal on all sides.
- Don't recolor, add effects, stretch, or rotate. Use the white version instead of
  forcing the gradient onto a light or busy background.
- Crystl is a dark-first brand — prefer the near-black background (`#07070e`).

## Color

**Core**
| Token | Hex | Role |
|---|---|---|
| background | `#07070e` | near-black base |
| text | `#e4e4eb` | primary text |
| text muted | `#8888a0` | secondary text |
| accent | `#8CBFF2` | primary accent (blue) |
| accent 2 | `#E8A090` | secondary accent (morganite) |

**Gold — the ornament layer**
| Name | Value | Role |
|---|---|---|
| gold line | `rgba(206,188,150,.28)` | 0.25px hairline, inset on cards + button borders |
| gold solid | `#d8c596` | ornament text/detail |
| gold deep | `#b8995f` | deeper gold |

Gold is ornament only — a fine hairline. The neon accent gradient is reserved for the
tarot hero frame and a few promo accents; small cells and labels stay clean.

**Crystal palette** (category / shard colors): lapis `#7AA2F7` · amber `#E0AF68` ·
peridot `#9ECE6A` · amethyst `#B79CF2` · ruby `#F7768E` · morganite `#E8A090`.

## Type

| Role | Typeface |
|---|---|
| Display / titles | **Outfit** — lowercase, often with the accent gradient |
| Body | **Inter** |
| UI labels, kickers, buttons, code | **JetBrains Mono** — uppercase, wide tracking |
| Card names, roman numerals | **Cormorant Garamond** — serif, uppercase |
