Design System Inspiration of Samsung

1. Visual Theme & Atmosphere

Samsung Electronics presents consumer devices, services, and its Galaxy ecosystem across a broad public web estate. Its Korean public commerce and AI-product pages use a quiet product frame: white or pale-gray surfaces, black typography, contained black calls to action, and large device imagery. Samsung’s official brand story frames this product work within human-driven innovation and describes its expression as bold, genuine, contemporary, and playful; the captured commerce treatment is one restrained application of that wider identity rather than a substitute for it. The official One UI system is a separate platform domain, designed for comfortable and responsive experiences across Galaxy devices. This reference therefore preserves the observed public-web grammar while keeping One UI’s documented blue and component guidance separate from web-commerce claims. Samsung brand story · One UI overview

The supplied 2026-07-13 evidence covers a Korean homepage, an AI-products page, and the Korean brand-identity page at one desktop viewport. The homepage provides the measured contained and outlined CTA patterns; the AI page provides the product-card and selected-tab patterns; the brand-identity page is retained as an official brand/documentation surface. It does not cover checkout, sign-in, native Galaxy apps, or a general Samsung component library. A targeted live probe of the homepage on 2026-09-29 added hover, pressed and keyboard-focus readings for six controls, and they show that Samsung draws its own focus indicator, a 2px dotted black outline, on every one of them.

Key characteristics:

• Black #000000 contained CTA and primary text on the captured Korean public web surfaces
• White #ffffff canvas and #f7f7f7 product/search surface, with no representative box shadow
• Samsung Sharp Sans for observed display headings and SamsungOneKorean for observed Korean UI/body text
• 20px contained-CTA and AI-product media-card corners; 0px selected-tab title treatment
• One UI blue #0381fe is an official mobile-system token, not a substitute for the captured commerce CTA
• Keyboard focus is an authored outline: 2px dotted #000000 on every probed control (2026-09-29), not the browser's ring
• Navigation blue #006bea appears only as the global-navigation hover, press and focus colour

Primary tasks

• Browse consumer devices and services across the public site
• See what each AI product does by moving between their tabs

2. Color Palette & Roles

Captured Korean public web surfaces

