---
version: alpha
name: Reflect
description: A near-black space canvas lit by violet-indigo glows where AeonikPro display headlines carry confident weight and Inter V handles the reading, and every surface suggests depth through luminous purple accent halos rather than hard light.

colors:
  # Surface / canvas — near-black, deep navy-violet
  background: "#030014"           # the signature void — near-black with a deep violet undertone
  surface: "#0d0b1e"              # slightly lifted dark panel — cards and inset containers
  surface-elevated: "#13102a"     # elevated cards, modals, hovered states

  # Brand accent — violet-purple scale
  primary: "#5046e4"              # the saturated indigo — primary CTA fill, feature highlights
  primary-light: "#9382ff"        # soft violet — nav links, inline accents, icon fills
  on-primary: "#ffffff"           # white on solid primary fills

  # Glow / container tints (opaque approximations of rgba values)
  primary-container: "#1c1640"    # was rgba(84,57,255,0.16) — purple-tinted button fill for ghost variant
  glow-soft: "#efedfd"            # was rgba(239,237,253,0.6) — the luminous near-white that appears as text and borders on dark
  glow-strong: "#f4f0ff"          # the lightest violet-white — button label, CTA accent text

  # Ink / text
  ink: "#ffffff"                  # primary text on the void canvas — pure white
  ink-secondary: "#efedfd"        # was rgba(239,237,253,0.7) — body text and nav links; near-white with a purple warmth
  ink-muted: "#c4bbff"            # was rgba(196,187,255,0.6) — placeholders, captions, border hints

  # Borders / strokes
  border: "#1c1640"               # was rgba(196,187,255,0.1) — hairline edges of cards and inputs; very dark violet
  border-focus: "#9382ff"         # violet focus ring color sourced from primary-light

  # Semantic (inferred from brand; no explicit semantic palette extracted)
  error: "#ff6b6b"               # /* estimated */ warm red for error states on dark surface
  success: "#4ade80"             # /* estimated */ green for positive confirmations

  # Shadow / depth tints
  shadow-violet: "#030014"        # used as the "cutout" in focus box-shadow stacks

typography:
  display-hero:
    fontFamily: "AeonikPro, system-ui, -apple-system, Segoe UI, Roboto, sans-serif"
    fontSize: 72px
    fontWeight: 500
    lineHeight: 1.11
    letterSpacing: -1.0px
  display:
    fontFamily: "AeonikPro, system-ui, -apple-system, Segoe UI, Roboto, sans-serif"
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.14
    letterSpacing: -0.5px
  heading:
    fontFamily: "AeonikPro, system-ui, -apple-system, Segoe UI, Roboto, sans-serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.17
    letterSpacing: -0.3px
  heading-sub:
    fontFamily: "AeonikPro, system-ui, -apple-system, Segoe UI, Roboto, sans-serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0px
  body-large:
    fontFamily: "Inter V, Inter, system-ui, -apple-system, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.56
    letterSpacing: 0px
  body:
    fontFamily: "Inter V, Inter, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-medium:
    fontFamily: "Inter V, Inter, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "Inter V, Inter, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter V, Inter, system-ui, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  caption:
    fontFamily: "Inter V, Inter, system-ui, -apple-system, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 64px
  5xl: 96px

rounded:
  sm: 4px
  md: 6px
  lg: 12px
  xl: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 20px
  button-primary-hover:
    backgroundColor: "{colors.primary-light}"
    textColor: "{colors.on-primary}"

  button-ghost:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.glow-strong}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 8px 16px
  button-ghost-hover:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.glow-strong}"

  button-cta:
    backgroundColor: "{colors.glow-strong}"
    textColor: "{colors.background}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 22px
  button-cta-hover:
    backgroundColor: "{colors.ink-secondary}"
    textColor: "{colors.background}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
  card-elevated:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 32px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.glow-strong}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 8px 12px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.glow-strong}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.nav-link}"
    padding: 16px 24px

  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary-light}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  testimonial-card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    rounded: "{rounded.lg}"
    padding: 24px

  link-inline:
    textColor: "{colors.primary-light}"
    typography: "{typography.body}"
    padding: 0px
---

# Reflect Design System

## Overview

