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.

Regional sources: (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); (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.