Design System Inspiration of Samsung

1. Visual Theme & Atmosphere

Samsung's web commerce and device branding operate under a single, unwavering visual principle: black leads. The Samsung Korea e-commerce surface (samsung.com/sec) is built on a pure white canvas (#ffffff) intersected with a light cool-grey surface (#f7f7f7), with virtually every headline, body copy, and interactive element anchored in pure black (#000000). This is not minimalism for minimalism's sake — it is a deliberate assertion of premium hardware confidence. Samsung's products are the hero; the UI frame must be neutral enough to disappear.

Two typefaces carry the entire brand's voice. Samsung Sharp Sans — Samsung's proprietary display typeface — handles all headlines and section titles at weights 700 and sizes from 24px to 56px, its geometric, architectural letterforms lending the product catalog a crisp, engineered quality. For body text, navigation labels, and button copy, SamsungOneKorean (part of the SamsungOne global typeface family) takes over, delivering clean, legible Korean Hangul at 14–16px weights 400–700. Together they create a typographic voice that is simultaneously global and deeply Korean.

The CTA system is strikingly economical. The primary purchase button ("구매하기") is a 40px-tall black pill — #000000 background, white text, 20px radius, 0px 24px padding — applied identically across every product listing and category page. There is no secondary brand color for action; black is the action color. A lighter outline variant (white bg, 1px black border, matching 20px radius) serves secondary calls. This duality — black vs. white pill — is the entire button grammar. Filter chips and facet selectors switch to a #f7f7f7 light-grey pill at 40px radius, visually distinguishing selection from action.

Key Characteristics:

