Cygames DESIGN.md

Design System Inspiration of Cygames

Overview

Visual Theme & Atmosphere

Cygames is a Tokyo-based entertainment company founded in May 2011. Its business spans mobile and console games, comics, animation, licensing and esports. Its stated vision, 「最高のコンテンツを作る会社」, connects those activities through the ambition to make the best content. Company profile, vision.

The corporate site gives colourful game footage a large opening stage, with a white logo and uppercase navigation over the image. Below it, black actions, white editorial cards, pale grey sections and large English background lettering organise company information and recruitment. This is an observed visual composition, rather than a published set of brand principles. Measured homepage, desktop viewport and full-page captures, 2026-11-06.

The official 2021 logo update made the Cygames lettering larger, thickened the mark and logotype, and removed empty space above and below to improve visibility while retaining the brand image. The release explicitly connects this change to global expansion. The current global-business page describes localisation, cultural adaptation and overseas offices; the homepage also gives CygamesEdge and Cygames ID their own promotional banners. Logo announcement, global business, homepage.

The measured surface is the Japanese corporate homepage at www.cygames.co.jp/, with HTML lang="ja"; it stayed on that path. Primary visible routes are news, company information, services, works and recruitment.

Brand Narrative

The official history records the company’s establishment in May 2011 and the release of 「神撃のバハムート」 that September. The 2021 anniversary announcement describes expansion beyond games into animation and web comics. The present global-business page describes work on localisation and cultural adaptation, with overseas entities established in Korea, Taiwan, the UK, the US and Singapore. The observed homepage expresses that breadth through game imagery, company information, services and recruitment. History, anniversary announcement, global business, homepage.

Principles

The company’s published mission statements emphasise playing games together, maintaining a Team Cygames mindset and aiming for the strongest brand. Its brand statement explicitly connects everyday work and conduct to the company’s brand image. These are organisational statements; no separate public UI-design principles were verified. Mission statements.

Personas

No user-persona research was verified.

Colors

These are normalised values from rendered CSS, not names from an official colour-token dictionary. The survey found no first-party colour custom properties in the readable stylesheets.

The magazine stripe is local to that homepage card treatment. The Swiper property --swiper-theme-color: #007aff is excluded from the palette because it is a carousel-library setting. Game imagery and the Cygames ID banner also contain colour; a neutral interface does not imply an all-monochrome page.

Typography

Body, H1 and button declarations share a stack beginning YakuHanJPs, "Noto Sans JP". Their local fallback names are retained in the verification notes, outside the published family tokens. The Noto Sans JP stylesheet is served through Google Fonts; YakuHanJPs through jsDelivr. Both cross-origin stylesheets were unreadable to the CSS-rule walker, so their individual font-file URLs were not collected. Loaded status establishes availability on this page, not a font choice for every glyph.

These metrics are desktop observations. A paragraph size or full heading scale was not collected.

Layout

The desktop capture places navigation over a full-height game hero, followed by a two-column news/magazine area. Alternating image-and-copy sections introduce the company and its facilities. A statistics panel leads into service links, then CygamesEdge and Cygames ID banners, recruitment links, a row of resource logos and a black footer. Large pale English words sit behind some section headings. Homepage full-page capture.

Survey coordinates put the main content edges at approximately x = 95 and x = 1330. The resource row uses six cards roughly 195.4px wide. Reuse the measured control padding where relevant; no global spacing scale or breakpoint set was verified.

Responsive Behavior

Only desktop 1440 × 1000 was measured; mobile layouts, breakpoints and reduced-motion behaviour are unverified.

Elevation & Depth

The magazine and tech cards start with rgba(0, 0, 0, 0.1) 0px 3.08571px 14.4px 0px. Hover and pressed change that to rgba(0, 0, 0, 0.3) 0px 9.25714px 32.9143px 0px. The company CTA starts with a zero-offset, zero-blur shadow at 0.1 alpha and reaches the same stronger shadow.

