---
version: alpha
name: Sony
website: "https://www.sony.com"
description: >-
  A corporate portal that runs almost entirely on grayscale chrome and full-bleed product photography, set in the proprietary SST face at modest sizes — the brand voltage is a near-black ink ("#000000") for primary CTA fill rather than a saturated accent, with a quiet rail of structural blues ("#3865e0", "#186fa4", "#0000ee", "#003366") reserved exclusively for inline text links and a single muted orange ("#bc5b00") for press-release timestamps; corners stay locked at "4px" or "0px", every primary button renders as a flat black rectangle with a white hairline, and editorial imagery from BRAVIA, Xperia, INZONE, and Creative Entertainment Vision carries every section that the typography deliberately under-fills.
seo:
  title: "Sony Design System for React — SST face, ink CTA, 16 components"
  metaDescription: "Sony's design system as a DESIGN.md file. Black-rectangle CTAs, SST W20 typography, 18 colors, 16 components. For React, Next.js, AI tools."
  highlights:
    - "Ink-as-accent CTA — every primary button is a flat black rectangle ('#000000') with a 1px white hairline, never a saturated brand color"
    - "Four-blue link rail — '#3865e0', '#186fa4', '#0000ee', '#003366' are reserved for inline text links and never appear as fill, chip, or background"
    - "Square-corner discipline — radius scale stops at '4px'; every CTA, every tile, every nav cell renders without pill geometry"
    - "Photography carries the page — typography sits at 12.8px and 14px across nav, body, and CTAs while BRAVIA, Xperia, INZONE editorials occupy the full bleed"
    - "Proprietary SST W20 across every role — Roman for body and navigation, Bold for h2 and date stamps, no system fallback ever takes over above 16px"
  tags:
    - "Consumer Electronics"
  lastUpdated: "2026-05-13"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Sony's group portal is a corporate broadcast surface, not a marketing site. The chrome runs on grayscale — `"#656565"` text and hairlines carry 816 occurrences across the page, `"#ffffff"` carries 502, `"#000000"` carries 179 — and every primary CTA is a flat black rectangle with a white 1px outline. The page never reaches for a saturated brand voltage. Instead, four structural blues sit in the inline-link rail (`"#3865e0"`, `"#186fa4"`, `"#0000ee"`, `"#003366"`) and a single muted orange (`"#bc5b00"`) timestamps press releases. Where most consumer electronics portals lead with a hero CTA in brand color, Sony leads with editorial imagery — BRAVIA Theatre, Xperia, INZONE, Creative Entertainment Vision — and the chrome quietly recedes underneath.

    This page packages the system as a Google Labs DESIGN.md spec. Inside: 18 color tokens covering ink, surface, hairline, the four inline-link blues, the press-release timestamp orange, and the dark editorial canvas; 11 typography roles all set in the proprietary SST W20 face (Roman at 11.2–14px for body, navigation, and CTA labels; Bold at 12–16px for h2 and date stamps; a single 40px hero size pulled directly from the "Creative Entertainment Vision" headline); 5 radius tokens that collapse to a two-step scale of `"0px"` for structural surfaces and `"4px"` for cards; 9 spacing tokens stepping from 3px to 30px; and 16 component definitions covering primary and secondary buttons, the global nav, news strips, press-release rows, editorial cards, and the BRAVIA tile rhythm.

    Feed this file to Claude, Cursor, or any AI tool that reads DESIGN.md tokens — the agent will produce React components that match Sony's actual restraint rather than a brighter consumer electronics template. Reference the tokens directly when building a corporate portal, an investor relations surface, or any product brand site where editorial photography needs to carry the page while typography stays under 14px. The system's value as a study is that it proves a consumer electronics giant can ship a homepage with zero saturated brand voltage and zero pill geometry — every action signal is the discipline of the rectangle.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.sony.com"
      title: "Sony Group Portal — official site"
      description: "Sony Group Corporation's corporate portal covering businesses, products, technology, sustainability, and investor relations."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Sony's primary brand color on the corporate portal?"
      answer: "There is no saturated brand voltage on www.sony.com — the primary CTA fill is `#000000` (ink) with a 1px `#ffffff` hairline border, and the dominant page chrome is `#656565` (816 occurrences as text and border). Inline text links use a rail of four blues — `#3865e0`, `#186fa4`, `#0000ee`, and `#003366` — each appearing only 6-12 times and never as fill. A single `#bc5b00` muted orange marks press-release timestamps. This is the rare consumer electronics portal where the primary action signal is the rectangle, not the color."
    - id: "typography"
      title: "What typography does Sony use, and what should I substitute?"
      answer: "Sony SST W20 Roman covers body, navigation, links, and CTA labels at 11.2px, 12px, 12.8px, and 14px; SST W20 Bold covers h2 headings at 14px and 16px and press-release date stamps at 12.8px. The hero headline (Creative Entertainment Vision) renders at 40px / weight 700. The CSS fallback stack walks through `\"SST W55 Regular\"`, Arial, Helvetica Neue, Meiryo, and Hiragino Kaku Gothic ProN — Sony ships the system for Western and Japanese rendering in the same declaration. Substitute with Inter at 400/700 if SST is unavailable; preserve the 16px line-height on body and the 20px line-height on h2."
    - id: "shape-language"
      title: "What is Sony's corner-radius vocabulary?"
      answer: "Radius is `0px` and `4px`. The hero headline, every primary CTA, every nav cell, and every full-bleed editorial tile renders at `0px`. Cards in the news strip and product tile rail use `4px` (30 occurrences across the page). A single `2px` token appears on an inline chip, and `50%` is reserved for a circular control. There is no pill geometry — every action signal is a rectangle. This is the inverse of Apple's pill-everywhere vocabulary and PlayStation's `9999px` CTA grammar."
    - id: "link-rail"
      title: "Why does Sony use four different blue hex codes for inline links?"
      answer: "The four-blue rail — `#3865e0`, `#186fa4`, `#0000ee`, `#003366` — reflects different surface contexts and legacy properties under the Sony corporate umbrella. `#3865e0` carries the highest-occurrence link voltage (12 instances as text and border). `#186fa4` and `#0000ee` appear in older legal and IR sections respectively. `#003366` shows up in deep-link investor-relations callouts. None of them ever fills a button or chip — they are strictly text-link tokens. If you reduce the system to one, use `#3865e0`."
    - id: "imagery-vs-chrome"
      title: "How does Sony balance editorial imagery against UI chrome?"
      answer: "Imagery carries 60–80% of every section while typography stays under 14px for navigation, body, and CTA labels. The Creative Entertainment Vision band runs a 40px headline once at the top of its editorial unit; everything below it — `Explore Sony's world of innovation, creativity, and entertainment` at 14px / weight 400 — sits at body size. BRAVIA, Xperia, INZONE editorials each occupy roughly 282px tall product tiles where the photograph is the message and the caption is structural metadata. The chrome's job is to disappear under the photography."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build a Sony-style corporate portal?"
      answer: "Yes — feed it to Claude, Cursor, or GitHub Copilot. The agent will produce React components that match Sony's restraint: flat black rectangle CTAs with white hairlines, SST-substitute body at 14px, the four-blue inline-link rail, and editorial photography at full bleed. The file is appropriate for corporate portals, investor relations surfaces, or any consumer electronics brand site where the product photography is doing the marketing work. Pair with high-resolution BRAVIA-style product renders and Xperia-style lifestyle shots to get the full effect."

