Light interfaceMeasured crayons.freshworks.com

Freshworks Crayons

A light, friendly support-tool kit with simple cards and a calm blue accent

This page is styled with Freshworks Crayons’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#F1F1F1
Cards, panels, menus

Text#4D4D4D
Headings and body

Muted text#697379
Secondary info

Line#E6E6E6
Dividers and outlines

Accent#3973E6
Main button, links, selection

On accent#FFFFFF
Text on the accent

Contrast

Text on background 8.5:1Muted on background 4.9:1Text on accent 4.4:1

Every colour found on their site

#666666#697379#4D4D4D#3973E6#FFFFFF#EBF1FC#F1F1F1#E6E6E6

Typography

Headings use System stack (free). Body text uses System stack (free).

No type scale found on their page.

Corners & shadows

Corner sizes used

15px

10px

Shadows

Shadow 1

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

Cards and panels · 1

Freshworks Crayons Cards and panels: Get Started — fill #FFFFFF · corners 15px · System stack 16px

Icons

Their site draws no inline icons we could copy.

Product screens

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

Freshworks Crayons product screen: 2092 × 1293 — 2092 × 1293

Freshworks Crayons product screen: 2000 × 1280 — 2000 × 1280

Freshworks Crayons product screen: 1600 × 1000 — 1600 × 1000

Freshworks Crayons product screen: 2400 × 1260 — 2400 × 1260

Freshworks Crayons product screen: 2880 × 1620 — 2880 × 1620

Freshworks Crayons product screen: 3397 × 2269 — 3397 × 2269

Freshworks Crayons product screen: 2000 × 1135 — 2000 × 1135

Freshworks Crayons product screen: 2440 × 1524 — 2440 × 1524

Freshworks Crayons product screen: 1092 × 614 — 1092 × 614

Freshworks Crayons product screen: 1755 × 837 — 1755 × 837

Do & don’t

What makes it Freshworks Crayons

Simple white cards with soft blue-tinted shadows and light grey borders
Friendly flat illustration icons alongside short, plain-English labels
A single calm blue accent used for links and icon details

Use plain white cards with soft, subtle shadows instead of borders
Keep one calm blue as the only accent colour
Use simple friendly icons to support short text, not replace it

Don’t

Don't use harsh borders or heavy drop shadows
Don't mix multiple bright accent colours
Don't overload cards with dense text or data

For AltLeads: A calling CRM could borrow the simple card-plus-icon pattern and single calm blue accent to make help and onboarding screens feel approachable rather than technical.

Copy the tokens

Paste into any project to try this look.

/* Freshworks Crayons · values measured from https://crayons.freshworks.com/ · reference only, their brand belongs to them */
:root {
  --bg: #FFFFFF;
  --surface: #F1F1F1;
  --text: #4D4D4D;
  --muted: #697379;
  --line: #E6E6E6;
  --accent: #3973E6;
  --on-accent: #FFFFFF;
  --radius-button: 15px;
  --radius-card: 15px;
  --radius-small: 6px;
  --button-height: 40px;
  --font-heading: "System stack", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "System stack", system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow: rgba(57, 115, 230, 0.1) 0px 5px 20px 0px;
}