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

# mymind · Design System

> A quiet canvas for a mind full of ideas

**Theme:** light · **Industry:** productivity · **Source:** https://mymind.com/ · **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._

mymind presents a private, AI-assisted place to save and rediscover notes, images, links, and inspiration. The homepage pairs oversized editorial typography and generous white space with warm orange gradients and layered product previews.

## North star

Let editorial typography and generous white space lead, using orange as a precise signal and product imagery as proof.

## Overview

The page uses Gallery White (#ffffff) as its dominant canvas, giving the typography and product previews room to breathe. Oversized Louize serif headlines create an editorial voice, while Inter supports readable body copy and navigation. Signal Orange (#ff5924) is a focused highlight for signup, calls to action, and selected section treatments; its peach companion appears in soft atmospheric gradients rather than as a general-purpose interface color. Warm and cool pale surfaces distinguish feature cards without fragmenting the overall calm. The layout alternates quiet text-led passages with vivid, full-width color fields and framed product imagery. Screenshots, saved-content collages, and device views demonstrate the product in use; they sit within generous margins and rounded card surfaces. Fine borders and restrained shadows define layers, while spacious vertical rhythm keeps the long homepage feeling composed rather than dense.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas and light areas surrounding the hero and product sections. |
| Cloud Surface | `#f9fafc` | `--color-cloud-surface` | surface | Pale background surface for broad, quiet sections. |
| Slate Copy | `#4a5465` | `--color-slate-copy` | semantic | Muted navigation and supporting text against light backgrounds. |
| Deep Slate | `#3a475a` | `--color-deep-slate` | semantic | Secondary muted copy where a stronger text contrast is needed. |
| Editorial Ink | `#000000` | `--color-editorial-ink` | neutral | Primary serif headlines, body emphasis, and dark product-preview areas. |
| Warm Mist | `#f6f4f2` | `--color-warm-mist` | surface | Soft warm-tinted section background, visible behind AI feature content. |
| Quiet Rule | `#e2e2e2` | `--color-quiet-rule` | neutral | Subtle card outline and delicate separation on white. |
| Signal Orange | `#ff5924` | `--color-signal-orange` | brand | Primary signup and CTA accent, plus vivid orange section backgrounds and highlights. |
| Peach Glow | `#ffc0b4` | `--color-peach-glow` | accent | Soft gradient transition paired with orange around atmospheric section treatments. |
| Rose Haze | `#e6dbdb` | `--color-rose-haze` | semantic | Low-frequency secondary edge color; keep confined to subtle decorative details. |
| Blue Fog | `#e5eaf2` | `--color-blue-fog` | surface | Cool-toned feature card background, notably for smart bookmarking. |
| Charcoal Fade | `#2f343c` | `--color-charcoal-fade` | semantic | Dark gradient endpoint inside a product or media treatment, not a core canvas color. |
| Parchment | `#f3f0e7` | `--color-parchment` | surface | Warm neutral feature-card background, notably for frictionless notetaking. |
| Illustration Sky | `#99d2fb` | `--color-illustration-sky` | semantic | Small color appearing in embedded content or illustration; not a defining brand color. |
| Illustration Rose | `#e48abf` | `--color-illustration-rose` | semantic | Minor pink detail within embedded content; avoid promoting it to a main interface accent. |
| Muted Steel | `#748297` | `--color-muted-steel` | semantic | Muted device or platform link text, including the iPhone app link. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f9fafc` (Cloud Surface) · `--color-surface-2` → `#f6f4f2` (Warm Mist) · `--color-surface-3` → `#e5eaf2` (Blue Fog) · `--color-surface-4` → `#f3f0e7` (Parchment) · `--color-text` → `#000000` (Editorial Ink) · `--color-text-muted` → `#4a5465` (Slate Copy) · `--color-text-subtle` → `#3a475a` (Deep Slate) · `--color-border` → `#e2e2e2` (Quiet Rule) · `--color-accent` → `#ff5924` (Signal Orange) · `--color-accent-2` → `#ffc0b4` (Peach Glow)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f9fafc` | 20.11:1 | AAA |
| `#000000` | `#f6f4f2` | 19.14:1 | AAA |
| `#000000` | `#e5eaf2` | 17.38:1 | AAA |
| `#4a5465` | `#ffffff` | 7.64:1 | AAA |
| `#4a5465` | `#f9fafc` | 7.32:1 | AAA |
| `#4a5465` | `#f6f4f2` | 6.97:1 | AA |
| `#4a5465` | `#e5eaf2` | 6.33:1 | AA |
| `#3a475a` | `#ffffff` | 9.42:1 | AAA |
| `#3a475a` | `#f9fafc` | 9.02:1 | AAA |

### Gradients

- `linear-gradient(rgb(255, 89, 36) 0%, rgb(255, 192, 180) 20.88%, rgb(255, 255, 255) 37.26%, rgb(255, 255, 255) 85.07%, rgb(255, 242, 242) 100%)`
- `linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(rgb(0, 0, 0) 0%, rgb(47, 52, 60) 100%)`
- `linear-gradient(rgba(228, 138, 191, 0.06) 0%, rgba(228, 138, 191, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter-Regular | `--font-body` | webfont | 400 | Body copy and navigation | Inter |
| Louize-Regular-205TF | `--font-display` | webfont | 400 | Display headlines and editorial section headings | Cormorant Garamond |
| Nunito-SemiBold | `--font-nunito-semibold` | webfont | 400, 500 | Small captions and CTA-style links | Nunito Sans |
| Inter-Medium | `--font-inter-medium` | webfont | 400 | Strong subheadings and compact headings | Inter |

- **Inter-Regular:** Regular weight, sentence case, comfortable leading; keep supporting copy visually quiet.
- **Louize-Regular-205TF:** Large, expressive serif; tight negative tracking and compact leading at display scale.
- **Nunito-SemiBold:** Compact supporting labels; use a rounded, friendly feel and restrained emphasis.
- **Inter-Medium:** Medium sans-serif weight for clearer hierarchy without competing with the serif display.

### Type scale — Perfect Fifth (ratio ≈ 1.476, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 140px | 400 | 0.85 | -0.06em | — | Louize-Regular-205TF | Oversized hero statement and major editorial moments. |
| h1 | 96px | 400 | 0.88 | -0.044em | — | Louize-Regular-205TF | Primary hero headline and prominent page-level title. |
| h2 | 52px | 400 | 1.3 | -0.025em | — | Louize-Regular-205TF | Large feature-section headings. |
| h3 | 42px | 400 | 1.19 | -0.019em | — | Louize-Regular-205TF | Secondary editorial or product-feature headings. |
| h4 | 40px | 400 | 1.35 | -0.035em | — | Inter-Medium | Compact, stronger sans-serif section subheadings. |
| body | 20px | 400 | 1.4 | 0 | — | Inter-Regular | Explanatory paragraphs and product descriptions. |
| caption | 16px | 400 | 1.67 | 0.063em | — | Nunito-SemiBold | Small labels, CTA links, and eyebrow text. |
| nav | 18px | 400 | 1.11 | 0 | — | Inter-Regular | Header links and primary navigation. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 4, 8, 10, 16, 18, 20, 24, 30, 32, 33, 40, 50, 60, 70, 100 px.
- Section rhythm 70px · element gap 42px · card padding 50px · max content width 1300px.

The page is organized as a spacious, mostly centered long-form narrative. A broad hero places navigation above a large two-line statement, supporting copy, platform links, and product media. Content sections alternate centered editorial text, broad color fields, and image-led product demonstrations. Feature cards use a loose grid with varied spans rather than a rigid repeated tile system. The measured page max width is 1300px; preserve generous section rhythm and open margins. Keep the initial viewport particularly uncluttered.

## Shape & elevation

- Radius: card `16px` · media `0px` · nav `9999px` · link `9999px` · xs `12px` · sm `16px` · pill `9999px`
- Shadow `xl` (section): `rgba(0, 0, 0, 0.15) 0px 0px 120px 0px`
- Shadow `md` (other): `rgba(255, 154, 36, 0.1) 0px 8px 16px 2px`
- Shadow `xl-2` (section): `rgba(255, 167, 129, 0.44) 0px 57px 60px -54px, rgba(255, 128, 36, 0.27) 0px -27px 50px -40px`
- Motion: standard transition `0.7s cubic-bezier(0.19, 1, 0.22, 1)` on interactive elements.

Most surfaces feel flat and open. Fine light borders define selected cards and media frames; rounded feature cards add gentle containment. Use layered screenshots and occasional diffuse shadows to create depth around product demonstrations, but keep shadows soft and localized. Avoid heavy outlines or persistent elevation on every element.

## Imagery

Use product screenshots, saved-item collages, and device views as the central visual evidence. Frame the imagery in calm cards or large media panels, sometimes layered to suggest a living collection. The page also uses broad, soft orange-to-peach gradients as atmosphere behind key moments. Treat vivid image colors as content, not as additional interface accents; avoid generic stock photography.

## Components

### Header navigation

A quiet horizontal header with brand mark, compact text links, and a rounded orange signup action.

### Editorial hero

Large centered Louize serif statement, concise Inter support copy, and outlined category pills.

### Platform links

Small rounded pale controls for iPhone, browser extension, and Android, with platform icons.

### Product preview

Large framed product media panel, with layered screenshots that expose saved items and the interface.

### Feature cards

Rounded cards on Parchment (#f3f0e7) and Blue Fog (#e5eaf2), combining imagery with concise copy.

### Section CTA

Signal Orange (#ff5924) used as a bold full-width backdrop with centered serif heading and compact action.

### Measured component styles

- **Link** (“GET APP”): transparent background · text #ff5924 · radius 100px · padding 10px 24px · 400 16px Nunito-SemiBold
- **Card** (“Frictionless notetaking Ideas no longer ”): background #f3f0e7 · text #000000 · radius 16px · padding 50px · 400 18px Open Sans
- **Navigation item** (“What”): transparent background · text #1573dd · radius 0px · padding 0px · 400 20px Louize-Regular-205TF

## Do

- Use Louize-style serif headlines for the main editorial moments.
- Keep the canvas predominantly white and the composition spacious.
- Reserve Signal Orange (#ff5924) for important actions and chosen section accents.
- Use pale surfaces to distinguish feature cards without harsh contrast.
- Show actual product interfaces and saved-content examples in media areas.
- Keep navigation and supporting copy understated.

## Don't

- Do not turn every section into a dense card grid.
- Do not use orange as the default background for the entire page.
- Do not let illustration-only colors become recurring UI accents.
- Do not replace editorial serif headlines with generic heavy sans-serif type.
- Do not add strong borders or shadows to every surface.
- Do not fill the hero with extra labels or controls.

## Agent prompt

Build a new page in the mymind visual style: calm, editorial, and product-led. Use Gallery White (#ffffff) as the primary canvas, with Cloud Surface (#f9fafc) or Warm Mist (#f6f4f2) for quiet section shifts. Set major headings in a high-contrast editorial serif similar to Louize, paired with Inter for navigation and readable body copy. Use Signal Orange (#ff5924) sparingly for the primary action and one clear emphasis; Peach Glow (#ffc0b4) may soften a gradient. Frame real product imagery in spacious panels and feature cards, including Parchment (#f3f0e7) and Blue Fog (#e5eaf2). Keep the layout centered and open, with alternating text-led and image-led sections. Use fine borders, restrained shadows, and rounded cards; avoid dense decoration or unnecessary interface chrome.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | A quiet top navigation leads into a centered oversized headline, short support copy, platform links, and a wide product preview. | Top-level navigation, Primary signup action, Platform entry links | Oversized serif headline, Pill-style category labels, Layered product media |

## Source CSS custom properties (selected)

```css
--wp-block-synced-color: #7a00df;
--wp-block-synced-color--rgb: 122,0,223;
--wp-bound-block-color: #7a00df;
--wp-editor-canvas-background: #ddd;
--wp-admin-theme-color: #007cba;
--wp-admin-theme-color--rgb: 0,124,186;
--wp-admin-theme-color-darker-10: #006ba1;
--wp-admin-theme-color-darker-10--rgb: 0,107,160.5;
--wp-admin-theme-color-darker-20: #005a87;
--wp-admin-theme-color-darker-20--rgb: 0,90,135;
--wp-admin-border-width-focus: 2px;
--wp--preset--font-size--normal: 16px;
--wp--preset--font-size--huge: 42px;
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--font-size--small: 13px;
--wp--preset--font-size--medium: 20px;
--wp--preset--font-size--large: 36px;
--wp--preset--font-size--x-large: 42px;
--wp--preset--spacing--20: 0.44rem;
--wp--preset--spacing--30: 0.67rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--spacing--60: 2.25rem;
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5.06rem;
--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
```

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