colors:
  primary: "#000000"
  primary-hairline: "#ffffff"
  ink: "#000000"
  body: "#656565"
  body-strong: "#1f2024"
  surface: "#ffffff"
  surface-soft: "#efefef"
  surface-dark: "#1f2024"
  hairline: "#c3c3c3"
  hairline-muted: "#898991"
  link-primary: "#3865e0"
  link-deep: "#186fa4"
  link-legacy: "#0000ee"
  link-investor: "#003366"
  swiper-accent: "#007aff"
  timestamp: "#bc5b00"
  on-primary: "#ffffff"
  on-dark: "#ffffff"

typography:
  hero-display:
    fontFamily: "SST W20 Roman, SST W55 Regular, Yu Gothic Medium, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: 0
  heading-md:
    fontFamily: "SST W20 Bold, SST W20 Roman, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 0
  heading-sm:
    fontFamily: "SST W20 Bold, SST W20 Roman, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0
  body-lg:
    fontFamily: "SST W20 Roman, SST W55 Regular, Yu Gothic Medium, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
  body-md:
    fontFamily: "SST W20 Roman, SST W55 Regular, Yu Gothic Medium, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.14
    letterSpacing: 0
  body-relaxed:
    fontFamily: "SST W20 Roman, SST W55 Regular, Yu Gothic Medium, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.57
    letterSpacing: 0
  body-sm:
    fontFamily: "SST W20 Roman, SST W55 Regular, Arial, sans-serif"
    fontSize: 12.8px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0
  body-xs:
    fontFamily: "SST W20 Roman, Arial, sans-serif"
    fontSize: 11.2px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0
  label-bold:
    fontFamily: "SST W20 Bold, Arial, sans-serif"
    fontSize: 12.8px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 0
  button-md:
    fontFamily: "SST W20 Roman, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0
  timestamp:
    fontFamily: "SST W20 Bold, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 2.28
    letterSpacing: 0

