note（ノート）

Overview

note（ノート）is a Japanese content platform designed for writers, creators, and everyday enthusiasts to share personal stories, product reviews, and cultural observations with a community of engaged readers. The aesthetic centers on 'Accessible Minimalism'—a design philosophy that prioritizes clarity, readability, and human connection over visual spectacle. The interface uses a clean white canvas (rgb(255, 255, 255)) paired with a sophisticated near-black accent (rgb(8, 19, 26)) and strategic pops of rose-pink (rgb(209, 62, 92)) for calls-to-action and emotional engagement markers. The emotional response is one of calm focus: users feel invited into a thoughtful, uncluttered space where their words and ideas take center stage, never competing with decorative noise.

The brand voice is conversational, warm, and unpretentious. Vocabulary leans toward everyday Japanese and English terms—no corporate jargon, no hype. The tone celebrates the mundane made meaningful: a food review becomes a meditation on taste and memory, a personal essay becomes a shared moment of recognition. Example sentence in brand voice: 'この燻製たまご、半年前のと比べると、香りがぐっと深くなってる。晩酌がもっと好きになった。' (This smoked egg, compared to the one from six months ago, has a much deeper aroma. It made my evening drink even better.)

Colors

The color system balances functional clarity with emotional warmth. Primary (#08131a, rgb(8, 19, 26)) is a near-black that serves as the dominant text and structural color—it appears in body copy (16px, 400 weight), headlines (32px, 700 weight), and button backgrounds. This near-black is not pure black; its slight blue undertone (hue ~210°) creates visual softness while maintaining legibility at all sizes. Secondary (#43709d, rgb(67, 112, 157)) is a muted slate-blue used sparingly for secondary navigation, metadata, and supporting UI elements; it conveys trust and stability without competing for attention. Tertiary (#d13e5c, rgb(209, 62, 92)) is a rose-pink reserved exclusively for emotional engagement markers: the 'like' reaction button, error states, and premium call-to-action buttons. T

Typography

The type system uses a single font family—Helvetica Neue with fallbacks to Hiragino Sans, Hiragino Kaku Gothic ProN, and Noto Sans JP—to ensure consistent rendering across Japanese and English text. This choice reflects the platform's bilingual, cross-cultural audience and avoids the visual jarring of serif-to-sans transitions. Display (48px, 700 weight, -0.02em letter-spacing) is used sparingly for hero headlines; headline-lg (32px, 700 weight) anchors article titles and major section breaks; body-md (16px, 400 weight, 24px line-height) is the workhorse for article content, optimized for sustained reading at arm's length. Label-md (14px, 600 weight, 0.01em letter-spacing) is applied to all interactive elements—buttons, badges, metadata timestamps—to create visual distinction from body tex

Layout

The layout uses a fluid 12-column grid with a max-width of 1280px (container-max-width: 1280px), centering content on desktop while allowing full-width adaptation on mobile (breakpoints: 361px, 481px, 769px, 941px, 1280px, 2048px). The gutter is consistently 24px on desktop, reducing to 16px on tablets and 8px on phones, maintaining visual rhythm across devices. White-space philosophy prioritizes 'breathing room': section separation uses lg spacing (40px margin-bottom), card-to-card gaps use md spacing (24px), and internal card padding uses md spacing (24px on all sides). The container max-width of 1280px ensures that article text never exceeds ~70 characters per line, a proven threshold for reading comfort. Hero imagery (like the smoked egg product photo) spans the full container width wi

Elevation & Depth

Depth is conveyed through subtle shadows and layering, never through color darkening. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for cards and input fields at rest, md (0 4px 12px rgba(0, 0, 0, 0.08)) for cards on hover and modals, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for floating elements like sticky headers or dropdowns. Cards use a 1px solid border at #dfe1e6 (surface-container-highest) in addition to their shadow, creating a crisp edge that prevents the card from appearing to 'float away' from the background. On hover, cards transition from sm to md shad

Shapes

The shape philosophy is 'Functional Softness'—rounded corners are used consistently to soften the interface without sacrificing clarity or precision. Buttons and input fields use border-radius: 8px (1rem), a moderate radius that feels approachable while remaining distinctly digital. Cards and containers use border-radius: 4px (0.5rem) or 0px (sharp edges for full-width sections), maintaining visual hierarchy: interactive elements (buttons, inputs) are rounder, structural elements (cards, sections) are sharper. The 8px radius appears 127 times across the site, making it the dominant shape token

Components

Action Elements Buttons follow a strict type system: primary buttons (background: #08131a, color: #ffffff, padding: 12px 16px, height: 40px, border-radius: 8px, font-weight: 600) are used for main CTAs like 'Follow' and 'Post'; secondary buttons (background: transparent, border: 1px solid #c4c7c8, color: #08131a) are used for alternative actions. On hover, primary buttons transition to background: #202a30 over 200ms; secondary buttons transition to background: #e8eaed. Reaction buttons (like the '60' heart count) use a tertiary style: background: transparent, border: 1px solid #dfe1e6, color: #d13e5c, border-radius: 9999px, padding: 8px 12px. When active (user has reacted), the background shifts to #f5d5dd (tertiary-container) and the border becomes #d13e5c, with a 200ms cubic-bezier(0

Do's and Don'ts

**Do**

• Do use primary color (#08131a) for all body text and structural elements; it's the backbone of readability and brand identity.
• Do apply the 24px gutter consistently across all breakpoints, scaling down to 16px on tablets and 8px on phones to maintain rhythm.
• Do use tertiary color (#d13e5c) exclusively for emotional engagement markers (likes, reactions, premium CTAs) to create a consistent visual language for user interaction.
• Do apply 200ms cubic-bezier(0.34, 1.56, 0.64, 1) transitions to all interactive elements (buttons, cards, inputs) to signal responsiveness without feeling sluggish.
• Do keep line-height at 1.5× font size (24px for 16px body text) to ensure comfortable reading, especially for Japanese text which is denser than English.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text; always use primary (#08131a) for text and surface (#ffffff) for backgrounds to maintain the brand's sophisticated near-black aesthetic.
• Don't apply shadows > 0 16px 40px rgba(0, 0, 0, 0.12); deeper shadows create visual separation that contradicts the platform's grounded, accessible philosophy.
• Don't mix font families; always use Helvetica Neue with the specified fallback stack (Hiragino Sans, Noto Sans JP) to ensure consistent rendering across Japanese and English text.
• Don't use border-radius > 1.5rem except for full-circle avatars; excessive rounding creates a 'bubbly' aesthetic that undermines the platform's editorial credibility.
• Don't apply color transitions longer than 200ms or shorter than 100ms; slower transitions feel sluggish, faster ones feel jarring and can trigger motion-sickness in sensitive users.