What is Sony's primary brand color on the corporate portal?

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.

What typography does Sony use, and what should I substitute?

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.

What is Sony's corner-radius vocabulary?

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.

Why does Sony use four different blue hex codes for inline links?

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`.

How does Sony balance editorial imagery against UI chrome?

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.

Can I use this DESIGN.md to build a Sony-style corporate portal?

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.

Sony Design System

Sony's design system as a DESIGN.md file.

About Sony DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source sony.com

Consumer Electronics

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.

What makes it distinct

Ink-as-accent CTAevery 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 disciplineradius scale stops at '4px'; every CTA, every tile, every nav cell renders without pill geometry
Photography carries the pagetypography 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 roleRoman for body and navigation, Bold for h2 and date stamps, no system fallback ever takes over above 16px

Live at sony.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

sony.com

Explore Sony

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Sony design system FAQ

Common questions about Sony's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Sony Group Portal — official site

Sony Group Corporation's corporate portal covering businesses, products, technology, sustainability, and investor relations.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Sony in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→