W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Sony
Sony Group Corporation is the Japanese diversified conglomerate behind consumer electronics (Bravia televisions, Alpha cameras, WH headphones), professional imaging, semiconductors (CMOS image sensors), Sony Music, Sony Pictures, and Sony Interactive Entertainment (PlayStation). The parent corporate identity is defined by austere restraint: a pure-black SST wordmark on a white canvas, with no chromatic primary on the parent mark. The voice is engineered, considered, and product-led; the visual treatment leaves the work to the photography and the type.
1 palette 3 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/sony/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/sony/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Sony
Sony Group Corporation is the Japanese diversified conglomerate behind consumer electronics (Bravia televisions, Alpha cameras, WH headphones), professional imaging, semiconductors (CMOS image sensors), Sony Music, Sony Pictures, and Sony Interactive Entertainment (PlayStation). The parent corporate identity is defined by austere restraint: a pure-black SST wordmark on a white canvas, with no chromatic primary on the parent mark. The voice is engineered, considered, and product-led; the visual treatment leaves the work to the photography and the type.
Tags: sony, hardware, consumer-electronics, monochrome, japanese-conglomerate
Atoms
Palette
Sony · [email protected] · Proprietary — All Rights Reserved
Sony's corporate identity is one of the most austerely monochrome in consumer electronics. The Sony wordmark is pure black on white — no chromatic primary, no secondary brand color. The live site on sony.com / sony.co.jp/en backs this with a tight neutral ramp (white through #1F2024 near-black) for surfaces and text, a small set of muted blues (#186FA4 / #2D61BF / #4F83DF) reserved for links and active states, and a desaturated secondary palette of greens, oranges, magentas, and slate-purples introduced on the corporate "Sony Group" template surfaces for product-category signaling.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
black |
Black | #000000 |
white |
White | #FFFFFF |
gray-50 |
Gray 50 | #EFEFEF |
gray-100 |
Gray 100 | #DADADA |
gray-200 |
Gray 200 | #BFBFBF |
gray-400 |
Gray 400 | #898991 |
gray-500 |
Gray 500 | #767676 |
gray-600 |
Gray 600 | #656565 |
gray-700 |
Gray 700 | #363636 |
gray-800 |
Gray 800 | #262626 |
gray-900 |
Gray 900 | #1F2024 |
action-blue |
Action Blue | #186FA4 |
link-blue |
Link Blue | #2D61BF |
focus-blue |
Focus Blue | #5E9DF4 |
accent-teal |
Accent Teal | #007263 |
accent-purple |
Accent Purple | #5B2C6E |
accent-magenta |
Accent Magenta | #B62D76 |
accent-orange |
Accent Orange | #BC5B00 |
accent-olive |
Accent Olive | #577515 |
accent-rust |
Accent Rust | #B83744 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
white |
#FFFFFF |
surface |
gray-50 |
#EFEFEF |
surface-elevated |
white |
#FFFFFF |
text-primary |
gray-800 |
#262626 |
text-secondary |
gray-600 |
#656565 |
text-tertiary |
gray-500 |
#767676 |
primary |
black |
#000000 |
primary-hover |
gray-800 |
#262626 |
accent |
action-blue |
#186FA4 |
accent-hover |
link-blue |
#2D61BF |
border |
gray-100 |
#DADADA |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
gray-900 |
#1F2024 |
surface |
gray-700 |
#363636 |
surface-elevated |
gray-800 |
#262626 |
text-primary |
white |
#FFFFFF |
text-secondary |
gray-200 |
#BFBFBF |
text-tertiary |
gray-400 |
#898991 |
primary |
white |
#FFFFFF |
primary-hover |
gray-50 |
#EFEFEF |
accent |
focus-blue |
#5E9DF4 |
accent-hover |
action-blue |
#186FA4 |
border |
gray-700 |
#363636 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
white |
#FFFFFF |
on-identity |
black |
#000000 |
primary |
black |
#000000 |
primary-hover |
gray-800 |
#262626 |
accent |
action-blue |
#186FA4 |
accent-hover |
link-blue |
#2D61BF |
mark |
black |
#000000 |
background-light |
white |
#FFFFFF |
background-dark |
gray-900 |
#1F2024 |
surface-light |
gray-50 |
#EFEFEF |
surface-dark |
gray-700 |
#363636 |
text-primary-light |
gray-800 |
#262626 |
text-primary-dark |
white |
#FFFFFF |
text-secondary-light |
gray-600 |
#656565 |
text-tertiary-light |
gray-500 |
#767676 |
border-light |
gray-100 |
#DADADA |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (7)
colorChoice → roles.colors.mark
- allowed: black, white
- forbidden: action-blue, link-blue, focus-blue, accent-teal, accent-purple, accent-magenta, accent-orange, accent-olive, accent-rust, gray-600, gray-800
The Sony wordmark is pure monochrome. The SST logotype appears in black on light surfaces and white on dark surfaces — never in any of the corporate template's action blues or desaturated category accents. The parent identity has no chromatic primary; recoloring the mark conflicts with the brand's defining restraint.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, outlined, distorted
The Sony wordmark is a fixed-proportion identity. The live site uses it only in solid black or solid white on plain backgrounds with generous clearspace. Skewing, rotating, gradient-filling, drop-shadowing, or placing the mark on a busy photo conflicts with the restrained corporate identity.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Gray 800 (#262626) on white (#FFFFFF) measures ~14:1 — clears WCAG AA at the body-text floor decisively. Sony's monochrome reading environment is built around this high- contrast pairing.
contrastRatio → logo
- against:
background - minRatio:
7 - standard:
WCAG-AAA
Pure black (#000000) on white (#FFFFFF) gives ~21:1 and clears AAA decisively. The monochrome identity has no tolerance for a low-contrast mark — the SST wordmark must appear on a surface that gives at least AAA contrast against its fill color.
colorChoice → roles.colors.primary
- allowed: black, white
- forbidden: action-blue, link-blue, accent-teal, accent-purple, accent-magenta, accent-orange, accent-olive, accent-rust
The Sony parent brand has no chromatic primary. Action Blue (#186FA4) is an inline-link affordance, not a brand primary; the desaturated accents are category-signal colors on the corporate template, not identity colors. Substituting any of them for the monochrome primary reads as a sub-brand or a partner identity, not as Sony.
compositionConstraint → logo
- pairsWith: white, black, gray-50
- doesNotPairWith: accent-teal, accent-purple, accent-magenta, accent-orange, accent-olive, accent-rust, action-blue
The SST wordmark pairs only with neutrals — white, black, or the gray-50 surface tint. Placing the mark on any of the desaturated category accents (teal, purple, magenta, orange, olive, rust) reads as a sub-brand lockup, not as the parent Sony mark.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The monochrome canvas-and-text pairings all clear AA at the body-text floor with significant headroom. AA is the floor; the logo pairing (per the contrastRatio rule above) is held to AAA.
⚠️ warning (1)
contextRestriction → roles.colors.accent
- forbiddenContexts: logo, hero-headline, brand-badge
- allowedContexts: inline-link, focus-ring, active-state
The action blues are interactive affordances inside the product chrome — links inside paragraphs, focus rings, hover states. They must not appear as headline color, logo fill, or brand-badge color; the parent identity stays monochrome.
💡 recommendation (1)
fontPairing → typography.display
- requires:
prose - minSizeRatio:
1.3
Sony's marketing surfaces use SST (proprietary) for both display and body, distinguished by size and weight rather than two distinct families. Maintain at least a 1.3× ratio between display and prose to preserve hierarchy when one family carries both roles.
Provenance
- Source: https://www.sony.com/
- License:
Proprietary — All Rights Reserved - Attribution: Sony Group Corporation / Sony Corporation — identity values captured from the deployed stylesheet on sony.com (template 2023 gnavi.css / footer.css and the corporate styles.css on the 2021 top template). Sony, the Sony logo, SST, Bravia, Alpha, WALKMAN, INZONE, and related names and marks are trademarks of Sony Group Corporation / Sony Corporation.
- Imported:
2026-05-18 - Notes: Derived from live site CSS at https://www.sony.com/ on 2026-05-18; Sony does not publish a public brand-guidelines page. The proprietary brand typeface family is SST (SST W20 Roman / Bold, SST W55 Regular, SST Japanese), declared on sony.com via @font-face but not publicly distributed. This atom references Inter@1 as the open-source rendering substitute. Scope is the parent Sony Group corporate identity only — PlayStation, Bravia, Alpha, INZONE, and other sub-brands are deferred to their own atoms (and PlayStation in particular is its own brand cluster). assets: [] per the encyclopedia's trademark-redistribution policy.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Sony
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Sony
A clear hierarchy in Sony's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ action-blue #186FA4 accent-hover
→ link-blue #2D61BF background-dark
→ gray-900 #1F2024 background-light
→ white #FFFFFF border-light
→ gray-100 #DADADA identity
→ white #FFFFFF mark
→ black #000000 on-identity
→ black #000000 primary
→ black #000000 primary-hover
→ gray-800 #262626 surface-dark
→ gray-700 #363636 surface-light
→ gray-50 #EFEFEF text-primary-dark
→ white #FFFFFF text-primary-light
→ gray-800 #262626 text-secondary-light
→ gray-600 #656565 text-tertiary-light
→ gray-500 #767676 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from sony)
Light mode (11 roles)
accent
→ action-blue accent-hover
→ link-blue background
→ white border
→ gray-100 primary
→ black primary-hover
→ gray-800 surface
→ gray-50 surface-elevated
→ white text-primary
→ gray-800 text-secondary
→ gray-600 text-tertiary
→ gray-500 Dark mode (11 roles)
accent
→ focus-blue accent-hover
→ action-blue background
→ gray-900 border
→ gray-700 primary
→ white primary-hover
→ gray-50 surface
→ gray-700 surface-elevated
→ gray-800 text-primary
→ white text-secondary
→ gray-200 text-tertiary
→ gray-400 Rules (9 typed constraints)
error · 7 rules
colorChoice roles.colors.mark allowed black, white forbidden action-blue, link-blue, focus-blue, accent-teal, accent-purple, accent-magenta, accent-orange, accent-olive, accent-rust, gray-600, gray-800 The Sony wordmark is pure monochrome. The SST logotype appears in black on light surfaces and white on dark surfaces — never in any of the corporate template's action blues or desaturated category accents. The parent identity has no chromatic primary; recoloring the mark conflicts with the brand's defining restraint.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, outlined, distorted The Sony wordmark is a fixed-proportion identity. The live site uses it only in solid black or solid white on plain backgrounds with generous clearspace. Skewing, rotating, gradient-filling, drop-shadowing, or placing the mark on a busy photo conflicts with the restrained corporate identity.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA Gray 800 (#262626) on white (#FFFFFF) measures ~14:1 — clears WCAG AA at the body-text floor decisively. Sony's monochrome reading environment is built around this high- contrast pairing.
contrastRatio logo against background minRatio 7 standard WCAG-AAA Pure black (#000000) on white (#FFFFFF) gives ~21:1 and clears AAA decisively. The monochrome identity has no tolerance for a low-contrast mark — the SST wordmark must appear on a surface that gives at least AAA contrast against its fill color.
colorChoice roles.colors.primary allowed black, white forbidden action-blue, link-blue, accent-teal, accent-purple, accent-magenta, accent-orange, accent-olive, accent-rust The Sony parent brand has no chromatic primary. Action Blue (#186FA4) is an inline-link affordance, not a brand primary; the desaturated accents are category-signal colors on the corporate template, not identity colors. Substituting any of them for the monochrome primary reads as a sub-brand or a partner identity, not as Sony.
compositionConstraint logo pairsWith white, black, gray-50 doesNotPairWith accent-teal, accent-purple, accent-magenta, accent-orange, accent-olive, accent-rust, action-blue The SST wordmark pairs only with neutrals — white, black, or the gray-50 surface tint. Placing the mark on any of the desaturated category accents (teal, purple, magenta, orange, olive, rust) reads as a sub-brand lockup, not as the parent Sony mark.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The monochrome canvas-and-text pairings all clear AA at the body-text floor with significant headroom. AA is the floor; the logo pairing (per the contrastRatio rule above) is held to AAA.
warning · 1 rule
contextRestriction roles.colors.accent forbiddenContexts logo, hero-headline, brand-badge allowedContexts inline-link, focus-ring, active-state The action blues are interactive affordances inside the product chrome — links inside paragraphs, focus rings, hover states. They must not appear as headline color, logo fill, or brand-badge color; the parent identity stays monochrome.
recommendation · 1 rule
fontPairing typography.display requires prose minSizeRatio 1.3 Sony's marketing surfaces use SST (proprietary) for both display and body, distinguished by size and weight rather than two distinct families. Maintain at least a 1.3× ratio between display and prose to preserve hierarchy when one family carries both roles.
Provenance
- Source
- https://www.sony.com/
- License
Proprietary — All Rights Reserved- Attribution
- Sony Group Corporation / Sony Corporation — identity values captured from the deployed stylesheet on sony.com (template 2023 gnavi.css / footer.css and the corporate styles.css on the 2021 top template). Sony, the Sony logo, SST, Bravia, Alpha, WALKMAN, INZONE, and related names and marks are trademarks of Sony Group Corporation / Sony Corporation.
- Imported
2026-05-18- Notes
- Derived from live site CSS at https://www.sony.com/ on 2026-05-18; Sony does not publish a public brand-guidelines page. The proprietary brand typeface family is SST (SST W20 Roman / Bold, SST W55 Regular, SST Japanese), declared on sony.com via @font-face but not publicly distributed. This atom references Inter@1 as the open-source rendering substitute. Scope is the parent Sony Group corporate identity only — PlayStation, Bravia, Alpha, INZONE, and other sub-brands are deferred to their own atoms (and PlayStation in particular is its own brand cluster). assets: [] per the encyclopedia's trademark-redistribution policy.