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

# Goodnotes · Design System

> A calm canvas for ideas in motion

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

Goodnotes pairs a bright, restrained canvas with crisp black typography and confident cyan calls to action. Product screens and customer stories carry the detail, while generous white space keeps the long page easy to scan.

## North star

Keep the canvas quiet and let real product interfaces, crisp typography, and selective cyan actions carry the story.

## Overview

The page is built on a white canvas, with black text and thin gray borders doing most of the structural work. Cyan is reserved for high-intent actions and a late-page promotional band, so it stands out without competing with product content. Roobert provides a consistent sans-serif voice: bold, tightly tracked headlines contrast with softer, smaller explanatory copy. The homepage alternates centered introductions with spacious, image-led feature rows, keeping content within a restrained central column rather than stretching text across the viewport. Product interfaces appear as evidence of real workflows, often framed by quiet neutral space; customer quotes and workflow cards add structure without heavy decoration. Cards rely on hairline borders and modest rounding instead of shadows. A black AI section and black footer create deliberate tonal pauses, while the cyan CTA band closes the main content with a strong, simple finish.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas and the background for the hero, feature sections, testimonials, and most content blocks. |
| Soft Graphite | `#565656` | `--color-soft-graphite` | neutral | Muted supporting copy, including the hero description and secondary explanatory text. |
| Deep Ink | `#000000` | `--color-deep-ink` | brand | Primary text and inverse surfaces; defines headlines, the Goodnotes AI section, and the footer. |
| Quiet Silver | `#bebebe` | `--color-quiet-silver` | semantic | Thin outlines around testimonial cards and other lightly framed content. |
| Action Cyan | `#57d2ee` | `--color-action-cyan` | accent | Primary Start Free buttons against white or dark surfaces. |
| Link Blue | `#0299e0` | `--color-link-blue` | accent | Accent link text; use sparingly for clickable text rather than large areas. |
| Mist Gray | `#eeeeee` | `--color-mist-gray` | neutral | Subdued navigation or link text on dark areas and other secondary interface details. |
| Open Sky | `#45bfdb` | `--color-open-sky` | accent | Full-width closing CTA band, visually distinct from the brighter button cyan. |
| Charcoal | `#1e1e1e` | `--color-charcoal` | semantic | Secondary dark heading and body treatment where softer contrast than pure black is appropriate. |
| Border Fog | `#e0e0e0` | `--color-border-fog` | neutral | Fine outlines on feature cards and inactive product tabs. |
| Paper Butter | `#f2e6b3` | `--color-paper-butter` | semantic | A small pale-yellow supporting accent; observed in a link-related palette role, not a defining page surface. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Deep Ink) · `--color-surface-2` → `#45bfdb` (Open Sky) · `--color-surface-3` → `#f2e6b3` (Paper Butter) · `--color-text` → `#000000` (Deep Ink) · `--color-text-muted` → `#565656` (Soft Graphite) · `--color-text-subtle` → `#eeeeee` (Mist Gray) · `--color-border` → `#bebebe` (Quiet Silver) · `--color-accent` → `#57d2ee` (Action Cyan) · `--color-accent-2` → `#0299e0` (Link Blue) · `--color-accent-3` → `#45bfdb` (Open Sky) · `--color-on-accent` → `#111213`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#45bfdb` | 9.73:1 | AAA |
| `#000000` | `#f2e6b3` | 16.75:1 | AAA |
| `#565656` | `#ffffff` | 7.34:1 | AAA |
| `#565656` | `#000000` | 2.86:1 | fail |
| `#565656` | `#45bfdb` | 3.4:1 | AA-large |
| `#565656` | `#f2e6b3` | 5.85:1 | AA |
| `#eeeeee` | `#ffffff` | 1.16:1 | fail |
| `#eeeeee` | `#000000` | 18.1:1 | AAA |
| `#eeeeee` | `#45bfdb` | 1.86:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Roobert | `--font-body` | webfont | 500, 600, 400, 700 | Site-wide display and interface type: headlines, body copy, navigation, links, buttons, and cards. | Inter |

- **Roobert:** Use weights 400–700; headlines are bold with tight negative tracking, while body and navigation stay sentence case.

