--- version: alpha name: "Mem" website: "https://get.mem.ai" description: >- An AI note-taking app whose recent rebrand goes editorial-romantic — a 90px Ritual VF Variable serif-flavored display headline ("A match for great minds") in deep indigo #100f31 on a warm cream canvas, with no CTA inside the hero band. Pill-rounded illustration tiles sit beside the headline in saturated cream, cobalt, terracotta, and a portrait photo, each at 100px corner radius. The system runs zero brand-blue voltage in the chrome — the only blue is the browser-default #0000ee on text links — and trusts a single typeface at weight 400 across every tier to do the entire visual job. seo: title: "Mem Design System for React — deep indigo on warm cream, Ritual VF Variable, 12 components" metaDescription: "Mem's marketing system pairs a 90px Ritual VF Variable display headline in deep indigo with pill-rounded illustration tiles at 100px radius on a warm cream canvas. Tokens for React, Next.js, and AI coding tools." highlights: - "Browser-default link blue — Mem deliberately leaves text links at #0000ee, the literal browser default, instead of styling them in a brand color" - "Ritual VF Variable at one weight — weight 400 across every tier from the 90px hero headline to 16px body, no bold variant anywhere on the page" - "100px pill geometry on tiles — illustration cards use a 100px corner radius that makes them read as soft pebbles rather than rectangles" - "Warm cream canvas — the page reads as warm cream because the illustration tiles, fonts, and indigo ink all carry warm undertones over a literal white canvas" - "Indigo ink for everything — deep indigo carries headline, body, and nav at a single tone, not a tiered ink ladder" tags: - "Productivity & SaaS" - "AI & LLM Platforms" lastUpdated: "2026-05-18" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | Mem's recent rebrand commits to a move that no other AI productivity tool in the directory makes: editorial-romantic. The hero is a 90px Ritual VF Variable display headline ("A match for great minds") in deep indigo on a warm cream canvas, with the descender of the y dropping below the baseline of the next line as if it were typeset in a literary quarterly. To the right of the headline, a 2x2 grid of pill-rounded illustration tiles — a cobalt circle, a terracotta square with an arrow, a warm cream notepad, and a small portrait photograph — sit at a 100px corner radius that turns them into pebbles. There is no CTA inside the hero band; the visitor scrolls. The DESIGN.md file captures the system as a token spec for React tooling. Inside: 6 color tokens (Mem deliberately runs a minimal palette — there is essentially no brand-blue voltage in the chrome), 9 typography tokens all on Ritual VF Variable at weight 400, a 3-step radius scale anchored at 100px pill, a 10px-based spacing system, and 12 component definitions covering the pill-illustration tile, the editorial display heading, the indigo body paragraph, and the no-chrome top nav. The single most distinctive token absence: there is no styled link color. Mem leaves the browser default #0000ee on text links. Feed this file to an AI coding tool and it reproduces the specific moves: 90px / 80px display headlines on the same single sans-serif, weight 400 across every tier, indigo-on-cream contrast instead of black-on-white, 100px pebble-pill tiles instead of rectangular cards, and the disciplined refusal to style link colors. Borrow the geometry and the typeface restraint freely. The one move to think twice about is the unstyled link color — Mem gets away with it because the editorial composition of the page reframes the default-blue as a typographic choice; on a more conventional layout it would just read as forgotten styling. 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://get.mem.ai" title: "Mem — official site" description: "Mem's public marketing site — the source of truth for the live tokens captured in this file." - 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 Mem's primary brand color?" answer: "Mem's chrome runs almost entirely without a saturated brand voltage. The dominant chromatic ink is deep indigo #100f31, used as both heading and body text on the warm-cream canvas. The only blue that appears in the system is #0000ee — the literal browser-default link color — used as the underlined text-link color on the page. Mem deliberately does not style it. The result is a palette of six tones: pure white as canvas, deep indigo as ink, mid-grey #707070 and #888888 as muted ink, pure black as a heavier text option, and the browser default blue as the link tone. The colorful tiles in the hero (cobalt, terracotta, cream) are illustration assets, not declared system colors." - id: "typography" title: "What typeface does Mem use, and what should I use as a substitute?" answer: "Mem runs Ritual VF Variable across every typographic tier. Display headlines sit at 90px and 80px with -3.6px to -3.2px letter-spacing in weight 400; sub-headlines at 32px with -1.28px tracking; body copy at 21px and 18px; small chrome at 16px — every size in the system uses weight 400, no bold tier anywhere on the page. Ritual VF Variable is a contemporary variable sans with display-serif undertones, designed by Mass-Driver. The closest open-source substitute is Inter at the same weights for body tiers and Fraunces or PP Editorial New for the display tiers if you want to preserve the editorial-romantic feel. The 90px hero size with negative -3.6px tracking is the move worth preserving." - id: "no-cta-hero" title: "Why is there no CTA in Mem's hero?" answer: "The captured page has no primary CTA button inside the hero band — no Get Started pill, no Download button, no Sign Up surface above the fold. The right side of the hero is occupied by a 2x2 grid of pill-rounded illustration tiles, and below the headline sits a single body paragraph and the page continues. The CTA, when it appears, lives further down the page near the bottom. This is the editorial-magazine move — the front page is a piece of typographic composition rather than a conversion funnel. It only works because the brand is selling a personal-knowledge product where the visitor needs to absorb the conceptual frame before they sign up." - id: "pill-geometry" title: "What is Mem's radius scale?" answer: "Mem's radius scale is anchored on 100px — the pill geometry that defines the brand. Tile illustrations in the hero, accent containers, and pill buttons all use this 100px value (12 occurrences on the page); smaller secondary pills sit at 60px (3 occurrences); a single 28px appears on inline chips. There is no 4-8px small-step tier and no full 9999px tier — every rounded surface in the system uses one of three pill radii. The 100px value, on tiles that are roughly 200px square, renders as a soft pebble — neither a rectangle nor a circle, but somewhere in between, with corners that flow into edges rather than meeting them at a tangent." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own editorial AI productivity site?" answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Mem's specific moves: warm cream canvas instead of pure white, deep indigo ink (#100f31) instead of pure black, 100px pebble-pill tiles instead of rectangular cards, Ritual VF Variable (or substitute) at weight 400 across every tier with no bold variant, and the no-CTA editorial hero pattern. The token references resolve cleanly. The most borrow-able move is the single-weight discipline — 400 everywhere — which makes the page read as a typographic composition rather than a SaaS landing. The least borrow-able move is the unstyled link color; it only works because the page is composed editorially." mockups: - "marketing-hero" - "editorial-article" colors: ink: "#100f31" ink-strong: "#000000" ink-muted: "#707070" ink-soft: "#888888" canvas: "#ffffff" link: "#0000ee" typography: display-xl: fontFamily: "\"Ritual VF Variable\", system-ui, sans-serif" fontSize: 90px fontWeight: 400 lineHeight: 76.5px letterSpacing: "-3.6px" display-lg: fontFamily: "\"Ritual VF Variable\", system-ui, sans-serif" fontSize: 80px fontWeight: 400 lineHeight: 80px letterSpacing: "-3.2px" display-md: fontFamily: "\"Ritual VF Variable\", system-ui, sans-serif" fontSize: 32px fontWeight: 400 lineHeight: 38.4px letterSpacing: "-1.28px" body-xl: fontFamily: "\"Ritual VF Variable\", system-ui, sans-serif" fontSize: 21px fontWeight: 400 lineHeight: 33.6px letterSpacing: 0 body-lg: fontFamily: "\"Ritual VF Variable\", system-ui, sans-serif" fontSize: 21px fontWeight: 400 lineHeight: 27.3px letterSpacing: 0 body-md: fontFamily: "\"Ritual VF Variable\", system-ui, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 23.58px letterSpacing: 0 body-sm: fontFamily: "\"Ritual VF Variable\", system-ui, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 20.8px letterSpacing: 0 caption: fontFamily: "\"Ritual VF Variable\", system-ui, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 20.8px letterSpacing: 0 icon-glyph: fontFamily: "\"Material Icons\", monospace" fontSize: 18px fontWeight: 400 lineHeight: 18px letterSpacing: 0 rounded: none: "0px" md: "28px" lg: "60px" pill: "100px" spacing: xxs: "2px" xs: "8px" sm: "10px" base: "16px" lg: "24px" xl: "32px" 2xl: "64px" components: button-primary: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.body-sm}" rounded: "{rounded.pill}" padding: "15px 23px" height: "48px" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.pill}" padding: "15px 23px" height: "48px" borderColor: "{colors.ink}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: "14px 32px" height: "64px" nav-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-sm}" padding: "10px" hero-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-xl}" padding: "0px" section-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-lg}" padding: "0px 64px" sub-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-md}" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-xl}" body-paragraph-sm: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-sm}" pill-tile: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.pill}" padding: "40px" inline-link: backgroundColor: "transparent" textColor: "{colors.link}" typography: "{typography.body-md}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.pill}" padding: "15px 23px" height: "48px" borderColor: "{colors.ink}" card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "24px" borderColor: "{colors.ink-muted}" --- ## Overview Mem's rebrand commits to a treatment no other AI productivity brand in the directory makes. **Editorial-romantic.** The hero is a 90px Ritual VF Variable display headline ("A match for great minds") in deep indigo (`{colors.ink}` — #100f31) on a warm cream canvas, with the descender of the y dropping below the next line's baseline as if typeset in a literary quarterly. To the right of the headline sits a 2x2 grid of pill-rounded illustration tiles — a cobalt circle, a terracotta square with an arrow, a warm cream notepad mockup, and a small portrait photograph — each at a 100px corner radius that turns them into soft pebbles. Where Notion stacks rectangular product screenshots above the fold and Reflect leans on dark-mode plus a saturated accent, Mem refuses both conventions and runs the hero as a piece of typographic composition. The chromatic palette is the second move that sets the system apart. There is **no styled brand voltage in the chrome**. The only blue on the page is `{colors.link}` (#0000ee) — the literal browser-default text-link color, left unstyled. Most rebrands that introduce a new typeface also introduce a new brand voltage; Mem introduces the typeface and deliberately keeps the chromatic palette to six tones (indigo ink, two greys, pure black, pure white canvas, and the browser-default link blue). The colorful tiles in the hero are illustration assets, not declared system colors. The whole page reads warm cream rather than stark white because the indigo ink, the warm-undertone illustrations, and the Ritual typeface's slightly humanist proportions all carry warm undertones — the canvas hex itself is `{colors.canvas}` (#ffffff). Typography sits at **one weight across every tier**. Ritual VF Variable runs at weight 400 from the 90px display headline down to the 16px navigation labels, with no bold variant anywhere on the page. The hierarchy comes entirely from size and letter-spacing — the 90px hero at -3.6px tracking, the 80px section headings at -3.2px, the 32px sub-headings at -1.28px. Below 32px the tracking returns to 0. This is the typographic move that defines the brand: confidence by single-weight discipline. **Key Characteristics:** - Single-weight typography — Ritual VF Variable at weight 400 runs every tier from 90px hero to 16px nav, no bold variant declared. - Indigo-on-cream contrast — `{colors.ink}` (#100f31) deep indigo as text on warm-cream canvas, never black-on-white. - 100px pill geometry — the dominant radius (12 occurrences) used on illustration tiles, buttons, and inputs; secondary pill at 60px (3); a single 28px on inline chips. - No styled link color — text links remain at the browser default `{colors.link}` (#0000ee), a deliberate refusal to brand the link voltage. - No CTA above the fold — the hero is a single editorial composition (headline + sub-paragraph + tile grid); the page expects the reader to scroll. - Six-color palette — indigo, black, two greys, cream-white canvas, and the unstyled browser-default link blue. The illustrations carry the only saturated color in the system. - Tight negative tracking on display tiers — -3.6px at 90px, -3.2px at 80px, -1.28px at 32px; the tracking returns to 0 below 32px. ## Colors ### Text - **Deep Indigo** (`{colors.ink}` — #100f31): frequency 75. Used as text (37), border (37), bg (1). The dominant ink — runs every headline, body paragraph, and nav label on the page. Not pure black; the 6-point chromatic indigo gives the page a warm-cool tension against the cream canvas. - **Pure Black** (`{colors.ink-strong}` — #000000): frequency 428. Used as text (214), border (214). Despite the higher raw frequency, this lives almost entirely inside SVG illustration strokes and small chrome accents; the prose ink is the deep indigo above. - **Muted Grey** (`{colors.ink-muted}` — #707070): frequency 26. Used as text (13), border (13). Secondary running-text tone — appears on small captions and meta-rows below the hero. - **Soft Grey** (`{colors.ink-soft}` — #888888): frequency 6. Used as text (3), border (3). Tertiary tone for the smallest chrome labels. ### Surface - **Cream Canvas** (`{colors.canvas}` — #ffffff): frequency 100. Used as text-on-dark (44), bg (12), border (44). The literal hex is pure white but the page reads as warm cream because the indigo ink, the warm illustration tiles, and the humanist sans's proportions all carry warm undertones. The CSS extraction also clustered a near-cream value here — a single explicit cream tone used on one illustration tile. ### Link - **Browser-Default Link Blue** (`{colors.link}` — #0000ee): frequency 78. Used as text (39), border (39). The literal browser-default text-link color, left unstyled. The single deliberate move that defines the chromatic system — Mem refuses to brand the link voltage, treating the default as a typographic affordance the visitor already understands. ## Typography ### Font Family The system runs **Ritual VF Variable** across every tier — display, heading, body, button, nav, and chrome labels share the same family. Fallbacks walk to `sans-serif`. There is no separate display family, no serif tier, and no monospace tier in the running text; the only secondary family is `"Material Icons", monospace` used twice as the icon glyph font. Ritual VF Variable is a contemporary variable sans with display-serif undertones, designed by Mass-Driver. Its slightly humanist proportions and tight cap height carry the editorial feel; at the 90px display tier the letterforms read closer to a literary serif than a SaaS sans, even though the typeface is technically sans-serif. ### Hierarchy | Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | `{typography.display-xl}` | 90px | 400 | 76.5px | -3.6px | Hero h1 ("A match for great minds") | | `{typography.display-lg}` | 80px | 400 | 80px | -3.2px | Section h2 ("One place for everything on your mind") | | `{typography.display-md}` | 32px | 400 | 38.4px | -1.28px | Sub-section h4 | | `{typography.body-xl}` | 21px | 400 | 33.6px | 0 | Hero sub-paragraph (loose leading variant) | | `{typography.body-lg}` | 21px | 400 | 27.3px | 0 | Default editorial body | | `{typography.body-md}` | 18px | 400 | 23.58px | 0 | Secondary body, link text | | `{typography.body-sm}` | 16px | 400 | 20.8px | 0 | Default chrome, nav links, buttons | | `{typography.caption}` | 16px | 400 | 20.8px | 0 | Same as body-sm, used for caption rows | | `{typography.icon-glyph}` | 18px | 400 | 18px | 0 | Material Icons glyphs only | ### Principles Every tier sits at weight 400. There is no bold variant on the captured page — not on the hero headline, not on the section headings, not on the nav, not on the buttons. Hierarchy comes from size and tracking alone. The 90px hero at -3.6px tracking is the loudest moment; the 80px section heading at -3.2px tracking sits below it. The tight negative tracking on the display tiers is the editorial signature — at 16px and below the tracking returns to 0 to keep body copy comfortable. Two body-text leadings exist at 21px (33.6px loose for the hero sub-paragraph, 27.3px tight for default editorial body) — the looser leading is reserved for the single most-important paragraph on each page. ### Note on Font Substitutes Ritual VF Variable is a paid font from Mass-Driver. The closest open-source substitute for the display tiers is **Fraunces** (variable serif-flavored display) or **PP Editorial New** if you can license it; for body tiers **Inter** at weight 400 transfers cleanly. To preserve the single-weight discipline, declare only weight 400 of whichever substitute you choose — do not introduce a 500 or 700 weight to fake the hierarchy. ## Layout ### Spacing System - **Base unit:** 8px, with 10px as a secondary common gap (28 occurrences) and 16px as the next module (16 occurrences). - **Tokens:** `{spacing.xxs}` 2px · `{spacing.xs}` 8px · `{spacing.sm}` 10px · `{spacing.base}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.2xl}` 64px. - **Section padding (vertical):** ~72px between major editorial sections; ~64px horizontal page padding on wide viewports. - **Card / tile internal padding:** ~32-40px on the pill-illustration tiles; ~24px on inline content rows. - **Top-nav padding:** 14px vertical, 32px horizontal on the left wordmark. ### Grid & Container - **Hero layout:** asymmetric two-column at ~50/50 split — the 500px-wide display headline on the left, the 2x2 pill-tile grid on the right. - **Body rhythm:** centered single-column for editorial sections, with the heading and body paragraph constrained to ~568-628px wide. - **Two-column rows:** the "No effort organizing" / "See video & context without asking" row uses an even 2-column split with vertical hairline indigo divider. ### Rhythm The page alternates between **editorial composition** and **illustration-anchored row**. The hero is composition (typographic, off-center, asymmetric); the next section is illustration-anchored (a single annotated mockup); the next is editorial again (centered 80px display headline); the next is illustration-anchored. The cadence is closer to a print magazine spread than a SaaS landing page, where successive bands would normally each carry a similar weight. ## Elevation The system has essentially **no shadow tier**. Elevation comes from the pill-rounded illustration tiles themselves — each is a self-contained illustration with its own fill, and they sit flat on the cream canvas without any drop shadow doing depth work. - **Flat (no shadow):** hero, body bands, tile grid, footer — every surface. - **Hairline divider:** a single 1px indigo `{colors.ink}` vertical rule splits the 2-column row beneath "Mem helps you use everything you save"; the only border that does structural work in the captured page. - **No declared shadow tokens.** The captured CSS exposes one `--one-if-corner-shape-supported` custom property and nothing in the shadow family. ## Shapes The radius scale is **pill-anchored**, with only three values declared: - `{rounded.none}` 0px — body type, the hero text, every editorial surface. - `{rounded.md}` 28px — one occurrence, on an inline content chip below the fold. - `{rounded.lg}` 60px — 3 occurrences, on secondary pill buttons and a smaller tile. - `{rounded.pill}` 100px — 12 occurrences, the dominant rounded surface. Illustration tiles in the hero, primary action pills, the text input, and accent containers. There is no 4-8px small-step tier and no fully-circular 9999px tier. The 100px value on the ~200px-square illustration tiles renders as a soft pebble — neither rectangle nor circle, but a shape where the corners flow into the edges rather than meeting them at a tangent. This pebble geometry is the brand's visual signature. ## Components **`button-primary`** — Deep indigo `{colors.ink}` fill, cream text, 100px pill radius, 15x23 padding, 48px height. Used for the primary action surfaces below the fold ("Get started", "Sign up"). The button typography sits at `{typography.body-sm}` (16px / 400) — same weight as the surrounding body text. **`button-secondary`** — Cream `{colors.canvas}` fill, indigo text, 1px indigo border, 100px pill radius, 15x23 padding, 48px height. Used for the lower-priority action paired beside the primary button. **`top-nav`** — Cream `{colors.canvas}` surface, indigo text, no border or shadow, 64px height, 14x32 padding. Mem wordmark flush left, product links centered, Download / Sign-in cluster flush right. The nav floats flat on the canvas without a hairline rule beneath it. **`nav-link`** — Transparent background, indigo text at `{typography.body-sm}` (16px / 400), 10px padding. No hover background visible in the captured render. **`hero-heading`** — Indigo text at `{typography.display-xl}` (90px / 400, -3.6px tracking). 0 padding; the headline sits in a constrained 500px column with the descenders allowed to break the baseline of the next line. **`section-heading`** — Indigo text at `{typography.display-lg}` (80px / 400, -3.2px tracking), centered in a ~1080px column with 64px horizontal padding. **`sub-heading`** — Indigo text at `{typography.display-md}` (32px / 400, -1.28px tracking). Used for the 4-up sub-section markers ("Remembering is so yesterday"). **`body-paragraph`** — Indigo text at `{typography.body-xl}` (21px / 400, 33.6px loose leading). The hero sub-paragraph and the lead paragraphs of each editorial section. **`body-paragraph-sm`** — Indigo text at `{typography.body-sm}` (16px / 400). Default running text, caption rows, secondary chrome. **`pill-tile`** — Cream `{colors.canvas}` fill (or an illustration-specific fill), indigo text, 100px pill radius, ~40px internal padding. The hero illustration tiles — each holds a single illustration, mockup, or photograph. The pebble geometry is the brand's visual signature. **`inline-link`** — Transparent background, browser-default `{colors.link}` (#0000ee) text, no underline override. Mem deliberately leaves text links at the browser-default style — a typographic refusal to brand the link voltage. **`text-input`** — Cream `{colors.canvas}` fill, indigo text, 1px indigo border, 100px pill radius, 15x23 padding, 48px height. Used for the email-capture field in the footer. **`card`** — Cream `{colors.canvas}` fill, indigo text, 1px `{colors.ink-muted}` border, 28px radius, 24px padding. The single non-pill rounded surface in the system — used for the inline content chip below the fold. ## Do's and Don'ts **Do** keep every tier at weight 400. The hero headline at 90px / 400 and the body text at 16px / 400 share the same weight; the hierarchy comes from size and negative tracking alone. Adding a 700 weight to the hero turns the editorial composition into a SaaS shout and dissolves the single-weight discipline that defines the system. **Do** use `{colors.ink}` (#100f31) — never pure `#000000` — for prose text. The 6-point chromatic indigo gives the page its warm-cool tension against the cream canvas. The pure-black #000000 in the extraction is used almost entirely inside SVG illustration strokes, not in running text. **Do** preserve the 100px pill geometry on illustration tiles. The soft pebble shape — corners that flow into edges rather than meeting at a tangent — is the brand's visual signature; replacing it with 16px-rounded rectangles dissolves the editorial-romantic feel. **Do** leave text links at the browser default `{colors.link}` (#0000ee). The unstyled link is a deliberate move — Mem treats the default-blue as a typographic affordance the visitor already understands. Restyling it in indigo or any other tone breaks the single-most-distinctive chromatic decision in the system. **Don't** add a saturated brand voltage outside the illustration tiles. The chrome palette is six tones (indigo, black, two greys, cream, browser-blue) and the colorful tiles in the hero are illustration assets, not declared system colors. Introducing a cobalt or terracotta as a system token would turn the rebrand into a generic SaaS palette. **Don't** introduce a CTA pill into the hero band. The captured hero has no above-fold CTA — the right side is occupied by the 2x2 pill-tile grid. The no-CTA hero is the editorial-magazine move; adding a "Get Started" button to the hero turns the composition into a conversion funnel. **Don't** soften the negative tracking on display tiers. The 90px / -3.6px and 80px / -3.2px tracking are what give the headlines their editorial density. Loosening to -1px or 0 produces a generic display sans that loses the literary-quarterly feel. **Don't** introduce a small-step radius tier (4 / 6 / 8px). The system is pill-anchored at 100px with only two secondary radii (60px, 28px); adding a 4-8px tier — even for inputs — breaks the geometry that defines the brand. ## Known Gaps - **Hover and focus states:** the captured marketing surface only renders resting states; the full hover / press / focus matrix for the primary buttons and the text input lives inside the product UI and is not documented here. - **Form input error states:** the `{component.text-input}` carries only the resting state; error and validation styling is not exposed on the marketing surface. - **Dark mode:** the captured surface is light-only. The Mem product UI exposes a dark variant, but the marketing chrome is light-only by design. - **Motion:** Mem's hero illustration tiles do not appear to animate on the captured page, but the in-product motion (the AI-suggested note pop-ins, the chat-style flow) is not documented in this spec. - **Product surfaces:** this DESIGN.md captures the marketing site only. The Mem app itself — note editor, chat interface, knowledge graph view — carries a much richer token system that is not represented here. - **Illustration palette:** the cobalt circle, terracotta square, and warm cream notepad in the hero are illustration assets with their own color choices; these are not declared as system color tokens because they belong to the illustration system, not the chrome. - **Typographic state variants:** the system runs weight 400 only on the captured page, but the Ritual VF Variable file ships with the full variable axis. Whether bold or other weights are used elsewhere in the brand surface is not represented here.