Light interfaceMeasured www.rippling.com

Rippling

Confident HR and IT software with a warm, approachable orange energy.

This page is styled with Rippling’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#F2EEEB
Cards, panels, menus

Text#000000
Headings and body

Muted text#000000
Secondary info

Line#CEC1B8
Dividers and outlines

Accent#FFA81D
Main button, links, selection

On accent#000000
Text on the accent

Contrast

Text on background 21.0:1Muted on background 21.0:1Text on accent 10.9:1

Every colour found on their site

#000000#FFFFFF#F2EEEB#4A0039#FFA81D#CEC1B8

Typography

Headings use basel (company-only; shown here with the free look-alike Manrope). Body text uses basel (company-only; shown with Manrope).

h1	basel · 48px · 500 · -1.5px	Manage your entire  workforce on one system
h2	basel · 42px · 500 · -1.5px	Start with the apps you need, or run them all together
h3	basel · 30px · 500	Your business data with people at the center
h4	basel · 23.9997px · 500 · 0.24896px	Finance
p	basel · 17.999px · 400 · 0.25px	Increase savings and automate busy work with global HR, Payr
li	basel · 16px · 400	Products
label	basel · 15px · 400 · 0.25px	Work email address*

Corners & shadows

Corner sizes used

12px

4px

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

Buttons · 2

Rippling button: See a demo — #FFA81D · corners 4px · 38px

Rippling button: Learn more — No fill · corners 4px · 54px

Navigation bar · 1

Rippling Navigation bar: Products — no fill · square · basel 16px

Buttons · 3

Rippling Buttons: See a demo — fill #FFA81D · corners 4px · basel 15px

Rippling Buttons: Learn more — no fill · corners 4px · basel 15px

Rippling Buttons: Play video — fill #E1D8D2 · corners 8px · basel 16px

Cards and panels · 1

Rippling Cards and panels: 5× — fill #F2EEEB · corners 12px · basel 16px

Icons

7 icons copied exactly from their site’s code.

Product screens

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

Rippling product screen: 1368 × 936 — 1368 × 936

Rippling product screen: 1101 × 774 — 1101 × 774

Rippling product screen: 624 × 457 — 624 × 457

Rippling product screen: 1572 × 1161 — 1572 × 1161

Rippling product screen: 474 × 350 — 474 × 350

Rippling product screen: 474 × 235 — 474 × 235

Rippling product screen: 936 × 686 — 936 × 686

Rippling product screen: 1920 × 1406 — 1920 × 1406

Rippling product screen: 1226 × 889 — 1226 × 889

Rippling product screen: 700 × 567 — 700 × 567

Do & don’t

What makes it Rippling

Warm orange buttons with black text instead of white text
Warm beige surface panels instead of cool grey
Dense product screenshots shown inside soft-edged cards

Pair the orange accent with black text, not white
Use warm beige/cream backgrounds for secondary panels
Show real dense data screens to prove the product works

Don’t

Don't use cold blue-grey tones
Don't put white text on the orange accent
Don't leave surfaces pure white everywhere

For AltLeads: Borrow the warm orange-on-black button styling to make primary actions feel friendly and approachable rather than corporate.

Copy the tokens

Paste into any project to try this look.

/* Rippling · values measured from https://www.rippling.com/ · reference only, their brand belongs to them */
:root {
  --bg: #FFFFFF;
  --surface: #F2EEEB;
  --text: #000000;
  --muted: #000000;
  --line: #CEC1B8;
  --accent: #FFA81D;
  --on-accent: #000000;
  --radius-button: 4px;
  --radius-card: 12px;
  --radius-small: 4px;
  --button-height: 38px;
  --font-heading: "basel", "Manrope", system-ui, sans-serif;
  --font-body: "basel", "Manrope", system-ui, sans-serif;
  --shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px;
}