# Reflect — Marketing site Design Spec

> 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

| 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.

## 3. Typography Rules

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 |

## 4. Component Stylings

Controls are small and soft: a 36px primary at **8px** radius with `8px 16px`
padding in Inter V 14/500; announcement pills are **32px** radius at 32px tall
carrying an inset lilac glow (`rgba(164,143,255,.12) 0 -7px 11px inset`). The
dominant page radius is a tight **5px** (200 uses) on product-UI rows, with 50%
for avatars and 999px for pills. Surfaces are a white alpha wash plus a
`rgba(255,255,255,.05)` hairline — never a solid card.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Primary CTA | violet family, #f4f0ff text, 8px, 36px | 0.3s ease-in-out colour | no custom ring found | — | not observed |
| Announcement pill | transparent, 32px, inset lilac glow | 0.45s colour fade | as above | — | — |
| Product row | wash .02, 5px radius | wash lightens | as above | — | — |
| Keyboard chip | rgba(84,57,255,.16), white .8 | — | as above | — | — |

Focus note: **no custom focus ring was found.** Treat as an accessibility gap and
supply one (e.g. `0 0 0 2px #9382ff`) rather than copying the omission.

## 5. Layout Principles

A floating rounded pill nav sits centred at the top, with the wordmark left and
Login + Start-free-trial right. The hero is centred: announcement pill, 72px
headline, one-line sub, all over the black-hole starfield composition. Below, a
large product screenshot panel (search bar, sidebar, daily-notes outline,
calendar) bleeds up into the hero. Content then stacks in centred sections. The
1248px breakpoint is the single real layout seam.

## 6. Depth & Elevation

Radius scale: **5px** dominant (product rows), 4px, 6px, **8px** (buttons), 16px,
**32px** (announcement pill), 999px, 50%. The defining rule: **there are no drop
shadows** — every shadow is `inset`:

- `rgba(255,255,255,.04) 0 0 24px inset` and `.06` — soft interior edge light
- `rgba(164,143,255,.12) 0 -7px 11px inset` — lilac glow up into pills
- `rgba(237,120,255,.04) 0 0 6px 4px inset` — pink glow accent

Plus a **CSS starfield**: multi-hundred-stop `box-shadow` lists placing 1px white
dots at explicit offsets (e.g. `#fff 778px 19408px, #fff 1827px 12825px, …`).
Borders are 1px white-alpha (.05 / .08 / .1) or lilac-tinted. Five backdrop blurs:
6px, 8px, 12px, 15px, 16px.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| opacity | 1s | cubic-bezier(0.6, 0.6, 0, 1) | reveals (dominant, 92x) |
| transform | 1s | ease | drifting / parallax elements |
| color | 0.45s | cubic-bezier(0.6, 0.6, 0, 1) | link + text hover |
| opacity | 1s | ease | fades |
| color | 0.3s | cubic-bezier(0.6, 0.6, 0, 1) | faster text hover |
| all | 0.3s | ease-in-out | controls |

