Dark interfaceMeasured cloudscape.design

Amazon Cloudscape

A serious, dense enterprise console built for monitoring lots of technical data at once

This page is styled with Amazon Cloudscape’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#0F141A
Page behind everything

Surface#F6F6F9
Cards, panels, menus

Text#EBEBF0
Headings and body

Muted text#656871
Secondary info

Line#414D5C
Dividers and outlines

Accent#295EFF
Main button, links, selection

On accent#FFFFFF
Text on the accent

Contrast

Text on background 15.6:1Muted on background 3.3:1Text on accent 5.1:1

Every colour found on their site

#0F141A#295EFF#C6C6CD#656871#424650#FFFFFF#F6F6F9#F9F9FB#EBEBF0#8C8C94#414D5C#000000#131920#F3F3F7

Typography

Headings use Open Sans (free). Body text uses Open Sans (free).

h1	Open Sans · 42px · 600	Cloudscape
h2	Open Sans · 32px · 400 · -0.64px	An open source design system for the cloud
h3	Open Sans · 20px · 600 · -0.2px	Foundation
p	Open Sans · 16px · 400	Cloudscape is an open source design system to create web app
li	Open Sans · 14px · 400	Get started

Corners & shadows

Corner sizes used

8px

24px

16px

15px

20px

12px

Shadows

Shadow 1

Shadow 2

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 Amazon Cloudscape’s live website. Click to enlarge.

Buttons · 4

Amazon Cloudscape button: Get started — No fill · corners 24px · 42px

Amazon Cloudscape button: Search — #FFFFFF · corners 8px · 34px

Amazon Cloudscape button: View demos — #0F141A · corners 8px · 36px

Navigation bar · 1

Amazon Cloudscape Navigation bar: Cloudscape Design System — fill #FFFFFF · square · Open Sans 14px

Buttons · 3

Amazon Cloudscape Buttons: Search — fill #FFFFFF · corners 8px · Open Sans 16px

Amazon Cloudscape Buttons: Get started — fill #F9F9FB · corners 8px · Open Sans 14px

Amazon Cloudscape Buttons: View demos — fill #0F141A · corners 8px · Open Sans 14px

Tags and badges · 1

Amazon Cloudscape Tags and badges: Ctrl K — fill #EBEBF0 · corners 4px · monospace 12px

Cards and panels · 2

Amazon Cloudscape Cards and panels: 94 — fill #F6F6F9 · corners 12px · Open Sans 14px

Amazon Cloudscape Cards and panels: Light/Dark mode — fill #FFFFFF · corners 16px · Open Sans 14px

Lists and tables · 1

Amazon Cloudscape Lists and tables: 94 — no fill · square · Open Sans 14px

Icons

4 icons copied exactly from their site’s code.

Product screens

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

Amazon Cloudscape product screen: 3584 × 1934 — 3584 × 1934

Amazon Cloudscape product screen: 876 × 528 — 876 × 528

Amazon Cloudscape product screen: 800 × 394 — 800 × 394

Amazon Cloudscape product screen: 1450 × 900 — 1450 × 900

Do & don’t

What makes it Amazon Cloudscape

Deep near-black backgrounds with crisp white text for dense data tables
A single confident blue used for links, status, and primary actions
Compact rows, sortable table headers, and small status badges

Use a dark neutral background for data-dense screens
Use one blue accent consistently for links and primary buttons
Keep table rows compact with clear sortable headers

Don’t

Don't use playful rounded shapes or bright multi-colour accents
Don't add decorative imagery inside working screens
Don't let text contrast drop on dark backgrounds

For AltLeads: A calling CRM could borrow the dark, dense table layout and single blue accent for an ops/monitoring view where reps scan many calls and statuses at once.

Copy the tokens

Paste into any project to try this look.

/* Amazon Cloudscape · values measured from https://cloudscape.design/ · reference only, their brand belongs to them */
:root {
  --bg: #0F141A;
  --surface: #F6F6F9;
  --text: #EBEBF0;
  --muted: #656871;
  --line: #414D5C;
  --accent: #295EFF;
  --on-accent: #FFFFFF;
  --radius-button: 8px;
  --radius-card: 12px;
  --radius-small: 8px;
  --button-height: 34px;
  --font-heading: "Open Sans", "Open Sans", system-ui, sans-serif;
  --font-body: "Open Sans", "Open Sans", system-ui, sans-serif;
  --shadow: rgba(0, 7, 22, 0.1) 0px 4px 20px 1px;
}