Reflect's website opens onto a void — a near-black canvas (`{colors.background}`) that carries a deep violet undertone, so it reads as space rather than shadow. This is not the dark mode of a software dashboard; it's a deliberate atmospheric choice: the darkness is the product's promise of focus, an interface that removes distraction by removing light itself. Against this ground, a luminous violet-lavender spectrum (`{colors.primary-light}`, `{colors.primary}`) pulses like a thought forming in the dark, and everything on screen appears to float at a precise depth above that void.

The typographic strategy is similarly singular. AeonikPro — a confident geometric grotesque — carries all display text at weight 500, a middle register that refuses to shout while remaining unmistakably assertive. At 72px for the hero and 56px for section titles, the headlines sit wide with slight negative tracking that gives the type a settled, self-assured quality. Below the fold, Inter V takes over for body reading — a variable-weight workhorse that pairs cleanly with AeonikPro's more expressive geometry. The contrast is deliberate: AeonikPro shapes ideas, Inter V delivers them.

What separates Reflect from other dark-mode productivity apps is the restraint of the light. The accent colors — a soft violet (`{colors.primary-light}`) and a saturated indigo (`{colors.primary}`) — appear as glows and highlights rather than solid fills. The nav links shimmer at near-white with a violet warmth, cards define their edges with the faintest luminous borders, and focus rings pulse with a soft purple halo rather than a hard outline. The product screenshot on the page shows the app's signature backlinking interface in the same palette: a networked note-taking tool whose design language says "thinking is luminous."

**Key Characteristics:**
- Near-black void canvas (`{colors.background}`, `#030014`) — deep violet undertone, not flat black
- **AeonikPro at weight 500** for all display sizes (`{typography.display-hero}`) — geometric, confident, unhurried
- Inter V for body and UI (`{typography.body}`) — variable-weight humanist, contrast to AeonikPro
- Violet-indigo accent spectrum: soft lavender (`{colors.primary-light}`) for ambient glow, saturated indigo (`{colors.primary}`) for emphasis
- Ghost buttons with translucent violet tint (`{colors.primary-container}`) — no solid fills for secondary actions
- CTA button in the luminous near-white (`{colors.glow-strong}`) — the only truly light element on the page
- Minimal border radius (`{rounded.md}` = 6px) — precision over warmth
- Focus rings use a two-layer shadow: `{colors.shadow-violet}` inner cutout + `{colors.primary-light}` outer glow
- Motion uses a custom easing `cubic-bezier(0.6, 0.6, 0, 1)` — slightly decelerated, smooth, unhurried
- Nav links at 90% white (`{colors.ink-secondary}`) fade subtly on hover — quiet and non-intrusive

## Colors

### Surface & Canvas
- **Void** (`{colors.background}`): The deep near-black base — `#030014`. Every surface floats on this.
- **Panel Dark** (`{colors.surface}`): Slightly elevated dark surface for cards, sidebars, and inset containers.
- **Elevated Surface** (`{colors.surface-elevated}`): The lifted tier for modals, active state cards, and hovered panels.

### Brand Accent
- **Indigo** (`{colors.primary}`): The saturated anchor — CTA fills, highlighted elements, active states in the product demo.
- **Soft Violet** (`{colors.primary-light}`): The ambient glow — nav accent text, inline highlights, icon fills, link states. This is the color most people associate with Reflect.
- **Luminous White-Violet** (`{colors.glow-strong}`): The CTA foreground and the lightest reachable token — a barely-tinted white used for the primary "Start free trial" button background.

### Tinted Containers
- **Violet Ghost Fill** (`{colors.primary-container}`): The translucent indigo overlay used for ghost buttons and interactive chip backgrounds. Opaque approximation of rgba(84, 57, 255, 0.16).
- **Luminous Near-White** (`{colors.glow-soft}`): The near-white text and border color that carries a faint violet warmth. Opaque approximation of rgba(239, 237, 253, 0.6).

### Ink / Text
- **White** (`{colors.ink}`): Primary headings and CTA text.
- **Near-White Violet** (`{colors.ink-secondary}`): Body copy and nav links — not pure white; the violet tint keeps it in the brand atmosphere. Approximation of rgba(239, 237, 253, 0.7).
- **Muted Lavender** (`{colors.ink-muted}`): Placeholders, captions, hairline borders.

### Borders & Focus
- **Dark Violet Border** (`{colors.border}`): The near-invisible edge on cards and input fields. Approximation of rgba(196, 187, 255, 0.1) — only detectable on very dark surfaces.
- **Violet Focus Ring** (`{colors.border-focus}`): Used as the outer ring in focus box-shadow stacks.

## Typography