House transition: an unusually **slow 1s `cubic-bezier(.6,.6,0,1)`** for reveals,
with 0.3–0.45s reserved for direct interaction — the slowness is the brand. 24
`@keyframes`, dominated by a repeated **`hue-rotate`** (used ~14x, cycling accent
hues) plus the hero set: `heroBlackHoleStarsRotate` / `…RotateReverse` /
`…Twinkle`, `heroBlackHoleCirclesRotate` / `…Reverse`, `risingStarsAnination`
[sic — the site's own spelling], `pricingBackgroundLineAnimation` (8s infinite),
`integrationsLine1/2` and `wave1/2` (3.5s infinite). No animation library
detected. **No `prefers-reduced-motion` block** (`reducedMotionBlocks:0`) — a real
gap given how much of this page moves continuously.

## 8. Backgrounds, Effects & WebGL

Heavily layered and the richest part of the system:

- **Two WebGL canvases** (300x150 and 320x640) driving the hero/product effects.
- The **CSS box-shadow starfield** described in §6, animated by the `heroBlackHoleStars*` keyframes.
- Many gradients, including a multicolour accent ramp
  `linear-gradient(90.01deg, #e59cff 0.01%, #ba9c…)` (pink → lilac) and white
  alpha fades `linear-gradient(#ffffff 0%, rgba(255,255,255,.7) 100%)` used as
  edge/text masks.
- **Five backdrop blurs** (6/8/12/15/16px) — the glass layer.
- 3 background videos. No raster background layers, no grain.

## 9. Do's and Don'ts

### Do
- Use a violet-cast near-black #030014, not a neutral black.
- Build surfaces from white alpha washes (.01–.04) plus a rgba(255,255,255,.05) hairline.
- Make every shadow **inset** — light comes from inside the surface.
- Vary the violet by alpha (.04 → .76) instead of using flat fills.
- Keep tracking normal even at 72px; let generous line-height carry the calm.
- Move slowly: 1s reveals on cubic-bezier(.6,.6,0,1).
- Split type strictly: AeonikPro 500 headings, Inter V body/UI.

### Don't
- Don't add drop shadows — the entire system is inset-only.
- Don't use solid grey panels; surfaces are translucent.
- Don't tighten headline tracking.
- Don't speed the reveals up — the slowness is the brand.
- Don't ship without a focus ring or a reduced-motion block; the site omits both.

## 10. Responsive Behavior

A deliberately sparse ladder — this is a single-column marketing page with one
real seam:

| Breakpoint | What changes |
|---|---|
| max 390px | smallest-phone type scale-down |
| max 1248px | mobile/tablet layout — nav collapses, hero type scales |
| min 1248px | full desktop composition |

No dark-scheme blocks (`darkSchemeBlocks:0`) — the site is dark by default, not
by scheme, so there is no light variant to honour. No container queries. No
reduced-motion block.

## 11. Agent Prompt Guide

- Canvas `#030014` · Surface `rgba(255,255,255,.02)` · Ink `#ffffff` / body `rgba(239,237,253,.7)` · Border `rgba(255,255,255,.05)` · Accent `#6d48ff` / `#9382ff`
- Font: AeonikPro 500 headings (Space Grotesk stand-in) + Inter V body (Inter) · Body: 18/28 · Radius: 5px rows / 8px buttons / 32px pills · Control height: 36px
- Focus: none defined — add `0 0 0 2px #9382ff` · Shadows: **inset only** · Motion: 1s cubic-bezier(.6,.6,0,1)

<reflect_design_language>
Calm, cosmic note-taking brand. Canvas is a VIOLET-CAST near-black #030014 (not
neutral), with panels at rgba(6,3,23,.96). The system is alpha-first: surfaces are
white washes (.01/.02/.04) over the canvas rather than solid cards, bordered by
rgba(255,255,255,.05) hairlines; text runs #ffffff and #f4f0ff down through
rgba(239,237,253,.7) body to .32 faint. One violet family carries everything —
#6d48ff core used at .04/.16/.48/.76 alpha, #9382ff for accent text, #5439ff
deep — varied by opacity rather than flat fill. Two faces: AeonikPro at weight
500 for all headings (72/80 hero, 56/64 section; stand-in Space Grotesk) and
Inter V at 400/500 for body 18/28 and UI, with tracking NORMAL everywhere even at
72px. The defining depth rule: ZERO drop shadows — every shadow is inset
(rgba(255,255,255,.04) 0 0 24px inset, a lilac rgba(164,143,255,.12) 0 -7px 11px
inset up into pills, a pink .04 glow), so light comes from inside surfaces. Radii
are tight: 5px product rows, 8px buttons, 32px announcement pills. The hero is a
black-hole composition of rotating star rings, a CSS box-shadow starfield and two
WebGL canvases, under five backdrop blurs (6-16px). Motion is deliberately SLOW —
1s opacity reveals on cubic-bezier(.6,.6,0,1), 0.3-0.45s for direct interaction —
across 24 keyframes dominated by hue-rotate and the heroBlackHoleStars set. Feels:
cosmic, calm, refined, glassy. Avoid: drop shadows, solid grey panels, tightened
headline tracking, speeding up the reveals, shipping without a focus ring or
reduced-motion block.
</reflect_design_language>