oh-my-design-cli 1.5.0 → 1.6.0

package/web/references/note/DESIGN.md

@@ -0,0 +1,318 @@
+---
+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"
+---
+
+# 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).