---
name: Hatena
colors:
  primary: '#00a0f0'
  primary-dark: '#0086d6'
  primary-light: '#1abaff'
  foreground: '#111111'
  text-token: '#121212'
  text-muted: '#999999'
  text-secondary: '#666666'
  surface: '#eaeaea'
  surface-pressed: '#cccccc'
  canvas: '#ffffff'
  attention: '#ff2d32'
  users: '#ff4166'
  service-bookmark: '#00a6e4'
  service-blog: '#2f2f2f'
  service-question: '#009cbc'
  service-anond: '#4d77f0'
  service-parks: '#14aa50'
  star-yellow: '#ffb400'
  star-green: '#00d300'
  star-red: '#ff003e'
  star-blue: '#00a1de'
  star-purple: '#b400c0'
  dark-bg: '#181818'
  dark-divider: '#282828'
  dark-border: '#333333'
typography:
  f11:
    fontSize: 11px
    use: '--size-font-11'
  f12:
    fontSize: 12px
    use: '--size-font-12; service links'
  f13:
    fontSize: 13px
    use: '--size-font-13'
  f14:
    fontSize: 14px
    use: '--size-font-14; buttons, the search field and entry titles'
  f15:
    fontSize: 15px
    use: '--size-font-15'
  f16:
    fontSize: 16px
    use: '--size-font-16'
  f17:
    fontSize: 17px
    use: '--size-font-17'
  f18:
    fontSize: 18px
    use: '--size-font-18'
  f19:
    fontSize: 19px
    use: '--size-font-19'
  f20:
    fontSize: 20px
    use: '--size-font-20'
  f24:
    fontSize: 24px
    use: '--size-font-24, the largest step'
rounded:
  xs: 2px
  s: 4px
  m: 8px
  l: 16px
components:
  button-signup:
    type: button
    backgroundColor: '#00a0f0'
    textColor: '#ffffff'
    rounded: 4px
    height: 32px
    padding: 8px 16px
    typography: 14px / 700
    hover: '#00a0f0'
    pressed: '#00a0f0'
    use: はてなIDを作る(無料) in the header — --color-service-portal as a fill (.Header.signup). Hover and press change nothing; focus is the browser's ring.
  button-signin:
    type: button
    backgroundColor: transparent
    textColor: '#00a0f0'
    rounded: 4px
    height: 32px
    padding: 8px 16px
    typography: 14px / 700
    hover: transparent
    pressed: transparent
    use: ログイン — the portal blue as a label (.Header.signin). No hover change.
  input-search:
    type: input
    backgroundColor: '#eaeaea'
    textColor: '#111111'
    rounded: 16px
    height: 32px
    padding: 0 32px 0 40px
    typography: 14px / 400
    pressed: '#cccccc'
    focus: '#cccccc'
    use: 'The entry search field, a grey pill. It darkens to #cccccc when pressed and while focused — the one authored state on the page.'
  link-entry:
    type: button
    backgroundColor: transparent
    textColor: '#111111'
    height: 56px
    typography: 14px / 700
    hover: transparent
    pressed: transparent
    use: Entry titles in the feeds. No hover change; the browser's ring on focus.
omitted:
  - section: spacing
    reason: No verified values in current evidence.
---

# Design System Inspiration of Hatena (はてな)

## Overview

### Visual Theme & Atmosphere

Hatena is a Kyoto internet company. Its first service, the Q&A site 人力検索はてな, opened on 15 July
2001, and it grew into a family of community services — Hatena Bookmark, Hatena Blog, Anond,
Hatena Question, Hatena Parks. The portal at `www.hatena.ne.jp` is the front door to all of them.

For its 20th anniversary, on 15 July 2021, Hatena renewed its corporate logo. As the designer who led
the work explains on Hatena's own design blog, and as ITmedia reported, the old mark — a "?" built
from a row of diamond tiles — became a "?" built from round **nodes**, drawing on the idea of binary
code, and the Hatena wordmark changed from **blue to black**.

The portal is plain and dense: black text **`#111111`**
on white, a single bright **highlight blue `#00a0f0`** for signing up and for the selected tab, grey
pill fields **`#eaeaea`**, square-ish 4px corners, and no shadows at all. Everything is set in the
operating system's own Japanese font.

What makes it worth reading:

