Tokyo Metropolitan Government DESIGN.md

Design System Inspiration of Tokyo Metropolitan Government

Overview

Visual Theme & Atmosphere

Tokyo Metropolitan Government's general portal connects visitors to government information, departments, procedures and public announcements. Its site policy identifies the operator as 東京都, a Japanese local government. The official chronology records the establishment of Tokyo Metropolis in July 1943, replacing Tokyo Prefecture and Tokyo City. Site policy, chronology.

The identity combines a green symbol with a practical information interface. The official symbol page dates the mark to 1 June 1989 and describes three equal arcs with a hidden T at the centre, with vivid green as its basic colour. On the measured homepage, green navigation and actions frame a white canvas, blue information links, image-led campaigns and tabbed announcements. The symbol's description supplies no numerical green specification; the interface colours below come from live CSS. Official symbol, homepage.

The published direction continues through the revised website design guideline, dated 6 October 2023: common presentation, clear information priority and concise current information. The live homepage also links to My TOKYO, described there as delivering information according to each visitor's interests and circumstances. These are documented directions and current content; no date for a redesign of this measured homepage is established. Design guideline, homepage.

The measured page is the Japanese homepage at www.metro.tokyo.lg.jp/, HTML language ja-JP; the capture recorded no regional redirect.

Brand Narrative

The official chronology anchors the government in the 1943 metropolitan reorganisation. The symbol page distinguishes the inherited metropolitan crest from the green symbol adopted in 1989, described as three equal arcs and a hidden T. Chronology, symbol history.

Principles

The official guideline prioritises clear information hierarchy and easy access to needed information. Its request to use images instead of long runs of text is visible in the measured homepage's campaign imagery and card groups. The site policy states an AA accessibility target under JIS X 8341-3:2016; this is a published target, not a compliance result inferred from this capture. Guideline, site policy.

Personas

No user research or validated personas were inspected.

Colors

The first-party --metrotokyo-* namespace supplies the palette. There are 223 computed root properties and 234 distinct declared properties in this namespace. Framework defaults and Swiper variables are excluded. Values below are exact CSS declarations also resolved by the root census, rather than an inferred palette.

The raw census counted white backgrounds 63 times, strong ink 70 times and blue link text 21 times. Paragraph ink is a separate observation: #626264 ×3 and #1a1a1c ×1. It does not establish a universal body-text colour for every page. The declared overlay is rgba(0, 0, 0, 0.7) and the scrollbar colour is rgba(60, 60, 67, 0.6); alpha values stay outside the hex palette.

Typography

Live-loaded: Noto Sans JP normal and bold are loaded in document.fonts. Body, first h1 and first button all declare "Noto Sans JP", sans-serif. The official module stylesheet serves the two faces from /documents/d/global/NotoSansJP-Regular and /documents/d/global/NotoSansJP-Bold, both declared as OpenType. The typography family token names only Noto Sans JP. swiper-icons also loaded, but is an icon font belonging to the slider library and is excluded.

Official product-use guidance: the website guideline permits ヒラギノ角ゴ, メイリオ, MS-Pゴシック, Noto Sans or sans-serif as CSS text families. This is a permitted set, not a statement that all those faces render here. It separately names ゴナD or メイリオ for bureau logo artwork; that does not identify the live portal logotype's face.

Official distributed assets: two first-party font URLs are evidenced by the live @font-face rules. A separate font kit and its licence were not inspected. Declared-only: the framework's unused font-family custom properties contain other family names; none is promoted into the family token or a specimen. Unresolved: the exact face used inside logo images. Substitute: none chosen.

The declared desktop heading sizes h0–h7 are 3.125rem, 2.625rem, 1.75rem, 1.625rem, 1.375rem, 1.25rem, 1.125rem, 1rem. All declare bold weight and line-height 1.5. These are CSS scale definitions, not measurements of eight rendered headings. Desktop body1 declares 1rem, normal, line-height 1.75 and tracking 0.04em.

Layout

The captured desktop page has a utility header, a green topic navigation row, wide campaign imagery, announcement tabs, card carousels, government links and a keyword-search form. This is an observation of the 1440×1000 capture.

First-party declarations set content and footer inner widths to 1024px, content horizontal padding to 16px, and small/large column gaps to 16px / 32px. Both s and lg space-pattern scales declare 64, 40, 32, 24, 16px. Tags use an 8px gap; button containers declare 8px 16px. These declarations define the reference's spacing values; they do not assert that every homepage section has one common width.

Responsive Behavior

Mobile rendering and breakpoints were not measured. The stylesheet declares separate mobile values: h1 1.625rem, body1 1rem at line-height 1.5 with 0.005em tracking, and a 16px small column gap. They are declarations, not a tested mobile layout. The official guideline asks for smartphone and tablet support. Design guideline.

Elevation & Depth

