What is Mem's primary brand color?

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.

What typeface does Mem use, and what should I use as a substitute?

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.

Why is there no CTA in Mem's hero?

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.

What is Mem's radius scale?

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.

Can I use this DESIGN.md to build my own editorial AI productivity site?

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.

Mem Design System

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.

About Mem DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source get.mem.ai

Productivity & SaaS
AI & LLM Platforms

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.

What makes it distinct

Browser-default link blueMem deliberately leaves text links at #0000ee, the literal browser default, instead of styling them in a brand color
Ritual VF Variable at one weightweight 400 across every tier from the 90px hero headline to 16px body, no bold variant anywhere on the page
100px pill geometry on tilesillustration cards use a 100px corner radius that makes them read as soft pebbles rather than rectangles
Warm cream canvasthe 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 everythingdeep indigo carries headline, body, and nav at a single tone, not a tiered ink ladder

Live at get.mem.ai

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

get.mem.ai

Explore Mem

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

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Mem design system FAQ

Common questions about Mem'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.

Mem — official site

Mem's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

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