The company CTA’s empty circle also translates from the identity matrix to matrix(1, 0, 0, 1, -463.5, -463.5) as it reaches 927 × 927px. This is the observed layer treatment behind its colour inversion; the settled capture does not establish the intermediate animation path.

Motion & Easing

The company CTA and tech card reported this rest computed-transition string:

color, opacity, box-shadow, background-color, -webkit-box-shadow 0.4s, 0.3s, 0.5s, 0.25s, 0.5s ease-in-out, ease, ease, ease-in-out, ease 0s, 0s, 0s, 0.15s, 0s

The magazine card reported all 0.5s ease 0s. NEWS and MORE reported all 0s ease 0s on the link itself; their observed changes involve a pseudo-element or an interaction-time style, so that self value does not establish that every visible transition is instantaneous. These are per-control records, not a verified global motion scale. Carousel and game-video timing were not measured.

Components

All six inspected controls are links. Five have measured hover and pressed changes and are included in the component tokens. Dimensions below come from the states captures at 1440 × 1000.

The hero’s 「公式サイト」 link was 164 × 45px with radius 5.14286px, padding 0px 50px 4px 20px, white 18px/700 text and a 2px white border over transparent fill. Hover and pressed are UNMEASURED: it had pointer-events:none when each pointer pass reached it. Its measured keyboard focus had no change within scope, so it has no component-token entry.

No search input was present among the survey’s 79 interactive rows. No consent control is included as a component.

States

Hover and pressed settled to the same observed result for all five exported controls. Pressed snapshots had both :hover and :active matched; this does not establish a distinct active-only treatment.

Real Tab focus reached all six controls with :focus-visible matched. The probe found no settled focus change, no drawn outline and no change persisting after blur within its compared scope. This is not a claim about every focusable element on the site, and it produces no focus token. The hero’s pointer states remain UNMEASURED; the first NEWS pointer failure was replaced by a successful second capture.

The compared scope is the control and its ::before/::after, descendants including empty layers and their pseudos, and three ancestor levels and their pseudos. Per-control descendant counts were hero/company/tech 3, NEWS 1, MORE 0 and magazine 6. It compares computed styles and recorded DOM/SVG attributes. It cannot establish the absence of changes inside game video, canvas, external SVG sprite contents, siblings or inaccessible frames/shadow roots.

Do's and Don'ts

• Use black/white actions and editorial surfaces around large game visuals.
• Preserve the measured distinction between small action corners and the larger magazine-card radius.
• Give the company CTA its measured colour inversion and deeper shadow; give MORE its opacity fade.
• Pair the observed English navigation labels with Japanese content where reproducing this Japanese surface.
• Keep the magazine accent attached to that card context; do not turn Swiper’s default blue into a corporate colour.
• Keep Cygames Sans Light out of live specimens, and do not turn an inherited card-wrapper size into the size of its visible date label.

These are reproduction guidelines derived from the captured surface, not company-authored design rules.

Voice & Tone

The vision page speaks about enjoyment, excitement and emotionally engaging daily experiences through entertainment. The homepage pairs that ambition with short route labels such as 「会社情報」 and 「設備紹介」, plus uppercase English navigation. Use concise functional labels alongside the company’s content-focused message. Vision, homepage.

Agent Prompt Guide

“Build a Japanese entertainment-company page with a large game hero, white Cygames Sans navigation, and black/white editorial sections. Use the verified loaded Japanese stack for Japanese controls. A company-information link is 308.6 × 82.3px with 5.14286px corners, 18.5143px/700 text and 0px 30.8571px padding; hover and press invert black/white and deepen its shadow. Use 10.2857px corners for the measured magazine card and opacity 0.5 for the small MORE link’s hover and pressed states.”

This prompt describes the captured corporate page. It supplies no unverified game UI, mobile behaviour or substitute font.