# Goodnotes

> # Goodnotes — Style Reference

**Goodnotes** là ứng dụng ghi chú kỹ thuật số hàng đầu dành cho iPad, iPhone và Mac. Phong cách thiết kế của Goodnotes kết hợp giữa tính chân thực của ghi chú tay với độ chính xác của công cụ kỹ thuật số. Giao diện tối giản, tập trung vào nội dung, với bảng màu trung tính và typography rõ ràng, dễ đọc. Các yếu tố tương tác như bút, highlight và công cụ chỉnh sửa được thiết kế trực quan, mô phỏng trải nghiệm viết tay thực tế. Hiệu ứng chuyển động mượt mà và phản hồi haptic tinh

## Prompt Content

```
# Goodnotes — Style Reference
> Paper-white command canvas — một trang giấy trắng trống, nơi mọi công cụ đều khớp vào vị trí mà không cần trang trí.

**Theme:** light

Goodnotes vận hành trên một canvas trắng với độ nhiễu thị giác gần như bằng không: hầu như không có shadow, không gradient, và một bảng màu cố tình tiết chế. Màu bão hòa duy nhất — một tông cyan/aqua (#57d2ee) — chỉ xuất hiện trên primary CTA button, khiến hành động trông như được bật lên trên một nền đơn sắc. Typography hoàn toàn dùng Roobert, một rounded geometric sans tùy chỉnh, với negative tracking rõ rệt ở kích thước display (−0.05em) giúp các headline lớn được siết chặt. Product UI screenshots mang trọng lượng thị giác; page chrome xung quanh giữ phẳng, hướng đến chữ, và được typeset dày đặc ở kích thước nhỏ. Borders thay vì shadow định nghĩa các bề mặt, và border-radius 10px duy nhất được áp dụng đồng nhất cho buttons, cards, và UI chrome.

## Tokens — Colors

| Name | Value | Token | Vai trò |
|------|-------|-------|---------|
| Pure Canvas | `#ffffff` | `--color-pure-canvas` | Nền trang, nền card, text trên nút cyan CTA |
| Midnight Ink | `#000000` | `--color-midnight-ink` | Headline chính, body text, border trên UI chrome |
| Deep Charcoal | `#1e1e1e` | `--color-deep-charcoal` | Text và border của ghost button, secondary heading, icon strokes |
| Graphite | `#111213` | `--color-graphite` | Nền nav tối, nền section tối, link text trong ngữ cảnh tối |
| Slate | `#565656` | `--color-slate` | Body copy trên card, secondary descriptive text |
| Fog | `#888889` | `--color-fog` | Muted helper text, captions, de-emphasised labels |
| Ash | `#666666` | `--color-ash` | Tertiary text, subtle UI labels |
| Steel | `#333333` | `--color-steel` | Badge text, mid-weight secondary content |
| Border Medium | `#e8e8e8` | `--color-border-medium` | Tab underlines, nav separators, light hairline dividers |
| Border Soft | `#bebebe` | `--color-border-soft` | Card outlines, modal borders, container edges |
| Aqua Spark | `#57d2ee` | `--color-aqua-spark` | Màu hành động xanh cho filled buttons, trạng thái navigation được chọn, và các khoảnh khắc chuyển đổi tập trung. |
| Teal Deep | `#45bfdb` | `--color-teal-deep` | Brand surface wash, các section nền teal |
| Cyan Mist | `#bcedf8` | `--color-cyan-mist` | Outlined button borders, soft teal ring accents |
| Cyan Text | `#6dd9f2` | `--color-cyan-text` | Blue outline accent cho tags, dividers, và focused UI edges. |
| Sky Link | `#0299e0` | `--color-sky-link` | Hyperlinks và underline accents trong body copy |
| Highlighter Yellow | `#f2e6b3` | `--color-highlighter-yellow` | Text highlight wash — mô phỏng bút highlighter vật lý trên các ảnh chụp màn hình note-taking UI |

## Tokens — Typography