rounded:
  none: "0px"
  sm: "2px"
  md: "4px"
  full: "9999px"
  circle: "50%"

spacing:
  xxs: "3px"
  xs: "5px"
  sm: "6px"
  md: "8px"
  base: "12.8px"
  lg: "16px"
  xl: "20px"
  xxl: "30px"

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    borderColor: "{colors.primary-hairline}"
    typography: "{typography.button-md}"
    rounded: "{rounded.none}"
    padding: "20px 13px"
    height: "54px"
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    borderColor: "{colors.primary-hairline}"
    rounded: "{rounded.none}"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.hairline}"
    typography: "{typography.button-md}"
    rounded: "{rounded.none}"
    padding: "12px 16px"
  primary-nav:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.body}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    height: "54px"
    padding: "0px 12.8px"
  utility-nav:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.body}"
    typography: "{typography.body-xs}"
    rounded: "{rounded.none}"
    height: "40px"
  text-link:
    backgroundColor: "transparent"
    textColor: "{colors.link-primary}"
    typography: "{typography.body-md}"
    border: "0"
  text-link-investor:
    backgroundColor: "transparent"
    textColor: "{colors.link-investor}"
    typography: "{typography.body-md}"
    border: "0"
  hero-band-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.hero-display}"
    rounded: "{rounded.none}"
    padding: "30px 20px"
  hero-band-light:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.body-strong}"
    typography: "{typography.heading-md}"
    rounded: "{rounded.none}"
    padding: "30px 20px"
  product-tile:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.body-strong}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "16px"
  product-tile-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "16px"
  news-card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.body-strong}"
    borderColor: "{colors.hairline}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "16px"
  press-release-row:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.body-strong}"
    borderColor: "{colors.hairline}"
    typography: "{typography.body-relaxed}"
    rounded: "{rounded.none}"
    padding: "12.8px 0px"
  timestamp-label:
    backgroundColor: "transparent"
    textColor: "{colors.timestamp}"
    typography: "{typography.timestamp}"
    border: "0"
  carousel-control:
    backgroundColor: "transparent"
    textColor: "{colors.swiper-accent}"
    rounded: "{rounded.circle}"
    size: "44px"
  footer-section:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.body}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: "30px 20px"
---

## Overview

