SmartThings Design System: Calm Tech for Smart Homes

1. Brand Overview

SmartThings sits in a unique position in Samsung’s ecosystem. It’s not a phone brand, not a TV brand—it’s the connective tissue tying together all smart devices into a coherent home experience. The visual language on their site leans heavily into clarity and accessibility while keeping a crisp, tech-forward tone. It’s designed for people who need to trust the system—smart home automation lives and dies on perceived reliability—and the UI reflects that.

No ornamental overload. Minimal gradients. Neutral grays dominate alongside sharp blues. Even the rounded corners feel intentional, not decorative. They know the audience here: tech-forward consumers, smart home enthusiasts, and Samsung loyalists. These folks don’t need skeuomorphic switches; they need a high signal-to-noise interface to control lights, locks, thermostats, and sensors without doubt.

The typography is pure Samsung: SamsungSharpSans for bolder identity moments and SamsungOne for functional readability. You immediately notice there’s no random font pairing; it’s a clean split between headings, labels, and body copy. Every spacing decision is aligned to a grid-like rhythm, and the rounding (20px and 24px are everywhere) tells your muscle memory "this is tappable."

From a brand philosophy angle: SmartThings pushes “calm tech.” There’s no UI screaming for your attention. Visual momentum comes from hierarchy, not color saturation. When an element is interactive, the states are obvious—hover and focus styles are consistent across buttons and inputs—yet never garish.

They aren’t chasing bleeding-edge visual trends. This works for them because stability is part of the brand promise; flashy micro-interactions would undermine the “reliability” perception. Instead, their design system is an exercise in controlled friendliness: approachable rounded shapes, restrained shadows, and a restricted palette that keeps the mental load low.

2. Color System

2.1 Primary Colors

Primary action color unfolds in two main blues:

• #007aff (from --swiper-theme-color): This Apple-esque saturated blue shows up in interactive elements like carousels, navigational cues, and likely embedded in other interactive modules.
• rgb(0, 0, 238)` (#0000ee): Old-school link blue. This is unusual—many brands have moved to custom link colors—but SmartThings keeps it, presumably for highest familiarity. It screams “clickable” even to non-tech users.

The brand avoids vivid backgrounds in favor of neutrality—#ffffff for space, soft grays for containers, and reserved accent blues for action.

Compared to competitors (Google Home, Apple Home), SmartThings is more utilitarian with link blue and far less pastel color wash. Apple Home uses warmer neutrals; SmartThings is cooler and more industrial.

2.2 Complete Palette

2.3 Color Relationships

This palette maintains high contrast:

• White (#ffffff) on black (#000000) easily exceeds WCAG AAA for normal text.
• Link blue (#0000ee) on white also passes AAA for both small and large text.
• Focus blue (#1eaedb) contrasting against black outlines creates strong focus visuals.

Accessibility is baked in—none of the functional colors drop below a 4.5:1 contrast ratio when paired with white or black text.

No evidence of dark mode tokens here—this design data suggests a light-mode-dominant palette.

2.4 Usage Guide

• Primary interactions: Use Swiper Theme Blue (#007aff) or focus blue (#1eaedb). Avoid using link blue (#0000ee) for buttons—it’s link-specific.
• Backgrounds: Stick to white (#ffffff) for primary surfaces, light gray (#f7f7f7) for secondary.
• Text hierarchy: Black for 1st-level titles, dark gray for secondary, cool gray for tertiary labels.
• Hover states: Use hover gray (#d7d9e5) fill with consistent hover blue for borders on white buttons.
• Avoid: Saturation overload—only links and focus states get real chroma.

3. Typography

3.1 Font Families

Two custom Samsung families dominate:

• SamsungSharpSans — high-contrast sans, sharp cuts. Heads, buttons, high-identity points.
• SamsungOne — versatile sans for body copy, captions, data labels.

Fallback stacks are simple: arial for both, or Inter, Helvetica, Arial for Schibsted Grotesk link contexts.

No Google or Adobe fonts detected—these are proprietary.

3.2 Type Scale

3.3 Hierarchy

Sizes drop consistently: 48 → 38 → 36 → 28 → 24 for titles, then 18–16–14 for body and captions. Line heights at 1.33 create air without breaking tight groupings.

SamsungSharpSans telegraphs brand voice in headlines; SamsungOne keeps reading comfortable in longer blocks. There’s no rogue italics or weights—control is tight.

4. Spacing & Layout

4.1 Spacing Scale

Base is 8px, but with 4px increments also.

Common values:

4px, 5px, 6px, 7px, 8px, 9px, 10px, 12px,
13px, 14px, 15px, 16px, 18px, 20px, 24px,
30px, 32px, 36px, 48px

Usage: 8–16px for padding inside buttons, 32–48px for section gaps, 4–6px for icon spacing.

4.2 Layout

Breakpoints are very specific: 320, 360, 400, 425, 426, 480, 530, 534, 550, 600, 760, 767, 768, 810, 896, 950, 1024, 1279, 1280, 1440.

This shows obsessive tuning—likely adjusting images, grids at odd device widths. Responsive approach is not just mobile-tablet-desktop; it’s handshake-specific for many device classes.

5. Visual Elements

Border radius: Heavy bias toward 20px (buttons, divs) and 24px (inputs, comboboxes). Larger pills hit 32px–40px, perfect circles at 50% for icons/avatars.

Shadows: Mostly light drop shadows:

• rgba(0, 0, 0, 0.3) 0px 0px 5px
• rgba(5, 20, 97, 0.12) 0px 2px 9px
• Occasionally saturated blue shadows for accent: rgba(0, 77, 255, 0.5) 0px 4px 24px.

Borders: Low-weight, 1px solid lines in very light grays (#dddddd, #d7d9e5) keep components separated without heavy lines.

6. Components

6.1 Buttons

Multiple variants—all states explicit.

Example: cta--contained cta--black

• Default: bg #000000, text #ffffff, padding 9px 23px 10px, radius 20px, no border.
• Hover: bg #d7d9e5, text stays white.
• Active: bg #dcddde, opacity 0.7.
• Focus: bg #1eaedb, box-shadow #005fcc 0px 0px 1pt 1pt, outline 2px solid #000, text white.

cta--contained cta--white:

• Default: bg #ffffff, text #000000, radius 20px.
• Hover: text #2285f7, bg #d7d9e5, border 1px solid #2189ff.
• Active: bg #dcddde, opacity 0.7, transform scale(0.5) (!! unusual).
• Focus: outline black, bg #1eaedb, box-shadow white inset.

Pill buttons often at 100px radius (fully round).

6.2 Links

Consistent hover blue (#3860be) for all link types. Default link blue (#0000ee) in most cases; white links on dark backgrounds switch to white default.

6.3 Forms

Inputs follow button states: radius 24px, border #dddddd, focus bg #1eaedb + dark outline.

6.4 Cards

Shadows: rgba(5, 20, 97, 0.12), radius 40px—rounded blob style rather than micro-cards. No evidence of hover lifts—cards are static containers.

7. CSS Custom Properties (Design Tokens)

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-link-blue: #0000ee;
  --color-dark-gray: #555555;
  --color-cool-gray: #6b7184;
  --color-swiper-blue: #007aff;
  --color-black: #000000;
  --color-light-gray: #f7f7f7;
  --color-focus-blue: #1eaedb;
  --color-hover-gray: #d7d9e5;
  --color-active-gray: #dcddde;
  --color-hover-link-blue: #3860be;
  --color-cta-border-blue: #2189ff;

  /* Typography */
  --font-heading: "SamsungSharpSans", arial;
  --font-body: "SamsungOne", arial;
  --font-link: "Schibsted Grotesk", Inter, Helvetica, Arial;
  --font-size-h1-lg: 48px;
  --font-size-h1-md: 38px;
  --font-size-h1-dense: 36px;
  --font-size-h1-sm: 28px;
  --font-size-subtitle: 24px;
  --font-size-body: 18px;
  --font-size-link: 16px;
  --font-size-caption: 14px;
  --font-size-micro: 13px;
  --font-size-tiny: 12px;

  /* Spacing */
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;

  /* Border Radius */
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-32: 32px;
  --radius-40: 40px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-soft: rgba(5, 20, 97, 0.12) 0px 2px 9px 0px;
  --shadow-harder: rgba(0, 0, 0, 0.3) 0px 0px 5px 0px;
  --shadow-accent-blue: rgba(0, 77, 255, 0.5) 0px 4px 24px 0px;
}

8. AI Coding Assistant Prompt

# SmartThings Design System Specification

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

## Brand Context
SmartThings is Samsung's smart home control platform. The design prioritizes clarity, high contrast, and consistent button behavior. Rounded edges, calm neutrals, and restrained use of vibrant blues make the interface approachable yet professional.

## Color Palette
- White: #ffffff — Backgrounds, card surfaces
- Link Blue: #0000ee — Default hyperlink text
- Dark Gray: #555555 — Secondary text/icons
- Cool Gray: #6b7184 — Tertiary text/UI
- Swiper Theme Blue: #007aff — Carousel, selection accents
- Black: #000000 — Primary button background, high-emphasis text
- Light Gray: #f7f7f7 — Tertiary backgrounds
- Focus Blue: #1eaedb — Focus state backgrounds
- Hover Gray: #d7d9e5 — Hover fills
- Active Gray: #dcddde — Pressed state fills
- Hover Link Blue: #3860be — Link hover color
- CTA Border Blue: #2189ff — Hover border for white buttons

## Typography
- Headings: "SamsungSharpSans", arial
- Body: "SamsungOne", arial
- Links: "Schibsted Grotesk", Inter, Helvetica, Arial

| Level | Size | Weight | Line Height | Use For |
| H1 Large | 48px | 700 | 1.20 | Page titles |
| H1 Medium | 38px | 700 | 1.20 | Section heads |
| H1 Dense | 36px | 700 | 1.33 | Tight headlines |
| Subtitle | 24px | 700 | 1.33 | Button labels |
| Body Large | 18px | 400 | 1.33 | Main copy |
| Caption Bold | 14px | 700 | 1.33 | UI labels |
| Microtext | 13px | 400 | 1.50 | Metadata |
| Tiny Caption | 12px | 400 | 1.33 | Supporting text |

## Spacing & Grid
Base: 8px grid. Common values: 4, 6, 8, 10, 12, 16, 24, 32, 40, 48px. All component spacing should be multiples of 4px.

## Border Radius
- sm: 8px — small icons
- md: 12px — small cards
- lg: 20px — buttons
- xl: 24px — inputs, comboboxes
- full: 50% — avatars, circular buttons

## Shadows & Depth
- Soft: rgba(5, 20, 97, 0.12) 0px 2px 9px
- Medium: rgba(0, 0, 0, 0.3) 0px 0px 5px
- Accent: rgba(0, 77, 255, 0.5) 0px 4px 24px

## Component Specifications

### Primary Button (.cta--contained.cta--black)
Default: bg #000000, color #ffffff, padding 9px 23px 10px, radius 20px, no border.
Hover: bg #d7d9e5 (gray), text white.
Active: bg #dcddde, opacity 0.7.
Focus: bg #1eaedb, outline 2px solid #000000, text white.

### Secondary Button (.cta--contained.cta--white)
Default: bg #ffffff, color #000000, radius 20px.
Hover: bg #d7d9e5, color #2285f7, border 1px solid #2189ff.
Active: bg #dcddde, transform scale(0.5).
Focus: bg #1eaedb, box-shadow white 0px 0px 0px 2px.

### Navigation Links
Default: #0000ee, no underline.
Hover: #3860be, no underline.
Alternate: White links on dark bg — hover to blue.

### Input Fields
Default: border 1px solid #dddddd, radius 24px.
Focus: bg #1eaedb, outline 2px solid #000000, color #ffffff.

### Cards
Bg white, radius 40px, shadow rgba(5, 20, 97, 0.12), padding variable (align to 16/24px multiples).

## Layout & Responsive Rules
Breakpoints: 320, 360, 400, 425, 426, 480, 530, 534, 550, 600, 760, 767, 768, 810, 896, 950, 1024, 1279, 1280, 1440px. Container widths adapt per specific device. Page margins scale from 16px mobile to 48px desktop.

## Interaction Rules
- Transition: 150ms ease on color, bg, transform changes.
- Focus: Always visible outline for accessibility.
- Hover: No opacity tweaks except active state.

## DO List
- Use only colors from palette.
- Keep spacing in multiples of 4px.
- Use SamsungSharpSans for headings, SamsungOne for body.
- Maintain consistent corner rounding per component type.
- Respect hover/focus styles exactly.
- Keep shadows subtle; accent blue shadow only for specific emphasis.

## DON'T List
- Don’t invent new colors.
- Don’t mix sharp and rounded corners in one component.
- Don’t remove focus outlines.
- Don’t use link blue as a button bg.
- Don’t break the 8px grid rhythm.

## Code Examples

### Primary Button
```css
.btn-primary {
  background-color: #000000;
  color: #ffffff;
  padding: 9px 23px 10px;
  border-radius: 20px;
  border: none;
  font-family: "SamsungSharpSans", arial;
  font-size: 14px;
  font-weight: 400;
  transition: background-color 150ms ease;
}
.btn-primary:hover { background-color: #d7d9e5; }
.btn-primary:focus {
  background-color: #1eaedb;
  outline: 2px solid #000000;
}

Secondary Button

.btn-secondary {
  background-color: #ffffff;
  color: #000000;
  border-radius: 20px;
  border: 1px solid transparent;
  padding: 9px 23px 10px;
}
.btn-secondary:hover {
  background-color: #d7d9e5;
  color: #2285f7;
  border: 1px solid #2189ff;
}

Input

.input {
  border: 1px solid #dddddd;
  border-radius: 24px;
  padding: 8px 12px;
  font-family: "SamsungOne", arial;
}
.input:focus {
  background-color: #1eaedb;
  outline: 2px solid #000000;
  color: #ffffff;
}

---

## 9. Summary

**TL;DR** — SmartThings’ design system is high-contrast, tightly controlled, and built on consistency. Rounded corners, restrained shadows, and a disciplined palette make it stable and approachable without being playful.

**Brand Keywords**
- controlled-minimalist
- high-contrast-tech
- rounded-functional
- accessible-neutral