Dark interfaceMeasured front.com

Front

Energetic AI support tool with a bold purple hero and a punchy lime-green highlight.

This page is styled with Front’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#300C41
Page behind everything

Surface#5B1F76
Cards, panels, menus

Text#F8F1FE
Headings and body

Muted text#FFFFFF
Secondary info

Line#E2DCF6
Dividers and outlines

Accent#DEE948
Main button, links, selection

On accent#0D1D39
Text on the accent

Contrast

Text on background 15.1:1Muted on background 16.7:1Text on accent 12.7:1

Every colour found on their site

#1C1E20#3A3C40#FFFFFF#0D1D39#1D1F04#300C41#F3F3F4#EEFC97#DEE948#5B1F76#E2DCF6

Typography

Headings use Suisse Intl (company-only; shown here with the free look-alike Inter). Body text uses Suisse Intl (company-only; shown with Inter).

h1	Suisse Intl · 62px · 500 · -1.25px	AI for simple support is everywhere. Complex customer operat
h2	Suisse Intl · 52px · 500 · -1px	Where cross-team customer operations stops crossing wires
h3	Suisse Intl · 52px · 500 · -1px	Complexity is where most customer support platforms tap out
p	Suisse Intl · 14px · 500	Use Cases
li	Suisse Intl · 14px · 400	Sign in

Corners & shadows

Corner sizes used

10px

40px

64px

pill

20px

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

Buttons · 2

Front button: Request a demo — #FFFFFF · corners 40px · 40px

Front button: Request demo — #DEE948 · corners 64px · 48px

Buttons · 3

Front Buttons: Request a demo — fill #FFFFFF · corners 40px · Suisse Intl 16px

Front Buttons: Request demo — fill #DEE948 · corners 64px · Suisse Intl 16px

Front Buttons: Explore Front AI — fill #8034BF · corners 64px · Suisse Intl 16px

Cards and panels · 1

Front Cards and panels: Teams lack shared context — fill #FFFFFF · corners 10px · Suisse Intl 14px

Icons

6 icons copied exactly from their site’s code.

Product screens

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

Front product screen: 750 × 444 — 750 × 444

Front product screen: 3840 × 2160 — 3840 × 2160

Front product screen: 1024 × 558 — 1024 × 558

Front product screen: 1200 × 630 — 1200 × 630

Front product screen: 640 × 581 — 640 × 581

Front product screen: 1024 × 527 — 1024 × 527

Front product screen: 786 × 596 — 786 × 596

Front product screen: 800 × 418 — 800 × 418

Front product screen: 474 × 248 — 474 × 248

Front product screen: 600 × 386 — 600 × 386

Do & don’t

What makes it Front

Deep purple hero section with white headline text
A single lime-green button that pops hard against the purple
Fully rounded pill buttons throughout

Use deep purple as a bold section background, not just an accent
Save lime-green for the one standout action
Keep buttons fully rounded pill shapes

Don’t

Don't use lime-green for more than one button at a time
Don't use sharp-cornered buttons
Don't dilute the purple with pastel tones

For AltLeads: Borrow the one loud lime-green CTA on a bold dark colour field to make the single most important action unmissable.

Copy the tokens

Paste into any project to try this look.

/* Front · values measured from https://front.com/ · reference only, their brand belongs to them */
:root {
  --bg: #300C41;
  --surface: #5B1F76;
  --text: #F8F1FE;
  --muted: #FFFFFF;
  --line: #E2DCF6;
  --accent: #DEE948;
  --on-accent: #0D1D39;
  --radius-button: 64px;
  --radius-card: 10px;
  --radius-small: 6px;
  --button-height: 48px;
  --font-heading: "Suisse Intl", "Inter", system-ui, sans-serif;
  --font-body: "Suisse Intl", "Inter", system-ui, sans-serif;
  --shadow: rgb(208, 198, 240) 0px 0px 0px 1px inset;
}