Sony's corporate portal is a broadcast surface, not a marketing site — the chrome runs almost entirely on grayscale and the brand's primary action signal is **ink-as-accent**: every CTA is a flat black `{colors.primary}` rectangle with a 1px white hairline, and the saturated blues sit only in the inline-link rail where they never fill a button or chip. The page is organized as a vertical sequence of editorial bands — a top-of-page Xperia announcement strip, the Creative Entertainment Vision dark editorial band, a BRAVIA Theatre rail, an INZONE headphone callout, the "30 Years of PlayStation" content, and a press-release column — each a stack of product photography with structural captions at 14px or smaller.

Where most consumer electronics portals lead with a saturated brand voltage and a pill CTA, Sony's homepage leads with photography and asks the typography to stay under 14px across navigation, body, and CTA labels. The single 40px hero size appears once, on "Creative Entertainment Vision". Everything below it — taglines, product copy, press-release rows, footer chrome — sits at body proportion. This is **typographic deference**: the proprietary SST W20 face does the load-bearing work at sizes most marketing systems reserve for caption text.

Color rhythm comes from surface alternation rather than accent. The dark editorial band (`{colors.surface-dark}` — `"#1f2024"`) takes over for the Creative Entertainment Vision moment, then the page returns to white `{colors.surface}` for product tiles, with `{colors.surface-soft}` (`"#efefef"`) marking lighter card surfaces. Hairlines at `{colors.hairline}` (`"#c3c3c3"`) divide rows in the press-release column. The four-blue inline-link rail (`"#3865e0"`, `"#186fa4"`, `"#0000ee"`, `"#003366"`) reflects different surface contexts under the Sony umbrella — corporate, legacy, IR — but no blue ever fills a surface.

**Key Characteristics:**
- Ink-as-accent CTAs: `{component.button-primary}` is `{colors.primary}` (`"#000000"`) with a 1px `{colors.primary-hairline}` (`"#ffffff"`) outline, `{rounded.none}`, padding `"20px 13px"`, height `"54px"`.
- Four-blue inline-link rail: `{colors.link-primary}` (`"#3865e0"`), `{colors.link-deep}` (`"#186fa4"`), `{colors.link-legacy}` (`"#0000ee"`), `{colors.link-investor}` (`"#003366"`) — text only, never fill.
- Press-release timestamps land on a single muted orange (`{colors.timestamp}` — `"#bc5b00"`) rendered in SST W20 Bold at 14px.
- Radius scale collapses to `{rounded.none}` and `{rounded.md}` — every structural band is rectangular; only tiles and news cards round at `"4px"`.
- Proprietary SST W20 Roman + Bold covers every role, with Yu Gothic Medium as the Japanese fallback in the same declaration.
- Editorial photography from BRAVIA, Xperia, INZONE, and Creative Entertainment Vision carries 60–80% of every section's visual weight.

## Colors

> **Source page analyzed:** www.sony.com (Sony Group Portal home). 1763 elements scanned, 15 raw colors clustered to 13 perceptual tokens.

### Brand & Accent
- **Ink Primary** (`{colors.primary}` — `"#000000"`) — frequency 179. Used as text (82), background (17), border (80). The CTA fill. This is the brand's load-bearing action signal — a rectangle in pure ink with a white hairline, not a saturated voltage.
- **Surface White** (`{colors.surface}` — `"#ffffff"`) — frequency 502. Used as text (222), background (57), border (223). The dominant canvas across navigation, body, and the press-release column.

### Text
- **Body Gray** (`{colors.body}` — `"#656565"`) — frequency 816. Used as text (410), border (406). The page's load-bearing text and hairline color simultaneously. Carries every secondary caption, every nav link, and every divider.
- **Body Strong** (`{colors.body-strong}` — `"#1f2024"`) — frequency 9. Used as background (9). Reserved for the dark editorial band and the body strong text on light surfaces. Not pure black — a near-black that keeps the photography feeling editorial.

### Surface
- **Surface Soft** (`{colors.surface-soft}` — `"#efefef"`) — frequency 66. Used as background (66). The lighter card surface in the product tile rail — just different enough from white to read as elevated.
- **Surface Dark** (`{colors.surface-dark}` — `"#1f2024"`) — frequency 9. Used as background (9). The dark editorial canvas for the Creative Entertainment Vision band.

