Light interfaceMeasured www.untitledui.com/react

Untitled UI

A polished, modern SaaS kit that uses one confident purple to guide the eye

This page is styled with Untitled UI’s own measured values. It is a private reference for AltLeads; their logo, brand and company-only fonts belong to them.

Colours

Each role is a value read from their live website, checked against their screenshots.

Background#FFFFFF
Page behind everything

Surface#FFFFFF
Cards, panels, menus

Text#171717
Headings and body

Muted text#737373
Secondary info

Line#E5E5E5
Dividers and outlines

Accent#7F56D9
Main button, links, selection

On accent#FFFFFF
Text on the accent

Contrast

Text on background 17.9:1Muted on background 4.7:1Text on accent 5.0:1

Every colour found on their site

#171717#525252#404040#737373#FFFFFF#7F56D9#000000#E5E5E5#D4D4D4

Typography

Headings use Inter (free). Body text uses Inter (free).

h1	Inter · 44px · 600 · -0.88px	The ultimate open-source React UI component library
h2	Inter · 32px · 600 · -0.64px	React UI components and sections
h3	Inter · 16px · 600	Buttons

Corners & shadows

Corner sizes used

16px

12px

8px

6px

50px

13px

Shadows

Shadow 1

Shadow 2

Shadow 3

Components, rebuilt from their values

Live and clickable. Built by us from the numbers above, not copied from their code. Sample CRM data.

Buttons

Navigation

WorkspaceCompanies Contacts Meetings

Disposition

InterestedCallbackBengaluru

Hide do-not-call

Next call

Licious · Admin head

Wants a proposal before the cafeteria contract renews in March.

Tabs

Table

Company	Owner	Status	Last touch
Zomato Food tech · Gurugram	PR	Callback	18 days ago
Licious Food tech · Bengaluru	RM	Interested	Today
Delhivery Logistics · Gurugram	AS	No answer	35 days ago

Toast

Call logged · callback on Friday

Real components from their site

Cropped from Untitled UI’s live website. Click to enlarge.

Buttons · 2

Untitled UI button: Sign in — #FFFFFF · corners 8px · 39px

Untitled UI button: Buy now — #7F56D9 · corners 8px · 39px

Navigation bar · 1

Untitled UI Navigation bar: Products — no fill · square · Inter 16px

Buttons · 2

Untitled UI Buttons: Sign in — fill #FFFFFF · corners 8px · Inter 14px

Untitled UI Buttons: Buy now — fill #7F56D9 · corners 8px · Inter 14px

Cards and panels · 2

Untitled UI Cards and panels: Buttons — fill #FFFFFF · corners 16px · Inter 16px

Untitled UI Cards and panels — no fill · corners 12px · Inter 16px

Icons

1 icons copied exactly from their site’s code.

Product screens

10 real screens from web image search, each linked to where it was found.

Untitled UI product screen: 1920 × 1200 — 1920 × 1200

Untitled UI product screen: 1920 × 1152 — 1920 × 1152

Untitled UI product screen: 1600 × 1200 — 1600 × 1200

Untitled UI product screen: 1040 × 693 — 1040 × 693

Untitled UI product screen: 2880 × 1920 — 2880 × 1920

Untitled UI product screen: 640 × 420 — 640 × 420

Do & don’t

What makes it Untitled UI

Single strong purple accent (#7F56D9) used consistently for primary buttons and highlights
Soft rounded cards with light grey borders and subtle inset shadows
Clean Inter typography with a dense grid of dashboard-style components

Reserve the purple accent only for primary actions and key highlights
Use light grey borders and soft shadows to lift cards off white backgrounds
Keep corner radii medium (8-16px) for a modern but not playful feel

Don’t

Don't use multiple competing accent colours
Don't use heavy drop shadows or dark surfaces
Don't crowd layouts without clear card separation

For AltLeads: A calling CRM could borrow the single confident accent colour and clean card grid to make pipeline and deal dashboards feel trustworthy and modern.

Copy the tokens

Paste into any project to try this look.

/* Untitled UI · values measured from https://www.untitledui.com/react · reference only, their brand belongs to them */
:root {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --text: #171717;
  --muted: #737373;
  --line: #E5E5E5;
  --accent: #7F56D9;
  --on-accent: #FFFFFF;
  --radius-button: 8px;
  --radius-card: 16px;
  --radius-small: 6px;
  --button-height: 39px;
  --font-heading: "Inter", "Inter", system-ui, sans-serif;
  --font-body: "Inter", "Inter", system-ui, sans-serif;
  --shadow: rgba(0, 0, 0, 0.05) 0px -2px 0px 0px inset, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}