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

# Milanote · Design System

> A calm canvas for creative ideas

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

Milanote’s homepage pairs a dark, confident hero with a long sequence of airy product demonstrations and a vivid blue device feature. Serif headlines, restrained interface copy, and layered board imagery make the product’s visual workspace the central argument.

## North star

Let real product-board imagery lead, using spacious editorial framing and restrained brand color to make every section feel like part of one creative canvas.

## Overview

The page opens on a deep slate canvas, #303b4b, where white Tiempos headlines and muted supporting text frame an orange #f4511c signup action. A large product-board screenshot anchors the hero, then the page shifts into clean white feature sections with centered serif headings, short gray copy, and expansive interface imagery. The repeated showcase rhythm makes the product itself the primary proof rather than relying on decorative branding. A dark creative-work band groups category cards and customer logos; a saturated #1465ff device section adds a strong color break before the pale #ebedee signup area. Inter supplies readable body and navigation text, while Tiempos gives display moments an editorial quality. Cards and screenshots sit in broad open space with subtle elevation, keeping the long page comfortable and visually legible. Bright hues inside board screenshots are product content, not the site’s core palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main feature-section canvas, signup card and high-contrast text on dark bands. |
| Studio Slate | `#303b4b` | `--color-studio-slate` | brand | Hero and footer canvas, creative-work band, and primary dark text. |
| Quiet Graphite | `#5d6673` | `--color-quiet-graphite` | semantic | Muted body copy and secondary link text on light areas. |
| Soft Pewter | `#757c87` | `--color-soft-pewter` | semantic | Measured hairline and border tone; use sparingly for subtle outlines. |
| Deep Navy | `#2b3646` | `--color-deep-navy` | surface | Measured gradient endpoint detail; not a dominant page surface. |
| Cloud Gray | `#ebedee` | `--color-cloud-gray` | surface | Signup-section background and pale category-card surfaces. |
| Studio Orange | `#f4511c` | `--color-studio-orange` | accent | Primary signup buttons and small conversion emphasis. |
| Mist Gray | `#a2a7af` | `--color-mist-gray` | semantic | Low-emphasis supporting text, especially on dark regions. |
| Dusk Gray | `#8d929a` | `--color-dusk-gray` | semantic | Secondary links and footer copy where contrast is intentionally subdued. |
| Pale Periwinkle | `#d3dfff` | `--color-pale-periwinkle` | semantic | Minor measured text accent; not a defining page background. |
| Signal Blue | `#1465ff` | `--color-signal-blue` | accent | Full-width device feature section, a single bold color interruption. |
| Silver Haze | `#babec4` | `--color-silver-haze` | semantic | Minor subdued heading detail, not a core interface surface. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#303b4b` (Studio Slate) · `--color-surface-2` → `#ebedee` (Cloud Gray) · `--color-text` → `#303b4b` (Studio Slate) · `--color-text-muted` → `#5d6673` (Quiet Graphite) · `--color-text-subtle` → `#a2a7af` (Mist Gray) · `--color-border` → `#757c87` (Soft Pewter) · `--color-accent` → `#f4511c` (Studio Orange) · `--color-accent-2` → `#1465ff` (Signal Blue) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#303b4b` | `#ffffff` | 11.33:1 | AAA |
| `#303b4b` | `#ebedee` | 9.65:1 | AAA |
| `#5d6673` | `#ffffff` | 5.81:1 | AA |
| `#5d6673` | `#303b4b` | 1.95:1 | fail |
| `#5d6673` | `#ebedee` | 4.95:1 | AA |
| `#a2a7af` | `#ffffff` | 2.42:1 | fail |
| `#a2a7af` | `#303b4b` | 4.69:1 | AA |
| `#a2a7af` | `#ebedee` | 2.06:1 | fail |
| `#f4511c` | `#ffffff` | 3.48:1 | AA-large |
| `#f4511c` | `#303b4b` | 3.26:1 | AA-large |

### Gradients