### Hairlines & Borders
- **Hairline Gray** (`{colors.hairline}` — `"#c3c3c3"`) — frequency 2. Used as border (2). The press-release row divider and the product tile border.
- **Hairline Muted** (`{colors.hairline-muted}` — `"#898991"`) — frequency 2. Used as text (1), border (1). A softer hairline reserved for utility nav row dividers.

### Inline Link Rail
- **Link Primary** (`{colors.link-primary}` — `"#3865e0"`) — frequency 12. Used as text (6), border (6). The highest-occurrence inline-link blue across the page.
- **Link Deep** (`{colors.link-deep}` — `"#186fa4"`) — frequency 8. Used as text (4), border (4). Older legal section inline links.
- **Link Legacy** (`{colors.link-legacy}` — `"#0000ee"`) — frequency 6. Used as text (3), border (3). Browser-default blue retained for legacy surfaces.
- **Link Investor** (`{colors.link-investor}` — `"#003366"`) — frequency 6. Used as text (3), border (3). Deep navy reserved for investor-relations deep links.

### Semantic
- **Timestamp Orange** (`{colors.timestamp}` — `"#bc5b00"`) — frequency 8. Used as text (4), border (4). The press-release date-stamp color. The single warm tone in the entire system — appears nowhere else.
- **Swiper Accent** (`{colors.swiper-accent}` — `"#007aff"`) — declared as the `--swiper-theme-color` CSS variable for the carousel widget. Frequency 0 in the rendered page — the carousel inherits but doesn't paint the token directly on visible chrome.

### Brand Gradient
**No decorative gradients.** Atmospheric depth comes from photography (BRAVIA Theatre product renders, Xperia lifestyle shots, INZONE headphone close-ups) rather than CSS overlays. Sony is the consumer electronics portal that ships without a single gradient-based design token on its homepage.

## Typography

### Font Family
- **Primary**: `"SST W20 Roman", "SST W55 Regular", Arial, "Helvetica Neue", Meiryo, "Hiragino Kaku Gothic ProN", sans-serif` — Sony's proprietary corporate face, declared with Japanese fallbacks in the same stack for unified Western and JP rendering.
- **Bold variant**: `"SST W20 Bold"` — used for h2 headings at 14px and 16px, press-release timestamps, and the 40px hero headline at weight 700.

### Hierarchy

| Token | Size | Weight | Line Height | Use |
|---|---|---|---|---|
| `{typography.hero-display}` | 40px | 700 | 1.1 | The "Creative Entertainment Vision" headline — appears once on the page |
| `{typography.heading-md}` | 16px | 700 | 1.25 | h2 section headings |
| `{typography.heading-sm}` | 14px | 700 | 1 | Secondary headings, time stamps |
| `{typography.body-lg}` | 18px | 400 | 1.4 | Editorial body callouts |
| `{typography.body-md}` | 14px | 400 | 1.14 | Default body, CTA label |
| `{typography.body-relaxed}` | 14px | 400 | 1.57 | Press-release row body with 22px leading |
| `{typography.body-sm}` | 12.8px | 400 | 1.3 | Nav link, caption |
| `{typography.body-xs}` | 11.2px | 400 | 1.43 | Utility nav, fine print |
| `{typography.label-bold}` | 12.8px | 700 | 1.25 | Press-release definition list term |
| `{typography.button-md}` | 14px | 400 | 1 | Primary CTA label — weight 400, not bold |
| `{typography.timestamp}` | 14px | 700 | 2.28 | Press-release date stamp in `{colors.timestamp}` |

