W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Samsung
Samsung Electronics Co., Ltd. is the consumer-electronics arm of the Samsung Group — smartphones (Galaxy), televisions, appliances (Bespoke), displays, and the memory and foundry business behind them. The corporate identity is anchored on the Samsung Blue (#1428A0) wordmark, which the parent brand pairs with a near- monochrome supporting palette: white canvas, fine grey rules, and near-black text for the global marketing surfaces, plus a brighter action blue (#2189FF) for the dark "UX25" product UI. Voice is engineered, optimistic, and product-led.
1 palette 3 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/samsung/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/samsung/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.
Samsung
Samsung Electronics Co., Ltd. is the consumer-electronics arm of the Samsung Group — smartphones (Galaxy), televisions, appliances (Bespoke), displays, and the memory and foundry business behind them. The corporate identity is anchored on the Samsung Blue (#1428A0) wordmark, which the parent brand pairs with a near- monochrome supporting palette: white canvas, fine grey rules, and near-black text for the global marketing surfaces, plus a brighter action blue (#2189FF) for the dark "UX25" product UI. Voice is engineered, optimistic, and product-led.
Tags: samsung, hardware, consumer-electronics, blue, korean-conglomerate
Atoms
Palette
Samsung · [email protected] · Proprietary — All Rights Reserved
Samsung's corporate palette is anchored on the deep "Samsung Blue" (#1428A0) — the wordmark color and the only chromatic primary on the parent identity. The supporting palette declared on samsung.com is a tight monochrome ramp from white through neutral greys to near-black (#1C1C1C), plus a small set of action accents: a brighter mid-blue (#2189FF / #006BEA) used on CTAs in the dark UX25 system, an "Apple-grey" cool neutral (#6E6E73) for tertiary text on the global US page, plus state colors (success green #007E3B, error red #EF3434, warning orange #F66700).
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 |
|---|---|---|
samsung-blue |
Samsung Blue | #1428A0 |
action-blue |
Action Blue | #2189FF |
action-blue-pressed |
Action Blue (Pressed) | #006BEA |
link-blue |
Link Blue | #0381FE |
light-blue |
Light Blue | #68AEFF |
legacy-navy |
Legacy Navy | #0C4DA2 |
white |
White | #FFFFFF |
gray-50 |
Gray 50 | #F7F7F7 |
gray-100 |
Gray 100 | #F4F4F4 |
gray-200 |
Gray 200 | #E7E7E7 |
gray-300 |
Gray 300 | #CBCBCB |
gray-400 |
Gray 400 | #8F8F8F |
gray-500 |
Gray 500 | #757575 |
gray-600 |
Gray 600 | #6E6E73 |
gray-700 |
Gray 700 | #363636 |
gray-800 |
Gray 800 | #313131 |
gray-900 |
Gray 900 | #1C1C1C |
black |
Black | #000000 |
success |
Success | #007E3B |
warning |
Warning | #F66700 |
error |
Error | #EF3434 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
white |
#FFFFFF |
surface |
gray-50 |
#F7F7F7 |
surface-elevated |
white |
#FFFFFF |
text-primary |
black |
#000000 |
text-secondary |
gray-600 |
#6E6E73 |
text-tertiary |
gray-500 |
#757575 |
primary |
samsung-blue |
#1428A0 |
primary-hover |
legacy-navy |
#0C4DA2 |
accent |
link-blue |
#0381FE |
accent-hover |
action-blue-pressed |
#006BEA |
success |
success |
#007E3B |
warning |
warning |
#F66700 |
error |
error |
#EF3434 |
border |
gray-200 |
#E7E7E7 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
gray-900 |
#1C1C1C |
surface |
gray-800 |
#313131 |
surface-elevated |
gray-700 |
#363636 |
text-primary |
white |
#FFFFFF |
text-secondary |
gray-300 |
#CBCBCB |
text-tertiary |
gray-400 |
#8F8F8F |
primary |
action-blue |
#2189FF |
primary-hover |
action-blue-pressed |
#006BEA |
accent |
light-blue |
#68AEFF |
accent-hover |
action-blue |
#2189FF |
success |
success |
#007E3B |
warning |
warning |
#F66700 |
error |
error |
#EF3434 |
border |
gray-700 |
#363636 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
white |
#FFFFFF |
on-identity |
black |
#000000 |
primary |
samsung-blue |
#1428A0 |
primary-hover |
legacy-navy |
#0C4DA2 |
accent |
link-blue |
#0381FE |
mark |
samsung-blue |
#1428A0 |
success |
success |
#007E3B |
warning |
warning |
#F66700 |
error |
error |
#EF3434 |
background-light |
white |
#FFFFFF |
background-dark |
gray-900 |
#1C1C1C |
surface-light |
gray-50 |
#F7F7F7 |
surface-dark |
gray-800 |
#313131 |
text-primary-light |
black |
#000000 |
text-primary-dark |
white |
#FFFFFF |
text-secondary-light |
gray-600 |
#6E6E73 |
text-tertiary-light |
gray-500 |
#757575 |
border-light |
gray-200 |
#E7E7E7 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (7)
colorChoice → roles.colors.mark
- allowed: samsung-blue, black, white
- forbidden: action-blue, link-blue, light-blue, legacy-navy, gray-600
The Samsung wordmark fills with Samsung Blue (#1428A0) on light surfaces, or with monochrome black-on-light / white-on-dark when a one-color treatment is required. The brighter action blues are product-UI affordances; the legacy navy (#0C4DA2) is a softer historical variant. Substituting any of them for the corporate blue dilutes the wordmark's anchor color.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, outlined, distorted
The Samsung wordmark is a fixed-proportion identity. The live site uses it only in solid-color treatments (Samsung Blue, black, or white) on plain backgrounds. 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
Black (#000000) on white (#FFFFFF) measures ~21:1 — clears WCAG AA at the body-text floor decisively. The high- contrast monochrome posture is the parent brand's default reading environment.
contrastRatio → roles.colors.primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Samsung Blue (#1428A0) on white (#FFFFFF) measures ~11:1 — clears WCAG AA for body text decisively. This headroom is meaningful because Samsung Blue is used not only on the wordmark but also on inline links inside paragraph text.
colorChoice → roles.colors.primary
- allowed: samsung-blue, action-blue, legacy-navy
- forbidden: link-blue, light-blue, gray-600
The identity-primary role is filled by Samsung Blue (default), Action Blue (on dark UX25 surfaces), or Legacy Navy (on legacy US templates). Link Blue (#0381FE) and Light Blue (#68AEFF) are inline-link and hover affordances — not primary action colors.
contextRestriction → roles.colors.error
- forbiddenContexts: marketing-headline, hero-background, cta
- allowedContexts: error-state, destructive-action, form-validation
Error (#EF3434) is the destructive / failure-state accent in the UX25 product UI. It must not appear in marketing context — the brand's marketing CTAs are blue, not red, and treating Error as a brand color collapses the destructive-state affordance.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The monochrome-on-white text pairings and Samsung Blue inline links all clear AA at the body-text floor with significant headroom.
💡 recommendation (1)
fontPairing → typography.display
- requires:
prose - minSizeRatio:
1.3
Samsung's marketing surfaces pair SamsungSharpSans (display, proprietary) with SamsungOne (body, proprietary) on the live site. Maintain at least a 1.3× ratio between display and prose to preserve the two-family hierarchy when both roles render through the Inter substitute.
Provenance
- Source: https://www.samsung.com/us/
- License:
Proprietary — All Rights Reserved - Attribution: Samsung Electronics Co., Ltd. — identity values captured from the deployed stylesheet on samsung.com (us.css, ux25 base CSS, and inline declarations on the US homepage). Samsung, the Samsung logo, Galaxy, Bespoke, Bixby, SmartThings, SamsungOne, and Samsung Sharp Sans are trademarks of Samsung Electronics Co., Ltd.
- Imported:
2026-05-18 - Notes: Derived from live site CSS at https://www.samsung.com/us/ on 2026-05-18; the published brand-identity guide at samsung.com/global/about-us/brand-identity/ is unavailable (returns 403 to non-browser clients). The proprietary brand typefaces (SamsungOne for body, SamsungSharpSans for display) are declared on samsung.com via @font-face but are not publicly distributed. This atom references Inter@1 as the open-source rendering substitute. Scope is the parent corporate identity only — Galaxy, Bespoke, SmartThings, and other sub-brands are deferred. 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 Samsung
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.
Samsung
A clear hierarchy in Samsung'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
→ link-blue #0381FE background-dark
→ gray-900 #1C1C1C background-light
→ white #FFFFFF border-light
→ gray-200 #E7E7E7 error
→ error #EF3434 identity
→ white #FFFFFF mark
→ samsung-blue #1428A0 on-identity
→ black #000000 primary
→ samsung-blue #1428A0 primary-hover
→ legacy-navy #0C4DA2 success
→ success #007E3B surface-dark
→ gray-800 #313131 surface-light
→ gray-50 #F7F7F7 text-primary-dark
→ white #FFFFFF text-primary-light
→ black #000000 text-secondary-light
→ gray-600 #6E6E73 text-tertiary-light
→ gray-500 #757575 warning
→ warning #F66700 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from samsung)
Light mode (14 roles)
accent
→ link-blue accent-hover
→ action-blue-pressed background
→ white border
→ gray-200 error
→ error primary
→ samsung-blue primary-hover
→ legacy-navy success
→ success surface
→ gray-50 surface-elevated
→ white text-primary
→ black text-secondary
→ gray-600 text-tertiary
→ gray-500 warning
→ warning Dark mode (14 roles)
accent
→ light-blue accent-hover
→ action-blue background
→ gray-900 border
→ gray-700 error
→ error primary
→ action-blue primary-hover
→ action-blue-pressed success
→ success surface
→ gray-800 surface-elevated
→ gray-700 text-primary
→ white text-secondary
→ gray-300 text-tertiary
→ gray-400 warning
→ warning Rules (8 typed constraints)
error · 7 rules
colorChoice roles.colors.mark allowed samsung-blue, black, white forbidden action-blue, link-blue, light-blue, legacy-navy, gray-600 The Samsung wordmark fills with Samsung Blue (#1428A0) on light surfaces, or with monochrome black-on-light / white-on-dark when a one-color treatment is required. The brighter action blues are product-UI affordances; the legacy navy (#0C4DA2) is a softer historical variant. Substituting any of them for the corporate blue dilutes the wordmark's anchor color.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, outlined, distorted The Samsung wordmark is a fixed-proportion identity. The live site uses it only in solid-color treatments (Samsung Blue, black, or white) on plain backgrounds. 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 Black (#000000) on white (#FFFFFF) measures ~21:1 — clears WCAG AA at the body-text floor decisively. The high- contrast monochrome posture is the parent brand's default reading environment.
contrastRatio roles.colors.primary against background minRatio 4.5 standard WCAG-AA Samsung Blue (#1428A0) on white (#FFFFFF) measures ~11:1 — clears WCAG AA for body text decisively. This headroom is meaningful because Samsung Blue is used not only on the wordmark but also on inline links inside paragraph text.
colorChoice roles.colors.primary allowed samsung-blue, action-blue, legacy-navy forbidden link-blue, light-blue, gray-600 The identity-primary role is filled by Samsung Blue (default), Action Blue (on dark UX25 surfaces), or Legacy Navy (on legacy US templates). Link Blue (#0381FE) and Light Blue (#68AEFF) are inline-link and hover affordances — not primary action colors.
contextRestriction roles.colors.error forbiddenContexts marketing-headline, hero-background, cta allowedContexts error-state, destructive-action, form-validation Error (#EF3434) is the destructive / failure-state accent in the UX25 product UI. It must not appear in marketing context — the brand's marketing CTAs are blue, not red, and treating Error as a brand color collapses the destructive-state affordance.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The monochrome-on-white text pairings and Samsung Blue inline links all clear AA at the body-text floor with significant headroom.
recommendation · 1 rule
fontPairing typography.display requires prose minSizeRatio 1.3 Samsung's marketing surfaces pair SamsungSharpSans (display, proprietary) with SamsungOne (body, proprietary) on the live site. Maintain at least a 1.3× ratio between display and prose to preserve the two-family hierarchy when both roles render through the Inter substitute.
Provenance
- Source
- https://www.samsung.com/us/
- License
Proprietary — All Rights Reserved- Attribution
- Samsung Electronics Co., Ltd. — identity values captured from the deployed stylesheet on samsung.com (us.css, ux25 base CSS, and inline declarations on the US homepage). Samsung, the Samsung logo, Galaxy, Bespoke, Bixby, SmartThings, SamsungOne, and Samsung Sharp Sans are trademarks of Samsung Electronics Co., Ltd.
- Imported
2026-05-18- Notes
- Derived from live site CSS at https://www.samsung.com/us/ on 2026-05-18; the published brand-identity guide at samsung.com/global/about-us/brand-identity/ is unavailable (returns 403 to non-browser clients). The proprietary brand typefaces (SamsungOne for body, SamsungSharpSans for display) are declared on samsung.com via @font-face but are not publicly distributed. This atom references Inter@1 as the open-source rendering substitute. Scope is the parent corporate identity only — Galaxy, Bespoke, SmartThings, and other sub-brands are deferred. assets: [] per the encyclopedia's trademark-redistribution policy.