- **A colour per service.** `--color-service-bookmark` `#00a6e4`, `-blog` `#2f2f2f`, `-question`
  `#009cbc`, `-anond` `#4d77f0`, `-parks` `#14aa50`, `-portal` `#00a0f0` — each service's "more"
  button and introduction link takes its own.
- **The Hatena Star is in the palette.** Five star colours are tokens, from `--color-star-yellow`
  `#ffb400` to `--color-star-purple` `#b400c0`.
- **No web font.** Ten `@font-face` rules exist, and every one maps "Hiragino Sans" to a `local()`
  system face.

#### Primary tasks
- Read what is trending across Hatena's services; search entries.
- Create a Hatena ID or sign in.

### Brand Narrative

Hatena has run community services since 2001 and its portal is text-first and plain. What colour there is carries meaning — one blue for
Hatena itself, one hue for each service, and the five colours of the Hatena Star that its users hand
out.

The 2021 logo, rebuilt from round nodes, moved the wordmark from blue to black — the same restraint the portal shows,
where blue is kept for the one button that invites you in.

### Principles

- **Colour means a service.** Each product has its hue.
- **Text first.** Black on white, the system font, no shadow.
- **One blue for joining.**

### Personas

Not researched. No persona claim is made from a UI capture.

## Colors

Measured with `getComputedStyle` on `www.hatena.ne.jp`: **70 custom properties**, all hand-written —
`--color-*` 26, `--icon-*` 29 (SVG URLs on the same origin), `--size-font-*` 11, `--ui-radius-*` 4.
No framework variables. Hatena Bookmark (`b.hatena.ne.jp`), an older build, has none.

### Highlight blue

- **Primary** (`#00a0f0`) — `--color-highlight` and `--color-service-portal`. The sign-up button, the
  sign-in label, the selected feed tab's marker, the user ID.
- **Primary Dark** (`#0086d6`) — `--color-highlight-darker` · **Primary Light** (`#1abaff`) —
  `--color-highlight-lighter`.

### Ink and grey

- **Foreground** (`#111111`) — the rendered colour of 811 text elements. The token
  `--color-text-0` is **`#121212`**, one step lighter; the page paints `#111111`.
- **Text Muted** (`#999999`) — `--color-text-3` (104 elements) · **Text Secondary** (`#666666`) —
  `--color-text-4`.
- **Surface** (`#eaeaea`) — the search field and pill fills, 52 elements. It is **not a token**; the
  value is written directly. **Surface Pressed** (`#cccccc`) — the search field when pressed or
  focused; it equals `--color-text-2`.
- **Canvas** (`#ffffff`) — `--color-bg-0`.

### Service colours

**Bookmark** `#00a6e4` · **Blog** `#2f2f2f` · **Question** `#009cbc` · **Anond** `#4d77f0` · **Parks**
`#14aa50` · **Portal** `#00a0f0`. Component rules wire them in — `BookmarkEntries … more
{ background-color: var(--color-service-bookmark) }`, `ServiceIntro … anond a { color:
var(--color-service-anond) }` and so on, 17 rules in all. On the logged-out portal only the portal
colour renders; the others belong to feed sections and introductions not drawn in that state.

### Attention, users, stars

**Attention** `#ff2d32` (`--color-attention`) · **Users** `#ff4166` (`--color-users`, the bookmark
count, 82 elements) · stars **`#ffb400`** yellow, **`#00d300`** green, **`#ff003e`** red,
**`#00a1de`** blue, **`#b400c0`** purple.

### A dark set, not shown

`--color-bg-1` `#121212`, `--color-bg-2` **`#181818`**, `--color-divider` **`#282828`**,
`--color-border` **`#333333`**, `--color-text-1` `#fff` and `--color-text-2` `#ccc` describe a dark
surface. It did not render on the measured light page.

### Hidden links, not a finding

Service links in the page's closed menus compute the browser's default link blue (`#0000ee`), but
they are not visible — zero-size, inside collapsed panels. They are not recorded as a style.

## Typography

### Font family

`-apple-system, "system-ui", "Hiragino Sans", "Noto Sans JP", sans-serif` on body and headings. The
ten `@font-face` rules on the page all declare "Hiragino Sans" with `src: local("HiraginoSans-Wn")`,
which only pins weights of the macOS system face; no font file is served, and there is no font CDN.
**No brand typeface exists to record** — the rendered face is whatever Japanese system font the
reader's device provides.