• Samsung Sharp Sans Bold at large display sizes — geometric, Korean-premium, hardware-confident
• SamsungOneKorean for all body, nav, and UI copy — dense Hangul legibility at scale
• Pure black (#000000) as the sole primary action color — no colorful CTA
• 20px radius on primary pill buttons — restrained rounding for a premium feel
• White (#ffffff) and cool-grey (#f7f7f7) canvas — product photography as the only decoration
• Interactive blue (#0381fe) reserved for One UI mobile OS and link text on commerce pages
• Error/notification red (#ef3434) for badges and error states
• Link blue (#007aff) for informational links and highlights, inherited from iOS-adjacent patterns on Korean market pages

2. Color Palette & Roles

Primary

• Primary Black (#000000): The dominant action color. All primary CTA buttons, navigation text, headings. Samsung's e-commerce color philosophy is monochrome: black on white, white on black.
• Primary Alt (#212425): Near-black for hover states and dark UI surfaces (error page CTAs, dark overlays).
• Pure White (#ffffff): Page background, button text on dark. The default canvas.

Surface & Borders

• Surface Grey (#f7f7f7): Secondary surface for tinted sections, filter chip backgrounds, alternating content zones.
• Hairline (#dddddd): Border color for filter buttons, input fields, and UI dividers.

Text Hierarchy

• Foreground (#000000): All headings and primary body text.
• Muted (#707070): Secondary text, captions, metadata below product prices.
• Muted Alt (#555555): Tertiary text, fine print.

Interactive / Brand Blue (One UI & links)

• Interactive Blue (#0381fe): Samsung One UI primary — used for floating action buttons, sliders, and key interactive elements in the Galaxy mobile OS. Also appears as link/accent blue on web.
• Interactive Blue Dark (#0072de): One UI primary button background in light mode.
• Link Blue (#007aff): Hyperlinks and highlighted text on Samsung Korea commerce pages.
• Link Blue Alt (#2189ff): Stronger blue accent for hover or emphasis.

Semantic

• Error / Badge Red (#ef3434): Notification badges, error states, "sale" indicators. A saturated warm red.
• Error Alt (#fa2337): Secondary error/warning accent.

3. Typography Rules

Font Family

• Display: Samsung Sharp Sans — Samsung's proprietary geometric typeface, with SamsungOneKorean as Korean companion.
• Body/UI: SamsungOneKorean, Dotum, 돋움, sans-serif — the primary Korean web typeface for all navigation, body, and button text.

Hierarchy

Principles

• Two typefaces, two registers: Samsung Sharp Sans for product and brand identity; SamsungOneKorean for UI and reading. They never swap roles.
• Bold everywhere at display sizes: Weight 700 is the default for all headlines and nav labels — Samsung's voice is confident and direct.
• Korean-first sizing: 14–16px body size provides generous Hangul legibility in dense product listing contexts.
• Zero decorative typefaces: The system uses no italic, condensed, or script styles. Samsung communicates through geometry and weight alone.

4. Component Stylings

Buttons

Primary (구매하기 / 더 알아보기)

• Background: #000000
• Text: #ffffff
• Radius: 20px
• Padding: 0px 24px
• Height: 40px
• Font: 14px SamsungOneKorean weight 700
• Border: 1px solid #000000
• Hover: background shifts to #212425
• Use: All primary purchase and learn-more CTAs on product and listing pages

Outline (Secondary)

• Background: #ffffff
• Text: #000000
• Radius: 20px
• Padding: 0px 24px
• Height: 40px
• Font: 14px SamsungOneKorean weight 700
• Border: 1px solid #000000
• Use: Secondary CTA on dark backgrounds or alongside a primary button

Filter Chip

• Background: #f7f7f7
• Text: #000000
• Radius: 40px
• Padding: 9px 16px
• Height: 36px
• Font: 16px SamsungOneKorean weight 400
• Border: 1px solid #f7f7f7
• Use: Product series selector (갤럭시 S26 울트라, 갤럭시 Z, 갤럭시 A 등)

Inputs

Default Form Input

• Background: #ffffff
• Text: #000000
• Border: 1px solid #dddddd
• Radius: 0px
• Font: 16px SamsungOneKorean weight 400
• Use: Search field and form inputs on e-commerce and support pages

Filter Button (faceted search)

• Background: #ffffff
• Text: #000000
• Border: 1px solid #dddddd
• Radius: 8px
• Padding: 1px 15px
• Height: 40px
• Font: 14px SamsungOneKorean weight 700
• Use: Category filter dropdowns on all-products listing (배송 유형, 유형, 스토리지 등)

Cards & Containers

Product Listing Card

• Background: #ffffff
• Radius: 0px
• Use: Standard product card on listing pages — frameless, photography-led, no border or shadow; product image bleeds to card edge

Tinted Section Card

• Background: #f7f7f7
• Radius: 0px
• Use: Feature/promotional content zones on the homepage alternating with white sections

Badges

Error / Notification Badge

• Background: #ef3434
• Text: #ffffff
• Radius: 9999px
• Font: 12px SamsungOneKorean weight 700
• Use: Red notification dot, badge count, error indicators

Navigation

Top Category Tab

• Text: #000000
• Font: 16px SamsungOneKorean weight 700
• Active: text #000000 with 2px bottom border #000000
• Height: 47px header
• Background: #ffffff
• Use: Top horizontal nav (AI 구독클럽, 모바일, TV/영상∙음향, 주방가전, 리빙가전, PC/주변기기)

---

Verified: 2026-06-22 (omd:add-reference CREATE — Tier 1 live inspect) Tier 1 sources: https://www.samsung.com/sec/, https://www.samsung.com/sec/smartphones/, https://developer.samsung.com/one-ui/color/system.html Tier 2 sources: getdesign.md/samsung — 404 (not in catalog); styles.refero.design/?q=samsung — no Samsung style found Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base unit: 8px
• Scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px
• Notable: Product listing cards use generous 48–64px vertical section gaps; horizontal padding at content edges is typically 24–32px

Grid & Container

• Max content width: approximately 1440px on desktop (full-bleed hero images)
• Hero sections: full-bleed photography with text overlay; headline and CTA in the lower-left or centered
• Product listing: 3–4 column grid on desktop, collapsing to 2 then 1 on mobile
• Category nav is sticky below the top utility bar

Whitespace Philosophy

• Product as hero: extreme whitespace around product photography — the UI disappears, the device shines
• Flat segmentation: white and #f7f7f7 alternating sections divide content without elevation or shadow
• Dense nav, spacious content: the 47px header is functionally dense (bold 16px labels at 14px 12px padding each side), while main content areas breathe

Border Radius Scale

• Sharp (0px): Product cards, image containers, section backgrounds
• Soft (8px): Filter dropdowns, utility UI elements
• Pill-moderate (20px): Primary and outline CTA buttons — the signature rounding
• Pill-generous (40px): Filter chip selectors
• Full pill (9999px): Notification badges, color swatches

6. Depth & Elevation

Shadow Philosophy: Samsung's commerce surface is near-shadowless. Depth and content grouping come from alternating flat backgrounds (#ffffff vs #f7f7f7) and thin #dddddd hairlines. This keeps the visual focus on product hardware photography. When elevation does appear — dropdowns, quick-view panels — it uses a neutral grey shadow without any brand-colored tinting.

7. Do's and Don'ts

Do

• Use Samsung Sharp Sans Bold (weight 700) for all product headings and display text
• Use SamsungOneKorean for all body, UI, and button label text
• Use pure black (#000000) pill buttons (20px radius) for all primary purchase CTAs
• Apply #f7f7f7 surface grey to alternate section backgrounds for flat separation
• Use #0381fe interactive blue only for One UI mobile contexts and hyperlinks
• Use #ef3434 red for error badges and notification indicators
• Let product photography fill the card — frame it with minimal chrome
• Maintain the 20px radius pill shape for all primary buttons across platforms

Don't

• Use a colorful brand CTA — Samsung's action color is black, not a brand hue
• Apply drop shadows to product cards — the system is flat; shadows cheapen the premium feel
• Use Samsung Sharp Sans for body copy — it belongs exclusively to display and headlines
• Break the black-and-white CTA duality with a third button color
• Apply large, decorative border-radius (60px+) to primary CTAs — 20px is the upper bound for e-commerce
• Mix #0381fe blue into e-commerce buttons — blue is for links and the mobile OS layer only
• Use weight 400 for nav labels — Samsung navigation is always bold (weight 700)
• Introduce competing accent colors — the system's palette is intentionally near-monochrome

8. Responsive Behavior

Breakpoints

Touch Targets

• Primary buttons at 40px height — comfortably tappable
• Category nav at 47px header — full-width tap area per nav item
• Filter chips at 36px — adequate touch target on mobile
• Color swatch buttons at 24px with 2px outer ring indicator

Collapsing Strategy

• Hero: 56px Sharp Sans headline → compresses proportionally on mobile
• Nav: full horizontal category row → hamburger toggle
• Product grid: 4-column → 2-column → single-column stacked
• CTA: button pill maintained at 40px height across all breakpoints

Image Behavior

• Product images maintain aspect ratio at all sizes; no shadow added at any breakpoint
• Hero full-bleed images crop from center on narrow viewports
• Samsung maintains alt text in Korean for all product imagery

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA: Black (#000000)
• CTA Hover: Near-black (#212425)
• Background: White (#ffffff)
• Surface grey: #f7f7f7
• Text: Black (#000000)
• Muted text: #707070
• Hairline borders: #dddddd
• Link / One UI blue: #0381fe
• Error / badge red: #ef3434

Example Component Prompts

• "Create a Samsung-style product hero: white background, full-bleed device image. Headline at 56px Samsung Sharp Sans weight 700, color #000000. Black pill CTA button — #000000 bg, white text, 20px radius, 0px 24px padding, 40px height, 14px SamsungOneKorean weight 700. Link text 'AI 구독클럽' in #000000."
• "Design a product listing card: white background, no border, no shadow. Product heading at 24px Samsung Sharp Sans weight 700, color #000000. Price in SamsungOneKorean 16px weight 400. Black purchase button at bottom."
• "Build a top nav: white background, 47px height. Category tabs in 16px SamsungOneKorean weight 700, color #000000, active tab with 2px solid #000000 bottom border."
• "Create a filter bar: #f7f7f7 background filter chips with 40px radius, 36px height, 16px SamsungOneKorean weight 400. Separate facet filter buttons with 8px radius, #dddddd border."

Iteration Guide

1. Black pill buttons are always the primary action — never color them blue or any brand hue
2. Samsung Sharp Sans is display-only; SamsungOneKorean handles all UI text
3. Separate sections with flat #f7f7f7 backgrounds, not shadows or borders
4. 20px radius on buttons, 40px on filter chips, 0px on cards — consistent scale
5. Interactive blue (#0381fe) is for mobile OS (One UI) and links only, not e-commerce CTAs
6. Error/badge states use #ef3434 red
7. Weight 700 dominates — Samsung is bold, direct, confident

---

10. Voice & Tone

Samsung's brand voice is confident, efficient, and aspirational — the voice of a company that has defined global consumer electronics for decades and knows it. Copy on Samsung Korea's e-commerce surface is declarative and product-forward: "갤럭시 S26 | S26+" is the headline, not a tagline. Navigation labels are functional (모바일, TV/영상∙음향, PC/주변기기), never whimsical. CTAs are direct imperatives ("구매하기", "더 알아보기") that respect the user's time without urgency tricks.

The brand shifts register by channel. The design.samsung.com editorial surface uses English and a more expansive, philosophical voice — "Where Design Meets Reality," "Samsung Design Vision," "Designed to Be Seen" — positioning Samsung as a cultural and aesthetic force, not just a hardware company. The One UI design system documentation speaks in precise, developer-respecting technical prose. These three voices (commerce = direct Korean, design editorial = expansive English, OS documentation = technical) coexist without contradiction because each serves a distinct audience.

Voice samples (verbatim from live www.samsung.com/sec, 2026-06-22):

• "AI 구독클럽" — nav category label for AI subscription services (verified live 2026-06-22)
• "구매하기" — universal primary CTA across all product pages (verified live 2026-06-22)
• "삼닷 Live 보기" — live-commerce CTA on homepage featured products (verified live 2026-06-22)

Forbidden register: vague superlatives ("world's most innovative"), fear-based urgency, emoji in e-commerce CTAs, informal Korean honorifics (반말) on any branded surface.

11. Brand Narrative

Samsung Electronics was established in 1969 as Samsung-Sanyo Electronics (renamed Samsung Electronics in 1974), emerging from the Samsung Group founded by 이병철 (Lee Byung-chul) in 1938. Headquartered in Suwon, South Korea (with global HQ functions in Seoul), Samsung Electronics became the world's largest producer of memory chips, smartphones, and televisions — a position held continuously since the 2010s. The flagship Galaxy mobile line, launched in 2009 with the original Galaxy smartphone, grew into the world's best-selling Android device family, anchoring Samsung's identity as a consumer-facing premium brand.

Samsung's design philosophy crystallized in the One UI design language, introduced with One UI 1.0 in 2018. One UI's founding premise — "Focus on the task at hand, interact naturally, be visibly comfortable, make things responsive" — represented Samsung's explicit rejection of feature-packed, visually busy interfaces in favor of content-forward, thumb-friendly layouts. The design team's stated rationale: "simple, intuitive designs to help users focus on content" rather than chrome. This principle extended to the visual language: calm backgrounds, a primary blue that "symbolizes trust, hope, and stability" drawn from Samsung's heritage, and dark mode support as a first-class feature rather than an afterthought.

What Samsung's e-commerce design refuses: brand-colored CTA buttons (Samsung runs pure black purchase buttons, not blue), decorative shadows, and any visual element that competes with the hardware being sold. What it embraces: Samsung Sharp Sans as a proprietary display font that signals ownership of the premium display space, the Galaxy brand name as the sole hero element in product headlines, and a near-monochrome palette that makes product photography the only color in the room. The result is a design system that defers to the product at every turn — a confidence move that only a brand with genuinely iconic hardware can afford.

12. Principles

1. Product is the hero. Every design decision on samsung.com defers to product photography. White canvas, no shadows, minimal chrome — the device fills the frame. UI implication: product cards are frameless and shadowless; the only decor is the hardware.
2. Black is the action color. Unlike most consumer-tech brands that reach for a colorful primary CTA, Samsung's purchase buttons are pure black. This signals premium confidence: the product sells itself, the CTA doesn't need to shout. UI implication: all primary buttons are the black pill system — no exceptions.
3. Bold type, calm palette. Samsung Sharp Sans at weight 700 declares the headline; the surrounding space is white silence. UI implication: reserve Samsung Sharp Sans for product names and section titles; let white space amplify the typography.
4. Design comfort at scale. One UI's foundational principle — "be visibly comfortable" — extends to all Samsung surfaces. Dark mode, variable font sizes, high contrast: accessibility is baked in, not bolted on. UI implication: all interactive states must support high-contrast mode and the full font-size range.
5. Global identity, Korean at heart. SamsungOneKorean is the UI typeface because the Korean market is Samsung's home market and the standard bearer for Galaxy design quality. UI implication: Hangul legibility at 14–16px is non-negotiable; Korean copy drives spacing and rhythm decisions.

13. Personas

Personas below are fictional archetypes informed by publicly observable Samsung user segments (Galaxy device owners, Korean premium electronics buyers, Galaxy AI early adopters), not individual people.

김민준, 33, 서울 강남. A tech-forward software engineer upgrading to Galaxy S26 Ultra. Visits samsung.com/sec directly, comparing camera specs. Values the clean product listing — he doesn't want marketing noise, just specs, price, and a clear "구매하기." Trusts the black CTA as a signal of seriousness, not as persuasion.

박지현, 47, 부산. A homeowner replacing a QLED TV and pairing it with a Bespoke AI refrigerator. Navigates the "주방가전" and "TV/영상∙음향" categories. Appreciates that the Samsung.com KR e-commerce experience doesn't feel different from a premium department store — clean, authoritative, product-first.

이수아, 26, 서울 종로. A Galaxy Z Fold early adopter who follows samsung.com/design for design vision content. Reads "Where Design Meets Reality" editorials and follows Samsung Design's Instagram. Connects the hardware design to the One UI software aesthetic — she experiences them as the same brand promise.

George Whitmore, 38, London. An IT procurement manager choosing Galaxy smartphones for a 500-seat enterprise deployment. Uses Samsung's business portal. Values the consistency between One UI and Samsung's global brand presence — the same confident, low-decoration design language in every market signals enterprise-grade reliability.

14. States

15. Motion & Easing

Durations:

Easings:

Signature motions:

1. Hero carousel: Full-bleed product images slide horizontally at motion-slow / ease-standard. The image is always in motion (auto-advancing at 5s intervals); text overlay fades rather than slides to reduce cognitive noise.
2. Button press: Black CTA shifts background to #212425 in motion-fast with no scale transform — Samsung's press state is color-only, not kinetic. Consumer electronics gravity demands steadiness.
3. Product card hover: A subtle shadow lift (0 4px 16px rgba(0,0,0,0.12)) emerges at motion-standard / ease-enter on desktop product listing hover states — the only elevation in an otherwise flat system.
4. One UI transitions: On the mobile OS layer, Samsung uses ease-enter curves at 300ms for screen transitions, consistent with Android Material principles but calibrated to Samsung's more restrained tempo.
5. Reduce motion: Under prefers-reduced-motion: reduce, hero carousel pauses auto-advance, button hover is instant, and all transitions collapse to motion-instant. The commerce surface remains fully navigable without motion.