Shueisha DESIGN.md

Design System Inspiration of Shueisha

Overview

Visual Theme & Atmosphere

Shueisha is a Tokyo publisher established in 1926. Its own history describes an origin in entertainment publishing; its current company message spans manga, literature, fashion and journalism, alongside digital publishing, rights, events, merchandise and overseas business. The corporate website works as a route into that catalogue. Company profile, history, company message.

The distinctive visual is the publication mosaic: manga characters, magazine covers, book jackets and service marks sit together in a wide, irregular tile arrangement. The measured homepage places it below a dark header, then switches to white editorial sections, fine rules, cyan dates and square archive actions. This has a first-party explanation: the 2021 site-launch article describes a colourful tiled visual spanning manga, fashion, journalism and literature, and makes short routes to content a central purpose of the site. Site-launch article, live homepage.

The current anniversary layer adds a second expression. Shueisha's 2026 centenary guide uses “01∞”: creating one from zero, then expanding it without limit. The “1” evokes a page turning from the lower right. Its four programme themes are 広げる, 生み出す, 対話する and 継ぐ—expanding, creating, dialogue and passing work onward. Treat this as the documented anniversary identity; the source does not establish a replacement corporate identity. Centenary guide.

Brand Narrative

The history distinguishes a first magazine issued under the Shueisha name in 1925 from the company's establishment in 1926. It records reorganisation as 株式会社集英社 in 1949. That publishing lineage continues in the current company message: the business has diversified, while publications remain its source. The centenary guide carries the story into digital, screen, merchandise, games, audio and overseas distribution. History, company message, centenary guide.

Principles

Shueisha's company message explicitly names its corporate motto, “創意・自信・協調”—originality, confidence and cooperation. The centenary guide describes connecting talent with society and extending the ways works reach people. These are company commitments that supply context for the publication-led website; no opened source presents them as a formal UI rulebook. Company message, centenary guide.

Personas

The site-launch guide distinguishes general visitors asking about purchases or fan letters from business visitors asking about licensing or interviews; no demographic personas were verified. Site-launch article.

Colors

These are roles assigned to observed homepage values, rather than names from a published Shueisha token manual.

The paragraph census is tied: rgb(51, 153, 187) and rgb(0, 0, 0) each occur 237 times; rgb(32, 32, 32) occurs four times. Dates and titles have different ink, so the cyan count does not establish a body-text default. The foreground role above follows the measured black content title and search ink.

Only three first-party custom-property names were found among the declared properties: --bgcolor, --gap and --left. --bgcolor was computed as #000000 while its first stylesheet declaration was #FFF; keep that runtime/declaration distinction. The first grid declarations are --gap: 0px and --left: 0. Their ownership is corroborated by the deployed theme's visual stylesheet. WordPress presets and block-navigation properties are excluded from the palette. Live homepage, visual stylesheet.

Typography

The font evidence classes are separate:

• Official product-use statement: no opened brand or company writing names an official product typeface.
• Live-loaded: the homepage font census reports Noto Sans JP 400 normal and Noto Sans JP 700 normal. Body, h1 and button computed-family declarations are "Noto Sans JP", sans-serif. The homepage includes a Google Fonts stylesheet requesting those two weights. This is the evidence for the family token.
• Official distributed font assets: none verified. No font binary or redistribution licence was inspected.
• Declared-only: Source Serif Pro appears in the site's stylesheet for the Q/A markers, and the homepage requests its Google Fonts stylesheet with text=QA. It is absent from the loaded-face census. It receives no family token or specimen. Deployed stylesheet.
• Unresolved: the census could not walk the two cross-origin Google Fonts stylesheets; it records no @font-face sources. The exact delivered font files and per-script glyph coverage were not captured.

Substitute: none chosen.

The deployed CSS declares .hdg-lv2 at 24px / 700, with a desktop declaration of 28px and a line-height of 1.6. These are stylesheet declarations, outside the measured-control type table. Common CSS, base CSS, live homepage.

Layout

