Platform-native · 2019 – present
One UI
Generous vertical space, large headlines at the top of every screen, and a low interaction zone at the bottom — designed for one-handed use on tall phones.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 16 tokens
- --bg
oklch(93% 0.012 255) - --fg
oklch(10% 0 0) - --muted
oklch(44% 0.006 255) - --surface
oklch(100% 0 0) - --surface-2
oklch(96% 0.006 255) - --border
oklch(88% 0.006 255) - --accent
oklch(62% 0.2 255) - --accent-fg
oklch(99% 0 0) - --focus
oklch(64% 0.2 255)
| Token | Value |
|---|---|
| --font-body | 'Outfit', system-ui, sans-serif |
| --font-display | 'Outfit', system-ui, sans-serif |
| --font-mono | ui-monospace, monospace |
| --radius | 26px |
| --radius-sm | 12px |
| --shadow | 0 2px 8px oklch(0% 0 0 / 0.05) |
| --shadow-lg | 0 8px 24px oklch(0% 0 0 / 0.1) |
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');
:root {
--bg: oklch(93% 0.012 255);
--fg: oklch(10% 0 0);
--muted: oklch(44% 0.006 255);
--surface: oklch(100% 0 0);
--surface-2: oklch(96% 0.006 255);
--border: oklch(88% 0.006 255);
--accent: oklch(62% 0.2 255);
--accent-fg: oklch(99% 0 0);
--focus: oklch(64% 0.2 255);
--font-body: 'Outfit', system-ui, sans-serif;
--font-display: 'Outfit', system-ui, sans-serif;
--font-mono: ui-monospace, monospace;
--radius: 26px;
--radius-sm: 12px;
--shadow: 0 2px 8px oklch(0% 0 0 / 0.05);
--shadow-lg: 0 8px 24px oklch(0% 0 0 / 0.1);
}Where it came from
Origin: Samsung Electronics, Android overlay
Samsung announced One UI in November 2018 as the successor to Samsung Experience (itself the successor to TouchWiz), with wide rollout on the Galaxy S10 in 2019. Its primary design insight was that large phone screens are hard to use one-handed: interactive controls moved to the bottom of the screen, and non-interactive content — titles, status, and context — moved to the top. Text sizes are large throughout, reading more like a newspaper than a tight dashboard.
How to spot it
- Large, bold section headers with generous top padding
- Interaction zone pinned to the bottom third of the screen
- Ample line height and font size throughout
- White card surfaces on light grey page background
Trade-offs
| Strengths | Weaknesses |
|---|---|
| One-handed use on tall phones genuinely works | Significant vertical space cost reduces information density |
| Large text improves accessibility | Too much white space can feel empty on tablet |
| Clean and uncluttered — minimal chrome | Specific to Samsung conventions — may confuse non-Samsung users |
In the wild
- Samsung One UI Settings app
- Samsung Gallery and Contacts apps
- Samsung DeX desktop mode
Use it when
Android apps targeting Samsung devices, or any mobile-first UI where one-handed reachability matters.