### Roobert — Hệ thống một font — mọi UI copy, từ caption 10px đến hero headline 48px, đều là Roobert. Các dạng hình học bo tròn phản chiếu thương hiệu tablet/chữ viết tay; weight 700 ở 48px với tracking −0.05em tạo ra display text dày đặc, khít chặt, đọc như một nét bút chì tự tin chứ không phải tiếng hét kỹ thuật số. · `--font-roobert`
- **Thay thế:** Plus Jakarta Sans, DM Sans
- **Weights:** 400, 500, 600, 700
- **Kích thước:** 10px, 14px, 15px, 16px, 18px, 20px, 22px, 24px, 40px, 48px
- **Line height:** 1.00–1.60 (1.00 ở 48px display, 1.40 ở kích thước body, 1.60 ở caption nhỏ)
- **Letter spacing:** -0.05em ở 48px, -0.042em ở 40px, -0.02em ở 24px, -0.016em ở 20-22px; body và kích thước nhỏ tracking bình thường
- **OpenType features:** `normal`
- **Vai trò:** Hệ thống một font — mọi UI copy, từ caption 10px đến hero headline 48px, đều là Roobert. Các dạng hình học bo tròn phản chiếu thương hiệu tablet/chữ viết tay; weight 700 ở 48px với tracking −0.05em tạo ra display text dày đặc, khít chặt, đọc như một nét bút chì tự tin chứ không phải tiếng hét kỹ thuật số.

### Font Awesome 6 Brands — Bộ glyph icon social/brand dùng trong badges và footer; đơn sắc, không thay đổi kích thước · `--font-font-awesome-6-brands`
- **Thay thế:** Simple Icons (SVG)
- **Weights:** 400
- **Kích thước:** 15px
- **Line height:** 1.00
- **Vai trò:** Bộ glyph icon social/brand dùng trong badges và footer; đơn sắc, không thay đổi kích thước

### Type Scale

| Vai trò | Kích thước | Line Height | Letter Spacing | Token |
|---------|------------|-------------|----------------|-------|
| caption | 10px | 1.6 | — | `--text-caption` |
| body-sm | 14px | 1.43 | — | `--text-body-sm` |
| body | 16px | 1.4 | — | `--text-body` |
| subheading | 18px | 1.38 | — | `--text-subheading` |
| heading-sm | 22px | 1.25 | -0.35px | `--text-heading-sm` |
| heading | 24px | 1.2 | -0.48px | `--text-heading` |
| heading-lg | 40px | 1.11 | -1.68px | `--text-heading-lg` |
| display | 48px | 1 | -2.4px | `--text-display` |

## Tokens — Spacing & Shapes

**Đơn vị cơ bản:** 4px

**Mật độ:** comfortable

### Spacing Scale

| Tên | Giá trị | Token |
|-----|---------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 28 | 28px | `--spacing-28` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 60 | 60px | `--spacing-60` |
| 64 | 64px | `--spacing-64` |

### Border Radius

| Element | Giá trị |
|---------|---------|
| tags | 10px |
| cards | 10px |
| links | 4px |
| inputs | 10px |
| buttons | 10px |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 80px
- **Card padding:** 24px
- **Element gap:** 24px

## Components

### Primary CTA Button (Aqua Fill)
**Vai trò:** Hành động chuyển đổi chính — "Start Free"

Background #57d2ee, text #111213 (gần đen để tương phản), border-radius 10px, padding 8px 16px, font Roobert 500 15–16px. Không shadow. Là chromatic button filled duy nhất trên trang — màu cyan của nó ngay lập tức định vị hành động trong một bố cục đơn sắc.

### Ghost Navigation Button
**Vai trò:** Dropdown triggers trong top navigation (Product, Built For, Resources)

Background transparent, text #1e1e1, border 1px solid #1e1e1, border-radius 10px, padding 10px 12px, Roobert 400 14–15px. Dè dặt — đọc như secondary control bên cạnh cyan CTA.

### Teal Tinted Feature Button
**Vai trò:** Tab hoặc section-switch controls trong các feature sections

Background rgba(87,210,238,0.1), border 1px solid rgba(87,210,222,0.4), text #222222, border-radius 0px, padding 20px 30px, Roobert 500 16px. Flat-radius tabs trải dài toàn bộ chiều rộng section; lớp cyan fill độ mờ thấp gắn chúng với thương hiệu mà không cạnh tranh với CTA.

### White Content Card
**Vai trò:** Feature và benefit cards trong grid sections

Background #ffffff, border 0.5px solid #bebebe, border-radius 10px, padding 24px tất cả các cạnh, không box-shadow. Body text #565656 ở 16px/1.4. Headline #000000 ở 20–24px weight 600.

### Tab Navigation Strip
**Vai trò:** In-page content switcher (Whiteboard / PDF Annotation / Documents / Notebooks)

Các tab chia sẻ một strip ngang với border dưới #e8e8e8. Tab active có underline #000000 2px và text #000000 weight 600. Tab inactive #666666, weight 400. Border-radius 0px trên strip; padding từng tab 10px 20px.

### Product UI Screenshot Card
**Vai trò:** Product showcase: ảnh chụp màn hình giao diện ứng dụng Goodnotes