### Principles
- **Sub-14px load-bearing.** The default body lands at 12.8px (nav, caption) or 14px (paragraph). The single 40px hero appears once on the page. Most marketing systems reserve 12.8px for footer fine-print — Sony uses it as the navigation default.
- **CTA labels at weight 400, not 700.** `{typography.button-md}` is regular weight. The button's authority comes from the ink rectangle, not the type's bold weight.
- **Timestamps render at line-height 2.28.** The press-release date stamps use `"32px"` line-height on a 14px character — the relaxed leading is what gives the press-release column its breathable cadence.
- **Single-face system with Japanese fallback.** SST W20 covers every role, and the fallback stack walks through Yu Gothic Medium and Hiragino Kaku Gothic ProN — Sony ships one declaration for both Western and JP rendering.

### Note on Font Substitutes
- **Inter** at 400/700 is the closest open-source substitute. Run body at 14px / 400 / line-height 1.14 to keep the cadence.
- **Roboto** at 400/700 with the `Noto Sans JP` fallback handles the Japanese-locale rendering.
- Preserve the 16px line-height on body and the 20px line-height on h2 — Sony's tight leading is part of the corporate voice.

## Layout

### Spacing System
- **Base scale:** A non-power-of-two scale stepping 3px / 5px / 6px / 8px / 12.8px / 16px / 20px / 30px.
- **Tokens:** `{spacing.xxs}` `"3px"` · `{spacing.xs}` `"5px"` · `{spacing.sm}` `"6px"` · `{spacing.md}` `"8px"` · `{spacing.base}` `"12.8px"` · `{spacing.lg}` `"16px"` · `{spacing.xl}` `"20px"` · `{spacing.xxl}` `"30px"`.
- **CTA padding:** `"20px 13px"` on `{component.button-primary}` — a tall vertical, narrow horizontal padding that gives the button its 54px height.
- **Section vertical padding:** `"30px"` inside an editorial band; sections stack edge-to-edge without decorative gaps.
- **Press-release row padding:** `"12.8px 0px"` — the rows breathe vertically while sitting flush at the left and right edges of the column.

### Grid & Container
- **Page max width:** ~1190px on editorial bands (the hero headline measured at 1190px wide), with full-bleed photography reaching the viewport edge.
- **Column patterns:** 2-column product tile grid on BRAVIA Theatre and INZONE rails; 1-column press-release rows; 3-to-4-column footer link grid.
- **Gutters:** 10px between tiles in a 2-up rail; 5px gaps inside CTA stacks.

### Whitespace Philosophy
The page is dense by editorial-marketing standards — each section packs photography, headline, body copy, and a CTA into roughly one viewport. Photography occupies 60–80% of every band; copy compresses into a small slot at one edge. The press-release column inverts this: copy carries the band and photography drops out entirely. Unlike the convention of marketing pages that surround CTAs with 64px+ of breathing room, Sony's CTA pads to 20px vertical inside a 54px rectangle and the next section starts immediately below.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow, no border | Hero bands, editorial dark canvas, footer |
| Hairline | 1px `{colors.hairline}` border | Press-release row dividers, news cards |
| CTA outline | 1px `{colors.primary-hairline}` (white) on `{colors.primary}` fill | The primary action signal |
| Tile soft | `{colors.surface-soft}` background, no shadow | Product tile rail (BRAVIA, INZONE) |

**Shadow philosophy.** No drop-shadows appear on chrome. Elevation comes from (a) surface change between editorial bands (white ↔ `{colors.surface-dark}`), (b) hairline dividers in dense rows, and (c) the inverted CTA — a black rectangle with a white outline reads as elevated against the white canvas without needing a shadow. This is **shadow-as-outline**: where most systems use `box-shadow` for elevation, Sony uses a contrasting 1px border on the ink rectangle.

### Decorative Depth
- **Editorial photography** (BRAVIA Theatre, Xperia, INZONE close-ups) supplies mood; no gradient overlay.
- **Dark editorial band** breaks the white-dominant page rhythm without using a border or rule.
- **Hairline column** in the press-release rail divides rows at `{colors.hairline}` without inflating elevation.

## Shapes

### Border Radius Scale