The measured control surfaces use borders rather than rest shadows: all six report box-shadow: none at rest. The blue focus shadow on three links is rgba(0, 123, 255, 0.25) 0px 0px 0px 3.2px; it is a rendered link-state observation, not a green brand-colour token. The generic framework's elevation variables are excluded.

The survey also records a declared 12px radius on .card-type01-pattern03 through --metrotokyo-card-type01-border-radius. This is a declared card variant, separate from the measured 1px title-anchor radius. Pill tags measured 9999px; circular controls measured 50%. Neither is converted into a numeric radius token here.

Motion & Easing

The search button and selected tab report the exact transition string background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s. The utility, navigation and card-title links report duration lists of 0.15s with ease-in-out; the full raw property/duration strings are preserved in verification notes. The search input reports all 0s ease 0s; its wrapper focus border is measured separately. No carousel playback timing or accordion animation was measured.

Components

Dimensions identify the actual elements that were measured; they are not prescribed universal sizes. All six controls were enabled. Pressed states were UNMEASURED because :active did not match during the mouse-down sample.

• Search submit — 検索: button.page-search-form_button, 120×60px, 8px radius, 16px padding, #018838 background and 1px border, #ffffff label. Hover changes both background and border to #016e2d. Keyboard focus darkens them too; its additional auto outline is browser-owned and has no focus token.
• Utility link — 組織情報: a.header-bureau_submenu-button[href='/about'], 103×29px, 4px radius, 4px 15px padding. Transparent on white, #1a1a1c label. A ::before layer draws a 1px #d8d8db border. Hover fills it with #f1f4f2. Keyboard focus adds the reversible shadow rgba(0, 123, 255, 0.25) 0px 0px 0px 3.2px. The captured focus background remained after blur, so it is not a focus token.
• Navigation link — 暮らし・健康・福祉: 149.8×44px, 1px radius, 0px 0px 8px padding. Transparent on #018838, with a white label. Hover adds a solid white underline. Keyboard focus adds that underline and the same reversible blue shadow used on the utility link.
• Search input — キーワードを入力してください: input.page-search-form_text-input, 600×60px, 8px radius, 16px padding, white fill and #1a1a1c entered-text colour. The input itself has no border. Its parent .page-search-form_text::after changes from 1px solid #1a1a1c to 2px solid #d18d0f under keyboard focus, then returns after blur. Hover produced no change in the compared scope.
• Card title link — 感染症情報: a.ag-slider-card-type02_card-title, 116.1×26px, 1px radius, zero padding. The title is transparent over a white card; the second ancestor has a 1px #d8d8db border. Hovering the title changes that ancestor's background to #e8f4ed. Keyboard focus places the reversible blue shadow on the title anchor. Its measurements do not describe the whole card.

The selected 報道発表 tab is 100×52px with 12px 16px padding, top corners 8px and bottom corners 0px. Its #e8f4ed background and 2px #1a753f bottom pseudo-element were measured at rest. Hover was unchanged, focus added only the browser's auto outline, and pressed was unmeasured. It stays in prose and is absent from the component registry.

States

Keyboard focus reaches all six chosen controls. The input's gold wrapper border, utility/navigation/card-title link shadows, navigation underline and search-button darkening are measured changes. The utility link's persistent background is excluded from focus evidence. The selected tab has only browser-owned focus styling, so no interactive tab component is declared.

Hover snapshots confirm :hover for all six. “No change” for the input and selected tab is limited to the control, its pseudo-elements, descendants and three ancestor levels with their pseudo-elements. The probe also compares image/SVG attributes, but the inside of external SVG sprites, sibling elements, closed shadow roots, cross-origin frames and pixel-only animation are outside that claim. No disabled state was measured; all pressed states remain unmeasured.

Do's and Don'ts

• Use the green action colour and pale green interaction surfaces according to the measured control, with white backgrounds and blue information links.
• Give the keyword field its wrapper-drawn gold focus border; preserve the placement of the effect on the wrapper.
• Keep title-anchor geometry separate from the enclosing card geometry.
• Treat the guideline's font options and the live-loaded Noto Sans JP as different evidence classes.
• Keep framework defaults, Swiper icon resources and the chatbot outside the brand token set; do not infer a pressed style from hover.

Voice & Tone

The observed interface labels tasks and topics directly: 検索, 組織情報, 感染症情報 and 報道発表一覧へ. Use this concise task-labelling pattern as an observation of the portal, rather than an asserted official copywriting policy.

Agent Prompt Guide

“Build a public-information portal using the measured Tokyo homepage palette: white canvas, #1a753f primary, #018838 search action, #626264 paragraph foreground and #003ee5 information links. Use the live-loaded Noto Sans JP normal/bold faces. Make the measured search button 60px high with an 8px radius and 16px padding; darken its background and border to #016e2d on hover. On keyboard focus, change the keyword input wrapper's border from 1px #1a1a1c to 2px #d18d0f.”