### Font Family
- **Display**: `AeonikPro` — a confident geometric grotesque at weight 500. Fallbacks: `system-ui, -apple-system, Segoe UI, Roboto, sans-serif`. Used for all headline sizes from 32px to 72px.
- **Body / UI**: `Inter V` — the variable-weight version of Inter. Fallbacks: `Inter, system-ui, -apple-system, sans-serif`. OpenType features: `"calt" 0, "cv10", "liga" 0, "ss01"` — a deliberate reduction of contextual ligatures for technical clarity.

### Hierarchy

The full type scale lives in the `typography:` token block above. Use those tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 72px / AeonikPro 500 — the hero statement headline |
| `display` | 56px / AeonikPro 500 — primary section headings |
| `heading` | 48px / AeonikPro 500 — feature section titles |
| `heading-sub` | 32px / AeonikPro 500 — sub-section and card headings |
| `body-large` | 18px / Inter V 400 — lead paragraphs, hero subheadline |
| `body` | 16px / Inter V 400 — standard body copy and inputs |
| `body-medium` | 16px / Inter V 500 — emphasized UI text |
| `nav-link` | 16px / Inter V 400 — navigation items |
| `button-ui` | 14px / Inter V 500 — button labels and chips |
| `caption` | 13px / Inter V 400 — metadata, tags, helper text |

### Principles
- **AeonikPro 500 — the only display weight**: never bold, never light. The medium weight communicates calm authority on a dark canvas.
- **Letter-spacing decreases with size**: -1.0px at 72px, -0.5px at 56px, 0px at 32px and below — standard but consistently applied.
- **Inter V with ligature suppression**: `"liga" 0` strips automatic ligatures — the font presents technically, not editorially.
- **No decorative weights**: the type system is monochromatic in weight — variety comes from size and role, not from bold or italic.

## Layout

### Spacing System
The full scale is in the `spacing:` token block above. Base unit: 8px (with a 4px sub-step for tighter internals). Section rhythm is generous — `{spacing.5xl}` (96px) for major vertical breaks, `{spacing.xl}` (24px) as the card interior standard.

### Grid & Container
- Max content width: 1248px, collapsing to 390px on mobile (captured breakpoints)
- Centered single-column for hero — headline, subhead, dual CTAs stacked or side by side
- Feature sections use a 2-column structure: product screenshot or animation on the right, text on the left
- Testimonial section uses a 3-column card grid

### Whitespace Philosophy
- **Dark space is not empty**: the void canvas makes minimal whitespace feel like depth, not absence. Paragraphs breathe at standard line-heights without needing extra vertical margin.
- **Content isolates itself**: each feature section is visually self-contained on the infinite dark background without needing decorative separators.
- **No competing visual noise**: no border stripes, gradient bands, or background shapes — the content and the glow are the only signals.

## Elevation & Depth

Reflect's depth system relies on luminosity, not shadow. Objects appear to rise toward the viewer by becoming slightly brighter on the dark ground — a photon-based model rather than a cast-shadow one.

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | `{colors.background}` — pure void | Page canvas, nav background |
| Panel (Level 1) | `{colors.surface}` — a barely lighter dark | Cards, sidebars, feature tiles |
| Elevated (Level 2) | `{colors.surface-elevated}` — slightly brighter still | Active cards, hovered states, modals |
| Focus Ring | `box-shadow: 0 0 0 2px {colors.shadow-violet}, 0 0 0 3px rgba(147,130,255,0.32)` | Keyboard focus — two-layer violet halo |
| Glow Layer | Soft violet radial gradient behind key UI moments | Hero backgrounds, product screenshot halo |

**Depth Philosophy**: Reflect inverts the standard shadow model. Nothing casts a shadow downward onto a surface; instead, elements glow upward against the void. The two-layer focus ring — a void cutout plus a translucent violet outer ring — is the concentrated version of this approach made interactive.

## Shapes

The radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `sm` | 4px | The smallest interactive element edges — ghost chips, tiny badges |
| `md` | 6px | Buttons and input fields — the system's primary interactive radius |
| `lg` | 12px | Cards, testimonial containers, feature tiles |
| `xl` | 16px | Elevated cards, modal containers, feature panels |
| `pill` | 9999px | Inline badges and status chips only |

The system is precise rather than generous. A 6px button radius on a dark background reads as deliberate, technical, and focused — appropriate for a tool that positions itself as serious thinking infrastructure. Large hero panels use no radius at all, extending edge-to-edge.