• Primary action and foreground (#000000): observed on the homepage contained CTA and across the AI-product card/title treatments.
• Canvas (#ffffff): observed homepage and product-card background.
• Product/search surface (#f7f7f7): observed on the AI page’s pressed search control and on official/commerce surface treatments.
• Muted text (#707070): repeated computed text color in the supplied capture; retain for secondary content only.
• Border (#dddddd): observed on homepage carousel-control chrome; not promoted as a universal product-card border.
• Carousel arrow (#007aff): the icon colour of the two homepage carousel arrows (button.swiper-button-prev / -next, 40px circles on #ffffff with a 1px #dddddd border), the only captured elements that carry it. No text link carries it, so it is not a link colour (corrected 2026-09-29; the key was link). Whether it is the Swiper library's default theme colour rather than a Samsung choice is a lead, not a finding.
• Navigation active (#006bea): global-navigation text and 2px bar on hover, press and keyboard focus. The 2026-07-13 capture shows it on the pressed frame of every sampled navigation link on all three surfaces; the 2026-09-29 probe shows it on hover, press and focus. It is never a rest colour, and it is neither the One UI blue nor the carousel-arrow blue.

One UI documentation boundary

• One UI primary (#0381fe): Samsung’s official One UI color guidance assigns it to floating action buttons and sliders. It belongs to the platform design-system source, not to the captured Korean commerce CTA. Color system and usage

3. Typography Rules

Evidence classes

Official product-use and brand context. Samsung’s design-system font page describes SamsungOne as the family that gives its products a consistent voice, with localized fonts supporting a universal Samsung experience. Samsung’s official brand-identity typography page separately identifies Samsung Sharp Sans Bold and Medium as brand type specimens. Those pages establish family and brand context; they do not turn every official face into a public-web UI token. Samsung fonts · Samsung Sharp Sans specimens

Live computed surface-use. The supplied capture records SamsungOneKorean as loaded/high with 1,297 visible uses across body, button, menu, tab, card, and heading roles, with @font-face sources on Samsung domains. SamsungSharpSans is likewise loaded/high with 76 visible heading/text uses and Samsung-hosted FontFace sources. On the AI-products page, a repeated heading is 24px/700/32px Samsung Sharp Sans; a repeated product-card body is approximately 16px/400/21.2798px SamsungOneKorean. The homepage contained CTA is 14px/700/19px SamsungOneKorean.

Official distributed brand asset / license boundary. Samsung Design publishes SamsungOne specimens and a PDF download, but the first-party sources reviewed here do not provide a transferable public font-license grant. Keep official specimen and history material as context; do not infer permission to redistribute the webfont files or substitute a system font. SamsungOne

Declared-only. The artifact found Samsung Korea Sans, SamsungOne, SamsungSharpGraphic, SamsungSSBody, SamsungSSHead, Samsung Sharp Sans mixed/normal, NanumBarunBold, and several icon faces declared with @font-face but without visible computed use. They remain declared assets, not UI-family tokens.

System/unresolved. Dotum, Apple SD Gothic Neo, Arial, and sans-serif occur only as fallbacks in the captured computed stacks. No runtime availability authorizes their use as Samsung substitutes. Additional locales, native One UI font behavior, and all uncaptured pages remain unresolved.

4. Component Stylings

Homepage calls to action

Contained CTA — Korean homepage

• Background: #000000
• Text: #ffffff
• Border: 1px solid #000000
• Radius: 20px
• Padding: 10px 24px 9px
• Height: 40px
• Font: 14px / 700 / SamsungOneKorean
• Use: home::[data-omd-capture="26"], class cta cta-ntrns-fild; 36 occurrences on the captured homepage.
• Pointer states: on 2026-09-29 hover and pressed both matched (:hover, :active) and the fill, border and label stayed as at rest (transition: all 0s): the black pill does not respond to the pointer. The probed instance sits in a product tile's 구매하기 row, which stays at opacity 0 until the tile is hovered, pressed or focused; that reveal belongs to the tile (see Product tile).
• Focus: authored outline: 2px dotted #000000, 0px offset (keyboard Tab, :focus-visible matched, 2026-09-29).

Outlined CTA — Korean homepage

• Text: #000000
• Border: 1px solid #000000
• Radius: 20px
• Padding: 10px 24px 9px
• Height: 40px
• Font: 14px / 700 / SamsungOneKorean
• Use: home::[data-omd-capture="20"], class cta cta-outl; six homepage occurrences. Its computed background is transparent, so no white fill is asserted.
• Hover and pressed: the button inverts to bg #000000 and fg #ffffff over background-color, border-color, color 0.2s linear (2026-09-29, :hover and :active matched).
• Focus: authored outline: 2px dotted #000000, 0px offset; the fill stays transparent.

Underlined text CTA — Korean homepage

• Text: #000000, 14px / 700 / SamsungOneKorean
• Underline: a 1px #000000 ::after bar, not text-decoration
• Padding: 0 0 2px; height 21px
• Pressed: fg rgba(0, 0, 0, 0.7) while the bar stays #000000 (the 2026-07-13 capture and the 2026-09-29 probe agree)
• Hover: on 2026-09-29 :hover matched and every compared property stayed as at rest
• Focus: authored outline: 2px dotted #000000, 1px offset
• Use: home::[data-omd-capture="23"], class cta cta-undr (더 알아보기)

Product tile — Korean homepage

• Size: a 342 × 342px link (a.clickable); title h2 in #000000, 24px / 700
• Hover, pressed and keyboard focus: the tile image scales to 1.05 and the tile's 구매하기 row (div.cta-line, 366 × 40px) fades in from opacity 0 to 1; nothing recolours. The contained CTA in that row is invisible until the tile is hovered or focused (2026-09-29)
• Focus: also draws the authored outline: 2px dotted #000000, 1px offset
• Use: home::[data-omd-capture="25"], "27" and "29"

Header

Global navigation link

• Background: transparent
• Text: #000000, 16px / 700 / SamsungOneKorean
• Padding: 14px 12px; height 47px
• Hover and pressed: fg #006bea and a 2px #006bea bar drawn by ::before (opacity 0 to 1); they also open the white mega-menu panel, drawn by the menu list's ::after (from 1440 × 0 at opacity 0 to 1440 × 406px at opacity 1)
• Focus: the same blue text and bar plus the authored outline: 2px dotted #000000, 1px offset; keyboard focus does not open the mega-menu panel. The blue stayed after focus moved to the next item, probably a script-applied current-item state; recorded as a lead.
• Use: a.nv00-gnb-v4__l0-menu-link (e.g. 모바일). The 2026-07-13 capture shows the pressed blue on every sampled link of all three surfaces, including the 14px / 700 utility row with 4px 8px padding.

Search trigger

• Rest with the header scrolled: bg #f7f7f7, border 1px solid #f7f7f7, radius 40px, 36 × 36px, padding 9px; the keyword text inside reads #757575
• Rest at the homepage page top: bg rgba(247, 247, 247, 0.3), border 1px solid rgba(0, 0, 0, 0.2)
• Hover and pressed (scrolled header, 2026-09-29): bg rgba(247, 247, 247, 0.3), border 1px rgba(0, 0, 0, 0.3), keyword text #000000; transition: border-color 0.5s cubic-bezier(0.35, 0, 0.36, 1)
• Focus: authored outline: 2px dotted #000000, 0px offset
• Boundary: the 2026-07-13 pressed frames on the AI-products and brand-identity pages kept #f7f7f7; the search input opens in a fixed layer behind a click and was not measured

AI-product content

Product media card — AI products

• Background: #ffffff
• Radius: 20px
• Use: surface-2::div, class showcase-card-tab-card__img-wrap; a 330px-square observed media wrapper. The surrounding card is not asserted as a universal commerce-card pattern.

Selected product tab title — AI products

• Text: #000000
• Radius: 0px
• Padding: 4px 0px
• Font: 18px / 700 / SamsungOneKorean
• Use: surface-2::[data-omd-capture="25"], class tab__item-title.
• Selected: selected and tab-selected were observed by three collector tab interactions. No selected underline, panel geometry, or unmeasured color is inferred.

Icon label CTA — AI products

• Background: transparent
• Text: #000000, 14px / 700 / SamsungOneKorean
• Radius: 0px; padding 10px 0 11px; height 40px
• Use: surface-2::[data-omd-capture="46"], class cta cta--icon cta--label cta--black; six occurrences; default only

Brand-identity page

White contained CTA

• Background: #ffffff
• Text: #000000, 14px / 700 / SamsungOneKorean, tracking -0.28px
• Radius: 20px; padding 10px 24px 11px; height 40px; no border
• Use: surface-3::[data-omd-capture="28"], class cta cta--contained cta--white; four occurrences; default only

Local navigation link

• Text: #000000, 14px / 400 / SamsungOneKorean, tracking -0.28px
• Padding: 0 32px; height 46px
• Use: a.explore-lnb__link. One link has hover, pressed and focus frames at #555555 in the 2026-07-13 capture, but no sibling has any and #555555 appears nowhere at rest, so no state is declared.

Observed state boundaries

The 2026-07-13 capture records the pressed underlined CTA and pressed global-navigation links on the homepage, pressed search controls on the AI and brand-identity surfaces, disabled carousel arrows on the homepage, three selected-tab interactions on the AI-products surface, and an expanded/menu-open brand-identity menu. The 2026-09-29 homepage probe (real pointer hover, mouse-down and a keyboard Tab walk, each confirmed by :hover, :active or :focus-visible) measured six controls: the contained, outlined and underlined CTAs, the navigation link, the search trigger and the product tile. Keyboard focus is authored on all six: outline: 2px dotted #000000, at 0px offset on the two CTA buttons and the search trigger and 1px on the text link, the navigation link and the tile. No error, dialog, toast, or checkout state is asserted.

Verified: 2026-07-13 · states re-measured 2026-09-29 (live homepage probe) Tier 1 sources: https://www.samsung.com/sec/, https://www.samsung.com/sec/ai-products/, https://www.samsung.com/sec/about-us/brand-identity/, https://developer.samsung.com/one-ui/color/system.html, https://developer.samsung.com/design-system/font Tier 2 sources: https://getdesign.md/samsung and https://styles.refero.design/?q=samsung were both attempted through built-in web retrieval; both returned an internal error, so neither supplied a value or an absence determination. Resolution note: The prior universal e-commerce filter/input/card/shadow/state rules were removed because this packet did not observe their matching current component provenance. One UI blue remains documentation-only rather than a commerce CTA token. Conflicts unresolved: none

Published component roster (8 published, none measured here)

Samsung's One UI design guidance publishes 8 components, read from its own navigation at https://developer.samsung.com/one-ui/ on 2026-09-19 — the pages filed under comp/:

App bar, Bottom bar, Bottom navigation, Buttons, Dialog, Lists, Search, Toasts

Eight is the real number and not a shortfall in the reading. One UI's published guidance is mostly foundations rather than a component library: the same navigation carries structure, layout, colour, iconography, motion, sound and haptics, writing, accessibility, and large-screen and foldable guidance, and only these eight pages document components.

What this reference measured

§4 carries eleven measured components from the Samsung Korea web: homepage CTAs, navigation, search trigger and product tiles; AI-products tabs, CTAs and media wrappers; brand-identity CTAs and navigation. Their classes (tab__item-title, cta-outl, nv00-gnb-v4__l0-menu-link and so on) are samsung.com's own, not One UI component classes. The one-ui- strings elsewhere in this file are a source id and a token name, not classes on a capture. None of the eight One UI components above carries a measured value here. (Corrected 2026-09-29: this paragraph said the tab was captured on a Samsung developer page; it was captured on https://www.samsung.com/sec/ai-products/.)

5. Layout Principles

The one captured desktop viewport repeatedly exposes 12px navigation insets, 24px horizontal CTA padding, and a 32px product-card text inset. Treat these as local, observed spacing values rather than a complete Samsung grid scale. The capture does not compare breakpoints, measure a checkout layout, or establish a universal product-listing grid.

6. Depth & Elevation

Representative contained CTAs, AI-product cards, tabs, and menu structures in the artifact report box-shadow: none. Hierarchy in these observed surfaces comes from product imagery, white versus #f7f7f7 planes, typography, and borders. No modal, tooltip, or floating-panel elevation is claimed.

7. Do's and Don'ts

Do

• Use the contained homepage CTA only with the measured black/white, 20px-corner, 40px-high treatment.
• Keep SamsungOneKorean and Samsung Sharp Sans tied to their recorded live-use roles and loaded FontFace evidence.
• Treat the AI-product selected tab as its own 18px/700, 0px-radius pattern with the observed selected state.
• Keep One UI documentation values visibly separate from Korean public-commerce measurements.
• Draw keyboard focus the way the site does: a 2px dotted #000000 outline, not the browser's ring.

Don't

• Do not promote declared-only faces or system fallbacks as loaded Samsung UI fonts.
• Do not apply One UI #0381fe as a replacement for the captured black public-web CTA.
• Do not infer a product-card shadow, checkout field, generic filter control, or error state from unobserved variants.
• Do not treat the brand-identity documentation page as native Galaxy-app evidence.
• Do not use navigation blue #006bea as a rest or fill colour; it marks hover, press and focus on navigation only.

8. Responsive Behavior

No viewport comparison was included in the supplied artifact. The values above describe the captured desktop surfaces only; no Samsung-specific mobile navigation, grid collapse, touch target, or breakpoint geometry is asserted.

9. Agent Prompt Guide

Quick reference

• Homepage contained CTA: #000000 background, #ffffff text, 1px black border, 20px radius, 10px 24px 9px padding, 40px height, SamsungOneKorean 14px/700.
• AI-product selected tab: black 18px/700 SamsungOneKorean text, 4px 0px padding, sharp corners; selected/tab-selected is observed.
• AI-product media wrapper: white, 20px radius, no observed shadow.
• Outlined CTA: transparent, 1px black border, 20px radius; hover and press invert it to black with white text.
• Keyboard focus: outline: 2px dotted #000000 on CTAs, navigation and tiles.

Boundary-aware prompt

• "Create a Korean public-web CTA using Samsung’s captured homepage treatment: black background, white text, 20px radius, 40px height, 10px 24px 9px padding, and SamsungOneKorean 14px/700. Do not use One UI blue. The contained CTA does not change on hover; draw keyboard focus as a 2px dotted black outline."

10. Voice & Tone

Samsung’s official brand story calls its expression bold, genuine, contemporary, and playful. On the captured Korean public surfaces, that broader tone becomes direct category and action language rather than a claim about every channel or locale. Use concise, specific labels that name the product or action; do not invent marketing superlatives, price claims, or product benefits. Samsung brand story

11. Brand Narrative

Samsung’s official Korean brand story dates the company’s story to 1969 and states a purpose of creating human-driven innovations that overcome barriers for a better world. It also describes people and their concerns as central to what Samsung creates, and names values around people, excellence, change, integrity, and co-prosperity. This provides context for the consumer-device and service ecosystem; it does not prove a specific public-web token. Samsung brand story

The current design expression spans more than the captured commerce pages. Samsung’s brand material treats color, typography, logo, and sound as distinct visual/experiential assets, while One UI documents a platform system for phones, tablets, wearables, earbuds, and PCs. This reference retains those domains separately so a marketplace CTA is not presented as a native One UI control. Brand identity · One UI overview

12. Principles

1. Put people and tasks first. Samsung’s brand story and One UI guidance both center human experience and focused tasks. UI implication: state the action clearly and avoid decorative flow interruptions.
2. Use a connected typographic voice. Samsung positions SamsungOne as a localized, universal family. UI implication: preserve the observed SamsungOneKorean UI role; do not substitute a system face as if it were SamsungOne.
3. Keep surface domains distinct. The public Korean web and One UI are both official but have different evidence and component contexts. UI implication: use #0381fe only when implementing the documented One UI platform context, not as a generic Samsung-commerce action color.
4. Retain observed component boundaries. The 2026-07-13 capture and the 2026-09-29 probe have exact evidence for the CTA, navigation, search-trigger, product-tile, media-card, and selected-tab treatments only. UI implication: leave unobserved variants absent instead of filling them from a generic Samsung pattern.

13. Personas

No first-party audience research suitable for named personas was collected in this packet. Do not invent demographic personas.

Samsung Korea public-web and Galaxy platform audiences may be added only with a Samsung first-party audience or product-research source.

14. States

No current capture evidence supports universal loading, empty, form-error, success, skeleton, or modal-state rules.

15. Motion & Easing

The artifact records state and interaction kinds, not timing curves or transition durations. One UI documentation includes a separate motion section, but no motion token is promoted here without a matching captured surface/value. Preserve reduced-motion and accessibility requirements in an implementation without presenting them as measured Samsung commerce motion.

The 2026-09-29 probe read the computed transitions of six homepage controls: the outlined CTA animates background-color, border-color, color over 0.2s linear, the search trigger animates border-color over 0.5s cubic-bezier(0.35, 0, 0.36, 1), and the other four switch instantly (transition: all 0s). These are observed values, not a motion token.