### Type scale — Major Third (ratio ≈ 1.278, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 700 | 1.2 | -0.02em | — | Roobert | Centered hero headline introducing Goodnotes for professional work. |
| h2 | 40px | 600 | 1.2 | -0.02em | — | Roobert | Major section headings for features, AI, customers, and workflows. |
| h3 | 24px | 700 | 1.2 | -0.042em | — | Roobert | Feature headings and smaller, strongly emphasized content titles. |
| h4 | 22px | 400 | 1.6 | -0.016em | — | Roobert | Supporting subheads and longer explanatory statements. |
| body | 18px | 500 | 1.4 | 0 | — | Roobert | Main explanatory copy beneath headlines and within feature sections. |
| caption | 16px | 500 | 1.3 | 0 | — | Roobert | Compact card details, labels, and secondary interface text. |
| link | 16px | 500 | 1.3 | 0 | — | Roobert | Navigation items, text links, and calls to explore more. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 9, 10, 12, 14, 16, 20, 24, 30, 32, 40, 60 px.
- Section rhythm 40px · element gap 16px · card padding 24px · max content width 856px.

Use a centered, restrained content column within the measured 856px page maximum, widening only for full-width color bands, dark sections, and footer content. The hero is centered; feature storytelling switches to staggered, alternating text-and-product layouts. The page has comfortable density, with measured 40px section gaps, 16px element gaps, and 24px card padding. Separate major ideas with whitespace rather than colored section backgrounds. Let customer cards and workflow panels form compact grouped layouts, then return to centered headings for new chapters.

## Shape & elevation