## Components

The complete component spec lives in the `components:` token block above.

### Button Variants
- **`button-primary`** — Saturated indigo (`{colors.primary}`) fill, white text, `{rounded.md}`. Hover brightens to `{colors.primary-light}`. The strongest interactive signal on the dark canvas.
- **`button-ghost`** — Translucent violet tint (`{colors.primary-container}`) fill, near-white text (`{colors.glow-strong}`). The secondary action — the "Re-run" chip in the product demo. Barely there, contextually present.
- **`button-cta`** — Luminous near-white (`{colors.glow-strong}`) background, void text (`{colors.background}`). The "Start free trial" CTA inverts the page: it is the only truly bright element, making it unmissable.

### Cards
- **`card`** — Slightly elevated dark panel (`{colors.surface}`), hairline border (`{colors.border}`), `{rounded.lg}`.
- **`card-elevated`** — Lifted tier (`{colors.surface-elevated}`), wider padding, `{rounded.xl}` — used for product demo frames and modal content.
- **`testimonial-card`** — Standard card with secondary ink text (`{colors.ink-secondary}`). Three-column grid layout on the social proof section.

### Inputs
- **`input`** — Transparent background on the page canvas, luminous near-white text (`{colors.glow-strong}`), no visible border at rest. Focus triggers a two-layer violet box-shadow: 2px void cutout + 3px violet glow (`{colors.border-focus}`).

### Navigation
- **`nav-bar`** — Floats on the void (`{colors.background}`) with secondary ink links (`{colors.ink-secondary}`) that shift to ~70% opacity on hover. Right side holds login link and the luminous CTA button.

### Badges
- **`badge`** — Translucent violet fill (`{colors.primary-container}`), soft violet text (`{colors.primary-light}`), fully pill-shaped. Used for feature labels and status chips.

### Links
- **`link-inline`** — Soft violet (`{colors.primary-light}`), no decoration. Hover color-shifts via the `color, box-shadow` transition at 0.45s.

## Do's and Don'ts

### Do
- Build on the void canvas (`{colors.background}`, `#030014`) — never substitute a cool gray or a warmer dark navy
- Use AeonikPro 500 for all display text (`{typography.display-hero}`) — do not reach for weight 700 even for the largest headings
- Let `{colors.primary-light}` appear as a glow rather than a solid fill — use it for text, borders, and icon fills, not for button backgrounds
- Reserve the luminous CTA button (`{colors.glow-strong}` background) for the single primary conversion action per screen
- Use the two-layer focus ring stack (void cutout + violet outer) for all keyboard-focusable elements
- Keep ghost button fills at the translucent violet level (`{colors.primary-container}`) — never use a bright solid for secondary actions
- Apply `cubic-bezier(0.6, 0.6, 0, 1)` to all transitions — the easing is part of the product feel
- Suppress Inter V ligatures with `font-feature-settings: "calt" 0, "liga" 0` for UI-facing text

### Don't
- Don't use a warm dark background — the blue-violet undertone of `{colors.background}` is load-bearing; a neutral black loses the atmosphere
- Don't set headlines in Inter V — AeonikPro is the exclusive display voice; Inter V is for reading, not declaring
- Don't fill large areas with `{colors.primary}` — it's a CTA color, not a background color. Use the translucent `{colors.primary-container}` for ambient violet moments
- Don't use pill-shaped buttons for the primary CTA — `{rounded.md}` (6px) is the deliberate choice; pills read too soft for this product
- Don't introduce a light-mode surface — there is no warm cream or white-canvas variant. The system is dark-only.
- Don't add hard drop shadows — Reflect has no cast shadows. Depth is luminosity, not darkness below objects.
- Don't mix AeonikPro weights — weight 500 throughout. Bold display would break the calm assurance.
- Don't use fully opaque violet for `{colors.ink-secondary}` — the near-white with a violet tint must preserve the atmospheric subtlety

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile | ≤390px | Single column; hero headline scales from 72px to ~40px; CTAs stack vertically; testimonial cards become a vertical scroll |
| Desktop | ≥1248px | Full layout; 3-column testimonial grid; 2-column feature sections; 1248px max container centered |

### Touch Targets
- Primary CTA button: ~40px tall, comfortable thumb target with `10px 22px` padding
- Ghost buttons: ~36px tall, sufficient for touch with a transparent hit area extension
- Nav links carry 24px horizontal padding for generous tap legibility

