Samsung

Overview

Samsung's design system embodies 'Technological Minimalism'—a philosophy that strips away unnecessary complexity while celebrating the precision and innovation that define the brand. The aesthetic centers on a deep navy foundation (#0a1428) paired with a vibrant electric blue accent (#2189ff), creating a visual language that feels both premium and approachable. The interface prioritizes clarity and directness, allowing product imagery and content to take center stage while the UI provides subtle, purposeful guidance. The brand personality is confident yet helpful: Samsung speaks with authority about technology but never condescends. Voice example: 'Experience a whole new Galaxy—discover what's possible when innovation meets design.'

Colors

Samsung's color strategy employs a sophisticated dark-mode-first approach with strategic accent deployment. Primary (#2189ff) is the electric blue used exclusively on interactive elements—CTAs, focus states, and key links—creating an unmistakable call to action against the navy surface. Secondary (#006bea) provides depth for supporting actions and secondary CTAs. The surface stack progresses from near-black (#050a14 for surface-container-lowest) through navy tones (#0a1428 for base surface) to lighter containers (#2a3554 for surface-container-highest), enabling clear visual hierarchy without relying on color shifts. Tertiary (#f7f7f7) serves as a neutral accent for badges and non-critical UI elements. On-surface text (#e8eef7) maintains 16:1 contrast against the dark background for accessi

Typography

Samsung's type system uses SamsungOne as the primary typeface, supplemented by SamsungSharpSans for headlines and system fallbacks (-apple-system, Roboto, Arial). The hierarchy spans from Display (56px, 700 weight, -0.03em tracking) for hero statements down to Label-sm (12px, 500 weight, 0.03em tracking) for metadata. Headlines (40px, 600 weight) command attention on product pages, while Body-md (16px, 400 weight, 0.01em tracking) ensures comfortable reading at standard viewing distances. Letter-spacing tightens progressively at larger sizes (Display uses -0.03em; Headline-lg uses -0.02em) to maintain visual density, while smaller labels expand spacing to 0.03em for legibility. All type scales use unitless line-heights (1.5 for body, 1.33 for labels) to scale proportionally with font size.

Layout

Samsung's layout uses a 12-column grid system with a max-width of 1440px, enabling responsive scaling from mobile (single column) through tablet (6 columns) to desktop (12 columns). The gutter spacing is consistently 24px, maintaining rhythm across breakpoints. Container padding uses the semantic spacing scale: 12px (sm) for compact sections, 24px (md) for standard content areas, and 40px (lg) for major section separation. Hero sections span full-width with 64px (xl) vertical padding, creating breathing room for product imagery. Card-based layouts use 24px padding internally with 12px gaps between cards. The design favors asymmetrical white-space: content blocks align to the left or right with generous margins (40px+) on the opposite side, drawing focus to key messaging. Responsive breakpo

Elevation & Depth

Depth in Samsung's system is achieved through layered shadows and subtle background shifts rather than dramatic depth effects. Level 1 (Base Surface) uses no shadow, establishing the foundation at #0a1428. Level 2 (Standard Cards) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with a 1px border at rgba(255, 255, 255, 0.08), creating gentle separation from the background. Level 3 (Elevated/Modals) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) with a 1px border at rgba(255, 255, 255, 0.12), commanding attention without overwhelming. Interactive hover states transition shadows from Level 2 to

Shapes

Samsung's shape language follows 'Precision Minimalism'—favoring clean, geometric corners with selective rounding. Buttons and inputs use rounded: 0.75rem (12px), balancing approachability with technical precision. Cards and containers use rounded: 1rem (16px) for slightly softer edges that feel premium without appearing playful. Modals and overlays use rounded: 1.5rem (24px) to emphasize their elevated status. Small UI elements (badges, tags) use rounded: full (9999px) for pill-shaped containers. The rationale: larger radius values (1.5rem+) are reserved for prominent containers that demand v

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons use background: {colors.primary} (#2189ff) with padding: 12px 24px and height: 48px, ensuring touch-friendly targets. Hover state transitions to #0066cc over 200ms with elevated shadow (0 4px 12px rgba(0, 0, 0, 0.15)), signaling interactivity. Active state darkens to #004499 with maximum shadow (0 8px 24px rgba(0, 0, 0, 0.2)). Secondary buttons use transparent background with border: 1px solid {colors.primary} and hover to background: rgba(33, 137, 255, 0.08). Disabled buttons reduce opacity to 0.5 and remove pointer-events. All button text uses label-md typography (14px, 600 weight, 0.02em tracking).

Containers & Surfaces Cards establish visual hierarchy through layered backgrounds and shadows. Standar

Do's and Don'ts

**Do**

• Do use primary blue (#2189ff) exclusively for interactive elements—CTAs, links, focus states—to create unmistakable affordance and maintain brand recognition.
• Do maintain 16:1 contrast minimum between on-surface text (#e8eef7) and surface backgrounds (#0a1428) to ensure WCAG AAA accessibility.
• Do apply consistent 200ms transitions (cubic-bezier(0.4, 0, 0.2, 1)) to all interactive state changes—hover, focus, active—to reinforce responsiveness.
• Do use the full surface stack (surface-container-lowest through surface-container-highest) to create visual hierarchy without relying on color shifts or brightness alone.
• Do reserve rounded: 1.5rem (24px) for modals and elevated containers; use rounded: 0.75rem (12px) for standard buttons and inputs to maintain professional precision.

**Don't**

• Don't use primary blue (#2189ff) for backgrounds, body text, or non-interactive elements—reserve it exclusively for CTAs and focus states to prevent visual noise.
• Don't mix border-radius values within a single component family (e.g., don't use 8px on some buttons and 12px on others in the same button set).
• Don't apply shadows without corresponding background elevation—Level 2 shadows (0 3px 8px) require surface-container background; Level 3 shadows (0 8px 24px) require surface-container-high or elevated containers.
• Don't use opacity changes alone for disabled states—combine reduced opacity (0.5) with pointer-events: none and cursor: not-allowed for clear affordance.
• Don't exceed 1440px container max-width on desktop; maintain 24px gutters and allow generous margins (40px+) on ultra-wide screens to preserve readability and focus.