---
title: "Memotron design system"
variant: extended
source: https://memotron.app/
captured_at: 2026-10-12
theme: light
industry: productivity
generator: Design DNA (https://four.wiralomi.com/style/memotron-app)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Memotron · Design System

> A quiet canvas for your memory atlas

**Theme:** light · **Industry:** productivity · **Source:** https://memotron.app/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Memotron presents personal knowledge management through a restrained, bright interface with generous whitespace and a centered product introduction. A dark rounded download button and a multi-device product visual provide the main points of emphasis.

## North star

Keep the interface quiet and spacious, using charcoal actions and type to frame—not compete with—the product showcase.

## Overview

The page uses a pale, near-white canvas (#f9f9fb) as its dominant field, with dark charcoal (#333333) for headline, navigation, and primary actions. White and soft gray surfaces keep the interface tonal rather than colorful; muted gray text supports secondary copy, while fine cool-gray borders separate the header and outer frame. The measured font is Twenty One Native, used consistently from navigation through large, bold display text. The hero is centered, with a concise headline, supporting sentence, pill-shaped download button, and a muted availability note. Broad vertical breathing room makes the product mockup feel like a considered showcase rather than a dense feature listing. The device image introduces warm blush and pastel wave colors, but these belong to the product artwork, not the site's core interface palette. Rounded controls, subtle hairlines, and a flat presentation preserve a calm, lightweight character.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Canvas | `#f9f9fb` | `--color-soft-canvas` | brand | Dominant page background across the hero and surrounding open space. |
| Charcoal Ink | `#333333` | `--color-charcoal-ink` | neutral | Headline, navigation text, and filled primary buttons. |
| Clean White | `#ffffff` | `--color-clean-white` | surface | Light interface and device surfaces; also appears in small reverse-text details. |
| Cool Hairline | `#dfe2ec` | `--color-cool-hairline` | semantic | Fine separators around the navigation and button outlines. |
| Quiet Gray | `#808080` | `--color-quiet-gray` | neutral | Muted supporting copy, including the availability note beneath the CTA. |
| Mist Surface | `#e8e8ea` | `--color-mist-surface` | surface | Secondary pale surface tone, used sparingly outside the primary canvas. |
| Slate Gray | `#757575` | `--color-slate-gray` | neutral | Minor button-related text treatment; not a defining brand color. |
| Graphite Edge | `#545454` | `--color-graphite-edge` | neutral | Minor button border detail rather than a prominent page color. |

### Semantic aliases

`--color-canvas` → `#f9f9fb` (Soft Canvas) · `--color-surface` → `#ffffff` (Clean White) · `--color-surface-2` → `#e8e8ea` (Mist Surface) · `--color-text` → `#333333` (Charcoal Ink) · `--color-text-muted` → `#808080` (Quiet Gray) · `--color-text-subtle` → `#ffffff` (Clean White) · `--color-border` → `#dfe2ec` (Cool Hairline)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#333333` | `#f9f9fb` | 12.02:1 | AAA |
| `#333333` | `#ffffff` | 12.63:1 | AAA |
| `#333333` | `#e8e8ea` | 10.33:1 | AAA |
| `#808080` | `#f9f9fb` | 3.76:1 | AA-large |
| `#808080` | `#ffffff` | 3.95:1 | AA-large |
| `#808080` | `#e8e8ea` | 3.23:1 | AA-large |
| `#ffffff` | `#f9f9fb` | 1.05:1 | fail |
| `#ffffff` | `#e8e8ea` | 1.22:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Twenty One Native | `--font-body` | webfont | 400, 700 | Site-wide type for navigation, display headline, body copy, captions, and buttons. | Inter |

- **Twenty One Native:** Use regular weight for navigation and copy, bold for the display headline; keep tracking neutral and casing natural.

### Type scale — Custom (ratio ≈ 1.815, base 17px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 700 | 1.07 | 0 | — | Twenty One Native | Large bold hero headline, “Your memory atlas.” |
| h1 | 22px | 400 | 1.5 | 0 | — | Twenty One Native | Regular-weight secondary hero or section heading. |
| body | 17px | 400 | 2.21 | 0 | — | Twenty One Native | Supporting product description beneath the hero headline. |
| caption | 15px | 400 | 1.5 | 0 | — | Twenty One Native | Small muted availability note and compact supporting labels. |
| button | 16.5px | 400 | 1.25 | 0 | — | Twenty One Native | Download and web-app CTA labels. |
| nav | 15px | 400 | 1.5 | 0 | — | Twenty One Native | Brand-adjacent navigation links and header items. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 4, 8, 13, 17, 21, 25, 33, 90, 95, 104, 167 px.
- Section rhythm 90px · element gap 4px · card padding — · max content width —.

A narrow, centered site frame sits within the viewport, with a slim horizontal navigation bar at its top. The hero content is centered and stacked, followed by a broad gap before the product visual. Keep the page density low: use generous vertical breathing room and short text lines rather than adding dense grids. The measured data does not establish a page max-width, so match the screenshot's contained composition without imposing an invented fixed width. Side labels sit outside the central frame.

## Shape & elevation

- Radius: button `9999px` · nav `9999px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s cubic-bezier(0, 0, 0.2, 1)` on interactive elements.

The interface is largely flat, with no measured shadows or gradients. Use thin, cool-gray hairlines to define the navigation and page frame, and rely on whitespace and the product image for separation. Buttons are pill-shaped and filled charcoal; do not add pronounced card elevation.

## Imagery

The hero showcase is a framed product visual featuring a laptop, phone, and desktop interface arranged in front of soft pastel wave artwork. Treat it as a product-led image rather than a source for interface colors. Keep the devices grouped and legible, with the play control centered over the laptop display; avoid adding unrelated decorative imagery.

## Components

### Top navigation

A slim, framed header with the Memotron mark at left, centered resource links, and a rounded web-app CTA on the right.

### Primary navigation links

Use regular Twenty One Native text in charcoal with understated spacing; keep the Resources item visually simple.

### Web app CTA

A dark charcoal pill button with white label, matching the measured rounded navigation button.

### Hero headline

A centered, bold display line in charcoal, followed by a single centered sentence in regular weight.

### Download CTA

A filled charcoal pill with white text and a small platform icon, centered below the hero copy.

### Availability note

A short muted-gray caption beneath the download CTA, listing available platforms.

### Product showcase

A large centered video-style product image with device mockups, pastel wave artwork, and a circular play affordance.

### Measured component styles

- **Primary button** (“Go to web app”): background #333333 · text #ffffff · radius 9999px · padding 0px 12.5px · 400 15.0318px Twenty One Native
- **Navigation item** (“Memotron Go to web app Resources Pricing”): transparent background · text #333333 · radius 0px · padding 0px · 400 16.702px Twenty One Native

## Do

- Use the near-white canvas as the dominant background.
- Center the hero headline, supporting copy, and primary CTA.
- Reserve charcoal for important text and filled actions.
- Keep supporting copy visibly muted.
- Give the product showcase ample breathing room.
- Use pill-shaped buttons and subtle hairline borders.

## Don't

- Do not introduce a saturated interface accent palette.
- Do not use the product artwork's pastel colors as page-wide UI colors.
- Do not crowd the hero with extra navigation or copy.
- Do not add heavy shadows or layered cards.
- Do not make secondary text as prominent as the headline.
- Do not invent fixed page dimensions or spacing values.

## Agent prompt

Build a new Memotron-style productivity page with a restrained, bright visual system. Use Soft Canvas (#f9f9fb) for the main field and Charcoal Ink (#333333) for headline, navigation, and primary actions. Use Clean White (#ffffff) and Mist Surface (#e8e8ea) only for quiet surface variation, Cool Hairline (#dfe2ec) for fine separators, and Quiet Gray (#808080) for secondary copy. Set the page in Twenty One Native or a close sans-serif substitute, with a bold display headline and regular body text. Keep navigation slim and framed, center the hero content, and leave generous space before a clear product showcase. Use rounded dark pill CTAs, minimal borders, and no pronounced shadows. Treat any pastel colors in device imagery as artwork, not interface palette.

## Source CSS custom properties (selected)

```css
--fontFamily-sans-1: sans-serif;
--fontFamily-serif-0: Merriweather;
--fontFamily-serif-1: serif;
--tw-bg-opacity: 1;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/memotron-app