### Collapsing Strategy
- **Hero**: AeonikPro display scale compresses while maintaining the dark canvas and violet accent presence
- **Feature sections**: 2-column layouts collapse to single column, product screenshots becoming full-width
- **Testimonial grid**: 3-column → single-column vertical scroll on mobile
- **Spacing**: Section vertical rhythm compresses from 96px toward 48px on mobile

### Image Behavior
- Product screenshots and app UI demos maintain their aspect ratio and round to `{rounded.lg}` or `{rounded.xl}` at all sizes
- Violet glow effects behind screenshots persist on mobile at reduced radius

---

## Agent Prompt Guide

### Quick Color Reference
- Background (void): `{colors.background}`
- Primary CTA fill: `{colors.primary}`
- Ambient accent / glow: `{colors.primary-light}`
- Light CTA background: `{colors.glow-strong}`
- Body text: `{colors.ink-secondary}`
- Heading text: `{colors.ink}`
- Ghost fill: `{colors.primary-container}`
- Border (hairline): `{colors.border}`
- Focus ring outer: `{colors.border-focus}`

### Example Component Prompts

- "Build a Reflect hero section: void background (`{colors.background}`), AeonikPro 72px weight 500 letter-spacing -1.0px white headline, 18px Inter V 400 near-white body at `{colors.ink-secondary}`. Primary CTA: luminous near-white (`{colors.glow-strong}`) background, `{colors.background}` text, `{rounded.md}` radius, `10px 22px` padding. Secondary ghost CTA: translucent violet fill (`{colors.primary-container}`), `{colors.glow-strong}` text, same radius. Center both buttons below the headline."
- "Create a Reflect feature card: `{colors.surface}` background, `{rounded.lg}` radius, `24px` padding, hairline `{colors.border}` edge. Heading in AeonikPro 32px weight 500 `{colors.ink}`. Body text in Inter V 16px `{colors.ink-secondary}`. No shadow — the panel is brighter than the void, not lifted above it."
- "Design a primary button in the Reflect system: `{colors.primary}` fill, white text, `{rounded.md}` (6px) radius, Inter V 14px weight 500, `10px 20px` padding. Hover: transition to `{colors.primary-light}` over 0.3s `cubic-bezier(0.6, 0.6, 0, 1)`."
- "Render a Reflect ghost chip/badge: `{colors.primary-container}` fill (the translucent violet), `{colors.primary-light}` text, `{rounded.pill}` radius, Inter V 13px, `4px 10px` padding. Hover: shift background to `{colors.surface-elevated}`."
- "Style a text input for Reflect: transparent background on `{colors.background}`, `{colors.glow-strong}` text, no visible border at rest (`{colors.border}` is barely detectable). Focus state: `box-shadow: 0 0 0 2px {colors.shadow-violet}, 0 0 0 3px rgba(147,130,255,0.32)` — the two-layer violet halo. `{rounded.md}` radius, `8px 12px` padding."
- "Build a Reflect testimonial card grid: three-column layout on a `{colors.background}` void. Each card `{colors.surface}` background, `{rounded.lg}` radius, `24px` padding. Heading in AeonikPro 14px 500 `{colors.ink}`, body in Inter V 16px `{colors.ink-secondary}`. Username in `{colors.primary-light}` as a violet accent. No shadow — luminosity-only depth."

### Iteration Guide

1. Start with void (`{colors.background}`). Every other surface should appear to glow against it — if anything looks flat or opaque, it's too dark or the wrong color.
2. Reach for AeonikPro 500 for any headline. If you typed 700 or 400, change it — weight 500 is the only setting.
3. The primary CTA must be the brightest element: `{colors.glow-strong}` background against the void. Nothing else should approach that luminosity.
4. Violet accent (`{colors.primary-light}`) belongs in text, borders, icons, and glows — never as a large solid fill. Solid indigo (`{colors.primary}`) is for button fills only.
5. Ghost buttons use `{colors.primary-container}` — the translucent violet tint. If a secondary button has a bright or opaque fill, it's wrong.
6. Depth is expressed through brightness: `{colors.background}` → `{colors.surface}` → `{colors.surface-elevated}`. No drop shadows.
7. Focus rings always use the two-layer stack: `box-shadow: 0 0 0 2px {colors.shadow-violet}, 0 0 0 3px rgba(147,130,255,0.32)`.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Reflect. Brand names and trademarks belong to their respective owners.