Design System Inspiration of note

Overview

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

Primary tasks

• Write and publish a long-form piece in the editor
• Read substantial essays instead of scrolling a feed
• Follow a writer and leave a スキ on their work
• Sell your writing directly to readers as a paid membership
• Find something new to read through curated recommendations

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.

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.

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.

Colors

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.

Typography

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.

Layout

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

Responsive Behavior

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

Elevation & Depth

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

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.none: none

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:

Easings:

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. –>

Components

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

States

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.

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.

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 -->

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.

Governance

Known Gaps

• Contrast, button-theme. Text #ffffff on #2cb696 measures 2.55:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.