---
title: "Reflect design system"
variant: extended
source: https://reflect.app/
captured_at: 2026-10-12
theme: dark
industry: productivity
generator: Design DNA (https://four.wiralomi.com/style/reflect-app)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Reflect · Design System

> Quiet dark space, illuminated by connected ideas

**Theme:** dark · **Industry:** productivity · **Source:** https://reflect.app/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Reflect’s homepage pairs a near-black violet canvas with restrained lavender accents, luminous product imagery, and centered, direct product messaging. It presents the note-taking app through generous vertical breathing room, fine borders, and a compact, consistent interface rather than bright section backgrounds.

## North star

Let a near-black violet canvas and spacious centered storytelling make luminous product details—not decorative UI—the focal point.

## Overview

Build the page around the measured near-black violet canvas (#030014), which stays consistent across the long sequence of sections. Use soft off-white for prominent headings, muted grays for explanatory copy, and lavender for links and small emphasis. Stronger indigo-violet is reserved for primary actions and selected interface details. Typography pairs AeonikPro’s rounded, restrained display character with Inter V for body copy, labels, and controls; keep headings centered and sentence case. The page alternates centered text blocks, feature grids, and wide product demonstrations, with substantial vertical pauses between major stories. Product imagery provides the vivid contrast: purple light blooms, glowing interface details, and dark app mockups sit against the quiet canvas. Cards remain dark and understated, defined mostly by subtle borders and restrained inset effects rather than prominent shadows. Maintain the sparse, technical, calm mood throughout.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Violet | `#030014` | `--color-midnight-violet` | brand | Dominant page canvas and continuous background across the homepage sections. |
| Soft Signal | `#9382ff` | `--color-soft-signal` | accent | Lavender link text and quiet emphasis, including repeated social and product links. |
| Plum Badge | `#251d50` | `--color-plum-badge` | surface | Dark purple badge detail; a minor interface color, not a section background. |
| Quiet Lilac | `#aaa7b9` | `--color-quiet-lilac` | neutral | Primary muted text for supporting copy against the dark canvas. |
| Badge Indigo | `#6259e7` | `--color-badge-indigo` | accent | Small badge border and selected UI detail, not a dominant brand field. |
| Graphite Plum | `#1d1a2c` | `--color-graphite-plum` | semantic | Most prevalent measured hairline for cards, badges, and subtle section boundaries. |
| Dusk Gray | `#908ea0` | `--color-dusk-gray` | neutral | Secondary muted copy and quieter link or badge text. |
| Deep Button Plum | `#130b3c` | `--color-deep-button-plum` | surface | Dark button fill on secondary product controls. |
| Muted Violet Edge | `#4b427c` | `--color-muted-violet-edge` | surface | Minor badge or interface detail; avoid using as a large surface. |
| Night Badge | `#1e125b` | `--color-night-badge` | surface | Small badge detail within product UI, not a defining page color. |
| Interface White | `#ffffff` | `--color-interface-white` | neutral | Bright text and button labels; also appears strongly in product mockups and luminous effects. |
| Moonlit Text | `#f4f0ff` | `--color-moonlit-text` | neutral | Primary foreground text and light button or link labels. |
| Silver Haze | `#b4b3b9` | `--color-silver-haze` | neutral | Muted text appearing in measured gradients and interface details. |
| Shadowed Aubergine | `#161326` | `--color-shadowed-aubergine` | surface | Dark supporting interface tone, mostly visible in mockup and border details. |
| Action Indigo | `#5046e4` | `--color-action-indigo` | accent | Filled primary action in product UI, paired with white button text. |
| Badge Violet | `#594fe5` | `--color-badge-violet` | accent | Compact command badge fill; keep it localized to interactive UI details. |
| Glow Lavender | `#b7a4fb` | `--color-glow-lavender` | accent | Soft gradient accent and luminous product-art highlight, not a broad page fill. |

### Semantic aliases

`--color-canvas` → `#030014` (Midnight Violet) · `--color-text` → `#f4f0ff` (Moonlit Text) · `--color-text-muted` → `#aaa7b9` (Quiet Lilac) · `--color-text-subtle` → `#908ea0` (Dusk Gray) · `--color-border` → `#1d1a2c` (Graphite Plum) · `--color-accent` → `#9382ff` (Soft Signal) · `--color-accent-2` → `#5046e4` (Action Indigo) · `--color-accent-3` → `#b7a4fb` (Glow Lavender)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#f4f0ff` | `#030014` | 18.5:1 | AAA |
| `#aaa7b9` | `#030014` | 8.81:1 | AAA |
| `#908ea0` | `#030014` | 6.47:1 | AA |
| `#9382ff` | `#030014` | 6.78:1 | AA |

### Gradients

- `radial-gradient(57.89% 132% at 65.79% -35%, rgba(120, 123, 255, 0.06), rgba(120, 123, 255, 0)), linear-gradient(rgba(255, 255, 255, 0) 54.17%, rgba(255, 255, 255, 0.04)), none`
- `linear-gradient(rgb(255, 255, 255), rgba(255, 255, 255, 0.7))`
- `radial-gradient(50% 44.06% at 50% 0%, rgba(147, 130, 255, 0.08), rgba(147, 130, 255, 0)), none`
- `linear-gradient(rgba(3, 0, 20, 0.8), rgb(3, 0, 20) 37.87%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter V | `--font-body` | webfont | 400, 500 | Body copy, navigation, captions, buttons, links, and interface labels. | Inter |
| AeonikPro | `--font-display` | webfont | 500 | Display headlines and section headings. | Manrope |

- **Inter V:** Use regular and medium weights; sentence case and neutral, readable setting keep controls unobtrusive.
- **AeonikPro:** Measured medium weight; use sentence case, clean rounded forms, and centered presentation for major statements.

### Type scale — Perfect Fourth (ratio ≈ 1.351, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 500 | 1.11 | 0 | — | AeonikPro | Large hero headline introducing the product’s central promise. |
| h1 | 56px | 500 | 1.14 | 0 | — | AeonikPro | Primary hero title and major page-level statements. |
| h2 | 48px | 500 | 1.17 | 0 | — | AeonikPro | Centered feature, pricing, team, and academy section headings. |
| h3 | 32px | 500 | 1.25 | 0 | — | AeonikPro | Secondary headings within feature and product sections. |
| h4 | 24px | 500 | 1.33 | 0 | — | AeonikPro | Compact subheadings and smaller card or feature titles. |
| body | 16px | 400 | 1.5 | 0 | — | Inter V | Main explanatory paragraphs and testimonial copy. |
| caption | 14px | 400 | 1.43 | 0 | — | Inter V | Supporting notes, fine-print pricing details, and eyebrow labels. |
| button | 13px | 400 | normal | 0 | — | Inter V | Download actions and compact interactive controls. |
| link | 16px | 400 | 1.5 | 0 | — | Inter V | Inline navigation, social handles, and calls to explore. |

OpenType features in use: `"calt" 0, "cv10", "liga" 0, "ss01"`.

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 4, 5, 6, 8, 12, 14, 15, 16, 20, 24, 28, 32, 36, 56 px.
- Section rhythm 32px · element gap 12px · card padding 8px · max content width 744px.

The page uses a narrow centered content measure, with the measured maximum width of 744px guiding text and compact content groups. Center-aligned hero and section introductions alternate with two-column feature areas and broad product demonstrations. The canvas remains continuous, so section changes come from content, imagery, and vertical pauses rather than contrasting background bands. Grids are compact and fine-lined; the long-page rhythm leaves generous breathing room around major product stories. Navigation and footer links use compact groupings.

## Shape & elevation

- Radius: button `6px` · card `24px` · badge `4px` · link `8px` · xs `4px` · sm `6px` · md `8px` · lg `16px` · xl `24px` · pill `9999px`
- Shadow `inset` (other, link): `rgba(164, 143, 255, 0.12) 0px -7px 11px 0px inset`
- Shadow `hairline` (other): `rgb(255, 255, 255) 728px 6132px 0px 0px, rgb(255, 255, 255) 1310px 1524px 0px 0px, rgb(255, 255, 255) 1848px 144px 0px 0px, rgb(255, 255, 255) 1980px 1377px 0px 0px, rgb(255, 255, 255) 497px 53px 0px `
- Shadow `hairline-2` (other): `rgb(255, 255, 255) 1360px 5152px 0px 0px, rgb(255, 255, 255) 417px 1106px 0px 0px, rgb(255, 255, 255) 653px 574px 0px 0px, rgb(255, 255, 255) 1821px 1687px 0px 0px, rgb(255, 255, 255) 1610px 747px 0px`
- Shadow `hairline-3` (other): `rgb(255, 255, 255) 940px 6160px 0px 0px, rgb(255, 255, 255) 1463px 1116px 0px 0px, rgb(255, 255, 255) 1423px 367px 0px 0px, rgb(255, 255, 255) 505px 968px 0px 0px, rgb(255, 255, 255) 1962px 1281px 0px`
- Shadow `inset-2` (card): `rgba(255, 255, 255, 0.03) 0px 0px 0px 8px inset`
- Motion: standard transition `0.45s cubic-bezier(0.6, 0.6, 0, 1)` on interactive elements.

Keep surfaces mostly flat against the canvas. Use subtle one-pixel dark-purple hairlines to distinguish cards and controls, with rounded card corners and a faint inset highlight where measured. Avoid heavy drop shadows; depth comes from overlapping interface imagery, restrained borders, and luminous gradients.

## Imagery

The product is shown through dark app-interface mockups and full-width video or media moments, not conventional lifestyle photography. Luminous purple and occasional cyan-blue effects create a focal glow behind interface panels. Keep imagery cropped dramatically and integrated into the dark canvas; treat the bright bloom as product illustration, not a page-wide color palette.

## Components

### Top navigation

Compact horizontal header with logo at left, centered pill-like navigation, and utility links plus a purple Download action at right.

### Hero

Centered eyebrow badge, large AeonikPro headline, muted explanatory copy, paired download links, and a luminous product demonstration below.

### Feature grid

Small icon-led feature items arranged in a compact grid; use muted descriptions, fine dark dividers, and no bright card fills.

### Product card

Dark interface panel with a subtle #1d1a2c border, restrained inset highlight, and rounded corners; imagery supplies most of its contrast.

### Primary action

Compact indigo-violet filled control with white Inter V text, a measured 6px radius, and understated border.

### Pricing choice

Centered device options in two columns, separating free Mac access from paid iPhone and iPad access with concise supporting details.

### Newsletter footer

Dark footer band with grouped product, company, and resource links above a compact email subscription row and legal details.

### Measured component styles

- **Primary button** (“Re-run R”): background #130b3c · text #ffffff · border 1px solid #19152e · radius 6px · padding 0px 6px 0px 12px · 400 13px Inter V
- **Secondary button** (“Replace ⌘↩”): background #5046e4 · text #ffffff · border 1px solid #19152e · radius 6px · padding 0px 6px 0px 12px · 400 13px Inter V
- **Link** (“@reflectnotes”): transparent background · text #9382ff · radius 0px · padding 0px · 400 16px Inter V
- **Input**: transparent background · text #f4f0ff · radius 0px · padding 8px 12px · 400 14px Inter V
- **Card** (“How to use AI to take better notes What ”): transparent background · text #ffffff · border 1px solid #1d1a2c · radius 24px · padding 8px · 400 16px Inter V · shadow rgba(255, 255, 255, 0.03) 0px 0px 0px 8px inset
- **Badge** (“⌘↩”): background #594fe5 · text #ffffff · border 1px solid #6259e7 · radius 4px · padding 0px 5px · 400 12px Inter V

## Do

- Keep the page canvas consistently near-black violet.
- Use lavender accents sparingly for links and emphasis.
- Reserve brighter violet fills for primary actions and UI details.
- Center section introductions and keep headings in sentence case.
- Use generous vertical pauses between major product stories.
- Let product imagery provide the strongest color and glow.

## Don't

- Do not introduce bright section backgrounds.
- Do not turn the glow colors into large solid surfaces.
- Do not use heavy shadows to separate every card.
- Do not make supporting copy compete with the headlines.
- Do not crowd the spacious page rhythm with dense content.
- Do not treat mockup-only colors as core brand colors.

## Agent prompt

Create a new Reflect-style page using Midnight Violet (#030014) as a continuous canvas. Use Moonlit Text (#f4f0ff) for prominent copy, Quiet Lilac (#aaa7b9) and Dusk Gray (#908ea0) for supporting text, and Soft Signal (#9382ff) for links. Reserve Action Indigo (#5046e4) for primary filled controls and Glow Lavender (#b7a4fb) for localized product-art gradients. Set display headings in AeonikPro or a close geometric sans substitute, with Inter for body text and controls. Center the major introductions; alternate them with compact feature grids and broad dark product demonstrations. Keep cards understated with thin Graphite Plum (#1d1a2c) borders, rounded corners, and minimal elevation. Preserve generous vertical pauses, concise copy, and strong contrast between quiet interface surfaces and luminous product imagery.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline, supporting copy, download links, and product promise. | primary download, secondary device link, concise value proposition | eyebrow badge, large centered title, muted body copy |
| 2 | video | Wide, dark product demonstration centered beneath the hero. | play affordance, product preview | dark app mockup, purple glow, wide media framing |
| 3 | feature-grid | Centered section intro followed by product art and a compact capability grid. | AI feature discovery, capability scanning | centered heading, dark interface illustration, icon-led items |
| 4 | feature-split | Centered feature introduction over a two-column supporting feature area. | feature explanation, related capabilities | glowing product art, two-column details, subtle dividers |
| 5 | other | Small centered text block with a brief label and supporting copy. | contextual information | centered typography, minimal controls |
| 6 | pricing | Centered introduction above a two-column Mac and iPhone/iPad choice. | compare device plans, download by platform | two-column options, large price labels, compact action links |
| 7 | comparison | Centered explanatory copy with two compact account actions. | migration reassurance, account access | centered heading, short paragraphs, paired actions |
| 8 | testimonials | Centered section title above a multi-column collection of testimonials. | social proof, testimonial browsing | dark quote cards, fine borders, muted text |
| 9 | testimonials | Continues the testimonial collection in a wide, multi-column arrangement. | continued social proof, quote scanning | dark cards, subtle separators, compact author details |
| 10 | team | Centered team statement with concise mission copy and a small link. | company introduction, values discovery | large centered heading, muted supporting copy |
| 11 | other | Single visual element within a quiet, spacious section. | brand storytelling | sparse composition, dark canvas, soft product imagery |
| 12 | cta | Centered academy headline, supporting copy, and one course action. | course discovery, single call to action | centered section, small eyebrow, media support |
| 13 | video | Wide media element in a dark, low-density section. | video playback, product discovery | dark video area, subtle controls |
| 14 | footer | Three-column navigation above newsletter controls and a final legal row. | site navigation, email subscription, legal links | grouped link lists, email field, fine separators |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/reflect-app