Skip to content
AncientMind Codex

Design System — internal visual reference. Not user-facing.

Aesthetic: ancient library at dusk meets sacred temple. Deep forest green dominant, warm candlelight gold (never neon). Sacred geometry as low-opacity accents only.

Color

The full palette as swatches. Body text targets 7:1 contrast against its surface.

Surfaces

bg-deep#0A1A14splash / ceremony
bg-primary#0F2A1Fmain app bg
bg-surface#1A3A2Dcards
bg-elevated#224434modals
border-subtle#2E5340hairlines
border-strong#3A6450separators

Accents

gold-primary#C9A961CTAs / gauge
gold-hover#D9B871hover/press
gold-muted#8B7355locked
brass#6B5D4Btertiary

Text

text-primary#F5F1E8cream
text-secondary#B8C8BEsage
text-tertiary#6B8478captions

Semantic

success#9DB87Econfirmations
critical#C97A5Crare

Type scale

Mobile-first, optimized for 40+. Body never below 18px.

xs14px

The antenna awakens

metadata only
sm16px

The antenna awakens

secondary text
base18px

The antenna awakens

default body — never below
lg20px

The antenna awakens

buttons, emphasized body
xl24px

The antenna awakens

subheadings
2xl32px

The antenna awakens

section headings
3xl40px

The antenna awakens

page headings, level names
4xl56px

The antenna awakens

streak, days counter
5xl80px

The antenna awakens

calcification %
display96px

The antenna awakens

splash, ceremony

Fonts

Cormorant Garamond (display/serif), Inter (UI/body), JetBrains Mono (numeric).

serif

Cormorant Garamond

Sacred headlines, level names, key numerics.

sans

Inter

Body, buttons, navigation, form labels.

mono

JetBrains Mono

Streak · Day 21 · Initiate #4729

Buttons

Primary is a 64px gold CTA. Tab to any control to see the 3px gold focus ring.

Primary (64px)
Secondary
Disabled
Block (one primary action per screen)

Cards & elevated surfaces

Hairline gold border framing, subtle 4-6% parchment grain overlay.

The teaching for today has been unsealed.

A card sits on bg-surface with a hairline gold border and the papyrus grain overlay. Notice the texture against flat color.

Elevated surface

Top-elevation variant on bg-elevated, for modals and reveals.

Form inputs

Labels are always visible — never placeholder-only. Large multi-line textarea for journaling.

We will send a one-click magic link.

Write freely. This is a sacred object, not a productivity tool.

Breathing golden orb

Loading state — 3s expand/contract, never a spinner. Falls back to static when reduce-motion is on (default). Use the toggle above to preview motion.

Unsealing the teaching

Calcification Gauge (placeholder)

The centerpiece. Big center number in Cormorant ~80px gold. The gold ring fills the INVERSE of the percentage — as calcification drops, activation grows.

Starting measurement

Down 8 points this month

The Initiate's Card (Step 3)

The permanent keepsake revealed at the end of the Initiation Ceremony. Reproduced here from sample data — also reproducible in the Initiate/Profile tab.

AncientMind CodexMarguerite Lethe
Initiate#144
Level 1: Initiate
73% calcifiedJune 3, 2026

Sacred geometry accents

Flower of Life and a stylized Eye of Horus. Used only as low-opacity background patterns — shown here at higher opacity for review.

Flower of Life
Eye of Horus (stylized)

Bottom navigation (mockup)

5 tabs with Phosphor icons (regular, 1.5px) + labels. 56px+ targets, never icon-only.