Kakuyomu DESIGN.md

Design System Inspiration of Kakuyomu

Overview

Visual Theme & Atmosphere

Kakuyomu (カクヨム) is a web-fiction service built around writing, reading and sharing stories. It opened on 29 February 2016: Hatena's launch announcement identifies KADOKAWA as operator and Hatena as the service-planning and system-development partner. The current guide describes a place where anyone can write in their own style, read stories and recommend favourites. Launch announcement, Kakuyomu guide.

The measured homepage gives this proposition a blue hero, a horizontal strip of illustrated announcements, and compact text-led discovery lists. The line “書ける、読める、伝えられる” introduces a pale-blue #e9f5fb area and a blue #4baae0 registration action. Below it, white #ffffff reading areas, dark #222222 titles and grey #666666 metadata support editorial picks and a weekly ranking. Individual story catchphrases use additional colours; these content colours are not treated as the interface palette. These are observations of the live homepage and its screenshots, rather than published brand principles.

The product has widened its reading model. The March 2024 UI notice describes adding Kakuyomu Next showcases to the homepage, rankings and search while excluding Next works from ranking totals. The January 2026 greeting records the 2025 merger with 魔法のiらんど and the service's tenth anniversary in 2026. UI update, 2026 greeting.

The measured surface is the Japanese desktop homepage at kakuyomu.jp/, HTML lang="ja", captured at 1440×1000; it did not redirect to another edition.

Brand Narrative

The 2019 Hatena Design Group article documents a reading-focused redesign of the iOS/Android Kakuyomu Viewer. It describes improving discovery and bringing app backgrounds, text, typography and icons closer to the web version where possible. This is historical product-design context; its app interactions and styling are not used as current web tokens. Design article.

The 2024 Next integration and the official 2026 account of the 魔法のiらんど merger extend the service's mix of writing and reading communities. The measured homepage's genre discovery, editorial selections and prominent Next area are the current surface observations supporting that broader product context. UI update, 2026 greeting.

Principles

The guide explicitly supports both reading and writing. The 2024 UI notice says it will take care not to substantially affect user-submitted works' exposure when adding Next showcases. Translate those documented product priorities into clear paths for both audiences and a visible distinction between ranked works and promoted Next works. No separate official web-design principles document was verified. Guide, UI update.

Personas

No research-backed personas were verified; the official guide addresses readers and writers.

Colors

The live census contains 283 computed root custom properties and 349 unique stylesheet-declared property names. The following roles retain values from that extraction and from the measured controls; the names on the left are reference roles, with the site's raw names shown alongside them.

The paragraph-ink census is blue #0081c2 ×7, grey #666666 ×6 and dark #222222 ×5. The foreground role follows the named on-surface token and the dark measured titles; the most frequent paragraph colour is not promoted to the universal body colour. The separate text census is led by #666666 ×278 and #222222 ×139. Among opaque backgrounds, #f2f1f0 appears 43 times, white 5 times and primary blue 3 times.

Typography

Font evidence is separated by what it establishes:

Preserve the verified metrics independently of that unresolved family. The work-title link is 14px/700 with 18.2px line height; navigation is 12.6px/400 with 22.68px line height; header search is 11.9px/400 with 13.685px line height. The signup's visible span is 14px/700, 14px line height and 0.5px letter spacing. The genre card has a 14px/400 base and a 14px/700 visible genre label.

The stylesheet declares --fontSize-3s 10px, -2s 11.5px, -1s 12.6px, -m 14px, -1l 18px, -2l 20px, -3l 24px and -4l 35px on the product's Root classes. These are declared scale values; they do not establish the size of every heading on the page.

Layout

At the measured desktop width, a fixed 50px header carries navigation and search. The hero carousel and registration action precede a main editorial area with a weekly-ranking column to its right. Featured works begin two across. Lower on the page, the genre-search links form three columns; a measured card is 256.3px wide. These arrangements are visible in the survey screenshots and interactive-element coordinates.

The stylesheet's Root classes declare a 135px column unit and 30px column space. Root width tokens include --width-sidebar: 300px and --width-1l: 800px; these declarations are not a measurement of every rendered container.

The declared margin scale is --margin-5s 2px, -4s 4px, -3s 6px, -2s 8px, -1s 10px, -m 16px, -1l 20px, -2l 24px, -3l 28px, -4l 32px, -5l 40px, -6l 45px and -7l 64px. These names are retained in the spacing tokens. The measured genre card uses 16px padding; the signup face uses 10px.

Responsive Behavior