| Token | Value | Use |
|---|---|---|
| `{rounded.none}` | `"0px"` | Hero bands, primary CTAs, nav cells, editorial canvases, footer |
| `{rounded.sm}` | `"2px"` | Rare inline chip — appears once on the page |
| `{rounded.md}` | `"4px"` | Product tiles, news cards (30 occurrences) |
| `{rounded.full}` | `"9999px"` | Reserved token, not used on default chrome |
| `{rounded.circle}` | `"50%"` | Carousel control circle |

### Geometry
- **Hero imagery**: full-bleed rectangular; product renders never round at the hero band.
- **Product tile**: square 1:1 or 4:3 crops at `"4px"` radius on the news strip and BRAVIA rail.
- **Press-release row**: zero radius — flush rectangular rows separated by `{colors.hairline}` 1px borders.
- **Carousel control**: the one `"50%"` shape in the system — the Swiper carousel paddle widget.

## Components

### Top Navigation

**`primary-nav`** — Persistent white nav bar with text in `{colors.body}` (`"#656565"`) using `{typography.body-sm}` (12.8px / 400). Height `"54px"`, padding `"0px 12.8px"`, `{rounded.none}`. The brand mark sits at the left edge in pure black ink; nav links run inline at 12.8px without underline. Right-aligned cluster: language selector, search, account.

**`utility-nav`** — A thinner secondary nav row at 40px height, `{typography.body-xs}` (11.2px / 400). Houses category links and corporate-section deep links.

### Buttons

**`button-primary`** — The Sony signature CTA. Background `{colors.primary}` (`"#000000"`), text `{colors.on-primary}` (`"#ffffff"`) in `{typography.button-md}` (SST W20 Roman 14px / 400 — note weight 400, not bold), 1px `{colors.primary-hairline}` (`"#ffffff"`) outline, `{rounded.none}`, padding `"20px 13px"`, height `"54px"`. The ink rectangle with the white hairline IS the brand action signal.

**`button-primary-hover`** — Same surface; hover state was not documented in the captured page.

**`button-secondary`** — Background `{colors.surface}` (white), text `{colors.ink}`, 1px `{colors.hairline}` border, `{rounded.none}`, padding `"12px 16px"`. Reads as the "ghost rectangle" pair to the ink primary.

**`text-link`** — Inline body link in `{colors.link-primary}` (`"#3865e0"`) with `{typography.body-md}`. The default link voltage across the editorial body.

**`text-link-investor`** — Inline link variant for investor-relations deep links in `{colors.link-investor}` (`"#003366"`). Reserved for IR contexts where the deeper navy distinguishes the link from corporate-page body links.

### Bands & Cards

**`hero-band-dark`** — The Creative Entertainment Vision editorial band. Background `{colors.surface-dark}` (`"#1f2024"`), text `{colors.on-dark}`, `{typography.hero-display}` (40px / 700), `{rounded.none}`, padding `"30px 20px"`. Sits at full bleed with a centered headline and a product render filling the remaining width.

**`hero-band-light`** — White editorial band for product callouts. Background `{colors.surface}`, text `{colors.body-strong}`, `{typography.heading-md}` (16px / 700), `{rounded.none}`, padding `"30px 20px"`.

**`product-tile`** — BRAVIA, Xperia, INZONE tile. Background `{colors.surface-soft}` (`"#efefef"`), text `{colors.body-strong}`, `{typography.body-md}` (14px / 400), `{rounded.md}` (`"4px"`), padding `"16px"`. Product photography occupies the top 60–70%; caption strip at the bottom.

**`product-tile-dark`** — Dark-canvas product tile variant. Background `{colors.surface-dark}`, text `{colors.on-dark}`, same proportions. Used in the headphone (INZONE) and editorial rails.

**`news-card`** — White card with `{colors.hairline}` 1px border, `{rounded.md}`, padding `"16px"`. Houses a thumbnail, headline in `{typography.body-md}`, and a `{component.text-link}` "Read more" link.