- `linear-gradient(to right, rgba(24, 37, 55, 0), rgba(24, 37, 55, 0.24))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 700 | Body copy, navigation, and primary button labels. | Inter |
| Tiempos | `--font-display` | webfont | 700, 600 | Large display and serif feature headings. | Lora |
| system-ui | `--font-system-ui` | system | 400, 500, 600 | Compact captions and small signup or link text. | Inter |

- **Inter:** Mostly regular body text with bold navigation and CTA labels; sentence case and restrained tracking.
- **Tiempos:** Use confident, high-contrast serif headlines; measured display and heading roles are semibold or bold.
- **system-ui:** Medium-weight utility text, usually sentence case with compact line-height.

### Type scale — Perfect Fourth (ratio ≈ 1.32, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 600 | 1.33 | 0 | — | Tiempos | Hero headline and other oversized brand statements. |
| h1 | 40px | 700 | 1.33 | -0.001em | — | Tiempos | Primary page or section headline emphasis. |
| h2 | 28px | 400 | 1.25 | -0.001em | — | Inter | Feature-section headings and prominent content titles. |
| h3 | 24px | 400 | 1.25 | -0.001em | — | Inter | Subsection headings and creative category titles. |
| h4 | 20px | 700 | 1.33 | -0.001em | — | Tiempos | Compact serif card or form headings. |
| body | 16px | 400 | 1.5 | -0.001em | — | Inter | Feature explanations and standard paragraph copy. |
| caption | 14px | 500 | 1.43 | -0.001em | — | system-ui | Small labels and supporting interface details. |
| button | 16px | 700 | 1.33 | -0.001em | — | Inter | Signup and other primary action labels. |
| nav | 16px | 700 | 1.33 | -0.001em | — | Inter | Header navigation and major navigation actions. |
| link | 14px | 500 | 1.43 | -0.001em | — | system-ui | Compact links and secondary form actions. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 14, 16, 19, 20, 22, 24, 29, 32, 40, 48 px.
- Section rhythm 59px · element gap 6px · card padding 36px · max content width —.

Use a long, single-column storytelling flow with generous horizontal breathing room and centered feature introductions. The hero places navigation above a centered headline, CTA, and oversized board screenshot. Repeat the pattern of short heading and copy followed by a wide product view, with small divider marks between some sections. Transition into a dense dark category-card band, a left-copy/right-device feature, a centered signup form, then a multi-column footer. Measured page width is not specified; preserve the screenshots’ broad, centered content framing rather than assuming a fixed maximum.

## Shape & elevation

- Radius: button `6px` · input `4px` · card `10px` · link `24px` · xs `2px` · sm `3px` · md `4px` · lg `6px` · xl `10px` · 2xl `24px`
- Shadow `md` (link): `rgba(0, 0, 0, 0.1) 0px 5px 10px 0px`
- Shadow `inset` (input, link, other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(187, 190, 195) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `xl` (card, other): `rgba(0, 0, 0, 0.16) 0px 16px 56px 4px, rgba(0, 0, 0, 0.08) 0px 2px 10px 0px`
- Shadow `lg` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(27, 37, 54, 0.08) 0px 12px 28px 0px, rgba(27, 37, 54, 0.03)`
- Shadow `inset-2` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `inset-3` (input): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(118, 124, 134) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Motion: standard transition `0.1s linear` on interactive elements.

Keep the overall design flat and spacious, using subtle borders and soft shadows chiefly to lift product screenshots, category cards, and signup panels from their backgrounds. Layer screenshot windows above the canvas without heavy frames. Reserve stronger depth for the large showcase imagery; avoid adding decorative shadows to ordinary text or section bands.

## Imagery

Use large, crisp product-board screenshots as the main feature media, framed like floating workspace windows with visible interface detail. Board content may include photos, notes, colorful cards, and dark or light themes; treat these as product material rather than brand palette. The creative-use band uses horizontal category previews and customer marks. The device section layers desktop, tablet, and phone mockups, while the signup area includes playful illustrated objects near its lower edge.

## Components

### Header navigation

White wordmark and navigation sit on the Studio Slate hero; include a subdued Log in control and orange signup action.

### Primary signup button

Use Studio Orange #f4511c with white bold Inter text, compact padding, and a softly rounded rectangular shape.

### Product showcase

Center a wide, detailed Milanote board image beneath a short serif heading and concise muted explanation.

### Creative category cards

Place pale rounded previews in a horizontal band on Studio Slate, with category names and compact explanatory text.

### Device feature

Set a Signal Blue #1465ff section with left-aligned white copy and overlapping device screenshots to the right.