Mobile layout and responsive transitions were not measured; the live evidence here is desktop 1440×1000 only.

Elevation & Depth

All six controls have box-shadow: none at rest, including the signup face. Keyboard focus adds a blue 0px 0px 5px 0px #0990cc shadow to that face. Treat it as focus feedback rather than a permanent raised-button shadow. White, pale blue and warm grey distinguish the observed surfaces.

Motion & Easing

The signup face's raw computed transition is all 0.1s linear 0s; the header search's is background 0.1s linear 0s. Their measured transitions are 100ms and linear. The interactive signup anchor, carousel next, nav link, work-title link and genre card each report all 0s ease 0s on the target itself. These zero-duration target values do not describe carousel slide motion or every descendant.

The probe waited at least 900ms for each measured state, beyond the 100ms transitions. No carousel slide duration, reduced-motion behaviour or animated illustration behaviour was measured.

---

Live source: Kakuyomu homepage, captured 2026-11-03. Company identification: 特定商取引法に基づく表示 names “株式会社KADOKAWA” at “〒102-8177 東京都千代田区富士見2-13-3”; company profile independently lists the Tokyo registered location. The measurement paths, raw values, controls and narrative excerpts are recorded in report.md and verification.md beside this draft.

Components

All six product controls below have measured hover, pointer-pressed and real Tab-focus states. The painted signup face was additionally targeted to resolve its geometry; it is part of the same link.

The signup anchor itself is an inline 380×16px box with radius 0, padding 0, transparent background and computed 14px/400. Its child supplies the 36px painted face and bold white label. Keep that distinction when recreating its appearance or checking the measurements. The inner span is not reached by Tab; its independent focus is UNMEASURED. The link's focus is measured.

The work-title example is “私、蜘蛛なモンスターをテイムしたので、スパイダーシルクで裁縫を頑張ります！” at /works/16817330657705436671. Its captured line wrapping is content-dependent. The genre card links to /search?genre_name=FANTASY; its count is content, not a token.

States

All six measured controls change on hover, pressed and keyboard focus. For signup, carousel next, nav exploration, work title and genre card, pressed adds no further computed change beyond the measured hover appearance. Header search adds the blue three-sided border while pressed; that pointer state also has focus, so the result does not isolate an :active-only style.

Keyboard focus was reached at Tab #3 for nav, #6 for search, #17 for carousel next, #18 for signup, #20 for the featured title and #212 for the genre card in this capture. The five dotted outlines are measured with outline-style: dotted, not auto; the search uses a border change. Every control's focus-only changes disappeared after blur. No disabled or validation-error state was measured.

The comparison covers each target, its descendants, their ::before/::after, and three ancestor levels. Descendant counts are 1 for signup, 2 for carousel next (SVG and path), 1 for nav, 0 for search, 0 for the work title and 6 for the genre card. A claim of no further pressed change is limited to that computed-style and DOM scope, which excludes siblings and cross-origin iframe contents.

Do's and Don'ts

These are build recommendations derived from the measurements:

• Use the darker #0081c2 for the measured work-link interaction, while keeping #4baae0 for the signup face and nav indicator.
• Keep featured work titles bold and compact, with quieter metadata below them.
• Preserve the nav's top indicator and the search input's three measured focus borders.
• Keep the 3px signup corners, 4px genre-card corners and circular carousel control distinct.
• Do not turn colourful story catchphrases into global semantic tokens, fix title-link wrapping as a universal card height, or assign a declared-only font as the product face.

Voice & Tone

The product leads with the three parallel verbs “書ける、読める、伝えられる”. The guide explains concrete reader and writer actions; the measured signup says “無料で新規ユーザー登録” and the navigation says “小説を探す”. For similar flows, use direct Japanese task labels and state the free-registration offer explicitly where that offer applies. Guide, live homepage.

Agent Prompt Guide

“Build a Kakuyomu-style discovery area with white reading surfaces, #222222 work titles at 14px/700 and #666666 metadata. A work-title link becomes #0081c2 with an underline on hover and press, and adds a 1px dotted outline at -1px on keyboard focus. Leave the font family unresolved.”

“Build the measured hero signup appearance: a 380×36px face, 3px corners, 10px padding, 14px/700 label, #4baae0 fill, white ink and 1px #0990cc border. Hover and press darken the fill to #0990cc and border to #0081c2; keyboard focus also adds the 5px blue glow and the link's inset dotted outline.”

Governance

Known Gaps

• Contrast, signup. Text #ffffff on #4baae0 measures 2.58:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.