What is Samsung's primary brand color?

Samsung does not paint a primary brand color into the chrome. The brand voltage lives entirely inside the Galaxy product gradient — six lavender-to-cobalt stops running #9a9af8, #8686f6, #747cf9, #5c64f0, #3b57fe, and #1d3bed — applied only to the product render itself. The Continue CTA fills #000000 with white SamsungOne text at 14px / 400, and inline links default to the system blue #0000ee. There is no cobalt-fill button, no purple chip, no gradient banner — the voltage is held back for the artifact being sold.

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

Two families, with a hard size boundary. SamsungSharpSans is reserved for display tiers at 47px / 48px / 60px and always at weight 700 — it carries the hero heading See what the experts are saying at 60px / 72px line-height. SamsungOne handles everything below 47px, from the 28px section head down to the 12px legal disclaimer, in four weights (300, 400, 700, 900). Arial is the documented fallback in the cascade. For open-source substitutes, Inter handles the SamsungOne body register; Manrope or Bricolage Grotesque approximates the SamsungSharpSans display register without licensing it.

Why is the 20px radius everywhere?

20px is the lock. The extractor recorded 70 occurrences of border-radius 20px across one Galaxy S26 Ultra page — every primary button, every category chip, every locale picker, every disclaimer pill. The second-place radius is 100% (circles for avatars and dots) at 14 occurrences. After that, 12px appears on inline cards and 38px on the rare double-pill control. There is no 4px / 8px / 16px gradient in the chrome — the radius vocabulary is essentially binary at the interactive level: a 20px pill or a circle.

How does Samsung structure its long product pages?

As an alternating descent between hero chapters and editorial bands. Each chapter is one viewport tall or taller. Hero chapters sit on #1c1c1c canvas with #ffffff text and a Galaxy product render bleeding out of the frame; editorial bands flip to #ffffff with #000000 text and ~88px vertical breathing room (88px is the page's most-used vertical padding token). The surface change itself is the section divider — no rules, no shadows, no gradient transitions. Privacy Display, Camera, Performance, and Accessory sections each occupy one chapter.

What is Samsung's shadow and depth philosophy?

The captured page contains exactly three shadow declarations across more than 7,000 elements — Samsung's chrome is flat by policy. Depth comes from (a) the alternation between #1c1c1c hero and #ffffff editorial surfaces, (b) the photographic Galaxy product render which carries its own studio-lit ambient occlusion as image content, and (c) a 1px #eeeeee hairline on the white-canvas testimonial cards. There is no ambient drop shadow on buttons, no elevation token on the locale popover, and no soft glow on the gradient hero — depth is photographic, not CSS-defined.

Can I use this DESIGN.md to build a Samsung-style React UI?

Yes — feed samsung.md to Claude, Cursor, or any AI tool that reads structured design tokens, and the agent will reproduce Samsung's restraint — black primary CTAs at 20px radius, gradient locked to product imagery, alternating black-and-white chapter rhythm — rather than a generic consumer-electronics theme. Every color, type style, radius, spacing value, and component is a quoted token you can paste into Tailwind config, CSS variables, or your own component library. Pair with a studio-lit product render carrying its own gradient to get the full effect.

Samsung Design System

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

About Samsung DESIGN.md

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

Consumer Electronics
E-commerce & Retail

Samsung's marketing chrome operates as a chapter-book stacked vertically — every page descends through alternating hero and editorial bands, where lavender-to-cobalt Galaxy product renders push out of deep black surfaces and white modules carry the technical reading. The brand voltage lives entirely inside the photography. There is no flat cobalt fill, no decorative gradient overlay, no brand-tinted button — the Galaxy S26 Ultra body gradient (#9a9af8 to #3b57fe across six interpolated stops) appears only on the product render itself, and every other surface stays pure black, pure white, or one of seven graphite text grays. The Continue CTA is black, not cobalt. The hero heading is white on black at 60px / 700 SamsungSharpSans. The chrome refuses to compete with the device it is selling.

The file packages Samsung's chrome into a single Google Labs DESIGN.md spec: 22 color tokens (one black, one white, six structured graphite ramps, six Galaxy gradient stops, two link blues, a single Pro Yellow safety beacon at #fff01f, and four photographic neutrals), 11 typography tokens running on SamsungSharpSans for display ≥ 47px and SamsungOne for body and UI, a four-step radius ramp where 20px dominates with 70 captured occurrences, an 8-step spacing system snapped to 4 / 5 / 8 / 12 / 14 / 24 / 36 / 88px, and 19 component specs covering buttons, locale and category nav, the product hero band, testimonial cards, the horizontal video carousel, and the privacy-display photographic frame.

Drop the file into Claude, Cursor, or GitHub Copilot to produce React components that match Samsung's discipline rather than a generic electronics theme — black CTAs, gradient locked to product imagery, 20px radius everywhere, alternating black-and-white chapter rhythm. The system is worth studying because it inverts the category default: where most consumer-electronics brands paint their primary action in brand voltage, Samsung paints it black and lets the Galaxy gradient live exclusively on the artifact being sold.

What makes it distinct

Gradient-only brand voltageGalaxy lavender #9a9af8 and cobalt #3b57fe appear only inside the product render, never as flat fill
One radius, 70 occurrencesevery pill button, every disclaimer chip, every locale picker locks to 20px and the system refuses to deviate
Two-canvas chapter rhythm#ffffff editorial bands stack against #1c1c1c hero chapters with the surface change acting as the section divider
Two-family typography ladderSamsungSharpSans reserved for 47px and above, SamsungOne carries everything from the 60px AI Week wordmark down to 12px legal
Black-on-white primary CTAthe Continue button is #000000 background with white SamsungOne 14px / 400, inverting the cobalt-CTA convention most consumer-electronics brands follow

Live at samsung.com

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

samsung.com

Explore Samsung

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

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Samsung design system FAQ

Common questions about Samsung'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.

Samsung — official site

Samsung's consumer marketing surface, the page this DESIGN.md captures.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files.

Use Samsung 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 --:--:--→