Light interfaceMeasured ui.shadcn.com

shadcn/ui

A no-nonsense black-and-white toolkit that lets content and components do the talking

This page is styled with shadcn/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#F5F5F5
Cards, panels, menus

Text#0A0A0A
Headings and body

Muted text#737373
Secondary info

Line#E5E5E5
Dividers and outlines

Accent#000000
Main button, links, selection

On accent#FAFAFA
Text on the accent

Contrast

Text on background 19.8:1Muted on background 4.7:1Text on accent 20.1:1

Every colour found on their site

#0A0A0A#737373#000000#FAFAFA#171717#FFFFFF#F5F5F5#E5E5E5

Typography

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

h1	Geist · 48px · 600 · -2.4px	The Foundation for your Design System
p	Geist · 18px · 400	Composable, accessible components with thoughtful defaults.
li	Geist · 14px · 400	Analytics
label	Geist · 14px · 500	Goal Name

Corners & shadows

Corner sizes used

18px

20px

24px

6px

8px

10px

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 shadcn/ui’s live website. Click to enlarge.

Buttons · 4

shadcn/ui button: Search documentation... — #F5F5F5 · corners 10px · 32px

shadcn/ui button: New — #000000 · corners 10px · 31px

shadcn/ui button: Get Started — #000000 · corners 26px · 35px

shadcn/ui button: View Components — #F5F5F5 · corners 26px · 36px

Navigation bar · 1

shadcn/ui Navigation bar: Home — fill #FFFFFF · square · Geist 16px

Buttons · 6

shadcn/ui Buttons: Search documentation... — fill #F5F5F5 · corners 10px · Geist 14px

shadcn/ui Buttons: New — fill #000000 · corners 10px · Geist 12.8px

shadcn/ui Buttons: Get Started — fill #000000 · corners 26px · Geist 14px

shadcn/ui Buttons: View Components — fill #F5F5F5 · corners 26px · Geist 14px

shadcn/ui Buttons: Button — fill #171717 · corners 18px · Geist 14px

shadcn/ui Buttons: Secondary — fill #F5F5F5 · corners 18px · Geist 14px

Inputs and search · 2

shadcn/ui Inputs and search: Name — no fill · square · Geist 14px

shadcn/ui Inputs and search: Message — fill #E5E5E5 · corners 18px · Geist 14px

Tabs and switches · 2

shadcn/ui Tabs and switches — no fill · square · Geist 14px

Tags and badges · 3

shadcn/ui Tags and badges: Badge — fill #171717 · corners 18px · Geist 12px

shadcn/ui Tags and badges: Secondary — fill #F5F5F5 · corners 18px · Geist 12px

shadcn/ui Tags and badges: Pending Setup — no fill · corners 18px · Geist 12px

Cards and panels · 2

shadcn/ui Cards and panels: Button — fill #FFFFFF · corners 24px · Geist 14px

shadcn/ui Cards and panels: RETIREMENT — fill #F5F5F5 · corners 18px · Geist 14px

Icons

30 icons copied exactly from their site’s code.

Product screens

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

shadcn/ui product screen: 1440 × 840 — 1440 × 840

shadcn/ui product screen: 1024 × 557 — 1024 × 557

shadcn/ui product screen: 800 × 600 — 800 × 600

shadcn/ui product screen: 1793 × 1124 — 1793 × 1124

shadcn/ui product screen: 1024 × 576 — 1024 × 576

shadcn/ui product screen: 1200 × 628 — 1200 × 628

shadcn/ui product screen: 2560 × 1894 — 2560 × 1894

shadcn/ui product screen: 1280 × 720 — 1280 × 720

shadcn/ui product screen: 640 × 421 — 640 × 421

Do & don’t

What makes it shadcn/ui

Pure black and white palette with almost no colour used for emphasis
Tight, small-radius buttons and cards built on a neutral grey scale
Dense grid of small component preview cards on a plain white page

Use black as the primary action colour, not a bright brand colour
Keep spacing tight and typography small and precise
Let grey borders and subtle shadows separate content instead of colour blocks

Don’t

Don't add bright accent colours to buttons or links
Don't use heavy shadows or gradients
Don't make corners very round — keep radii modest

For AltLeads: A calling CRM could borrow this restrained black-and-white button and card system to keep dense call lists and data tables looking calm and professional.

Copy the tokens

Paste into any project to try this look.

/* shadcn/ui · values measured from https://ui.shadcn.com/ · reference only, their brand belongs to them */
:root {
  --bg: #FFFFFF;
  --surface: #F5F5F5;
  --text: #0A0A0A;
  --muted: #737373;
  --line: #E5E5E5;
  --accent: #000000;
  --on-accent: #FAFAFA;
  --radius-button: 10px;
  --radius-card: 24px;
  --radius-small: 6px;
  --button-height: 32px;
  --font-heading: "Geist", "Geist", system-ui, sans-serif;
  --font-body: "Geist", "Geist", system-ui, sans-serif;
  --shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.145 -0.00000143796 0.00000340492 / 0.05) 0px 0px 0;
}