### Signup form card

Center a white form card on Cloud Gray #ebedee; stack social signup, field rows, consent, and orange CTA.

### Footer

Use Studio Slate with white branding, subdued link columns, language control, and low-emphasis social and legal details.

### Measured component styles

- **Primary button** (“Sign up for free”): background #f4511c · text #ffffff · radius 6px · padding 10px 16px · 700 16px Inter
- **Secondary button** (“Log in”): background #46505f · text #ffffff · radius 6px · padding 10px 16px · 700 16px Inter
- **Link** (“Filmmaking Make moodboards, storyboards ”): background #ebedee · text #303b4b · radius 24px · padding 0px · 400 16px Source Sans · shadow rgba(0, 0, 0, 0.1) 0px 5px 10px 0px
- **Input** (“English Español Français Português”): background #323b4a · text #fdfdfd · radius 4px · padding 10px 14px 10px 40px · 500 14px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Card** (“Try Milanote today Free with no time lim”): background #ffffff · text #31303a · radius 16px · padding 32px 40px · 400 16px system-ui · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Navigation item** (“How people use Milanote Log in Sign up f”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Source Sans

## Do

- Lead with a dark slate hero and a clear serif headline.
- Show the product interface large enough to read as a workspace.
- Alternate showcase imagery with concise centered feature copy.
- Use orange only for primary signup emphasis.
- Reserve saturated blue for a distinct device feature band.
- Keep white sections airy and visually calm.

## Don't

- Do not make the whole page dark; use light feature sections.
- Do not treat bright colors inside board screenshots as brand colors.
- Do not crowd feature copy with long paragraphs.
- Do not replace product previews with generic decorative illustrations.
- Do not add multiple competing CTA colors.
- Do not use heavy borders or shadows throughout.

## Agent prompt

Build a new Milanote-style productivity page as an editorial product story. Start with a Studio Slate #303b4b hero, white Tiempos headline, muted supporting copy, and a Studio Orange #f4511c signup action. Use Inter for navigation and body text. Follow with spacious white showcase sections: concise centered introductions above broad, detailed product-board imagery. Treat vivid colors inside boards as content, not brand UI. Add a dark creative-category band, then a Signal Blue #1465ff device feature with layered mockups. Put the signup form on Cloud Gray #ebedee with a clean white card, and finish with a slate multi-column footer. Keep surfaces open, align content carefully, and use soft elevation only where screenshots or cards need separation. Preserve a calm, generous rhythm instead of packing every section with controls.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width dark canvas with header, centered headline and CTA, then a large product board preview. | primary signup action, navigation menu, product proof | dark slate background, serif display headline, orange CTA, large screenshot |
| 2 | product-showcase | Centered feature heading and short copy above a broad product screenshot. | feature explanation, visual product example | white canvas, serif heading, wide board image |
| 3 | product-showcase | Centered title and compact explanation followed by a large research-board preview. | feature explanation, product demonstration | white canvas, centered copy, wide interface image |
| 4 | product-showcase | Centered introduction above a wide, dark-themed project-board image. | feature explanation, workspace preview | white canvas, serif title, dark board screenshot |
| 5 | product-showcase | Centered heading and short copy above a broad collaborative board screenshot. | feature explanation, collaboration demonstration | white canvas, centered copy, floating product image |
| 6 | gallery | Short centered heading introduces the following horizontal category-card band. | category discovery, content transition | dark slate band, white serif title |
| 7 | gallery | Horizontal row of image-led category cards with centered labels and descriptions. | browse categories, select use case | pale rounded cards, product thumbnails, dark background |
| 8 | logo-cloud | Centered trust statement above a horizontal row of customer logos. | social proof, brand recognition | dark slate background, muted heading, logo strip |
| 9 | feature-split | Blue full-width section with left-aligned copy and layered device imagery. | cross-device benefit, app discovery | Signal Blue field, white text, overlapping device mockups |
| 10 | cta | Pale full-width background with centered signup card and decorative imagery near the bottom. | social signup, email registration, consent options | Cloud Gray background, white form card, stacked inputs, orange CTA |
| 11 | footer | Dark footer with brand and language control alongside several link columns. | section navigation, language selection, support access | Studio Slate background, multi-column links, subdued secondary text |

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