What is Reflect's primary brand color?

Reflect's canvas color is a near-black indigo at "#060317" — measurable oklch hue 287, distinguishable from true black on calibrated displays. The primary voltage is lavender "#9382ff" used for the single trial-CTA pill and a few link emphases (count 41 across the page). The electric stop "#5439ff" appears as a deeper gradient terminator inside the portals (6 fills). There is no secondary brand color outside the gradient family.

What typography does Reflect use, and what should I use if AeonikPro isn't available?

Display runs AeonikPro at weight 500 across 24/32/48/56/72px sizes — the brand commits to one weight on display rather than stacking 500/600/700. Body holds Inter V at 13/14/16/18px in weights 400 and 500. AeonikPro is licensed via CoType Foundry; the closest open substitute is Geist Sans at weight 500, which matches AeonikPro's geometric proportions and slightly soft terminals. Inter V is freely available — use it verbatim for the body tier.

What are the purple portals on the Reflect homepage?

Reflect breaks every section with a luminous gradient portal — a purple-pink singularity above the daily-notes panel, a violet pyramid beneath the AI assistant section, and a sky-blue spire over the second-brain demo. Each is composed from the five-stop violet gradient ("#787bff", "#ba9cff", "#9cb2ff", "#e59cff", "#5439ff") rendered as a radial bloom. They function as section anchors — the design move that replaces product-screenshot panels on Linear or Notion.

Why is there only one CTA on the entire page?

The only filled button across 4300px of scroll is the lavender "Start free trial" pill at 6px radius in the top-right of the nav, and a repeat of the same pill in the footer. Every other interactive element is an unstyled text link in "#efedfd" — the brand uses link emphasis where most SaaS sites would stack three or four CTAs. Where most note-taking tools push trial signups every section, Reflect trusts the portal visuals to carry the story.

Can I use this DESIGN.md to build my own React note-taking tool?

Yes — drop the file into Claude, Cursor, or any AI tool that reads structured design tokens, and the agent will reproduce Reflect's restraint: indigo canvas, single-weight display ramp, portal section anchors. Reference the tokens directly inside Tailwind config or CSS variables — every color, type style, radius, and spacing value is a quoted scalar. The 18 component definitions map cleanly onto common React patterns — top-nav, feature grid, panel cards, prompt input, and the trial-CTA pill.

What's missing from this DESIGN.md spec?

A handful of things, documented in the Known Gaps section: form-field error and validation styling is not surfaced on the inspected marketing pages; light mode is not documented because Reflect's marketing site is dark-only; the in-app editor surfaces (backlink popovers, command menu, daily-note timeline) live in a separate UI not captured here; and the gradient portals are rendered as bitmap webp art rather than CSS-composable radial gradients, so the spec captures the contributing color stops but not the rendering pipeline.

Reflect Design System

Reflect's design system as a DESIGN.md file.

About Reflect DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source reflect.app

Productivity & SaaS
AI & LLM Platforms

Reflect's marketing canvas is the rare dark-mode site that refuses pure black — the page floor sits at "#060317", a near-black indigo with a measurable violet cast (oklch hue 287). On top, the brand renders three luminous portals: a purple-pink singularity above the daily-notes screenshot, a violet pyramid beneath the AI assistant section, and a sky-blue spire over the second-brain demo. Each portal is composed from a five-stop gradient family running periwinkle "#787bff", orchid "#ba9cff", lilac "#9cb2ff", magenta "#e59cff", and electric voltage "#5439ff". There is no second canvas color, no white interlude, no light-mode flip — the entire 4300px scroll holds the indigo floor.

This page packages the spec into one DESIGN.md file written to the Google Labs format. Inside: 18 color tokens grouped into canvas, ink, hairline, and a five-stop violet gradient family; 14 typography levels mapping AeonikPro at sizes 24/32/48/56/72px weight 500 for display and Inter V at 12/13/14/16/18px for body; a 6-step rounded scale anchored on 6px buttons and 8px cards; a 9-step spacing scale on an 8px base; and 18 component definitions covering the lavender CTA pill, feature-grid icon tiles, the daily-notes panel, the AI prompt input, the dark top-nav, and the section-portal frame.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces Reflect's restraint — the indigo-not-black canvas, the single-weight display ramp, the portal-as-anchor rhythm — rather than a generic dark theme. Or reference the tokens directly: every hex, font, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. Reflect is worth studying because it proves a note-taking tool can earn its "second brain" pitch through atmospheric visuals — the purple portals do the work that product screenshots do on Linear or Notion.

What makes it distinct

Indigo-not-black canvas#060317 with a measurable violet hue (oklch h=287), never the default #000000 that most dark-mode sites fall into
Five-stop violet gradient familyperiwinkle #787bff, orchid #ba9cff, lilac #9cb2ff, magenta #e59cff, electric #5439ff — used as section portals, not as accent fills
AeonikPro at weight 500 across every display tierthe brand commits to one weight and varies size 24/32/48/56/72px instead of stacking 500/600/700
Single CTA per pagethe lavender "Start free trial" pill at 6px radius is the only filled button visible across 4300px of scroll
Border-only purple#efedfd appears 153 times as borderColor and 153 times as text, zero times as bg fill, the brand's hairline voltage

Live at reflect.app

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

reflect.app

Explore Reflect

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Reflect design system FAQ

Common questions about Reflect's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Reflect — official site

Reflect's marketing page — daily notes, networked thought, and the GPT-4 + Whisper AI assistant.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Reflect in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→