Note — Brand Design System Deep Dive

1. Brand Overview

Note.com is a Japanese publishing platform that blends the ethos of a blog network with the monetization tools of a digital marketplace. If you’re familiar with Medium, think of it with a more community-driven, creator-first spin and a distinctly Japanese typographic and layout sensibility. The design language feels quiet, confident, and functional — not flashy. It’s built for people who want to write, share, and sell content without the interface getting in the way.

The vibe is restrained. They’re not chasing gradients or heavy brand colors across the UI. The primary visual anchor is #08131a — a deep, almost-black blue — paired with white and occasional muted greens. The typography is clean and legible, relying on Helvetica Neue with Japanese fallbacks like Hiragino Sans and Noto Sans JP. There’s no attempt to dazzle you with decorative fonts, which is the right call for a content platform in Japanese and English.

The philosophy here is content first. The design system exists to support reading and writing: generous line heights, predictable spacing, unobtrusive borders, and high-contrast text. Buttons are solid, straightforward rectangles with modest corner rounding. Shadows are used sparingly. When they do appear, they’re functional — helping lift components like modals or cards — rather than ornamental.

There’s also a hint of Tailwind CSS utility-class pragmatism in the build. Arbitrary value classes like top-[117px] show they’re comfortable mixing design system tokens with one-off layout tweaks. That means the design system is a living thing — not a frozen spec — but still anchored by a consistent color palette, spacing scale, and component patterns.

If you’re designing for Note, you’re designing for clarity and trust. Every pixel serves the goal of making the content readable and publishing easy.

2. Color System

2.1 Primary Colors

