A calm, cosmic note-taking brand built on a VIOLET-CAST near-black #030014 rather than a neutral one, and assembled almost entirely from translucency: surfaces are white alpha washes (.01/.02/.04) layered over the canvas with rgba(255,255,255,.05) hairlines, so panels read as glass rather than cards, and the text ladder runs #ffffff and #f4f0ff down through rgba(239,237,253,.7) body to .32 faint. A single violet family carries everything, varied by opacity rather than flat fill — #6d48ff core at .04/.16/.48/.76, #9382ff for accent text. Its defining rule is that there are ZERO drop shadows: every shadow is INSET, so light appears to come from within each surface — a soft rgba(255,255,255,.04) 0 0 24px interior edge, a lilac rgba(164,143,255,.12) 0 -7px 11px glowing up into pills, a pink .04 accent. The hero is a slow black-hole composition where the starfield is a CSS box-shadow field of 1px dots animated by heroBlackHoleStarsRotate and Twinkle, sitting over two WebGL canvases and five backdrop blurs (6-16px). Type splits cleanly: AeonikPro at weight 500 for headings (72/80 hero) and Inter V for 18/28 body, with tracking left NORMAL even at 72px. Motion is deliberately unhurried — 1s opacity reveals on cubic-bezier(.6,.6,0,1) — and the slowness is the brand.
Browse Reflect in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: reflect.app (live DOM, computed styles), 2026-07-25. 0 stylesheets blocked. No named brand tokens in :root, so §2 is read from computed fills/text. Note the system is alpha-first: almost every surface, border and text tier is an rgba over the near-black canvas rather than a solid hex — recorded as alpha because that is what the site ships. Reality check: the hint is accurate and understated. The queue said "dark, refined, gradient accent" — all true (canvas #030014, violet #6d48ff family, heavy gradient use). What it misses is how the depth is built: there are no drop shadows at all, only INSET glows, and the hero starfield is a CSS box-shadow field (hundreds of 1px dots at explicit offsets) driven by heroBlackHoleStars* keyframes, alongside two WebGL canvases.
A calm, cosmic note-taking brand. The canvas is a near-black with a violet cast (#030014 — blue-violet, not neutral), and the whole interface is assembled from translucent white washes layered over it rather than solid panels, so surfaces feel like glass rather than cards. A single violet accent family runs through buttons, links and product UI. The hero is a slow "black hole" composition: rotating star rings, a twinkling CSS starfield and a WebGL layer, all moving at 1-second-plus durations so the page feels unhurried. Depth is entirely **inset glow** — light appears to come from inside the surfaces. Feels: cosmic, calm, refined, glassy.
| Token | Hex / value | Role / usage |
|---|---|---|
| canvas | #030014 | page background (violet-cast near-black) |
| canvas-deep | rgba(6,3,23,.96) | raised dark panel |
| scrim | rgba(3,0,20,.5) | overlay scrim |
| white | #ffffff | primary text (1382 uses) |
| lilac-white | #f4f0ff | secondary heading / button text |
| ink-70 | rgba(239,237,253,.7) | body copy |
| ink-60 | rgba(239,237,253,.6) | muted copy |
| ink-80 | rgba(255,255,255,.8) | strong secondary |
| ink-44 | rgba(255,255,255,.44) | tertiary |
| ink-36 | rgba(255,255,255,.36) | faint |
| ink-32 | rgba(255,255,255,.32) | faintest |
| wash-02 | rgba(255,255,255,.02) | THE dominant surface wash (32 uses) |
| wash-01 | rgba(255,255,255,.01) | subtlest wash |
| wash-04 | rgba(255,255,255,.04) | raised wash |
| border-05 | rgba(255,255,255,.05) | THE hairline (31 uses) |
| border-10 | rgba(255,255,255,.1) | stronger hairline |
| border-lilac | rgba(196,187,255,.1) | violet-tinted hairline |
| violet | #9382ff | accent text / links |
| violet-core | #6d48ff | brand violet (washes at .04 / .16 / .48 / .76) |
| violet-deep | #5439ff | pressed / deep accent (at .16) |
| glow-lilac | rgba(164,143,255,.12) | inset top glow on pills |
| glow-pink | rgba(237,120,255,.04) | inset pink glow accent |
Rules: build surfaces from white alpha washes, not solid greys. The violet is used at varying alpha (.04 → .76) rather than as a flat fill, which is what keeps it feeling atmospheric rather than loud.
Two families with a clean split: AeonikPro for all headings at weight 500, and Inter V (variable Inter) for body, nav and UI at 400/500. Tracking stays normal everywhere — even at the 72px hero — which is unusual and is part of why the page reads calm rather than punchy. Line-heights are generous (72/80, 56/64, 18/28).
Specimen substitution: previews load Space Grotesk for AeonikPro and
Inter for Inter V (one bundled Google Fonts link). The site ships the
licensed AeonikPro; Inter V is the real face.
| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Display (h1) | AeonikPro | 72/80 | 500 | normal |
| Section (h2) | AeonikPro | 56/64 | 500 | normal |
| Sub-head (h3) | AeonikPro | 32/40 | 500 | normal |
| Body | Inter V | 18/28 | 400 | normal |
| Nav / UI | Inter V | 16 | 400 | normal |
| Button | Inter V | 14 | 500 | normal |
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.