--- version: alpha name: Reflect website: "https://reflect.app" description: >- A dark-canvas note-taking system anchored on a near-black indigo floor ("#060317") with a violet-spectrum gradient family — lavender ("#9382ff"), periwinkle ("#787bff"), orchid ("#ba9cff"), and electric voltage ("#5439ff") — that renders the brand's signature singularity portals and atmospheric god-rays. Display runs AeonikPro at 72/56/48px in weight 500 with neutral tracking; body holds Inter V at 13–18px. The page rhythm leans on luminous purple-pink portals as section anchors rather than product screenshots, and the only CTA on the page is the "Start free trial" pill in lavender over the indigo floor. seo: title: "Reflect Design System for React — Indigo #060317, AeonikPro, 18 components" metaDescription: "Reflect's design system as a DESIGN.md file. Indigo #060317, lavender #9382ff, AeonikPro display. For React, Next.js, and AI tools." highlights: - "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 family — periwinkle #787bff, orchid #ba9cff, lilac #9cb2ff, magenta #e59cff, electric #5439ff — used as section portals, not as accent fills" - "AeonikPro at weight 500 across every display tier — the brand commits to one weight and varies size 24/32/48/56/72px instead of stacking 500/600/700" - 'Single CTA per page — the 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" tags: - "Productivity & SaaS" - "AI & LLM Platforms" lastUpdated: "2026-05-13" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://reflect.app" title: "Reflect — official site" description: "Reflect's marketing page — daily notes, networked thought, and the GPT-4 + Whisper AI assistant." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is Reflect's primary brand color?" answer: "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." - id: "typography" title: "What typography does Reflect use, and what should I use if AeonikPro isn't available?" answer: "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." - id: "portals" title: "What are the purple portals on the Reflect homepage?" answer: "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." - id: "single-cta" title: "Why is there only one CTA on the entire page?" answer: "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." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own React note-taking tool?" answer: "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." - id: "known-gaps" title: "What's missing from this DESIGN.md spec?" answer: "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." colors: canvas: "#060317" ink: "#ffffff" ink-muted: "#efedfd" ink-link: "#9382ff" hairline: "#efedfd" primary: "#9382ff" primary-deep: "#5046e4" primary-electric: "#5439ff" primary-hover: "#a87fff" gradient-periwinkle: "#787bff" gradient-orchid: "#ba9cff" gradient-lilac: "#9cb2ff" gradient-magenta: "#e59cff" gradient-violet: "#8562ff" gradient-fuchsia: "#fc72ff" gradient-azure: "#487bff" gradient-cyan: "#2cd9ff" gradient-mint: "#2cffcc" shadow-violet: "#a48fff" border-violet: "#c4bbff" inverse: "#000000" typography: display-xxl: fontFamily: "AeonikPro, system-ui, -apple-system, sans-serif" fontSize: 72px fontWeight: 500 lineHeight: 1.11 letterSpacing: 0 display-xl: fontFamily: "AeonikPro, system-ui, -apple-system, sans-serif" fontSize: 56px fontWeight: 500 lineHeight: 1.14 letterSpacing: 0 display-lg: fontFamily: "AeonikPro, system-ui, -apple-system, sans-serif" fontSize: 48px fontWeight: 500 lineHeight: 1.17 letterSpacing: 0 display-md: fontFamily: "AeonikPro, system-ui, -apple-system, sans-serif" fontSize: 32px fontWeight: 500 lineHeight: 1.25 letterSpacing: 0 display-sm: fontFamily: "AeonikPro, system-ui, -apple-system, sans-serif" fontSize: 24px fontWeight: 500 lineHeight: 1.33 letterSpacing: 0 body-lg: fontFamily: "\"Inter V\", system-ui, -apple-system, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.56 letterSpacing: 0 body-md: fontFamily: "\"Inter V\", system-ui, -apple-system, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 body-md-strong: fontFamily: "\"Inter V\", system-ui, -apple-system, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0 body-sm: fontFamily: "\"Inter V\", system-ui, -apple-system, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.43 letterSpacing: 0 body-sm-strong: fontFamily: "\"Inter V\", system-ui, -apple-system, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.43 letterSpacing: 0 label-md: fontFamily: "\"Inter V\", system-ui, -apple-system, sans-serif" fontSize: 13px fontWeight: 500 lineHeight: 1.85 letterSpacing: 0 body-xs: fontFamily: "\"Inter V\", system-ui, -apple-system, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 1.85 letterSpacing: 0 micro: fontFamily: "\"Inter V\", system-ui, -apple-system, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.33 letterSpacing: 0 button-md: fontFamily: "\"Inter V\", system-ui, -apple-system, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.43 letterSpacing: 0 rounded: xs: "4px" sm: "6px" md: "8px" lg: "16px" xl: "32px" full: "999px" spacing: xxs: "2px" xs: "4px" sm: "8px" md: "12px" base: "16px" lg: "20px" xl: "24px" xxl: "32px" huge: "48px" components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: "6px 14px" border: "0" button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: "6px 14px" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: "6px 14px" border: "1px solid {colors.hairline}" link-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm-strong}" rounded: "{rounded.xs}" padding: "8px 16px" pill-eyebrow: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.label-md}" rounded: "{rounded.full}" padding: "4px 8px" border: "1px solid {colors.hairline}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm-strong}" rounded: "{rounded.xs}" padding: "12px 20px" height: "64px" feature-tile: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.md}" padding: "24px 28px" border: "1px solid {colors.hairline}" daily-notes-panel: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.lg}" padding: "24px 32px 36px" border: "1px solid {colors.hairline}" prompt-input-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.body-sm}" rounded: "{rounded.lg}" padding: "12px 16px 16px" border: "1px solid {colors.border-violet}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.body-sm}" rounded: "{rounded.sm}" padding: "8px 12px" height: "36px" border: "1px solid {colors.hairline}" ai-cta-link: backgroundColor: "{colors.canvas}" textColor: "{colors.primary}" typography: "{typography.body-sm-strong}" rounded: "{rounded.xs}" padding: "4px 8px" border: "0" feature-row-item: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.body-sm}" rounded: "{rounded.md}" padding: "12px" border: "0" portal-frame: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-xl}" rounded: "{rounded.xl}" padding: "48px" border: "0" date-pill: backgroundColor: "{colors.primary}" textColor: "{colors.ink}" typography: "{typography.body-sm-strong}" rounded: "{rounded.full}" padding: "4px 8px" calendar-cell: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.body-sm}" rounded: "{rounded.xs}" padding: "4px" icon-tile: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.body-xs}" rounded: "{rounded.sm}" padding: "8px" height: "32px" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.body-xs}" rounded: "{rounded.xs}" padding: "48px 24px" divider-hairline: backgroundColor: "{colors.hairline}" textColor: "{colors.ink-muted}" typography: "{typography.micro}" rounded: "{rounded.xs}" padding: "0" height: "1px" --- ## Overview Reflect's marketing canvas is a dark-mode system that refuses pure black — `{colors.canvas}` is "#060317", a near-black indigo whose oklch hue (287) sits squarely in the violet spectrum. The page floor reads as deep space rather than the default `#000000` that most note-taking tools fall into. Body type runs `{colors.ink}` ("#ffffff") and `{colors.ink-muted}` ("#efedfd") — that off-white with a faint lavender cast appears 306 times across the page as both border and text, never as a background fill. The brand's signature move is **portals-as-anchor**: each section break is anchored by a luminous radial gradient — a purple-pink singularity above the daily-notes panel, a violet pyramid beneath the AI assistant section, a sky-blue spire over the second-brain demo. The portals are composed from a five-stop gradient family running `{colors.gradient-periwinkle}` ("#787bff"), `{colors.gradient-orchid}` ("#ba9cff"), `{colors.gradient-lilac}` ("#9cb2ff"), `{colors.gradient-magenta}` ("#e59cff"), and `{colors.primary-electric}` ("#5439ff"). Where Linear leads with product UI screenshots and Notion leads with embedded demos, Reflect leads with atmospheric color. Display type runs **AeonikPro at one weight** — 500 across every tier from 72px down to 24px. The brand commits to a single weight and varies size only, rather than the 400/500/600/700 stack most SaaS systems deploy. Body holds Inter V at 13/14/16/18px in weights 400 and 500. Line-heights stay generous (1.5 on body, 1.85 on label-md). The **single-CTA rule** governs interactive density. The only filled button across 4300px of scroll is the lavender "Start free trial" pill at `{rounded.sm}` 6px radius, repeated twice (top-nav and footer). Every other interactive element is an unstyled text link in `{colors.ink-muted}`. Where most productivity tools push trial signups every band, Reflect trusts the portal visuals to carry the story. **Key Characteristics:** - **Indigo-not-black canvas** — `{colors.canvas}` "#060317" with oklch hue 287, never the default true black. - **Five-stop violet gradient family** — periwinkle, orchid, lilac, magenta, electric — used as portal anchors, never as flat fills. - **Single-weight display ramp** — AeonikPro at weight 500 across 24/32/48/56/72px. - **Border-only purple voltage** — `{colors.ink-muted}` "#efedfd" appears 153 times as borderColor and 153 times as text, zero times as bg. - **One CTA per page** — the lavender `{colors.primary}` ("#9382ff") pill at 6px radius is the only filled button visible. - 6px and 8px corners govern buttons and tiles; 16px and 32px reserved for panels and portal frames. - No second canvas color; no white interlude; no light-mode flip across the full scroll. ## Colors The palette divides into three layers: canvas + ink, the violet voltage family, and the gradient stops used inside the portal compositions. - **Indigo canvas (`#060317`)** — frequency 44. Used as bg (40), gradient (4). The page floor — every section, every panel, the nav, the footer. Oklch hue 287 places it in the violet spectrum, not neutral black. - **White ink (`#ffffff`)** — frequency 1533. Used as text (651), border (636), bg (53), gradient (131), shadow (62). The dominant text color and the structural hairline color on hero cards. - **Lavender ink-muted (`#efedfd`)** — frequency 306. Used as text (153), border (153). The off-white with a faint violet cast that carries secondary body text and every hairline border on the page. Never appears as a bg fill — a deliberate `border + text` token. - **Lavender primary (`#9382ff`)** — frequency 41. Used as text (20), border (20), gradient (1). The trial-CTA pill, the link emphasis, the date-pill in the calendar. The brand's load-bearing voltage despite its low total. - **Periwinkle (`#787bff`)** — frequency 16. Used as gradient (16). A pure gradient stop — never as text or fill. Lives inside the portal compositions. - **Orchid (`#ba9cff`)** — frequency 20. Used as gradient (20). The brightest violet gradient stop, used at the bloom centers. - **Lilac (`#9cb2ff`)** — frequency 13. Used as gradient (13). The cooler periwinkle-leaning stop in the second-brain spire. - **Magenta (`#e59cff`)** — frequency 13. Used as gradient (13). The pink-leaning warmth in the purple-pink singularity portal. - **Violet (`#8562ff`)** — frequency 8. Used as gradient (8). The mid-stop voltage between periwinkle and electric. - **Electric (`#5439ff`)** — frequency 6. Used as bg (6). The deepest gradient terminator and the rare saturated fill inside the portal cones. - **Shadow-violet (`#a48fff`)** — frequency 12. Used as shadow (12). The single shadow color across the page — purple-tinted, never neutral gray. - **Border-violet (`#c4bbff`)** — frequency 7. Used as border (7). The AI prompt-input card's signature 1px hairline. ## Typography Reflect runs two families: **AeonikPro** for display (24/32/48/56/72px, weight 500 only) and **Inter V** for body (12/13/14/16/18px, weights 400 and 500). The hero h1 sits at 72px / 80px leading, the section h2s at 56px / 64px, and the third-tier headings at 48px / 56px and 32px / 40px. Every display tier holds the same weight 500 — the brand never reaches for bold. Body type splits across two roles. The 13px label-md and 13px body-xs tokens carry the bulk of the daily-notes panel and the calendar cells; 14px body-sm carries nav links, button labels, and feature-tile descriptions; 16px body-md carries paragraphs and longer marketing copy; 18px body-lg is reserved for the hero sub-headline ("Never miss a note, idea or connection.") and one or two opening paragraphs per portal section. Letter-spacing holds at 0 across every tier — the brand doesn't reach for negative tracking the way Linear does, because AeonikPro's geometric proportions already read as compressed at weight 500. Line-heights run generous: 1.5 on body, 1.85 on the 13px label-md, 1.11 on the 72px display. This combination — single-weight display, generous body leading, and zero tracking — distinguishes Reflect from the dense Inter-at-560 productivity stacks like Linear and Superhuman. ## Layout The page width caps at 1440px with most sections holding center-aligned 720–900px content blocks. Spacing follows an 8px base unit — `{spacing.sm}` 8px appears 40 times as the dominant gap, with the `{spacing.xl}` 24px outer gutter and `{spacing.lg}` 20px inside-panel rhythm following close behind. Padding shorthand `12px 20px` (count 20) and `24px 28px` (count 16) govern the feature tiles and the daily-notes panel respectively. Section breaks are vertical — each portal sits as a 600–800px tall vertical anchor between content bands, separated by `{spacing.huge}` 48px gutters on top and bottom. The feature-grid sits as a 4-column tile arrangement at the top (Built for speed / Networked notes / iOS app / End-to-end encryption) over a second 4-column row (Calendar integration / Publishing / Instant capture / Frictionless search). Each tile holds a 24px icon at top-left, a 14px title in weight 500, and a 13px description in weight 400 with 1.85 leading. ## Elevation & Depth Reflect avoids drop shadows almost entirely — the only shadow token, `{colors.shadow-violet}` ("#a48fff"), appears 12 times and is purple-tinted rather than the conventional neutral gray. Elevation comes from two moves: **portal luminance** (the radial gradient bloom that lights neighboring sections from below) and **hairline-on-canvas** (1px borders in `{colors.hairline}` "#efedfd" or the deeper `{colors.border-violet}` "#c4bbff" around the AI prompt card). Where most dark-mode systems lift surfaces via a 3-step surface ladder, Reflect holds every panel at `{colors.canvas}` "#060317" and lifts only through the portal glow. ## Shapes Six corner-radius tokens govern the system, with a clear hierarchy by use: - `{rounded.xs}` 4px — calendar cells, small icon containers, nav-link hit zones - `{rounded.sm}` 6px — the trial-CTA pill, secondary buttons, the text-input box (count 35) - `{rounded.md}` 8px — feature tiles, icon containers, the daily-notes search field (count 43, the most common radius) - `{rounded.lg}` 16px — the daily-notes panel, the prompt-input card (count 17) - `{rounded.xl}` 32px — the portal-frame and the wide section containers (count 12) - `{rounded.full}` 999px — date-pill in the calendar, eyebrow-pill above each section heading (count 1) The system favors 6px and 8px on interactive elements — never the 12px or 14px that many SaaS systems default to. Cards and panels lift to 16px; the portal frames push to 32px. There's no 24px tier and no pill-button — the only `9999px` shape is the small pill used as section eyebrow ("Reflect AI", "All your notes, connected"). ## Components Eighteen component definitions cover the marketing surface: - `button-primary` — the lavender trial-CTA pill, 6px radius, "#9382ff" fill on indigo canvas - `button-primary-hover` — lifts to "#a87fff" - `button-secondary` — the rare outlined alternative, 1px hairline border on canvas - `link-nav` — top-nav links (Product, Pricing, Company, Blog, Changelog) in body-sm-strong - `pill-eyebrow` — the small 999px pill above each section ("Reflect AI", "All your notes, connected") - `top-nav` — fixed dark bar, 64px tall, 12px 20px padding - `feature-tile` — the 4-column grid tiles (Built for speed, etc.), 8px radius, 24px 28px padding - `daily-notes-panel` — the central product mockup framed at 16px radius with hairline border - `prompt-input-card` — the AI assistant input ("How to use AI to take better notes"), 16px radius, signature `{colors.border-violet}` purple hairline - `text-input` — the search-anything field, 6px radius, 36px height - `ai-cta-link` — the "+ Click to see magic" link in lavender over the prompt card - `feature-row-item` — the 3-up "Transcribe / Generate / List takeaways" tiles below the AI portal - `portal-frame` — the wide section container that holds each portal composition, 32px radius - `date-pill` — the lavender filled date marker in the April 2023 calendar (the "2") - `calendar-cell` — the bare numeric cell at 4px radius - `icon-tile` — the 32px-tall icon container inside each feature tile - `footer` — the closing band at 48px 24px padding in body-xs - `divider-hairline` — the 1px hairline rule between major sections ## Do's and Don'ts **Do** - Use `{colors.canvas}` "#060317" as the page floor — its oklch hue 287 is the brand signature, not neutral darkness. - Render the portal compositions as radial gradients with the full five-stop violet family. Pulling out any single stop weakens the bloom. - Hold display at AeonikPro weight 500. The single-weight ramp is the typographic move. - Use `{colors.ink-muted}` "#efedfd" for both 1px borders and secondary text — the dual-role usage is deliberate. **Don't** - Don't use `{colors.gradient-periwinkle}` "#787bff" as a text or button color — it's a gradient-only stop (16 occurrences, all as `gradient`). For brand voltage on text, use `{colors.primary}` "#9382ff" instead. - Don't stack multiple CTAs in a single section. The brand uses one filled button per page (the trial pill, repeated nav + footer). Adding a second filled CTA breaks the single-CTA rule. - Don't reach for weight 700 on display headings — AeonikPro at weight 500 carries every tier from 72px down to 24px. Pushing to 600 or 700 breaks the single-weight ramp. - Don't use a 12px corner radius. The system jumps from 8px tiles directly to 16px panels; the missing 12px tier is intentional. - Don't fill `{colors.ink-muted}` "#efedfd" as a background — it appears 0 times as bg across 1956 elements. For light surfaces inside a dark composition, use a `{colors.canvas}` panel with a 1px `{colors.hairline}` border instead. - Don't replace the purple-tinted `{colors.shadow-violet}` "#a48fff" with a neutral gray shadow. Reflect's elevation reads as atmospheric because the shadow color sits inside the brand gradient family. ## Known Gaps - Form-field error and validation styling is not surfaced on the inspected marketing pages. - Light mode is not documented because Reflect's marketing site ships dark-only. - The in-app editor surfaces (backlink popovers, command menu, daily-note timeline, graph view) live in a separate UI language not captured here. - The portal compositions are rendered as bitmap `.webp` art rather than CSS-composable radial gradients — the spec captures the contributing color stops but not the rendering pipeline (radial position, blur radius, opacity ramp). - AeonikPro is licensed via CoType Foundry and not free-tier distributed; the spec documents the font name only. - Motion vocabulary (scroll-triggered portal fades, daily-note typewriter effect) is not captured in static tokens.