The main brand color is rgb(8, 19, 26) (#08131a). It’s almost black, with a subtle blue undertone. This works because it’s neutral enough for text, icons, and nav backgrounds, but distinct from pure black so it feels less stark. Compared to competitors like Medium’s grayscale, Note’s primary is a bit warmer and more approachable.

Secondary is technically transparent (rgba(0, 0, 0, 0)), used for overlays or invisible placeholders.

A notable accent is rgb(30, 123, 101) (#1e7b65), a muted green. This is rare in the UI — probably reserved for functional states like “success” or brand-specific accents.

The palette also includes a massive set of semantic tokens — everything from --color-aqua-50 to --color-vermilion-950. This is a full UI color system, not just brand colors, covering social media brand colors, functional states (danger, caution, success), and a range of neutrals.

2.2 Complete Palette

Here’s the extracted palette table:

(The actual list is enormous — over 200 named tokens. Every one from the JSON is a defined part of the system.)

The fact that they’ve got --color-social-note (#5ac8b8) and --color-social-note-reaction (#3cb3a2) tells you they’re thinking about internal brand states as well as external integrations.

2.3 Color Relationships

The primary #08131a against white gives excellent contrast — WCAG AAA for body text. Even lighter tints like #1e7b65 against white should clear AA for large text. The palette is designed to work on both light and dark surfaces, with plenty of near-white tints (--color-aqua-50, --color-cerulean-50) for backgrounds.

Dark mode isn’t explicitly defined in the extracted data, but the presence of deep 900/950 shades across color families suggests they have the tokens ready to flip the scheme.

2.4 Usage Guide

• Primary + White — Default for nav bars, buttons, text.
• Accent colors — Use sparingly to draw attention to interactive elements or statuses.
• Functional reds/vermilions — For errors, delete actions.
• Avoid mixing more than one bright accent in a single component — it will break the calm visual tone.
• Social colors (--color-social-facebook, etc.) — Only for external link icons.

3. Typography

3.1 Font Families

The entire system uses Helvetica Neue as the core, with fallbacks:

"Helvetica Neue", Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Noto Sans JP, Meiryo

No Google Fonts. No Adobe Fonts. No variable fonts. This is a safe, system-based stack optimized for Japanese + Latin scripts.

3.2 Type Scale

3.3 Hierarchy

The hierarchy is subtle. Headings max out at 20px — small by Western standards — but in Japanese UI this keeps density high and avoids over-emphasizing headings over body text. Weight is the real differentiator: 600 for emphasis, 400 for body.

Line heights are generous (1.50) for body and captions, tighter (1.00) for icons and certain headings. This keeps dense UI elements compact while allowing text blocks to breathe.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px. Common values:

4.2 Layout

Breakpoints:
360, 361, 411, 480, 481, 503, 504, 768, 769, 940, 941, 1124, 1125, 1280, 2048 px.
Clearly built around precise device widths — not just generic mobile/tablet/desktop.

5. Visual Elements

Border Radius

Values:

• 3px 0px 0px 3px — rare, probably for split inputs.
• 4px 4px 0px 0px — top corners only.
• 8px — default for buttons, inputs, cards.
• 18px — images.
• 20px — icons, “Add article” buttons.
• 24px — icons.
• 9999px — pills, search fields.
• 50% — circular elements.

They nailed consistency: 8px is everywhere for functional UI. Larger radii are reserved for imagery or decorative icons.

Shadows

One shadow style:

rgba(0, 0, 0, 0.14) 0px 4px 8px 3px, rgba(0, 0, 0, 0.22) 0px 1px 3px 0px

Used 24 times — so shadows are present but controlled.

Borders

• 1px solid rgba(8, 19, 26, 0.14) — default input/button border.
• 0px 0px 1px solid rgb(8, 19, 26) — rare section underline.

6. Components

6.1 Buttons

Variant 1 (Input-like button)
Default:

• Background: #ffffff
• Color: #08131a
• Padding: 4px 0px 4px 40px
• Border radius: 8px
• Border: 1px solid rgba(8, 19, 26, 0.14)
• Font: 14px, weight 400

Focus:

• Border: 1px solid var(--color-grayAlpha-300)
• Background: var(--color-surface-success-reaction)

Variant 2 (Primary action)
Default:

• Background: #08131a
• Color: #ffffff
• Padding: 0px 16px
• Border radius: 8px
• Border: none
• Font: 16px, weight 600

Hover:

• Color: var(--color-text-primary)
• Background: var(--color-grayAlpha-300)
• Border: 1px solid var(--color-border-strong)

Active:

• Color: var(--color-text-invert)

Focus:

• Background: var(--color-surface-success-reaction)
• Border: 1px solid var(--color-grayAlpha-300)
• Color: var(--color-text-invert)

6.2 Links

Variant 1:

• Color: #08131a
• No underline by default
• Hover: underline

Variant 2:

• Color: #ffffff
• Weight: 600
• Hover: underline

6.3 Forms

Search input:

• Background: #ffffff
• Color: #08131a
• Border: 1px solid rgba(8, 19, 26, 0.14)
• Radius: 8px
• Padding: 4px 0px 4px 40px
• Focus: border-color var(--color-grayAlpha-300), background var(--color-surface-success-reaction)

6.4 Cards

No explicit card data, but we can infer:

• Radius: 8px
• Shadow: primary shadow style
• Padding: 32px base

7. Design Tokens (CSS Variables)

:root {
  /* Core colors */
  --color-primary: #08131a;
  --color-secondary: transparent;
  --color-white: #ffffff;
  --color-accent-green: #1e7b65;

  /* Semantic tokens (partial list from extracted data) */
  --color-purple-200: #d09fde;
  --color-social-twitter: #000000;
  --color-blackAlpha-600: rgba(0,0,0,0.6588235294);
  --color-aqua-800: #225968;
  --color-pink-500: #d13e5c;
  --color-orange-600: #c88d34;
  /* ... include all tokens from extracted data ... */

  /* Typography */
  --font-helvetica-stack: "Helvetica Neue", Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Noto Sans JP, Meiryo;
  --font-icon: icon;

  /* Spacing */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-56: 56px;

  /* Border radius */
  --radius-sm: 8px;
  --radius-md: 18px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-base: rgba(0, 0, 0, 0.14) 0px 4px 8px 3px, rgba(0, 0, 0, 0.22) 0px 1px 3px 0px;
}

8. AI Coding Assistant Prompt

# Note Design System Specification

You are a Note.com design expert. Build UIs matching their visual language exactly.

## Brand Context
Note.com is a Japanese content publishing platform. The design philosophy is minimal, content-first, and high-contrast. Typography and spacing are tuned for reading comfort. Colors are restrained, with deep neutrals and occasional muted accents. Components are simple rectangles with consistent rounding.

## Color Palette
- Primary: #08131a — Nav bars, text, primary buttons
- Secondary: transparent — overlays, invisible layers
- White: #ffffff — page backgrounds, text on dark
- Accent Green: #1e7b65 — highlights, accents
- --color-purple-200: #d09fde — purple UI accents
- --color-social-twitter: #000000 — Twitter icons
- --color-blackAlpha-600: rgba(0,0,0,0.6588) — overlays
- --color-aqua-800: #225968 — aqua accents
- --color-pink-500: #d13e5c — pink accents
- --color-orange-600: #c88d34 — orange accents
- ... (include all extracted tokens)
Usage: Primary for text/nav/buttons, white for surfaces, accents for small highlights, functional colors for states.

## Typography
Font families:
- Helvetica Neue, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Noto Sans JP, Meiryo
- Icon font: icon

Sizes:
| Level | Size | Weight | Line Height | Use For |
| Button icon | 24px | 400 | 1.00 | Icon buttons |
| Heading-1 | 20px | 400 | 1.00 | Titles |
| Heading-1 | 20px | 600 | 1.50 | Emphasis titles |
| ... | ... | ... | ... | ... |

## Spacing & Grid
Base: 8px grid.
Scale: 2px, 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 56px.
Use: 12px vertical rhythm, 16px horizontal padding on buttons, 32px card padding.

## Border Radius
- sm: 8px — buttons, inputs
- md: 18px — images
- lg: 20px — icons
- xl: 24px — large icons
- full: 9999px — pills
- circle: 50% — avatars

## Shadows & Depth
Single shadow style:
rgba(0, 0, 0, 0.14) 0px 4px 8px 3px, rgba(0, 0, 0, 0.22) 0px 1px 3px 0px

## Component Specifications

### Primary Button
Default:
background: #08131a; color: #ffffff; padding: 0px 16px; border-radius: 8px; border: none; font-weight: 600; font-size: 16px.
Hover:
background: var(--color-grayAlpha-300); color: var(--color-text-primary); border: 1px solid var(--color-border-strong).
Focus:
background: var(--color-surface-success-reaction); border: 1px solid var(--color-grayAlpha-300); color: var(--color-text-invert).

### Secondary Button (input-like)
Default:
background: #ffffff; color: #08131a; padding: 4px 0px 4px 40px; border-radius: 8px; border: 1px solid rgba(8, 19, 26, 0.14); font-size: 14px; font-weight: 400.
Focus:
border: 1px solid var(--color-grayAlpha-300); background: var(--color-surface-success-reaction).

### Navigation Links
Default: color #08131a; no underline.
Hover: underline.
Inverse: color #ffffff; weight 600; hover underline.

### Input Fields (search)
Default: background #ffffff; color #08131a; border 1px solid rgba(8, 19, 26, 0.14); radius 8px; padding 4px 0px 4px 40px.
Focus: border-color var(--color-grayAlpha-300); background var(--color-surface-success-reaction).

### Cards
Background: #ffffff; border-radius: 8px; padding: 32px; shadow: var(--shadow-base).

## Layout & Responsive Rules
Breakpoints: 360, 361, 411, 480, 481, 503, 504, 768, 769, 940, 941, 1124, 1125, 1280, 2048 px.
Content width adjusts at these points.

## Interaction Rules
Transition timing: 150ms ease for state changes.
Focus indicators: border color change + background tint.

## DO List
- Use only palette colors.
- Maintain 8px grid.
- Keep corner rounding consistent per component type.
- Use Helvetica Neue stack for all text.
- Reserve accent colors for functional highlights.

## DON'T List
- Introduce unapproved colors.
- Mix sharp and rounded corners in one component.
- Use shadows outside defined style.
- Overuse bright accents.

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #08131a;
  color: #ffffff;
  padding: 0 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: var(--color-grayAlpha-300);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
}
.btn-primary:focus {
  background: var(--color-surface-success-reaction);
  border: 1px solid var(--color-grayAlpha-300);
  color: var(--color-text-invert);
}
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 8px;
  padding: 32px;
  box-shadow: var(--shadow-base);
}
```

### Input
```css
.input {
  background: #ffffff;
  color: #08131a;
  border: 1px solid rgba(8, 19, 26, 0.14);
  border-radius: 8px;
  padding: 4px 0 4px 40px;
}
.input:focus {
  border-color: var(--color-grayAlpha-300);
  background: var(--color-surface-success-reaction);
  outline: none;
}
```

9. Summary

TL;DR — Note.com’s design system is minimal, readable, and predictable. Deep neutral primary, restrained accents, Helvetica Neue stack, and an 8px grid keep everything consistent. If you stick to their tokens, your UI will look like it belongs on Note.

Brand Keywords:

• content-first
• calm-neutral
• japanese-minimalist
• functional-consistent