Được chứa trong một white card (border-radius 10px, border 1px solid #bebebe) hoặc nổi trên nền trắng. Các cạnh của screenshot được bo tròn 10px khi hiển thị dưới dạng card inset. Không có shadow do trang thêm vào — screenshot tự cung cấp chiều sâu thị giác riêng.

### Logo Marquee Strip
**Vai trò:** Social-proof partner/customer logos trong horizontal scrolling ticker

Nền trắng, không border, logo ở #000000 hoặc grayscale trung tính. Được animate với marquee-scroll (28s linear infinite). Padding 20px 0. Các logo cách nhau bằng column gap 40px+ nhất quán. Không card wrapping — logo nổi trực tiếp trên nền trắng.

### Highlighter Text Accent
**Vai trò:** Inline emphasis trong body copy, mô phỏng bút highlighter vật lý

Inline span với background #f2e6b3 được áp dụng dưới dạng link/span backgroundColor. Không border-radius (0px). Được dùng để kết nối trực quan với phép ẩn dụ note-taking trong cả product screenshots và marketing copy.

### "Learn More" Text Link
**Vai trò:** Secondary navigation trong các feature sections

Text #6dd9f2 trên teal-background sections, #0299e0 trên white sections, Roobert 500 14–16px. Bao gồm mũi tên "→". Không underline mặc định; border-radius 4px trên focus ring.

### Section Heading Block
**Vai trò:** Đầu mỗi page section — headline căn giữa hoặc căn trái + subtext

Heading: Roobert 700, 40–48px, #000000, letter-spacing −0.042 đến −0.05em, line-height 1.0–1.11. Subheading: Roobert 400, 18px, #565656 hoặc #666666, line-height 1.4. Khoảng cách dọc giữa heading và subheading: 16–24px.

## Do's and Don'ts

### Do
- Chỉ dùng #57d2ee cho primary filled CTA button — không element UI nào khác nên chia sẻ màu fill này, giữ nó là tín hiệu hành động màu sắc duy nhất.
- Áp dụng Roobert weight 700 với letter-spacing −0.05em (−2.4px) cho tất cả display headline 48px; siết chặt tracking theo tỷ lệ giảm dần xuống −0.016em ở 20–22px.
- Định nghĩa các cạnh của card và container bằng border solid 0.5–1px #bebebe hoặc #e8e8e8 — không bao giờ dùng box-shadow để tạo độ cao bề mặt.
- Dùng border-radius 10px đồng nhất cho buttons, cards, inputs, và UI chrome; chỉ dành 4px cho focus/link rings.
- Giữ body copy ở #565656 hoặc #666666 trên white cards — chỉ dành #000000 cho headings và primary labels.
- Dùng #f2e6b3 làm inline background highlight trên các text span được nhấn mạnh — áp dụng phẳng (không radius) để phản chiếu nét highlighter vật lý.
- Phân cách nội dung section bằng khoảng cách dọc 80px trên desktop; dùng element gap 24px trong card grids và giữa các UI element được nhóm.

### Don't
- Không bao giờ thêm box-shadow vào cards, modals, hoặc buttons — mọi sự phân cách bề mặt phải đến từ borders, không phải độ cao.
- Không bao giờ dùng màu fill chromatic thứ hai cho buttons; các biến thể ghost (border #1e1e1) và tinted-teal (rgba(87,210,238,0.1)) phải luôn ở vị trí thị giác phụ thuộc vào cyan CTA.
- Không bao giờ đặt headline letter-spacing thành 0 hoặc giá trị dương ở kích thước trên 24px — negative tracking là chữ ký của giọng nói display.
- Không bao giờ thay thế Roobert bằng một typeface khác; nếu custom font không tải được, fallback sang Plus Jakarta Sans hoặc DM Sans — không dùng Inter hoặc system-ui.
- Không bao giờ dùng #0299e0 (Sky Link) làm button fill hoặc section color — nó được dành riêng cho inline hyperlinks và text "Learn more" trong ngữ cảnh nền trắng.
- Không bao giờ áp dụng teal tinted button (rgba(87,210,238,0.1)) với border-radius — nó là tab control radius 0px, không phải pill hay rounded button.
- Không bao giờ căn giữa body copy paragraphs rộng hơn 600px — text dài căn giữa làm hỏng khả năng đọc; căn trái body text trong các feature sections hai cột.

## Surfaces

| Cấp độ | Tên | Giá trị | Mục đích |
|--------|-----|---------|----------|
| 1 | Page Canvas | `#ffffff` | Nền trang mặc định; tất cả sections bắt đầu từ đây |
| 2 | Card Surface | `#ffffff` | Cards được nâng lên được định nghĩa bằng border #bebebe hoặc #e8e8e8 (solid 0.5–1px), không phải shadow |
| 3 | Warm Off-White | `#f6f5ee` | Nền section thay thế theo CSS token --_color---background-warm; dùng cho các dải feature có tông ấm |
| 4 | Dark Shell | `#111213` | Dark nav bar, dark footer sections, full-bleed dark feature blocks |
| 5 | Teal Wash | `#45bfdb` | Bề mặt màu thương hiệu cho feature callouts và các dải section được tô sáng |

## Elevation

Goodnotes không dùng box-shadow. Elevation được thể hiện hoàn toàn qua borders: cards nằm trên nền trắng với outline solid 0.5–1px #bebebe hoặc #e8e8e8. Điều này làm cho UI có cảm giác như giấy xếp chồng lên giấy — không ảo giác chiều sâu, chỉ là layering cạnh sắc nét nhất quán với phép ẩn dụ notebook.

## Imagery

Goodnotes dùng product UI screenshots được chứa trong khung làm phương tiện thị giác chính — không lifestyle photography, không abstract illustration. Screenshots được hiển thị dưới dạng các chồng tài liệu xếp lớp chồng lên nhau (hiệu ứng strategic expansion proposal v1/v2/v3) hoặc dưới dạng một app view chiếm ưu thế duy nhất bên trong khung card bo tròn. Trong handwriting section, một tablet-canvas screenshot với các nét vẽ tay thực tế, mũi tên và chú thích xuất hiện ở khoảng 40% chiều rộng section. Illustration vắng mặt; mọi độ phức tạp thị giác được chuyển sang real product UI. Icons (toolbar actions) là filled, nhỏ gọn, và đơn sắc ở 15–20px — không có kiểu icon outlined hoặc đa sắc. Partner/customer logos trong marquee strip là đen trên trắng, không cầu kỳ. Mật độ tổng thể là image-moderate: một product screenshot lớn mỗi section, được bao quanh bởi khoảng trắng rộng rãi, với text làm công việc giải thích thay vì hình ảnh trang trí.

## Layout

Max-width 1200px căn giữa trên canvas trắng. Hero là bố cục centered-headline: headline Roobert 700 lớn, một câu subtext, và một cyan CTA button duy nhất, với một tabbed product screenshot panel ngay bên dưới trải rộng khoảng 70% chiều rộng nội dung. Bên dưới hero, một horizontal logo marquee chạy full-bleed với mask tràn tinh tế. Feature sections theo pattern 2-column text-left / product-right xen kẽ ở desktop widths, chuyển sang centered stacks ở mobile. Các section "Built for any kind of work" và AI dùng tab controls full-width (radius 0px) làm in-section navigation, với các content panels chuyển đổi bên dưới. Các section được phân cách bằng khoảng cách dọc 80px không có visual dividers — khoảng trắng là separator duy nhất. Một 3-column card grid xuất hiện trong tools/features section. Navigation là sticky top bar với logo bên trái, nav links center-right, và cyan CTA ghim ở far right.

## Agent Prompt Guide

**Quick Color Reference**
- text (primary): #000000
- text (secondary): #565656
- background: #ffffff
- border: #bebebe (cards), #e8e8e8 (dividers/tabs)
- accent / brand: #57d2ee
- primary action: #57d2ee (filled action)

**Example Component Prompts**

1. Tạo Primary Action Button: background #57d2ee, text #000000, radius 9999px, compact pill padding. Dùng treatment filled này cho main CTA.

2. **White Feature Card**: Background #ffffff, border 1px solid #bebebe, border-radius 10px, padding 24px. Card title: Roobert 600, 22px, #000000, letter-spacing −0.35px. Body: Roobert 400, 16px, #565656, line-height 1.4. Link "Learn more →": #0299e0, Roobert 500, 14px.

3. **Tab Navigation Strip**: Strip full-width, border-bottom 1px solid #e8e8e8, không radius. Tab active: Roobert 600, 16px, #000000, border-bottom 2px solid #000000, padding 10px 20px. Tab inactive: Roobert 400, 16px, #666666, padding 10px 20px.

4. **Ghost Nav Button**: Background transparent, text #1e1e1e, border 1px solid #1e1e1e, border-radius 10px, padding 10px 12px, Roobert 400, 15px. Dùng cho dropdown triggers — không fill, không shadow.

5. **Section Heading Block**: Roobert 700, 40px, #000000, letter-spacing −1.68px, line-height 1.11, căn giữa. Bên dưới: Roobert 400, 18px, #666666, line-height 1.4, căn giữa, max-width 560px. Khoảng cách dọc giữa heading và subtext: 16px.

## Similar Brands

- **Notion** — Cùng white-canvas minimal page, black headline typography, bảng màu đơn sắc với một accent bão hòa duy nhất trên primary CTA
- **Craft Docs** — Cùng cách tiếp cận note-taking UI-screenshot-as-hero, light flat card surfaces được định nghĩa bằng border không phải shadow, rounded sans type gần giống Roobert
- **Miro** — Tablet/whiteboard product showcase với teal/cyan brand accent trên nền trắng, tab-based in-page navigation cho feature sections
- **Loom** — Hệ thống single-font rounded sans, cyan/aqua CTA trên nền page chủ yếu trung tính, product screenshots làm công việc thị giác nặng nhọc
- **Linear** — Triết lý no-shadow border-only card elevation, tight negative-tracked display headlines, hệ thống phân cấp hành động tối giản với một standout CTA color

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-pure-canvas: #ffffff;
  --color-midnight-ink: #000000;
  --color-deep-charcoal: #1e1e1e;
  --color-graphite: #111213;
  --color-slate: #565656;
  --color-fog: #888889;
  --color-ash: #666666;
  --color-steel: #333333;
  --color-border-medium: #e8e8e8;
  --color-border-soft: #bebebe;
  --color-aqua-spark: #57d2ee;
  --color-teal-deep: #45bfdb;
  --color-cyan-mist: #bcedf8;
  --color-cyan-text: #6dd9f2;
  --color-sky-link: #0299e0;
  --color-highlighter-yellow: #f2e6b3;

  /* Typography — Font Families */
  --font-roobert: 'Roobert', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-font-awesome-6-brands: 'Font Awesome 6 Brands', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.6;
  --text-body-sm: 14px;
  --leading-body-sm: 1.43;
  --text-body: 16px;
  --leading-body: 1.4;
  --text-subheading: 18px;
  --leading-subheading: 1.38;
  --text-heading-sm: 22px;
  --leading-heading-sm: 1.25;
  --tracking-heading-sm: -0.35px;
  --text-heading: 24px;
  --leading-heading: 1.2;
  --tracking-heading: -0.48px;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.11;
  --tracking-heading-lg: -1.68px;
  --text-display: 48px;
  --leading-display: 1;
  --tracking-display: -2.4px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-60: 60px;
  --spacing-64: 64px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 80px;
  --card-padding: 24px;
  --element-gap: 24px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 10px;

  /* Named Radii */
  --radius-tags: 10px;
  --radius-cards: 10px;
  --radius-links: 4px;
  --radius-inputs: 10px;
  --radius-buttons: 10px;

  /* Surfaces */
  --surface-page-canvas: #ffffff;
  --surface-card-surface: #ffffff;
  --surface-warm-off-white: #f6f5ee;
  --surface-dark-shell: #111213;
  --surface-teal-wash: #45bfdb;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-pure-canvas: #ffffff;
  --color-midnight-ink: #000000;
  --color-deep-charcoal: #1e1e1e;
  --color-graphite: #111213;
  --color-slate: #565656;
  --color-fog: #888889;
  --color-ash: #666666;
  --color-steel: #333333;
  --color-border-medium: #e8e8e8;
  --color-border-soft: #bebebe;
  --color-aqua-spark: #57d2ee;
  --color-teal-deep: #45bfdb;
  --color-cyan-mist: #bcedf8;
  --color-cyan-text: #6dd9f2;
  --color-sky-link: #0299e0;
  --color-highlighter-yellow: #f2e6b3;

  /* Typography */
  --font-roobert: 'Roobert', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-font-awesome-6-brands: 'Font Awesome 6 Brands', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.6;
  --text-body-sm: 14px;
  --leading-body-sm: 1.43;
  --text-body: 16px;
  --leading-body: 1.4;
  --text-subheading: 18px;
  --leading-subheading: 1.38;
  --text-heading-sm: 22px;
  --leading-heading-sm: 1.25;
  --tracking-heading-sm: -0.35px;
  --text-heading: 24px;
  --leading-heading: 1.2;
  --tracking-heading: -0.48px;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.11;
  --tracking-heading-lg: -1.68px;
  --text-display: 48px;
  --leading-display: 1;
  --tracking-display: -2.4px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-60: 60px;
  --spacing-64: 64px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-lg: 10px;
}
```