crystl design system

style guide

The tokens, type, and the gold-line language — one place to keep the site consistent.

Typography

One sans does the work. Inter carries both headers and body — headings earn their hierarchy through weight (600) and tight negative tracking, not a separate display face. JetBrains Mono handles UI labels, kickers, buttons and code. Cormorant Garamond is the logo wordmark — keep it reserved: use it only for themed serif accents (tarot & spell-card names) and the homepage hero eyebrow (“a multitasking terminal for”, italic), never for page titles or body copy, so the logo stays distinct. (There is no separate display font — Outfit has been retired.) The giant homepage display hero is the one weight exception — at that scale the headline is Inter 400 lowercase (its size carries it), while standard page titles stay Inter 600. One antique manuscript italic — IM Fell English — is reserved for a single flourish: the “your adventure awaits” CTA tagline. Nowhere else.

headers · inter 600 (tight)

choose your heroes

Hero & section titles. Weight 600, tight tracking, usually with .gradient-text.
body · inter 400

The quick brown fox jumps over the lazy dog.

Body copy and longform.
mono · jetbrains mono

works with · get started · 0123456789

UI labels, buttons, kickers, code.
serif · cormorant garamond

The Herald

Logo font — reserved. Themed serif accents only (tarot & spell-card names). Not for titles or body.
h1 / displaychoose your heroes
h2 / sectionconduct an orchestra of agents
subheaderStats shape agent behavior.
bodyRun multiple agents on the same repo at once, each in its own isolated shard.
mono labelWORKS WITH

Color

Core tokens
background #07070e
text #e4e4eb
text muted #8888a0
accent #8CBFF2
accent 2 #E8A090
Gold — the surface-ornament layer
gold line rgba(206,188,150,.28)
gold solid #d8c596
gold deep #b8995f
Crystal palette — library categories, keyed to app shards
lapis #7AA2F7
amber #E0AF68
peridot #9ECE6A
amethyst #B79CF2
ruby #F7768E
morganite #E8A090

The gold-line language

Gold is the ornament layer — a fine 0.25px hairline, inset on cards, the border on buttons. Neon (accent gradient) is reserved for the tarot hero frame and a few promo accents. Small cells and labels stay clean.

card

glass + gold inner line

Every content card. Inset 9px, gold hairline.
badge · shard tab

lapis

Lowercase label, colored underline past the word.
gold border button ghost / full-width row → gold hairline rule

Spacing — header & sub-copy

A heading and its sub-copy are one unit — keep them close. Set an explicit tight line-height (1.0–1.1) on large headings so there's no phantom space below the caps, then let a small margin (~0.5–0.75rem) do the spacing. Never lean on a heading's default line-height for the gap — that's what leaves a header floating high above its sub-copy.

do

conduct an orchestra

Tight line-height, sub-copy sits right under the header.

don't

conduct an orchestra

Loose default line-height leaves a gap the eye reads as a break.

Common pairings — line-height & gap

choose your heroes

Summon a named specialist for the task.

hero · h1 inter 600 · line-height 1.0 · gap 1rem

conduct an orchestra

Run, watch, and steer a whole team from one window.

section · h2 inter 600 · line-height 1.1 · gap 0.75rem

Crystl's Book of Spells

A grimoire of powerful prompts.

themed serif · reserved cormorant 300 · line-height 1.05 · gap 0.6rem

action panels

Approval requests float on screen as glass panels.

card title · h3 (mono) jetbrains 600 · line-height 1.2 · gap 0.4rem

Living reference — update it when the system changes. /style-guide · noindex