- Radius: button `10px` · card `10px` · link `8px` · xs `8px` · sm `10px` · md `20px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

The interface is predominantly flat: no measured shadows or gradients define the page. Use thin #bebebe or #e0e0e0 borders to separate cards and controls, with 10px rounding on standard buttons and cards. Product demonstrations create their own visual depth; avoid adding decorative shadow layers to the surrounding layout.

## Imagery

Use product UI captures as the primary visual material: notebook pages, annotation tools, whiteboards, and workflow examples. Keep screenshots legible and framed within clean, mostly white surroundings. The hero uses an oversized product demonstration rather than lifestyle photography. Supporting images can contain color, but keep those colors within the interface artwork; the page chrome remains neutral. Reserve dark product imagery for the AI section and use a photographic background only as evidence within the security feature.

## Components

### Primary CTA

A compact rounded Start Free button using #57d2ee with dark text; repeated in the hero, intermediate CTA, and header.

### Product tabs

Four adjacent labels switch between Whiteboard, PDF Annotation, Documents, and Notebooks; the selected tab gains a stronger label and dark underline.

### Product demonstration

A large, cleanly framed app screenshot shows the real note-taking interface and its toolbar, serving as the hero's visual anchor.

### Feature story

A headline and brief explanatory copy pair with product imagery in spacious alternating text-and-image arrangements.

### Testimonial card

Quote-led content inside a lightly bordered card with restrained rounding, compact text, and a distinct author attribution.

### Workflow card

A bordered content panel combines a product preview, concise title, short description, and a small blue Learn more link.

### Closing CTA band

A full-width #45bfdb section centers a short headline and a contrasting Start Free action before the black footer.

### Dark footer

A black base organizes many small links into compact columns, with social controls and store badges above a thin divider.

### Measured component styles

- **Primary button** (“Start Free”): background #57d2ee · text #111213 · radius 10px · padding 8.2px 16.4px · 400 14px Roobert
- **Secondary button** (“Whiteboard”): transparent background · text #000000 · border 1px solid #e0e0e0 · radius 20px · padding 0px · 600 16px Roobert
- **Link** (“About”): transparent background · text #eeeeee · radius 0px · padding 0px · 500 16px Roobert
- **Card** (““Using Goodnotes, we have our own person”): transparent background · text #000000 · border 1px solid #bebebe · radius 10px · padding 24px · 400 14px Roobert

## Do

- Keep white as the default canvas.
- Use cyan primarily for high-intent actions.
- Give headline text clear visual priority.
- Show real product UI wherever a feature is explained.
- Use thin neutral borders for cards and controls.
- Alternate centered headings with spacious feature layouts.

## Don't

- Do not fill ordinary content sections with bright color.
- Do not add shadows where flat borders suffice.
- Do not let interface artwork dictate the page palette.
- Do not crowd headings, copy, and product imagery together.
- Do not use cyan as a large decorative accent outside CTA bands.
- Do not make explanatory copy as heavy as headlines.

## Agent prompt

Build a new Goodnotes-style page with a quiet white canvas (#ffffff), near-black typography (#000000), and subtle secondary copy (#565656). Use Roobert if available or Inter as a close free substitute; make headlines bold and tightly tracked, with readable regular-weight body text. Reserve bright #57d2ee for primary actions and use #0299e0 for restrained text links. Organize content in a centered, narrow column with generous whitespace, alternating feature copy and authentic product-interface imagery. Use thin #bebebe or #e0e0e0 borders and modest rounded corners instead of shadows. Create contrast sparingly with a black product or footer section, and use #45bfdb only for a focused closing CTA band. Keep the page calm, product-led, and easy to scan.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline, supporting copy, and CTA above a wide product demonstration. | primary Start Free action, product preview | white canvas, centered heading, cyan CTA |
| 2 | category-nav | Four adjacent product labels sit directly above the demonstration. | switch product view, selected tab state | underlined active tab, fine separators |
| 3 | logo-cloud | A horizontal row of customer logos beneath the opening product preview. | social proof | logo strip, white background |
| 4 | feature-split | Centered section heading followed by spacious alternating text and product imagery. | feature education, workflow examples | staggered image-and-copy rows, white canvas |
| 5 | cta | Compact centered headline and CTA on white. | repeat primary action | centered alignment, cyan CTA |
| 6 | feature-split | Black section with centered heading and two-column AI feature content. | AI use-case exploration, learn more links | inverse surface, product interface imagery |
| 7 | testimonials | Centered heading above a horizontally arranged set of bordered quote cards. | customer proof, attributed quotes | thin card borders, light background |
| 8 | feature-grid | Centered heading above two compact workflow cards with product previews. | workflow discovery, learn more links | bordered cards, preview-led content |
| 9 | feature-split | Centered section title above a two-column copy and image panel, followed by certification marks. | security reassurance, trust signals | split content card, certification logos |
| 10 | cta | Full-width cyan band with a centered headline and contrasting button. | final conversion action | #45bfdb background, centered content |
| 11 | footer | Black footer with social links and store badges above multiple compact navigation columns. | deep navigation, social links, download links | inverse palette, fine divider, dense link columns |

## Source CSS custom properties (selected)

```css
--osano-clear-dialog-background: rgba(255,255,255,0);
--osano-button-border-color: #fff;
--osano-button-background-color: #45c0dd;
--osano-button-foreground-color: #130d0c;
--osano-dialog-background-color: #f2f2f2;
--osano-dialog-foreground-color: #130d0c;
--osano-info-dialog-overlay-color: rgba(0,0,0,0.45);
--osano-link-color: #45c0dd;
--osano-toggle-off-track-color: #bbbbbb;
--osano-toggle-off-thumb-color: #FFFFFF;
--osano-toggle-on-track-color: #45c0dd;
--osano-toggle-on-thumb-color: #FFFFFF;
--osano-widget-color: #37cd8f;
--osano-widget-outline-color: #29246a;
--osano-widget-fill-color: #fff;
--osano-focus-outline-color: Highlight;
--osano-button-close-color: #130d0c;
--osano-button-accept-background-color: #45c0dd;
--osano-button-accept-border-color: #fff;
--osano-button-accept-foreground-color: #130d0c;
--osano-button-deny-background-color: #45c0dd;
--osano-button-deny-border-color: #fff;
--osano-button-deny-foreground-color: #130d0c;
--osano-button-reject-all-background-color: #45c0dd;
--osano-button-reject-all-background-color-hover: #31acc9;
--osano-button-reject-all-border-color: #fff;
--osano-button-reject-all-foreground-color: #130d0c;
--osano-button-manage-background-color: #45c0dd;
--osano-button-manage-border-color: #fff;
--osano-button-manage-foreground-color: #130d0c;
--osano-info-dialog-link-color: #45c0dd;
--osano-info-dialog-button-close-color: #130d0c;
--osano-info-dialog-toggle-off-track-color: #bbbbbb;
--osano-info-dialog-toggle-off-thumb-color: #FFFFFF;
--osano-info-dialog-toggle-on-track-color: #45c0dd;
--osano-info-dialog-toggle-on-thumb-color: #FFFFFF;
--osano-info-dialog-button-background-color: #45c0dd;
--osano-info-dialog-button-border-color: #130d0c;
--osano-info-dialog-button-foreground-color: #130d0c;
--osano-dialog-gpc-background-color: #f2f2f2;
```

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