### Scale

`--size-font-11` through `--size-font-20` in single pixels (0.6875rem to 1.25rem), then
`--size-font-24`. Buttons, the search field and entry titles are 14px; service links 12px.

## Layout

- No spacing scale is published; the 11 `--size-*` tokens are all font sizes, and padding is written
  per component.
- Density over air: the portal is a long, link-heavy feed.

### Responsive Behavior

**Not measured.** Desktop 1440×1000 only.

## Elevation & Depth

None. No element on the page has a box-shadow.

## Motion & Easing

Not measured. No motion token is published.

---

**Tier 1 sources:** https://www.hatena.ne.jp/ (live portal — 70 custom properties read via `getComputedStyle` and a recursive rule walk; 17 rules using the service colours listed; four components measured at rest, hover, pressed and focus; only system fonts, captured 2026-09-26); https://www.hatena.ne.jp/zz-this-does-not-exist (nonsense-path control — redirects and fails with HTTP 500 rather than rendering a page, captured 2026-09-26); https://design.hatenastaff.com/entry/2021/11/01/151330 (「ロゴはこうして出来ました」, Hatena Design Group — the 2021 logo built from round nodes, read 2026-09-26); https://hatena.co.jp/press/release/entry/2021/07/15/113000 (Hatena press release, 2021-07-15 — the 20th-anniversary logo renewal, read 2026-09-26)

**Regional sources:** https://www.itmedia.co.jp/news/articles/2107/15/news144.html (ITmedia NEWS, 2021-07-15 — the "?" of diamond tiles became one of round nodes; the wordmark changed from blue to black; first service 人力検索はてな on 2001-07-15); https://www.watch.impress.co.jp/docs/news/1338367.html (Impress Watch, 2021-07-15 — 「はてな、20周年でロゴ刷新」)

## Components

Four components, every state on its own page load, focus read before the mouse moved.

- **Sign up** — `#00a0f0`, white 14px/700, 4px radius, 32px, `8px 16px`. **Hover changes nothing.**
  A larger sign-up in the page's introduction uses a 16px radius and `9px 20px`.
- **Sign in** — transparent, `#00a0f0` label, same size. No hover change.
- **Search field** — `#eaeaea`, `#111111` text, a 16px pill, 32px. Pressed and focused it turns
  **`#cccccc`** — the one authored state on the page.
- **Entry titles** — `#111111` 14px/700. No hover change.

### Focus is the browser's

Every control but the search field shows only Chrome's `auto` ring under `:focus-visible`. No focus
colour is recorded.

### Radius

`--ui-radius-xs` 2 · `-s` 4 · `-m` 8 · `-l` 16. Rendered: **4px** ×54 (buttons and badges), 16px ×2,
8px ×1. `xs` is declared and not seen.

### States

Four components. Hover: no change on any. The search field turns `#cccccc` when pressed or focused;
everything else shows the browser's `auto` ring on focus. No disabled state was observed.

## Do's and Don'ts

### Do
- Use `#00a0f0` for the one action that matters (sign up) and for the selected state.
- Give each service its own colour from `--color-service-*`.
- Set text in `#111111` on white; keep corners at 4px.

### Don't
- Don't add a web font; Hatena uses the system face.
- Don't add shadows.
- Don't read the hidden menu links' default blue as a Hatena colour.

## Voice & Tone

Not assessed as authored voice.

## Agent Prompt Guide

### Quick Color Reference
`#00a0f0` highlight · `#0086d6` / `#1abaff` highlight steps · `#111111` ink · `#999999` /
`#666666` secondary text · `#eaeaea` fields · `#ffffff` page · `#ff4166` users · services
`#00a6e4` `#2f2f2f` `#009cbc` `#4d77f0` `#14aa50` · stars `#ffb400` `#00d300` `#ff003e` `#00a1de`
`#b400c0`

### Example Component Prompts
- "A 32px button: `#00a0f0`, white 14px/700 system Japanese font, 4px radius; no hover change."
- "A search pill: `#eaeaea`, 16px radius, `#111111` 14px; turns `#cccccc` on focus."

## Governance

### Known Gaps

- **Contrast, `button-signup`.** Text `#ffffff` on `#00a0f0` measures 2.88:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
- **Contrast, `link-entry`.** Text `#111111` on `#00000000` measures 1.11:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.