Mem — design system & UI screens

Productivity · 1 screen · 9 sections · https://get.mem.ai/

Light hero with a note card, editorial photo and a bold orange arrow motif; AI-organized notes.

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/mem.

Decoded design system

Mem's decoded design system: background #FCF8F1, text #100F31, accent #100F31, link #100F31, primary #0000EE; type scale h1 90px / h2 80px / body 18px; 4px spacing base; 0px base radius. The single interactive/action color is #100F31 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#FCF8F1`
surface	`#EDEAE5`
border	`#D8D5D4`
text	`#100F31`
text_muted	`#696779`
primary	`#0000EE`
accent	`#100F31`
link	`#100F31`
button_bg	`rgba(0, 0, 0, 0)`
button_text	`#100F31`

Using these colors

Action color #100F31 — the single interactive color; only on things you click or must notice, never large fills.
accent, link are all #100F31 — one role, not several (the action color).
accent #100F31 — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
primary #0000EE — a brand color — but the call-to-action uses #100F31, not this.

Typography

Heading: Ritual VF Variable
Body: Ritual VF Variable
h1: 90px
h2: 80px
body: 18px

Spacing

base unit: 4px
scale: 2px, 8px, 9px, 10px, 11px, 12px, 16px, 18px, 20px, 24px

Radii

base: 0px
button: 9999px

Motion

Micro-interactions run at 160ms (dominant) with ease.

durations: 160ms · 180ms
easings: ease
animated properties: transform, background, color

Native design tokens

Token	Value
`--color-cream`	`#fcf8f1`
`--color-cream-deep`	`#f9f1e4`
`--color-sand`	`#f1e7d3`
`--color-sand-deep`	`#e8dcc4`
`--color-white`	`#fff`
`--color-navy`	`#100f31`
`--color-navy-muted`	`#707070`
`--color-muted`	`#707070`
`--color-coral`	`#ff5c45`
`--color-coral-soft`	`#ffe8e6`

…and 39 more measured on the page.

Button states (measured)

primary focus: outline 1px auto rgb(16, 16, 16)

Layout (measured)

container max-width: 1310px
nav: 72px sticky
common grid: 2 columns

Motion choreography (measured)

Scroll reveal: 2 elements rest at translateY(20px).

Responsive (measured)

mobile (390px): hero 62px · nav hamburger

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

One place for everything on your mind