The desktop page moves through a wide publication mosaic, an important-notices strip, the Pickup carousel, a New Releases region with category filters and book search, paired recruitment/company image links, news and press-release rows, an official-sites directory, and a dark footer. Pickup cards combine an image, date and multiline title; archive actions sit below their sections.

The news area pairs a narrower heading/calendar column with a wider list column. The official-sites area groups routes by manga, reporting/fashion magazines, books and online stores or other web services. These arrangements are visible in the captured full-page image and supported by the homepage links. Live homepage.

Responsive Behavior

Only the 1440 × 1000 desktop viewport was probed; mobile layouts and responsive transitions were not measured.

Elevation & Depth

The selected controls have no box shadow on the control itself at rest. The Pickup image wrapper gains rgb(51, 153, 187) 0px 0px 0px 1px inset on hover and press. This is an inset frame, without a raised-card shadow. Live homepage.

Motion & Easing

The raw computed transitions on the Pickup archive link and Pickup card are all 0.3s ease 0s. The company-nav link reports opacity 0.3s ease 0s. The News archive link, book-search input and magazine filter report all 0s ease 0s. These are element transition declarations; they do not establish a timing system for every animated layer.

The measured action expands a collapsed fill layer; the measured card combines image scaling with reduced opacity. The anniversary intro's video timing, reduced-motion response and animation interruption were not measured. Live homepage.

Components

All six selected controls have a measured 0px radius. Dimensions below belong to the captured desktop layout.

The outlined archive action contains a 40 × 1px horizontal rule at its left edge. Its dark fill is an initially collapsed ::before layer, rather than a second solid button background. The card's hover frame belongs to its image wrapper. These details matter when recreating the measured states in §14.

The search input and magazine filter remain descriptive observations: neither supplied an authored state change for the component registry. The survey also records a separate PAGE TOP link at 60 × 60px with a 50% radius; the square-control rule does not extend to that circle. Live homepage.

States

All listed hover and pressed passes were measured with :hover true; pressed also had :active true. Focus used a real Tab walk and :focus-visible was true for each selected control.

The browser ring was rgb(0, 95, 204) auto 1px off 1px and is omitted from the tokens. No focus change persisted after blur. No disabled state was exercised.

“No change” is limited to the probe's comparison: the control and its pseudo-elements, all captured descendants and their pseudo-elements, and three ancestor levels. It includes computed visual properties and image/SVG attributes. The card comparison covered six descendants and one image; the input had no descendants; the magazine filter had one. Canvas/video pixels, external sprite internals, sibling changes, closed shadow roots and cross-origin frames are outside that scope. Live homepage.

Do's and Don'ts

For a reproduction of the measured surface:

• Keep colourful publication artwork in the mosaic and card images; use the measured neutral surfaces and cyan accents for the surrounding interface.
• Keep the selected archive actions and cards square, and preserve the action's thin left-hand rule.
• Recreate the card's image scale, image opacity, inset frame and title underline together.
• Use the loaded Noto Sans JP weights when reproducing the measured text.
• Do not turn the browser's auto outline into a Shueisha focus token.
• Do not promote WordPress's stock colours, gradients, spacing or shadows into this reference.
• Do not present Source Serif Pro as a loaded homepage face.

These are directions derived from the captured implementation, rather than quoted corporate design rules.

Voice & Tone

The site-launch article frames discovery through the short sequence “見たい知りたい買いたい！”—want to see, know and buy. The captured controls use concrete destinations such as ニュース一覧を見る and 本をさがす. Use direct task labels for navigation and an editorial invitation for article introductions. Site-launch article, live homepage.

Agent Prompt Guide

• “Create the measured Pickup archive link: 335 × 51.6px, square, white fill, a 1px dark border, 14px / 400 Noto Sans JP, and 15px 50px padding. Keep the short horizontal rule at the left. On hover, expand the dark fill layer and reverse the label and rule to white.”
• “Create the measured Pickup article card on a white surface: 264px wide, image above a cyan date and black bold title. On hover, scale only the image to 1.1, set its opacity to 0.7, add a 1px inset cyan frame and underline the title. Use the exact palette in §2.”

Governance

Known Gaps

• Contrast, news-all. Text #3399bb on #eeeeee measures 2.82:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.