SEGA DESIGN.md

Design System Inspiration of SEGA

Overview

Visual Theme & Atmosphere

SEGA develops and sells game content for consoles, PCs and smart devices. Its company outline dates its establishment to 3 June 1960; its history records the arrival of Sonic the Hedgehog in 1991. The Japanese product portal brings that catalog together through game artwork, release information, news and search. Company outline, history.

On the measured homepage, the distinctive visual combination is a bright blue header, a white outlined SEGA wordmark, large game imagery and angular stripes around section headings. Small rounded corners soften the rectangular actions and promotion cards.

SEGA's official corporate-identity page calls its concept “Amazing Sega” and explains that players' eye responses were translated into sound and visuals. Its 2026 anniversary-shop announcement extends the brand into art and fashion: five artist groups reinterpreted the “GA” portion of the logo. An implementation principle inferred from this surface and brand context is to keep the shared blue interface recognizable while giving each game's imagery room to carry its own character. Corporate identity, 2026 artist collaboration.

The measured homepage is the Japanese edition at www.sega.jp/, with HTML lang="ja"; the capture did not redirect to another regional edition.

Brand Narrative

SEGA's documented history spans its 1960 establishment and the 1991 debut of Sonic. Its CI writing connects the brand to emotional player responses; the 2026 anniversary collaboration brings artists' interpretations into merchandise and physical space. Viewed as a design reference, the homepage expresses a shared publisher identity around multiple games' individual imagery. History, CI, anniversary collaboration.

Principles

The official CI page emphasizes new experiences and surprise. For implementation, the measured homepage suggests a consistent publisher-colored frame, destination-led action labels and prominent game artwork. Those implementation principles are inferred from the capture. Official CI.

Personas

No user research or personas were verified.

Colors

These role names describe measured homepage values; they are not claimed to be SEGA's official token names.

The census recorded four computed root custom properties and eight distinct stylesheet-declared properties. Three declared --swiper-* properties belong to the carousel library and are excluded from the brand palette. Application-scoped color declarations are not evidence of a global semantic color scale.

Typography

Official product use: the opened first-party company and CI pages did not establish an official UI typeface.

Live-loaded: document.fonts contained M PLUS 1p, normal weights 500 and 800, plus the icons face at 400. The page includes the Google Fonts stylesheet https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@500;800&display=swap. That cross-origin sheet was unreadable to the stylesheet walk, so exact M PLUS font-file URLs were not captured. The family.loaded token records loaded-face evidence only; it does not assign this face to the body or to the six measured controls.

The icons face has a declared relative source in ../../assets/fonts/iconfont/, with WOFF and TTF alternatives. It is iconography, not a text specimen.

Official distributed assets: no text-font distribution or license was verified from the opened SEGA pages.

Declared-only: body, h1 and button declare メイリオ, Meiryo, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", Verdana, Arial, sans-serif, "ＭＳ Ｐゴシック". None of these named text faces appears in the census's loaded-face list. Their actual per-glyph rendering is unresolved; no specimen is supplied for them. swiper-icons is also declared, but absent from the loaded list and excluded as a framework face.

Unresolved: primary product face, script-level font selection and exact M PLUS element assignments. Substitute: none chosen.

Verified metrics survive the unresolved family assignment:

Layout

The desktop capture places a large game carousel beside two stacked promotion cards. The carousel's surveyed links measure 960×540px; the sale promotion link measures 460×320.1px. Below are a four-column topics grid, a horizontal release strip, game search, program cards, social links and a tag-filled footer. These are observed arrangements at this viewport, not inferred responsive rules.

The blue topics CTA is centered at x=488px with width 465px. The search input begins at x=123px. The stylesheet declares --gap: 20px on .grid; a complete spacing scale was not verified.

Responsive Behavior

Only the 1440×1000 desktop viewport was measured; mobile behavior and breakpoints remain unverified.

Elevation & Depth

All six measured controls have box-shadow: none. Contrast, borders, imagery and angular decorations provide separation in the inspected controls. The sale-card wrapper, one level above the link, has a 1.5px solid #666666 border and a white background. This wrapper treatment is separate from the link's own border-free rest style.

Motion & Easing

The topics CTA, important-notice link and search input each compute transition: all 0.4s ease 0s. The game-nav link, sale-card link and corporate link each compute transition: opacity 0.4s ease 0s. The five links settle at opacity 0.6 on hover and held press. The input has the transition declaration but no measured style change. No separate easing curve or carousel timing is specified.

Components

All measurements are desktop observations at 1440×1000. The five published components are links with a confirmed opacity response. Font metrics below do not establish a loaded family for these controls.

The sale card separates its colored offer panel from the image: each is 225×225px inside a 450×225px header. Its title is white on the sale-red panel; the caption below is dark. A 60×60px ::before decoration uses clip-path: polygon(100% 0px, 100% 100%, 0px 100%) to form the lower-right triangle. This is campaign-specific card styling.

The game-search input is documented in prose only: 1084×100px, radius 0, padding 0px 20px, 28px/400, #ffffff background and #000000 computed text. Its borders are 10px solid #0082ca at top and bottom, no right border, and 8px solid #0082ca at left. Hover, held press and keyboard focus produced no computed-style change in the probe's comparison scope, so it is omitted from the interactive component registry.

States

For topics-cta, important-link, game-nav, sale-card and company-link, hover and held press change the link's own opacity from 1 to 0.6. Pressed snapshots have both :hover and :active true; their changedVsHover lists are empty, so no additional press-only effect was measured. Background and foreground CSS values stay unchanged.

Keyboard focus reached all six controls through Tab, with focusVisible: true. Each produced an empty style-change list and outline-style: none; no focus token is published. This statement covers the control, its pseudo-elements, its inspected descendants and three ancestors with pseudo-elements. The sale card includes nine descendants, one empty, and one image; the corporate link includes one descendant; the other four controls have none. Sibling menus, caret rendering, external content and pixel-only effects are outside that computed-style conclusion. The input focus crop contains a caret.

Disabled states were not measured. No disabled appearance is specified.

Do's and Don'ts

Guidance inferred from the measured surface:

• Use the measured blue for broad navigation and filled action links, with white labels.
• Keep the 5px action radius distinct from the sale card's 7.5px radius and the corporate link's single rounded corner.
• Preserve campaign artwork and its local colors as campaign content.
• Reproduce the whole-link opacity fade for the measured links; the raw CSS colors remain constant.
• Keep unverified typography roles and font substitutions absent.

Voice & Tone

The measured labels name the destination directly: トピックス一覧を見る, 発売スケジュールを見る, 重要なお知らせ and ゲーム検索. Use concise Japanese task labels when following this observed pattern; no official tone manual was verified.

Agent Prompt Guide

“Build a Japanese game-catalog portal using a bright blue header, white icon-and-text navigation, large game artwork, and a side rail of rounded promotion cards. Use the measured component dimensions above. For the topics action link, use a 465×84.6px rectangle, 5px radius, 29px/700 metrics, blue fill and white label; fade the entire link to opacity 0.6 on hover and held press. Preserve the unresolved family assignment.”

This is an adaptation prompt derived from the inspected homepage, not official SEGA guidance.

Governance

Known Gaps

• Contrast, topics-cta. Text #ffffff on #0082ca measures 4.16:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.