zugzbot 1.0.21 → 1.0.22

package/.opencode/oh-my-design/web/references/note/DESIGN.md

@@ -1,346 +0,0 @@
----
-id: note
-name: note
-country: JP
-category: consumer-tech
-homepage: "https://note.com"
-primary_color: "#41C9B4"
-logo:
-  type: favicon
-  slug: "https://www.google.com/s2/favicons?domain=note.com&sz=128"
-verified: "2026-05-19"
-omd: "0.1"
-tokens:
-  source: prose-derived
-  extracted: "2026-06-09"
-  colors:
-    brand: "#41c9b4"
-    theme: "#2cb696"
-    theme-dark: "#228d74"
-    primary: "#000000"
-    canvas: "#f7f9f9"
-    surface: "#ffffff"
-    text: "#222222"
-    on-primary: "#ffffff"
-  typography:
-    family: { sans: "Hiragino Kaku Gothic ProN", mono: "Hiragino Kaku Gothic ProN" }
-    body:    { weight: 400, use: "Long-form Japanese article body" }
-    heading: { weight: 700, use: "Titles and headings" }
-  spacing: { sm: 8, base: 16 }
-  rounded: { sm: 8, md: 8, lg: 8, full: 9999 }
-  shadow:
-    none: "none"
-  components:
-    button-primary: { type: button, bg: "#000000", fg: "#ffffff", radius: 8, use: "Primary action (Publish / フォロー / 投稿)" }
-    button-secondary: { type: button, bg: "#ffffff", fg: "#222222", radius: 8, use: "Lower-emphasis action" }
-    button-theme: { type: button, bg: "#2cb696", fg: "#ffffff", radius: 8, use: "Brand-context action, the teal moment" }
-    article-card: { type: card, bg: "#ffffff", fg: "#222222", radius: 8, use: "Article preview on off-white canvas" }
-    editor-canvas: { type: card, bg: "#ffffff", fg: "#222222", use: "Distraction-free long-form editor" }
-    text-field: { type: input, bg: "#ffffff", fg: "#222222", radius: 8, use: "Forms, search, profile fields" }
-  components_harvested: true
----
-
-# Design System Inspiration of note
-
-## 1. Visual Theme & Atmosphere
-
-note (note.com) is Japan's leading creator publishing platform — a place where individuals write essays, sell digital content, and build audiences without the noise of a conventional social feed. Its design philosophy is summarized in three words on its own homepage: **つくる、つながる、とどける** ("create, connect, deliver"). Everything in the interface bends toward one goal: **getting out of the writer's and reader's way so the words can do the work.** note is, at its core, a reading-and-writing space, and its design is correspondingly quiet, generous, and content-first.
-
-The brand color is a distinctive **teal-green** — `#41C9B4` is the logo color, with `#2CB696` as the working theme color and `#228D74` as a darker variant. This blue-leaning green is unusual and memorable in a sea of social-platform blues; note describes it as combining the calm, natural feeling of green with the sincerity of blue. But here's the crucial nuance: note deliberately **does not** flood its product chrome with the teal. Over the platform's evolution, note shifted its *primary action* color toward **black** so that nothing competes with the content — the teal became a brand-identity accent (logo, brand moments) while the working UI runs on near-black, white, and a soft off-white background (`#F7F9F9`) with near-black text (`#222222`). The result is an interface that feels like premium paper: warm-white pages, crisp black type, and a recognizable teal mark that signals "this is note" without shouting.
-
-Typography is content-forward and clean, prioritizing legible Japanese long-form reading over decorative display. The mood is **calm, sincere, and writerly** — note is positioned against the dopamine-feed mechanics of conventional social media; it's a place to *settle in* and read or write something substantial. Soft rounded corners, generous whitespace, a restrained palette, and the disciplined choice to let black (not teal) carry the working UI all reinforce a single message: the content is the point, and note is the quiet, trustworthy frame around it.
-
-**Key Characteristics:**
-- **Teal-green brand color** — logo `#41C9B4`, theme `#2CB696`, dark `#228D74` (calm green + sincere blue)
-- **Black as the product primary** — note shifted its primary-action color to black so nothing competes with content (teal = brand accent, not the working UI fill)
-- Soft off-white background `#F7F9F9` with near-black text `#222222` — premium-paper reading feel
-- Content-first, writerly, calm — positioned *against* dopamine-feed social mechanics
-- Generous whitespace and clean long-form Japanese typography — built to *settle in and read*
-- Soft rounded corners and a restrained palette — quiet, trustworthy frame around the content
-- The teal mark signals "this is note" without dominating the interface
-- Reading-and-writing space: discovery is editorial/curated, not endless-scroll engagement-bait
-
-## 2. Color Palette & Roles
-
-note's color system is published in its brand/help resources. The teal is the brand identity; the working UI runs on black/white/off-white so content leads.
-
-### Brand
-- **note Teal (Logo)** (`#41C9B4`): The logo color and primary brand identity. A blue-leaning green — calm + sincere. Used for the brand mark and brand moments.
-- **note Theme** (`#2CB696`): The working theme/accent teal — slightly deeper, used for accents, links, selected/brand states.
-- **note Theme Dark** (`#228D74`): Darker teal for hover/pressed/emphasis on the theme color.
-
-### Product Primary
-- **Black** (`#000000` / near-black): The product's primary-action color. note deliberately uses black (not teal) for primary buttons and key UI so content stays dominant. Teal is reserved as brand accent.
-
-### Surface
-- **Off-White Background** (`#F7F9F9`): The page background — a soft, slightly cool off-white; premium-paper reading surface, never pure stark white.
-- **White** (`#FFFFFF`): Card / content surfaces, editor canvas.
-
-### Text
-- **Near-Black Text** (`#222222`): Primary text — article body, titles, UI labels. Warm-black for comfortable long-form reading.
-- **Secondary / Muted**: mid-grays for metadata, timestamps, captions (kept low-contrast so body text leads).
-
-### Notes
-- The teal family doubles as the **per-publication theme color** — note pro lets organizations set their own theme color, so teal is the default brand identity rather than a hard-locked single accent.
-
-## 3. Typography Rules
-
-### Font Stack
-note prioritizes clean, legible Japanese long-form rendering using a system/web font chain (Hiragino / Noto-class Japanese fonts with platform fallbacks). The editorial priority is reading comfort for substantial text, not decorative display type.
-```
--apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif
-```
-
-### Conventions
-- **Content-forward scale**: comfortable article body size with generous line-height for long-form Japanese reading; restrained, clear heading tiers.
-- **Hierarchy from size + weight + whitespace** — not from loud color (the palette is deliberately quiet).
-- **Body weight regular**; titles/headings bolder. Reading comfort beats display drama.
-- Always carry the Japanese-native font chain; the platform is Japanese-first long-form text.
-
-## 4. Component Stylings
-
-### Buttons
-
-**Primary**
-- Background: Black (`#000000` / near-black)
-- Text: `#FFFFFF`
-- Radius: soft rounded (pill or `8px`+)
-- Use: The primary action (Publish / フォロー / 投稿) — black so it doesn't compete with content
-
-**Secondary / Outline**
-- Background: `#FFFFFF`
-- Text: `#222222`
-- Border: `1px solid` mid-gray
-- Radius: soft rounded
-- Use: Lower-emphasis actions beside a primary
-
-**Brand / Theme accent**
-- Background or text: note Theme `#2CB696`
-- Use: Brand-context actions, links, selected states — the teal moment
-
-**Disabled**
-- Background: light gray
-- Text: muted gray
-- Use: Unavailable actions
-
-### Cards
-
-**Article / Note Card**
-- Background: `#FFFFFF`
-- Text: `#222222`
-- Radius: soft rounded corners
-- Use: Article preview — thumbnail + title + author + metadata, floating on `#F7F9F9`; content-led, minimal chrome
-
-### Editor
-
-**Writing Canvas**
-- Background: `#FFFFFF` (or `#F7F9F9` ambient)
-- Text: `#222222`
-- Use: The distraction-free long-form editor — the heart of "つくる"; chrome recedes, the page is mostly text
-
-### Inputs
-
-**Text Field**
-- Background: `#FFFFFF`
-- Text: `#222222`
-- Border: `1px solid` mid-gray
-- Radius: soft rounded
-- Focus: accent in note Theme `#2CB696` (or black)
-- Use: Forms, search, profile fields
-
-## 5. Layout Principles
-
-### Density
-note is **low density, high whitespace** — a reading platform should breathe. Article pages center a single column of text with generous margins; the home/discovery surfaces use a calm card grid, not a packed feed.
-
-### Structure
-- Reading view: centered single-column body, generous line-length and margins (premium-paper feel)
-- Discovery: editorial/curated card grid on `#F7F9F9`
-- Editor: distraction-free canvas, chrome minimized
-- Whitespace is a primary design tool — the empty space frames the words
-
-## 6. Depth & Elevation
-
-note reads **flat and paper-like**. Depth comes from the off-white-vs-white surface contrast and soft rounded corners, not from heavy shadows. The aesthetic is print/editorial, not material-elevated.
-
-- Cards: minimal/no shadow; `#F7F9F9` page vs `#FFFFFF` card separates them
-- Dropdowns / modals: light shadow + scrim
-- The reading surface stays calm — no dramatic elevation that would pull focus from text
-
-## 7. Do's and Don'ts
-
-- **DO** let content lead — use **black** for the primary action so nothing competes with the writing. **DON'T** flood the UI with teal; the teal is a brand accent, not the working fill.
-- **DO** use the off-white `#F7F9F9` reading background. **DON'T** use stark pure white for long-form pages — the soft off-white is the premium-paper feel.
-- **DO** reserve the teal (`#41C9B4` logo / `#2CB696` theme) for the brand mark, links, and brand moments. **DON'T** scatter it across every control.
-- **DO** prioritize generous whitespace and a comfortable reading column. **DON'T** pack the page like an engagement feed — note is a place to settle in.
-- **DO** use near-black `#222222` text for comfortable long-form reading. **DON'T** use low-contrast body text.
-- **DO** keep chrome minimal in the editor and reading views. **DON'T** add feed-style dopamine mechanics — note is positioned against that.
-- **DO** use soft rounded corners. **DON'T** use sharp utilitarian corners — note feels warm and writerly.
-
-## 8. Responsive Behavior
-
-| Width | Behavior |
-|---|---|
-| Desktop | Centered reading column with wide margins; discovery card grid; sidebar where relevant |
-| Tablet | Reading column stays centered; card grid reflows to fewer columns |
-| Mobile | Single-column reading and feed; chrome minimizes; editor goes full-bleed text; mobile is a core reading context |
-
-### Touch & Mobile
-- Reading column width caps for comfortable line-length on large screens; goes full-width on mobile
-- Touch targets comfortable; the writing/reading experience is the priority at every size
-- Images in articles scale responsively within the reading column
-
-## 9. Agent Prompt Guide
-
-### Quick Color Reference
-- Brand teal: logo `#41C9B4`, theme `#2CB696`, dark `#228D74`
-- Product primary action: **Black** `#000000` (content-first; teal is accent only)
-- Page bg: off-white `#F7F9F9`; card/editor bg `#FFFFFF`
-- Text: `#222222`
-- Radius: soft rounded (pill / `8px`+)
-
-### Example Component Prompts
-- "Create a note primary button: **black** bg, white text, soft rounded corners. Note: note uses black (not its teal brand color) for the primary action so content stays dominant. Place it on an off-white `#F7F9F9` page."
-- "Build a note article card: white bg, soft rounded corners, thumbnail + title (bold) + author + metadata, text `#222222`, floating on `#F7F9F9`. Minimal chrome — the title and image lead."
-- "Design a note reading view: centered single text column with generous margins on `#F7F9F9`, body text `#222222` at comfortable size and line-height for long-form Japanese. Use the teal `#2CB696` only for inline links."
-- "Create a note brand accent moment: the teal `#41C9B4` logo mark + a `#2CB696` 'フォロー' or link accent. Keep it sparing — teal signals 'this is note,' it doesn't fill the UI."
-
-### Iteration Guide
-1. **Black is the product primary** — note moved primary actions to black so content leads. Teal is brand accent only.
-2. **Off-white `#F7F9F9` reading background**, not stark white — premium-paper feel.
-3. **Teal (`#41C9B4` / `#2CB696`) is sparing** — logo, links, brand moments.
-4. **Generous whitespace + centered reading column** — note is a place to settle in, not a feed.
-5. **Text `#222222`** for comfortable long-form reading.
-6. **Soft rounded corners**, warm and writerly.
-7. **Minimal chrome** in editor and reading views — no dopamine-feed mechanics.
-
----
-
-## 10. Voice & Tone
-
-note's voice is **calm, sincere, and creator-respecting** — the platform's stance (つくる、つながる、とどける: create, connect, deliver) frames everyone as a maker with something worth sharing. The copy never adopts the hype, urgency, or vanity-metric pressure of engagement-driven social platforms. It writes in warm, plain polite Japanese (です・ます調), treating the writer as a respected creator and the reader as someone who came to *read*, not to be hooked. The whole emotional register is the opposite of a feed: unhurried, dignified, and quietly encouraging of the act of making.
-
-| Context | Tone |
-|---|---|
-| Buttons | Short sincere JP verb — `投稿する`, `フォロー`, `スキ`. Inviting, never urgent. |
-| Editor / writing | Encouraging and unobtrusive — get out of the writer's way; gentle prompts, never pressure. |
-| Discovery | Editorial and curated — "今日のおすすめ" framing, not "trending / don't miss out." |
-| Empty states | Warm invitation to create or read; never implies failure. |
-| Errors | Calm, blameless, one sentence + fix. |
-| Success (published) | Sincere, dignified confirmation — a piece of work has been shared, treated with respect. |
-| Community (スキ / comments) | Warm and supportive; "スキ" (like) is gentle appreciation, not a vanity-metric arms race. |
-
-**Forbidden patterns.** Engagement-bait and FOMO ("今すぐ", "見逃すな"), vanity-metric pressure, hype superlatives (`バズる`, `話題沸騰`), urgency on creative actions, exclamation-mark shouting, and anything that treats writing as content-to-optimize rather than work-to-respect. note is sincere by design.
-
-**Voice samples.**
-- `つくる、つながる、とどける` — note's stated platform thesis (create / connect / deliver). <!-- verified: note.com homepage tagline, live inspect 2026-05-19 (page title "note ――つくる、つながる、とどける。") -->
-- `投稿する` — the publish action; sincere, unhurried. <!-- illustrative: standard note-register JP action label; not quoted verbatim from a specific live screen -->
-- `スキ` — note's gentle appreciation reaction (its "like"), framed as warmth not a vanity metric. <!-- illustrative / widely-known note convention -->
-
-## 11. Brand Narrative
-
-note (operated by note, Inc.) was built as a deliberate alternative to the engagement-driven social web: a place where individual creators — writers, illustrators, musicians, photographers — could publish substantial work, build a direct relationship with readers, and even sell their content, *without* the dopamine mechanics, algorithmic noise, and vanity-metric pressure of conventional social media. Its three-word thesis, **つくる、つながる、とどける** (create, connect, deliver), captures the full loop: a creator *makes* something, *connects* with an audience, and *delivers* it directly to the people who want it. <!-- source: note.com homepage tagline + platform positioning, live inspect 2026-05-19 -->
-
-The design language is the visible expression of that anti-feed stance. **One**, *content must lead* — which is why note made the unusual, disciplined choice to shift its primary-action color to **black**, so that no UI element (not even its own teal) competes with the writing. **Two**, the surface should feel like *premium paper* — hence the soft off-white `#F7F9F9` background, near-black `#222222` text, generous whitespace, and a centered reading column that gives long-form Japanese room to breathe. **Three**, the brand should be *calm and sincere*, not loud — hence the distinctive teal (`#41C9B4`), a blue-leaning green chosen to feel natural and trustworthy rather than the aggressive blue of conventional social platforms, used as a recognizable mark rather than a wash.
-
-What note refuses: the endless-scroll engagement loop, the trending-now FOMO, the vanity-metric arms race, and any design that treats a piece of writing as content to be optimized rather than work to be respected. note chooses the dignity of the page — and builds its entire visual language to protect it.
-
-## 12. Principles
-
-1. **Content leads; the UI recedes.** A reading-and-writing platform succeeds when the words dominate. *UI implication:* Primary actions are black, not brand-teal; chrome is minimal; whitespace frames the content. Nothing competes with the writing.
-
-2. **The page feels like premium paper.** Reading long-form Japanese should be comfortable and dignified. *UI implication:* Off-white `#F7F9F9` background, near-black `#222222` text, generous line-height, a width-capped reading column. Never stark, never cramped.
-
-3. **The teal is identity, not decoration.** note's blue-green is a recognizable brand mark. *UI implication:* Use `#41C9B4` / `#2CB696` for the logo, links, and brand moments — sparingly. Don't scatter it across the working UI; that would re-introduce the noise the brand rejects.
-
-4. **Anti-feed by design.** note is positioned against dopamine-driven social mechanics. *UI implication:* No FOMO, no vanity-metric arms race, no engagement-bait patterns. Discovery is editorial/curated; "スキ" is gentle appreciation, not a competition.
-
-5. **Respect the creator.** Everyone on note is a maker. *UI implication:* The editor is distraction-free and encouraging; publishing is dignified; copy treats writing as work to respect, not content to optimize.
-
-## 13. Personas
-
-*Personas are fictional archetypes informed by note's publicly-described user base (Japanese creators and readers — writers, illustrators, makers), not real individuals.*
-
-**森田 あや (Aya Morita), 31, Tokyo.** Freelance writer who publishes essays and a paid membership on note. Chose note over social platforms because it respects long-form work and lets her sell directly to readers. Loves the distraction-free editor and the calm, paper-like reading view. Hates anything that feels like an engagement-bait feed.
-
-**佐々木 涼 (Ryo Sasaki), 24, Sapporo.** Reader who comes to note to read substantial essays on his commute — not to scroll. Follows a handful of writers, leaves "スキ" when something moves him. Values that note feels unhurried and sincere, unlike the platforms he uses for quick social updates.
-
-**note pro 担当 / 企業 (Org account manager), 40, Osaka.** Runs a company's owned-media on note pro, where they set a custom theme color. Appreciates that note's default identity is the teal but the platform lets the brand express its own color — content and brand both get respect, neither shouts.
-
-## 14. States
-
-| State | Treatment |
-|---|---|
-| **Empty (no articles yet)** | Off-white canvas, one warm line (`#222222`) inviting the user to write their first note, plus a black primary to open the editor. Encouraging, never blaming. |
-| **Empty (search/discovery no results)** | Calm single line + curated suggestions; editorial framing, not "nothing found, sorry." |
-| **Loading (feed/article)** | Skeleton blocks at final dimensions on `#F7F9F9`; gentle shimmer; reading column reserves its width so text doesn't jump. |
-| **Loading (inline/publish)** | In-button spinner; black button keeps its shape; label swaps to a loading state. |
-| **Error (field)** | Gentle border swap + one calm helper line; cause + fix, sincere tone. |
-| **Error (page/network)** | Soft notice on off-white; one sentence + retry. No alarm, no apology-flood. |
-| **Success (published)** | Dignified confirmation — the work has been shared and delivered (とどける). Sincere, not celebratory-loud. |
-| **Disabled** | Light-gray fill, muted text. Palette swap is the signal. |
-| **Skeleton** | Neutral blocks at exact final size; reading column width preserved; respects reduced-motion. |
-| **Like (スキ)** | Gentle reaction animation in the teal — warm appreciation, never a vanity-metric spectacle. |
-
-## 15. Motion & Easing
-
-note's motion is **gentle, unhurried, and reading-respecting** — it supports a calm experience and never feels like attention-grabbing feed animation.
-
-**Durations:**
-
-| Token | Value | Use |
-|---|---|---|
-| `motion-instant` | 0ms | Toggle commits, selection |
-| `motion-fast` | 150ms | Button hover/press, スキ tap |
-| `motion-standard` | 250ms | Card reveal, dropdown, image fade-in |
-| `motion-modal` | 300ms | Modal/dialog enter-exit |
-
-**Easings:**
-
-| Token | Curve | Use |
-|---|---|---|
-| `ease-standard` | `cubic-bezier(0.4, 0, 0.2, 1)` | The default |
-| `ease-enter` | `cubic-bezier(0, 0, 0.2, 1)` | Things arriving (cards, modals) |
-| `ease-exit` | `cubic-bezier(0.4, 0, 1, 1)` | Dismissals |
-| `ease-soft` | `cubic-bezier(0.34, 1.15, 0.64, 1)` | **Reserved** — a small soft overshoot for the スキ (like) reaction only |
-
-**Spring stance.** A single, restrained soft overshoot is permitted on the スキ reaction (the warm, human moment of appreciating someone's work). Everywhere else motion stays calm and standard — no kinetic flourish that would distract from reading. note is unhurried by design.
-
-**Signature motions.**
-1. **Article image fade-in.** Images in the reading column fade in `opacity 0→1` over `motion-standard / ease-standard` as they load — calm, no slide.
-2. **スキ (like) tap.** The teal heart/like scales `1.0 → 1.12 → 1.0` over `motion-standard / ease-soft` — the one warm overshoot, fitting an appreciation gesture.
-3. **Card/feed reveal.** Discovery cards fade in over `motion-standard / ease-standard`; no aggressive slide-in that would read as a refreshing feed.
-4. **Modal enter.** Scrim fades in; dialog appears with opacity + slight translate over `motion-modal / ease-enter`. Calm and dignified.
-
-**Reduce motion.** Under `prefers-reduced-motion: reduce`, all `motion-*` collapse to `motion-instant`; the スキ overshoot flattens to a simple fill; image and card fade-ins become immediate. The reading experience never depends on motion.
-
-<!--
-OmD v0.1 Sources — note
-
-Tier 1 (live + brand resources, 2026-05-19):
-- note.com (live inspect) — page title "note ――つくる、つながる、とどける。" confirms the
-  three-word thesis; off-white reading surface + near-black text observed.
-- note brand/help resources (WebSearch 2026-05-19, anoiro.com/themes/note + help.note.com
-  brand guideline + brandcolor.info/note): logo color #41C9B4, theme color #2CB696,
-  dark theme #228D74, background #F7F9F9, text #222222.
-- note designer official article (note.com/note_dsn "コンテンツにより集中できるデザインに。
-  noteのプライマリーカラーが黒色になるまで") — confirms note shifted its PRIMARY color to
-  BLACK so content leads; teal became brand accent. This is the key §1/§7/§12 nuance.
-
-Verified vs assumed:
-- VERIFIED: teal palette (#41C9B4 / #2CB696 / #228D74), bg #F7F9F9, text #222222, the
-  つくる・つながる・とどける thesis, and the black-primary-for-content-focus shift.
-- INFERRED: component-level button/card/input variants in §4 (note publishes brand colors and
-  the black-primary principle, but exact per-component token values are mapped from those).
-  Font stack is a representative JP-first chain. Motion tokens (§15) duration values are
-  illustrative. Voice samples marked illustrative are not verbatim live strings except the
-  homepage thesis.
-- Personas (§13) are fictional archetypes of note's described creator/reader user base.
--->
-
----
-
-**Verified:** 2026-05-19 (omd:add-reference — JP batch)
-**Tier 1 sources:** note.com (live — "つくる、つながる、とどける" thesis, off-white reading surface); note brand/help resources + note_dsn designer article (logo teal #41C9B4 / theme #2CB696 / dark #228D74 / bg #F7F9F9 / text #222222; PRIMARY action color shifted to BLACK for content-focus).
-**Tier 2 sources:** anoiro.com / brandcolor.info (teal color confirmation); getdesign.md / refero not separately fetched.
-**Conflicts unresolved:** none. Brief-supplied #41C9B4 confirmed as the logo color; documented the important nuance that note's *product primary action* color is black (teal = brand accent).

package/.opencode/oh-my-design/web/references/notion/.verification.md

@@ -1,141 +0,0 @@
-# Notion — Verification Notes (2026-05-08)
-
-Pipeline: `spec/verification-pipeline.md` · Skill: `omd:migrate`
-
-## Tier 1 — live DOM (playwright getComputedStyle)
-
-### Surfaces inspected (G3 ≥2)
-- `notion.com/en` (English home — clean marketing)
-- `notion.com/ko/product` (Korean Product page — full primary/secondary CTAs visible)
-
-### Raw observations
-
-**Primary CTA — "Notion 무료로 사용하기" / "Get Notion free"** (`.button_button__atjat`)
-- bg `rgb(69, 93, 211)` = **`#455dd3`** (Notion Indigo — the core brand color)
-- color `#ffffff`
-- radius **8px**
-- padding 4-6px × 14-15px (asymmetric)
-- 36-38px height (header) / hero variants slightly larger
-- font 16px / weight **500** / NotionInter
-- Use: Primary on every Notion marketing page
-
-**Secondary CTA — "데모 요청하기" / "Request a demo"** (`.semanticTypography_*`)
-- bg `rgb(33, 49, 131)` = **`#213183`** (darker indigo, paired with Primary)
-- color `#ffffff`
-- radius 8px
-- padding 6×15
-- 38px / 16px·500
-- Use: secondary on dark/blue surfaces — paired with Primary CTA
-
-**Skip-to-content (English home — accent indicator)**
-- bg `rgb(39, 131, 222)` = **`#2783de`** (Notion Sky Blue, distinct from Primary Indigo `#455dd3`)
-- color `#ffffff`
-- radius 16px
-- padding 12px
-- 48px / 16px·400
-- Use: a11y skip-to-content; uses Sky Blue (different from primary CTA Indigo)
-
-**Pause/Play Icon (hero video controller)**
-- bg `rgba(0, 0, 0, 0.05)` (frosted)
-- color `#ffffff`
-- radius 50%
-- 32×32px
-- Use: hero video media controls
-
-**Customer Logo Nav** (over dark hero showcase)
-- bg transparent
-- color `#ffffff`
-- radius 8px
-- padding 6×15 / 36px / 16px·500
-- Use: customer logo strip — "GS Global", "KakaoStyle", "LG AI", "Karrot" listed (the customer set itself is a brand signal — Notion shows enterprise + Korean brand wins)
-
-**Header Nav Anchors** (from prior session B2)
-- bg transparent
-- color `rgba(0, 0, 0, 0.95)`
-- radius 8px
-- padding 4×16 / 30px / 16px·400 / NotionInter
-
----
-
-## Tier 2a — getdesign.md
-- `getdesign.md/notion` — directory entry exists ("Warm minimalism, serif headings, soft surfaces") but no token data extracted
-
-## Tier 2b — styles.refero.design
-- `?q=Notion` — no Notion record in search results
-
-**Tier 2 status: directory snippet only (Tier 2a) + unavailable (Tier 2b).** Tier 1 (notion.com home + product surfaces) treated as authoritative.
-
----
-
-## Conflict Matrix
-
-| Field | Tier 1 home (en) | Tier 1 /ko/product | refero/getdesign | Resolution |
-|---|---|---|---|---|
-| Primary bg | n/a (skip nav `#2783de` Sky Blue) | `#455dd3` Notion Indigo | n/a | **Primary = Indigo `#455dd3`** (product CTA); Sky Blue `#2783de` reserved for a11y skip-nav |
-| Secondary bg | n/a | `#213183` darker indigo | n/a | secondary = darker indigo, paired with primary |
-| Primary radius | n/a | 8px | n/a | ✓ 8px |
-| Primary font | n/a | 16px·500 NotionInter | n/a | ✓ |
-| Skip-nav radius | 16px | n/a | n/a | a11y signal — generous radius |
-| Hero icon | 50% / `rgba(0,0,0,0.05)` | 50% confirmed | n/a | ✓ |
-
-### Color clarification: 3 Notion blues
-
-Notion's blue palette has **three distinct blues** with separate roles:
-- **`#455dd3` Notion Indigo (Primary)** — the core CTA color, used on home/product/AI/etc. Primary buttons
-- **`#213183` Dark Indigo (Secondary pair)** — paired with Primary on dark/colored surfaces ("Request demo" type)
-- **`#2783de` Notion Sky Blue (a11y / accent)** — reserved for skip-nav, links inside docs, and accent moments — NOT a button background
-
-Existing §4 may use `#0072de` or `#0066cc` for "blue"; correct primary is `#455dd3`. Audit needed.
-
-### Unresolved
-- **None.** Three-blue role split documented; existing §4 "blue" reference should be reconciled to `#455dd3` Primary.
-
----
-
-## Components in §4
-
-§4 already documents Buttons, Cards, Inputs, Nav. Audit needed:
-1. **Primary CTA color**: confirm `#455dd3` (or update if §4 uses `#0072de`)
-2. **Secondary pair `#213183`** missing — add as discrete variant
-3. **Skip-nav `#2783de`** missing — add (signal of accent role)
-4. Hero icon round 50% confirmed
-5. NotionInter font confirmed
-
----
-
-## Philosophy sources (G6)
-
-### Founder/founding facts
-- Founded **March 8, 2013** in San Francisco; Notion Labs Inc.
-  - Source: [Founder Story: Ivan Zhao of Notion (Frederick.ai)](https://www.frederick.ai/blog/ivan-zhao-notion)
-- Founders: **Ivan Zhao (CEO, designer/photographer background)** + **Simon Last (CTO/programmer)**
-  - Source: [founderoo.co — Ivan Zhao, Simon Last, Notion](https://www.founderoo.co/playbooks/ivan-zhao-simon-last-notion)
-- **First two years (2013-2015)**: built Notion Beta no-code programming tool, hired 4 employees, raised ~$2M from angel investors
-  - Source: founderoo.co
-- **2015 crisis pivot**: parted ways with all 4 employees, returned to square one. Ivan borrowed **$150,000 from his mother** to keep going.
-  - Source: [KITRUM — Ivan Zhao](https://kitrum.com/blog/the-phenomenal-journey-of-ivan-zhao-notions-founder/)
-- **Moved from San Francisco to Kyoto, Japan** (less than half cost). Two-story rented house, Shoji screen between bedrooms, **18 hours/day at laptops**, no proper meals or hygiene during the rebuild
-  - Source: [Sequoia Capital — Notion Spotlight](https://sequoiacap.com/article/notion-spotlight/)
-- **Notion 1.0 launched 2016**, Notion 2.0 launched on **Product Hunt March 2018** (productivity-game-changer reception)
-  - Source: KITRUM
-- **1M users by 2019**, viral Reddit/TikTok community-template growth
-  - Source: KITRUM
-- **Notion AI launched 2022-2023** as the "Augmenting Human Intellect" successor product
-  - Source: [Sequoia Capital — Augmenting Human Intellect](https://sequoiacap.com/article/notion-spotlight/)
-
-### "Tools for thought" intellectual lineage
-- Notion explicitly cites **Douglas Engelbart** and **Alan Kay** in its careers/about pages
-- Alan Kay quote on Notion about: *"The best way to predict the future is to invent it."* — verified in existing §11
-- Product metaphor: *"a set of Legos (if Legos were designed by The New York Times)"* — Notion careers page
-
-### Voice samples (live-verified)
-- *"Notion 무료로 사용하기"* / *"Get Notion free"* — homepage Primary CTA <!-- verified: notion.com/ko/product 2026-05 -->
-- *"데모 요청하기"* / *"Request a demo"* — secondary <!-- verified: notion.com/ko/product -->
-- *"콘텐츠로 건너뛰기"* / *"Skip to content"* — a11y <!-- verified: notion.com/en -->
-
----
-
-**Verified-against:**
-- Tier 1: notion.com/en, notion.com/ko/product (live DOM via playwright)
-- Tier 2: getdesign.md/notion — directory snippet; styles.refero.design — no record
-- Founders/funding/Kyoto pivot: Frederick.ai, founderoo.co, KITRUM, Sequoia Capital