Samsung Brand Design System Deep Dive

1. Brand Overview

Samsung’s Singapore site is exactly what you’d expect from a global tech giant with decades of hardware dominance — clean, minimal, efficient, but with subtle injections of personality through motion and scale. This isn’t a playful consumer brand; it’s a precision-engineered interface for a company selling premium devices across categories. The tone is confident. No gradients, no ornamental flourishes. The UI is built to get out of the way and let the product imagery do the heavy lifting.

The design language is rooted in clarity. Backgrounds are largely white (#ffffff), text is crisp, and primary actions are in a bold, saturated blue. This is a safe, corporate-friendly palette, but it’s also instantly recognizable as "Samsung blue"—a color that’s been consistent across packaging, advertising, and UI for years. Elements are sharply defined. Rounded corners are used deliberately — pill buttons, circular avatars — but most content blocks are straight-edged, hinting at durability and structure.

Typography plays a huge role in brand recognition here. SamsungSharpSans for big hero headings gives that corporate tech swagger — wide letterforms, tight tracking, heavy weights. SamsungOne covers everything else, from links to captions, and it’s a workhorse sans designed for legibility across devices and languages. The mix creates a hierarchy where product names feel like headlines and secondary information feels approachable.

From a system perspective, they’re clearly operating on an 8px spacing grid with some odd outliers (7px is surprisingly common). Breakpoints are standard — from 360px mobile up to 1440px desktop — with Vuetify under the hood, so there’s a component-driven architecture keeping things consistent. You see the same border radius tokens applied across buttons, badges, and images, and the color tokens stick to a very narrow range.

This site is built for scale. Every choice reflects that: minimal palette, strict type stack, predictable spacing. It’s the kind of system that can absorb new product lines without visual chaos. But it’s not sterile — hover states scale buttons, focus rings are bold, and motion is used to make interactions feel responsive. It’s Samsung’s corporate precision, with just enough friendliness to keep it human.

2. Color System

2.1 Primary Colors

The main brand color here is a deep, saturated blue. The extracted palette shows #0000ee (rgb(0,0,238)) in use for recommended product carousels and links, and a slightly softer #007aff (from --swiper-theme-color) for interactive accents. This blue is pure tech — it signals trust, reliability, and a bit of authority. Most competitors in consumer electronics use blue in some form (Dell, Intel, HP), but Samsung’s flavor is brighter and more assertive.

White (#ffffff) dominates backgrounds, CTA text, and hero areas. It’s not just a neutral — it’s part of the identity. The combination of blue and white is classic corporate tech branding, but here it’s executed with high contrast and very little gray.

2.2 Complete Palette

Note: rgb(33,137,255) appears in contained button backgrounds — that’s the saturated CTA blue.

2.3 Color Relationships

Contrast is high. White text on #2189ff passes WCAG easily. White backgrounds with deep blue links are readable. Black hover states over blue buttons are a bit aggressive but keep contrast strong. The palette is minimal enough that dark mode would require inversion of backgrounds and swapping blue for lighter variants.

Accessibility: Primary buttons (#2189ff background, white text) are fine. Links like rgb(104,174,255) on white are borderline for contrast — they pass at large sizes but could fail at small caption sizes.

2.4 Usage Guide

• Pair #2189ff with white for primary CTAs.
• Use #0000ee sparingly — mostly for inline links.
• Avoid placing rgb(104,174,255) on light backgrounds for small text.
• Hover states often flip background to black with white text — keep that consistent.
• Maintain white background for product showcase areas — it makes the imagery pop.

3. Typography

3.1 Font Families

Two custom fonts dominate:

• SamsungSharpSans — heavy, geometric sans. Used for hero headings and large display text. Fallbacks: Arial.
• SamsungOne — versatile sans. Used for body, links, captions, buttons. Fallbacks: Arial.

Sources: No Google Fonts, no Adobe Fonts. These are custom corporate typefaces.

3.2 Type Scale

3.3 Hierarchy

Large headings (60–40px) are reserved for hero and product names. 28–24px sizes serve secondary headlines. Body copy sits around 16–18px — generous for readability. Captions drop to 14px and 12px, often uppercased for labels. Weight shifts are used more than color to establish hierarchy — 700 for emphasis, 400 for body.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px. But there’s a surprising frequency of 7px — likely for optical alignment in mixed-content layouts.

Common values:

4.2 Layout

Breakpoints: 360, 480, 534, 767, 768, 810, 1024, 1279, 1280, 1440px. Suggests fine-grained control for tablet landscape vs portrait. Likely max container width ~1440px. Vuetify grid system in play — responsive, component-driven layouts.

5. Visual Elements

Border Radius System

The 20px radius is common for buttons and CTAs — soft but not too round. 50% is for perfectly circular elements. 1000px appears in pill-like spans.

Shadows

Minimal use — flat design bias.

• rgba(0,0,0,0.2) 0px 4px 10px — subtle depth
• rgba(255,255,255,0.75) 0px 0px 3px — light highlight
• rgba(0,0,0,0.09) + rgba(0,0,0,0.15) combo — layered shadow

Borders

Hairline borders (1px) dominate, with rgba blacks for subtlety. Dividers use rgba(0,0,0,0.1). Buttons get 1px solid #2189ff or white.

6. Components

6.1 Buttons

Contained CTA (Emphasis)
Default: background: rgb(33,137,255), white text, padding 10px 27px 11px, radius 20px, 1px solid #2189ff.
Hover: black background, white text, scale(1.1).
Active: #f7f7f7 background, inherit text color, scale(1.1).
Focus: black dotted 2px outline, black background, white text, box-shadow white 2px.

Utility Search Button
Default: background: rgba(255,255,255,0.1), white text, radius 100px, 1px solid rgba(255,255,255,0.2).
Hover: rgb(50,50,50) background, opacity 0.4.
Active: rgb(28,28,28) background.
Focus: similar to hover with focus ring.

Outlined CTA
Default: transparent background, white text, radius 20px, 1px solid white.
Hover: black background, white text, scale(1.1).
Active/Focus similar to contained.

Icon Circle Button
Default: white background, #007aff text, radius 50%, 1px solid rgba(0,0,0,0.2), opacity 0.4.
Hover: rgb(50,50,50) background.
Active: rgb(28,28,28).

6.2 Links

Styles vary:

• White text, no underline.
• rgb(104,174,255) with underline.
• rgb(0,0,238) no underline.
• Black text, 700 weight, no underline.

6.3 Forms

No extracted input styles — possibly custom Vuetify defaults overridden.

6.4 Cards

Not explicitly extracted — likely flat white surfaces with 8–20px radius and subtle shadows.

7. Design Tokens

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-deep-blue: #0000ee;
  --color-accent-blue: #007aff;
  --color-cta-blue: #2189ff;
  --color-black: #000000;
  --color-soft-black: rgba(0, 0, 0, 0.1);
  --color-medium-black: rgba(0, 0, 0, 0.2);
  --color-link-blue: rgb(104, 174, 255);
  --color-gray: rgb(85, 85, 85);
  --color-light-gray: rgb(204, 204, 204);

  /* Typography */
  --font-samsung-sharp: "SamsungSharpSans", Arial;
  --font-samsung-one: "SamsungOne", Arial;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-15: 15px;
  --space-16: 16px;
  --space-17: 17px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-53: 53px;
  --space-60: 60px;
  --space-342: 342px;

  /* Radius */
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-35: 35px;
  --radius-50pct: 50%;
  --radius-100: 100px;
  --radius-1000: 1000px;
  --radius-48pct: 48.99%;
  --radius-100pct: 100%;

  /* Shadows */
  --shadow-1: rgba(0, 0, 0, 0.2) 0px 4px 10px 0px;
  --shadow-2: rgba(255, 255, 255, 0.75) 0px 0px 3px 0px;
  --shadow-3: rgba(0, 0, 0, 0.09) 0px 1px 6px 0px, rgba(0, 0, 0, 0.15) 0px 2px 32px 0px;
}

8. AI Coding Assistant Prompt

# Samsung Design System Specification

You are a Samsung design expert. Build UIs matching their visual language exactly.

## Brand Context
Samsung’s design language is minimal, corporate-tech, and product-first. It uses a strict blue-and-white palette, bold geometric headings, and a disciplined 8px grid. Interactions are responsive with subtle scaling and strong focus indicators.

## Color Palette
- White: #ffffff — Backgrounds, text on colored buttons
- Deep Blue: #0000ee — Inline links, carousel accents
- Accent Blue: #007aff — Swiper theme elements
- CTA Blue: #2189ff — Contained primary buttons, borders
- Black: #000000 — Hover backgrounds, focus outlines
- Soft Black: rgba(0, 0, 0, 0.1) — Dividers
- Medium Black: rgba(0, 0, 0, 0.2) — Button outlines
- Link Blue: rgb(104, 174, 255) — Underlined text links
- Gray: rgb(85, 85, 85) — Text borders
- Light Gray: rgb(204, 204, 204) — Section dividers

## Typography
Fonts:
- Headings: "SamsungSharpSans", Arial
- Body/UI: "SamsungOne", Arial

Sizes:
| Level | Size | Weight | Line Height | Use For |
| H1 | 60px | 700 | 1.20 | Hero titles |
| H1 alt | 56px | 700 | 1.20 | Product headlines |
| H1 mid | 40px | 700 | 1.33 | Section titles |
| Subhead | 32px | 400 | 1.20 | Secondary headings |
| Subhead | 28px | 700 | 1.33 | Product subnames |
| Subhead | 24px | 700 | 1.33 | Secondary headers |
| Link Large | 22px | 700 | 1.33 | Large nav links |
| Body Large | 18px | 400/700 | 1.33 | Body text |
| Body | 16px | 400/700 | 1.15–1.50 | UI text, button labels |
| Caption | 14px | 400/700 | 1.33–1.71 | Labels, notes |
| Small | 12px | 400/700 | 1.33 | Fine print

## Spacing & Grid
Base: 8px. Scale includes 1, 2, 4, 6, 7, 8, 9, 10, 12, 14, 15, 16, 17, 20, 24, 32, 53, 60, 342px.

Component mapping:
- Button vertical padding: 10px
- Card padding: 24px
- Section gaps: 32px

## Border Radius
- xs: 6px — small divs
- sm: 8px — images, small cards
- md: 10px — badges
- lg: 20px — buttons, CTAs
- xl: 24px — large containers
- pill: 1000px — pill spans
- full: 50% — avatars, circular buttons

## Shadows & Depth
Minimal shadows:
- rgba(0,0,0,0.2) 0px 4px 10px
- rgba(255,255,255,0.75) 0px 0px 3px
- Layered rgba(0,0,0,0.09/0.15)

## Component Specifications

### Primary Button
Default: bg #2189ff, color #ffffff, padding 10px 27px 11px, radius 20px, border 1px solid #2189ff, font-weight 700, font-size 14px.  
Hover: bg #000000, color #ffffff, transform scale(1.1).  
Active: bg #f7f7f7, color inherit, scale(1.1).  
Focus: outline 2px dotted #000000, box-shadow 0 0 0 2px #ffffff.

### Secondary Button (Outlined)
Default: transparent bg, color #ffffff, radius 20px, border 1px solid #ffffff.  
Hover: bg #000000, color #ffffff, scale(1.1).  
Focus: same as primary.

### Utility Search Button
Default: bg rgba(255,255,255,0.1), color #ffffff, radius 100px, border 1px solid rgba(255,255,255,0.2).  
Hover: bg #323232, opacity 0.4.  
Active: bg #1c1c1c.

### Navigation Links
- White text, no underline.
- rgb(104,174,255) with underline for inline links.
- rgb(0,0,238) no underline for carousel links.

### Input Fields
Not extracted — follow Vuetify defaults, adapt border radius to 8px, border color rgba(0,0,0,0.2).

### Cards
bg #ffffff, radius 8–20px, padding 24px, subtle shadow rgba(0,0,0,0.2).

## Layout & Responsive Rules
Max content width: 1440px.  
Page padding: 16px mobile, 32px desktop.  
Grid gap: multiples of 8px.  
Breakpoints: 360, 480, 534, 767, 768, 810, 1024, 1279, 1280, 1440px.

## Interaction Rules
Transitions: 150ms ease for state changes.  
Focus indicators: bold dotted outlines + box-shadows.  
Hover: scale(1.1) for buttons.

## DO List
- Use ONLY palette colors.
- Maintain 8px grid (allow 7px for optical tweaks).
- Headings in SamsungSharpSans, body in SamsungOne.
- Scale buttons on hover.
- Always provide clear focus outlines.

## DON'T List
- Don't invent new colors.
- Don't mix sharp and rounded corners arbitrarily.
- Don't drop hover scaling for buttons.
- Don't use heavy shadows — keep depth subtle.
- Don't reduce link contrast below WCAG minimum.

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #2189ff;
  color: #ffffff;
  padding: 10px 27px 11px;
  border-radius: 20px;
  border: 1px solid #2189ff;
  font-weight: 700;
  font-size: 14px;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: #000000;
  color: #ffffff;
  transform: scale(1.1);
}
.btn-primary:focus {
  outline: 2px dotted #000000;
  box-shadow: 0 0 0 2px #ffffff;
}
```

### Outlined Button
```css
.btn-outlined {
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 20px;
  font-weight: 700;
  font-size: 14px;
  transition: all 150ms ease;
}
.btn-outlined:hover {
  background: #000000;
  color: #ffffff;
  transform: scale(1.1);
}
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: rgba(0,0,0,0.2) 0px 4px 10px;
}
```

9. Summary

TL;DR — Samsung’s design system is a disciplined blue-and-white corporate tech language with bold headings, a strict 8px grid, and responsive motion in interactions. It’s flat, minimal, and built for scale.

Brand Keywords: corporate-tech, precision-minimal, product-first, disciplined-grid, bold-contrast