Design System Inspiration of Hatena (はてな)
1. 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.
2. Color Palette & Roles
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.
3. Typography Rules
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.
4. Component Stylings
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.
5. Layout Principles
- 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.
6. Depth & Elevation
None. No element on the page has a box-shadow.
7. 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.
8. Responsive Behavior
Not measured. Desktop 1440×1000 only.
9. 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."
10. Voice & Tone
Not assessed as authored voice.
11. 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.
12. Principles
- Colour means a service. Each product has its hue.
- Text first. Black on white, the system font, no shadow.
- One blue for joining.
13. Personas
Not researched. No persona claim is made from a UI capture.
14. 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.
15. 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周年でロゴ刷新」)