**`press-release-row`** — A flush row at `{rounded.none}` with a 1px `{colors.hairline}` bottom border. Padding `"12.8px 0px"`. Left: `{component.timestamp-label}`. Center: `{typography.body-relaxed}` (14px / 400 / line-height 22px). Right: a small category chip.

**`timestamp-label`** — `{colors.timestamp}` (`"#bc5b00"`) text in `{typography.timestamp}` (SST W20 Bold 14px / 700 / line-height 32px). The single warm-color token in the entire system — and it appears only on press-release date stamps.

**`carousel-control`** — A 44 × 44px paddle for the Swiper widget. Background transparent, icon in `{colors.swiper-accent}` (`"#007aff"`), `{rounded.circle}` (`"50%"`). The one circular element on the page.

**`footer-section`** — Background `{colors.surface}` (white), text `{colors.body}`, `{typography.body-sm}`, `{rounded.none}`, padding `"30px 20px"`. Multi-column link grid with category headings in `{typography.label-bold}` (12.8px / 700).

## Do's and Don'ts

### Do
- Use `{component.button-primary}` (`{colors.primary}` ink rectangle with a 1px white hairline) as the universal primary CTA. The rectangle IS the action signal — adding a fill color would dilute the system.
- Run CTA labels at `{typography.button-md}` (14px / weight 400). The button gets authority from the ink rectangle, not from bold weight on the label.
- Reserve `{colors.link-primary}` (`"#3865e0"`) for inline text links only. Never fill a button, chip, or card with it.
- Use `{colors.timestamp}` (`"#bc5b00"`) only for press-release date stamps and similar editorial metadata. It is the sole warm-tone token in the system.
- Drop typography below 14px for navigation (12.8px) and utility nav (11.2px) — Sony's nav cadence depends on the sub-14px scale.
- Keep editorial photography at 60–80% of every band's vertical area; let typography compress into the remaining slot.

### Don't
- Don't fill `{component.button-primary}` with `{colors.link-primary}` (`"#3865e0"`) or any other saturated blue — the inline-link rail and the CTA grammar are intentionally separate. If a button needs more weight, increase contrast inside the rectangle, not by switching color.
- Don't use `{typography.hero-display}` (40px / 700) more than once per page. It is reserved for the editorial hero headline (Creative Entertainment Vision) and the page's typographic restraint depends on its scarcity.
- Don't round `{component.button-primary}` to `{rounded.md}` or `{rounded.full}` — Sony's CTA is `{rounded.none}` and the pill would read as a different brand entirely.
- Don't apply `{colors.timestamp}` (`"#bc5b00"`) to a body link or a button — its 8 occurrences on the page are all date stamps in `{typography.timestamp}`, never inline link text.
- Don't introduce a saturated brand voltage for primary actions. The system's identity rests on ink-as-accent; replacing the black rectangle with a saturated fill collapses the discipline. If you must add a hover voltage, increase the white-hairline weight from 1px to 2px rather than swapping the `{colors.primary}` token.
- Don't use `{colors.body}` (`"#656565"`) as a fill — 406 of its 816 occurrences are as `borderColor` and the other 410 are text. For surface fills, use `{colors.surface}` or `{colors.surface-soft}` instead.

## Known Gaps

- **Form validation states** were not surfaced in the captured page; no text-input chrome appears on the home portal (search field was rendered as a Swiper carousel paddle, not a typing field).
- **Hover and focus states** were not captured per system policy; only default and structural states are documented.
- **Sub-brand surfaces** (PlayStation, Sony Pictures, Sony Music, BRAVIA product pages) were not analyzed — those carry their own design vocabularies layered on top of the corporate chrome.
- **Mobile layout** synthesizes the desktop evidence; mobile breakpoints were not captured directly.
- **Investor relations and sustainability sub-pages** likely introduce additional chart, table, and data-table chrome not present on the homepage.
- **CMS-driven content** (rotating Xperia announcements, BRAVIA seasonal callouts) varies per surface — the documented components describe structural patterns, not the rotating editorial content.