Toyo Keizai Online DESIGN.md

Design System Inspiration of Toyo Keizai Online

Overview

Visual Theme & Atmosphere

Toyo Keizai Online is the Japanese business-news service of Toyo Keizai Inc. The publisher dates its founding to November 15, 1895, and its history records the online service's launch in June 2003. The product describes its purpose as helping people make better choices through economics, business and a diversity of perspectives. Company, history, product introduction.

The April 15, 2026 renewal introduced the tagline 「ふれるたび、視点がふえる」 and refreshed the logo and symbol. The announcement connects the symbol to the initial T and a T-junction, expressing a partner in making choices. It also describes customizable navigation and expanded topic-following, making discovery part of the product's current evolution. Official renewal announcement.

The measured homepage expresses this through a dense editorial layout: charcoal headlines, cyan topic links, a slate navigation band, pale grey canvas and white utility panels. Orange distinguishes paid membership from the restrained surrounding controls. The upper header is compact; a larger lead story and a ranked sidebar provide separate entry points into the news. These are observations of the live homepage, not a published set of brand principles.

Primary tasks

• Browse recommended and latest articles, topics and rankings.
• Reach paid membership or login from the header.
• Use the search trigger; the search form itself was not opened or measured.

Brand Narrative

The publisher's history connects the online service to a publishing company founded in 1895. Its June 2003 launch extended business news onto the web. The current product introduction emphasizes both information readers seek and encounters with things they did not yet know. Together these sources support a reference built around editorial discovery and informed choice. History, product introduction.

Principles

The following are implementation readings of the evidence, not a company-issued design-principles list:

• Make discovery legible: distinguish editorial recommendations, topics and rankings, as seen on the homepage.
• Give paid membership a specific signal: preserve its orange action treatment.
• Use restrained interaction changes: underlines, label/border changes, fill inversion and a small opacity reveal are measured behaviours.

Personas

The official product introduction describes a service for people making choices around economics and business, and offers member and team plans; no researched persona profiles or audience demographics were verified.

Colors

These descriptive names map measured values to the captured homepage. They are not official CSS variable names: the survey found no root custom properties, and its declared-property walk could not read the four CDN stylesheets.

The census recorded 1,711 elements. Its paragraphInk array is empty, so a body-paragraph foreground role is not assigned. Transparent controls retain their measured backdrop context instead of receiving a fabricated fill.

Typography

Evidence classes

• Official product use: no opened first-party page identifies a named product typeface. The renewal announcement discusses the logo's expression without naming its font.
• Live-loaded: the survey's loaded-face list is empty. No family is promoted into a machine typography token or a specimen.
• Official distributed assets: no font asset or font licence was verified. Both retrieved desktop stylesheets contain no @font-face rule.
• Declared-only: body and buttons declare "Hiragino Sans", Meiryo, sans-serif; individual control records report Hiragino Sans. This is CSS declaration/computed-family evidence, not proof of which installed face rendered each script. The survey has no h1 family value.
• Unresolved: actual font selection for Latin, Kana and Han; platform variation; official font licensing. Substitute: none chosen.

Measured type metrics

The survey also records regular article-title links at 16px / 600. Preserve the observed hierarchy between the lead, ordinary article titles and utility controls. No paragraph-size rule was established.

Layout

At the measured 1440 × 1000 desktop viewport, the header's content extends from x=120 to x=1320. The linked desktop stylesheet declares a 1200px-wide .g-header-upper, centered with margin:0 auto. The upper and lower header rows are visually distinct: white above and slate below. The lower navigation link starts at y=72 and is 43px high.

The lead title occupies 467px of width; the adjacent article title sampled in the survey occupies 236px. A separate right column carries the ranking panel. The desktop stylesheet declares .top-pickup as two equal grid columns with a 20px gap; ordinary .m-article uses 1fr 200px columns with an 8px by 16px gap. These grid declarations describe those selectors, not a universal spacing scale. Desktop shared CSS, homepage CSS.

Responsive Behavior

Only a 1440 × 1000 desktop viewport was measured; mobile layout and breakpoint behaviour remain unmeasured.

Elevation & Depth

The sampled controls and their three compared ancestor levels have no box shadow. White panels separate utilities from the pale-grey page; thin borders, underlines and colour inversions do most of the interactive work. The search halo changes opacity without moving or scaling the icon's layout box. No modal-elevation system was measured.

Motion & Easing

The membership and login controls report background-colour and colour transitions of 0.5s, using ease. The latest-articles action reports background-colour, border-colour and colour transitions of 0.3s, also using ease. Business and lead-title links report all 0s ease 0s on the control itself.

The search button itself also reports all 0s ease 0s; its halo is a separate pseudo-element. The linked shared stylesheet declares transition:opacity .3s on .g-header-icon:before, and the state probe records that pseudo-element's opacity change after settling. Raw computed transition strings and settling times are retained in the verification notes. Reduced-motion behaviour was not measured.

Components

All six controls below had genuine hover and held-pointer measurements. The state viewport and selected state crops were opened to check identity. Membership, login, navigation and article links also have real keyboard-focus measurements; the same is true of the search and latest-articles controls.

All sampled controls had box-shadow: none. Rounded corners are role-specific: 6px for the header action pair, square text links and a pill for the large list action. The search halo is larger than the button's measured layout box. The external icon's internal paint was not inspected; the button's computed text colour is not used as an icon-colour token.

States

Every sampled control matched :hover during hover and :active during the held-pointer pass. All pressed snapshots matched their corresponding hover snapshot: no extra pressed change was observed. Keyboard Tab reached search at stop 11, membership at 14, login at 15, business at 16, the lead story at 31 and latest articles at 52.

All six focus snapshots report no computed change with :focus-visible true and outline-style: none. The comparison covers the control, its pseudo-elements, descendants and three ancestor levels with pseudo-elements; search includes one image descendant, while the other five have no descendants. No focus token is authored from these observations. Canvas/video pixels, sibling nodes, external SVG internals and cross-origin iframe contents are outside that comparison. Disabled states were not measured.

Do's and Don'ts

• Keep the compact orange membership action distinct from the slate outlined login control.
• Use underlines for the measured navigation and editorial title interactions.
• Keep 6px header corners separate from the large pill-shaped article-list action.
• Preserve the difference between a transparent control and the surface behind it.
• Do not turn declared font names into verified font specimens, or infer paragraph typography from article headlines.
• Do not interpret the larger search halo as a measured 38px button target.

Voice & Tone

The product introduction frames the service around helping people make better choices, with economics and business as its axis. The tagline promises additional perspectives with each encounter. The measured interface labels are direct task names: paid membership, login, business and view the latest articles. Product introduction.

Agent Prompt Guide

“Build an editorial news homepage with a pale-grey canvas, white header and utility panels, charcoal headlines, cyan topic links and a slate secondary navigation band. Use a 109 × 34px orange membership link and a matching outlined login button, both with 6px corners and 12px / 600 labels. On hover, invert the membership fill/label and turn the login label/border cyan. Underline article-title and category links. Make the larger latest-articles action 270 × 50px with a pill shape and a fill inversion. Keep font-family selection unresolved until the product face is verified.”

This guide combines captured interface observations; it is not a quotation from the company.

Governance

Known Gaps

• Contrast, paid-register. Text #ffffff on #f56f15 measures 2.93:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.