Customer360 — Design System

COLOR TOKENS

All values browser-confirmed from DevTools on customer360.biz/home-page. CTA red #C8282A and navy #1D2B4A are direct inspections. Never use raw hex in page CSS — always reference a token.

Token	Value	Usage
--bg	`#FDFAF7`	Page base — warm off-white with peach tint. Never pure white.
--bg-section	`#ffffff`	Pure white — alternating sections, card backgrounds
--bg-card	`#F5F0EB`	Warm cream — card fills, table headers, form input bg
--bg-navy	`#1D2B4A` ✅ confirmed	Dark brand navy — hero, nav, dark section bands, footer background
--red (primary accent)	`#C8282A` ✅ confirmed	Primary CTA button, section-tag border, heading em, icon tints, role labels, active states
--red-dim	`rgba(200,40,42,0.08)`	Red tint for badge backgrounds, card hover tints, section-tag fill
--red-glow	`rgba(200,40,42,0.35)`	CTA button hover box-shadow only: `0 0 24px var(--red-glow)`
--navy	`#1D2B4A`	Primary text color, headings on light bg, card borders active, team role labels secondary
--navy-mid	`#2B3F6A`	Mid-navy — hover states on dark sections, nav links hover
--navy-dim	`rgba(29,43,74,0.08)`	Navy tint — badge backgrounds (Advanced level), subtle card fills
--peach	`#F4E8DC`	Warm peach — badge fills, pillar icons, trust bar bg, callout bg, VM vision card
--peach-border	`#E8D5C4`	Peach border — used with --peach backgrounds
--ink	`#1D2B4A`	All primary readable text — same as navy. Bold/strong body text.
--gray	`#4A5568`	Body copy, card descriptions, list text
--gray-mid	`#718096`	Secondary labels, section sub-headers, form labels, table meta
--gray-light	`#A0AEC0`	Placeholder text, captions, annotation text, footer sub-text
--border	`#E2D9D0`	Default card borders, dividers, input borders — warm toned, not cold gray
--green	`#2D7D46`	Success, positive values in cost table, module outcomes, tick marks

✓ Peach + Navy + Red

The palette is warm: peach-tinted backgrounds, deep navy for structure, crimson red for action. All three work together — no harsh cold grays.

✗ No orange anywhere

Previous design system documents incorrectly used #f97316 orange. The confirmed CTA color is #C8282A red. Remove all orange references.

TYPOGRAPHY

Heading font: Bebas Neue — confirmed via browser DevTools. Condensed, boxy, all-caps geometric. Not curved or rounded. Body font: DM Sans — clean geometric sans for all UI text. Import both from Google Fonts.

Bebas Neue — one weight (400 = Bold display). Used for all H1, H2, H3, card titles, role labels, nav brand name.
DM Sans:opsz,wght@9..40,300;400;500;600;700 — used for all body, labels, buttons, form text.

H1 (LIGHT BG) — Bebas Neue · clamp(40px, 6vw, 76px) · letter-spacing 0.08em · lh 1 · hero only

OWN YOUR CUSTOMER INTELLIGENCE.

H1 (DARK/NAVY BG) — same font, color #fff, em = var(--red)

OWN YOUR CUSTOMER INTELLIGENCE.

H2 — Bebas Neue · clamp(28px, 4vw, 46px) · letter-spacing 0.07em · lh 1.1 · section headings

ENTERPRISE CAPABILITY. NOT ENTERPRISE PRICING.

H3 — Bebas Neue · 20–22px · letter-spacing 0.06em · card headings, sub-sections

FIRST-PARTY DATA OWNERSHIP

Body — DM Sans · 16px · weight 400 · lh 1.7 · color var(--gray) · = var(--ink) weight 600

Customer360 is India's AI-powered MarTech platform that gives funded startups private, owned first-party data infrastructure — so your customer intelligence stays yours and compounds over time.

Small — DM Sans · 13–14px · weight 400 · lh 1.75 · card body, bios

18+ years in MarTech, data-driven marketing, and digital transformation. Certified across Adobe Audience Manager, Tealium, GA360, and Segment.

Label / Tag — DM Sans · 11px · weight 700 · UPPERCASE · tracking 0.12em · color var(--red)

PLATFORM CAPABILITIES

Monospace — JetBrains Mono · 12–13px · code/token names only

--red: #C8282A · --navy: #1D2B4A · font-family: 'Bebas Neue'

✓ Bebas Neue for ALL headings

Every H1, H2, H3, card title, stat number, team name, and section header uses Bebas Neue. It creates the boxy, condensed visual identity across all pages.

✗ No Manrope, Poppins, or Nunito

Previous system versions used Manrope (wrong) or training page used Poppins (wrong). Bebas Neue is the confirmed heading font. DM Sans is body.

SPACING & RADIUS

Token / Value	px	Usage
--r	`8px`	Input fields, small badges, pillar cards, role cards, callout boxes
--r-lg	`14px`	Feature cards, team cards, module cards, accordion, track cards
--r-xl	`20px`	Hero section, footer, form box, large showcase sections
Section padding	`90px 40px`	All full sections — top/bottom 90px, left/right 40px
Section padding mobile	`60px 20px`	≤680px breakpoint
Max content width	`1320px`	All section containers — `margin: 0 auto`
Nav height	`60–68px`	Sticky nav — dark navy background
Ticker height	`36px`	Marquee strip — also navy bg
Feature grid gap	`20px`	3-col feature cards
Two-col layout gap	`60–64px`	Split layouts (Who We Are, Enterprise, Form)
Team / module grid gap	`18–22px`	3-col grids
CTA band padding	`100px 40px`	Final CTA — generous breathing room

MOTION

Element	Property	Value
Ticker marquee	transform	`translateX(0 → -50%) · 45s linear infinite` · content ×2
Hero badge pulse	opacity	`2s ease-in-out infinite · 1 → 0.3 → 1`
Scroll reveal `.rv → .in`	opacity + transform	`opacity 0→1, translateY(26px→0) · 0.65s ease`
Grid stagger (JS)	transition-delay	`i × 65ms` per child
Card hover lift	transform	`translateY(-3px) · 0.25s`
Card border activate	border-color	`--border → --border-red · 0.25s`
Feature card top bar	transform scaleX	`scaleX(0 → 1) · transform-origin: left · 0.3s` — 3px red bar
Pillar / role card hover	transform	`translateX(4px) · 0.2s`
CTA button hover	box-shadow + transform	`0 0 24px var(--red-glow) + translateY(-1px) · 0.2s`

NAVIGATION BAR

Dark navy background. Logo left. Links centre. Right: red-tinted audit link + solid red demo button. Sticky top — stays dark against any page background.

CUSTOMER360

HomeMarTech ServicesTrainingSolutions ▾About UsContact

⚡ Free AI Audit Book a Demo →

background: var(--bg-navy) #1D2B4A · backdrop-filter:blur(18px) · height:60–68px · logo: Bebas Neue 22px #fff · nav links: DM Sans 12.5px rgba(255,255,255,0.65) · audit btn: border rgba(200,40,42,0.4) bg rgba(200,40,42,0.1) color var(--red) · demo btn: bg var(--red) color #fff

TICKER / MARQUEE

Above nav. Dark navy background — same as nav. White/muted text. Red ◆ separators. Content duplicated 2× for seamless loop.

◆OWN YOUR FIRST-PARTY DATA · STOP COMPETITOR DATA LEAKAGE · GDPR + DPDP READY · NOW CITED ON CHATGPT · PERPLEXITY · GEMINI · CLAUDE · ◆ OWN YOUR FIRST-PARTY DATA …

background: var(--bg-navy) · height:36px · text: DM Sans 11px weight 600 uppercase tracking 0.08em · color: rgba(255,255,255,0.7) · highlighted words: #fff · ◆ separator: var(--red) · animation: 45s linear infinite translateX(0 → -50%) · content ×2

TRUST BAR

Below nav. Warm peach background — signals transition from nav to page. White pills with warm border. AI indexing as social proof.

Indexed & cited on:

🤖 ChatGPT 🔍 Perplexity ✨ Google Gemini 🪟 Microsoft Copilot 🔮 Claude (Anthropic)

background: var(--peach) #F4E8DC · border-bottom: 1px solid var(--peach-border) · padding: 12px 40px · label: DM Sans 11px uppercase var(--gray-mid) · pills: bg:#fff border:var(--border) border-radius:100px padding:4px 12px

HERO ANATOMY

Dark navy section. Large faint background word in Bebas Neue. Red pulse badge. Bebas Neue H1. DM Sans sub. Three buttons. Stats bar beneath.

OWN

AI-POWERED MARTECH · CHENNAI, INDIA

OWN YOUR CUSTOMER INTELLIGENCE.
ACCELERATE GROWTH.

Customer360 is India's AI-powered MarTech platform that gives funded startups private, owned first-party data infrastructure — so your customer intelligence stays yours.

Book a Free Demo See How It Works ⚡ Get AI Audit

① BG WORD: Bebas Neue 8–10rem opacity 0.04 absolute centered · ② BADGE: red-dim bg border rgba(200,40,42,0.4) pill · pulse dot: var(--red) · ③ H1: Bebas Neue clamp(44–76px) letter-spacing 0.08em #fff · em: var(--red) · ④ SUB: DM Sans 15px rgba(255,255,255,0.7) · ⑤ STATS BAR: 4-col white grid border-radius var(--r-lg)

BUTTONS

Four variants. DM Sans font-weight 700 minimum. Red is primary — used sparingly so it retains impact.

Book a Free Demo → See How It Works ⚡ Get AI Audit

Buttons on dark navy background

Book a Free Demo → See How It Works ⚡ Get AI Audit

Buttons on light background

Variant	Background	Text	Border	Use Case
Primary — btn-red	`var(--red) #C8282A`	#fff	none	Main hero CTA, form submit, featured track card. Never more than 1 per viewport.
Ghost Light (dark bg)	rgba(255,255,255,0.1)	#fff	rgba(255,255,255,0.3)	Secondary hero CTA on navy section
Ghost Dark (light bg)	transparent	var(--navy)	var(--border-navy)	Secondary CTA on white/peach section
Outline Red	transparent	var(--red)	var(--border-red)	Tertiary CTA, AI Audit link, medium-prominence actions

Primary hover: box-shadow 0 0 24px var(--red-glow) + translateY(-1px) · Ghost light hover: bg rgba(255,255,255,0.15) · Ghost dark hover: bg var(--navy-dim) · Outline hover: bg var(--red-dim) · All: DM Sans font-weight 700 · padding 12px 26px · border-radius var(--r)

BADGES & TAGS

Six types. Each has fixed purpose. Peach is the warm neutral — used for background fills. Red for action/active. Navy for structural/informational.

PLATFORM CAPABILITIES

ABOUT CUSTOMER360 · CHENNAI

CDP GA ALTERNATIVE DPDP READY 48HR DEPLOY INDIA HOSTED ❌ Legacy GA

Component	Colors	Fixed Purpose
Section Tag	bg: --red-dim · text: --red · left border: 3px --red	One per section, above H2. DM Sans all-caps 11px weight 700.
Hero Badge	bg: rgba(200,40,42,0.15) · border: rgba(200,40,42,0.4) · text: #fff	Hero only. Pill + pulse dot + geo/context text.
Feature Tag (small)	bg: --peach · text: --navy · border: --peach-border	Bottom of feature cards. Short capability label.
Badge Navy	bg: --navy-dim · text: --navy · border: --border-navy	Informational status — GDPR, compliance, certification badges.
Badge Red Solid	bg: --red · text: #fff	Time-sensitive / action urgency — "48HR DEPLOY", "NEXT COHORT OPEN".
Badge Peach	bg: --peach · text: --navy · border: --peach-border	Geography / neutral info — "India Hosted", "5 Days Setup".
Trust Pill	bg: #fff · text: --ink · border: --border	Trust bar only. Emoji + platform name.
Footer Badge	bg: rgba(200,40,42,0.2) · text: rgba(255,255,255,0.8) · for dark bg	Footer brand area on navy background. GDPR / DPDP / Privacy-First / GEO.

STATS BAR

4-col bordered grid below hero CTAs. White background. Numbers in Bebas Neue red. Labels in DM Sans gray.

+47%Conversion Rate Lift

+32%Customer Retention

ISO27001:2022 Certified

100+Projects Delivered

display:grid 4-col · border:1px var(--border) · border-radius:var(--r-lg) · bg:#fff · stat-num: Bebas Neue 28px letter-spacing 0.05em var(--red) · stat-lbl: DM Sans 11px var(--gray)

FEATURE CARDS

3-col grid. Hover: left-origin red bar expands across top, border activates, card lifts.

🧬

CUSTOMER DATA PLATFORM

Unified 360° profiles from web, mobile, CRM, and offline. Real-time identity resolution.

CDP

📈

BEHAVIOURAL ANALYTICS

Cookie-free, privacy-safe site analytics. Replace GA4 without losing depth or accuracy.

GA ALTERNATIVE

🔐

PRIVACY & CONSENT

GDPR, DPDP Act 2023, CCPA compliance built in. Consent enforced at every touchpoint.

PRIVACY-FIRST

bg:#fff · border:1px var(--border) · border-radius:var(--r-lg) · padding:26px 22px · ::before: top 0, height 3px, bg var(--red), scaleX(0→1) transform-origin:left on hover · hover: border-o + translateY(-3px) + box-shadow 0 8px 28px rgba(29,43,74,0.1)

PILLAR CARDS

Horizontal icon + text. Icon background is peach tint. Card slides right 4px on hover + red border. Bebas Neue for h4 title.

🗄️

FIRST-PARTY DATA SOVEREIGNTY

Your data lives in your private environment. No third-party sharing, no platform policy overrides.

🔒

PRIVACY-BY-DESIGN ANALYTICS

Built for GDPR, India DPDP Act, PII compliance from day one. Cookie-free tracking baked in.

flex row · gap:14px · padding:18–20px · border-radius:var(--r) · bg:#fff · border:1px var(--border) · pil-ico: 42px square, border-radius:8px, bg:var(--peach) · h4: Bebas Neue 18px · hover: border-red + translateX(4px)

DARK / NAVY CONTENT CARDS

Navy background cards used for feature callouts, capability highlights. Bebas Neue heading white. Body text muted white. Red keyword highlights.

OWN YOUR 1PD

First-party data stored privately. No third-party leakage to ad platforms or competitors. Your customer intelligence as a private digital asset.

ABM AT SCALE

AI-enriched ICP profiles. Find decision-makers, not just leads. Multi-touch account sequences across email, LinkedIn, and programmatic ads.

REVOPS CLARITY

Full-funnel visibility from anonymous visitor to closed deal. Investor-grade pipeline reporting — not vanity metrics.

bg:var(--bg-navy) #1D2B4A · border-radius:var(--r-xl) · padding:32px · h3: Bebas Neue 24px letter-spacing 0.08em #fff · body: DM Sans 13.5px rgba(255,255,255,0.65) · highlight: color var(--red) font-weight:700

VISION / MISSION CARDS

Always paired vertically. Vision: peach gradient, red heading. Mission: navy-dim gradient, navy heading. Bebas Neue for both headings.

🌐

OUR VISION

A world where every business owns its customer relationships — where first-party data, not platform algorithms, drives growth.

🎯

OUR MISSION

To give every business owned first-party data infrastructure and an integrated MarTech ecosystem — without enterprise licensing costs.

vision: bg linear-gradient(135deg, var(--peach), #fff) · h3: Bebas Neue var(--red) · mission: bg linear-gradient(135deg, rgba(29,43,74,0.05), #fff) border-color var(--border-navy) · h3: Bebas Neue var(--navy) · padding:28px · border-radius:var(--r-lg)

COMPARE TABLE

2-col side by side. Left (competitor): light red-tinted. Right (C360): peach gradient + red border.

Legacy GA / Third-Party

❌Your data enriches Google's ad targeting
❌Data sampling at scale hides reality
❌Cookie deprecation kills attribution
❌GA360 costs $150K+/yr

CUSTOMER360

✅100% first-party data — you own it always
✅Full unsampled real-time dashboards
✅Cookie-free tracking built in by design
✅Enterprise capability at startup pricing

g2 gap:20px · theirs: bg #fff9f9 border rgba(220,38,38,0.2) · ours: bg linear-gradient(135deg, var(--peach), #fff) border var(--border-red) · list items: DM Sans 13px var(--gray)

COST COMPARISON TABLE

Legacy Enterprise Customer360

CDP Platform

$80K–$200K/yr

✅ Included

Advanced Analytics

$150K+/yr (GA360)

✅ Included

Marketing Automation

$60K–$120K/yr

✅ Included

Total Stack

$340K–$640K/yr

Talk to us →

grid: 160px 1fr 1fr · border:1px var(--border) · border-radius:var(--r) · col-1 bg: var(--bg-card) · competitor: color #dc2626 · ours: color var(--green) · total row: bg var(--peach) border var(--peach-border) · all: DM Sans 13px

TEAM CARDS

3-col grid. Avatar: initials in red gradient circle. Name in Bebas Neue. Role label: red, 11px DM Sans uppercase. Featured founder: red border + peach gradient background.

SD

SAM DEV

Founder & Director

25+ years of Big 4 technology consulting. Built Customer360 from the inside out — enterprise depth combined with investor perspective.

DP

DEIVA P

Practice Head – MarTech

18+ years in MarTech. Adobe, Tealium, GA360, Segment certified. Bridges deep technical knowledge with strategic execution.

CP

CYRIL PRINCE

Practice Head – Info Security

CISSP · 25+ years. Ex-AVP Standard Chartered. Leads ISO 27001:2022 compliance across all customer deployments.

bg:#fff · border:1px var(--border) · border-radius:var(--r-lg) · featured: border var(--red) + bg linear-gradient(135deg, var(--peach), #fff) · avatar: 52–62px border-radius:50% gradient(--red, #8B1A1B) · t-name: Bebas Neue 20px var(--navy) · t-role: DM Sans 11px uppercase var(--red)

FORM ELEMENTS

BOOK YOUR DEMO

Full Name *

Work Email *

Business Vertical *

Primary Goal

🔒 Your data stored in Customer360's private vault. Never shared.

✅

DEMO CONFIRMED!

We'll reach out within 24 hours to schedule your personalised session.

form-box: bg:#fff · border:1px var(--border) · border-radius:var(--r-xl) · h3: Bebas Neue 24px var(--navy) · label: DM Sans 11px uppercase var(--gray-mid) · input: bg var(--bg) border var(--border) · focus: border var(--red) + box-shadow 0 0 0 3px rgba(200,40,42,0.1) · submit: btn-red full width

FOOTER

Navy background. Bebas Neue for column headers. DM Sans muted white for links. Red accent for footer badges. Same navy as nav — bookends the page.

India's AI-powered first-party data and MarTech platform. CDP, CRM, ABM, email automation, and AI insights in one private owned environment.

GDPRDPDP ReadyPrivacy-FirstGEO Optimised

PLATFORM

MarTech Services
1PD Implementation
MarTech Training
AI SEO Audit
Plans & Pricing

SOLUTIONS

Funded Startups
Banking
Insurance
Retail
Travel & Hospitality

COMPANY

About Us
Careers
Contact
Privacy Policy
Terms

Privacy Terms Contact

bg:var(--bg-navy) · border-radius:var(--r-xl) · col headers: Bebas Neue 14px letter-spacing 0.1em #fff · links: DM Sans 12.5px rgba(255,255,255,0.55) · fp-badges: bg rgba(200,40,42,0.2) border rgba(200,40,42,0.3) · copyright: rgba(255,255,255,0.35)

SECTION ANATOMY

Every content section follows this structure. Light and dark sections alternate — never two dark or two peach sections back-to-back without a white buffer.

① SECTION TAG — DM Sans 11px uppercase · left 3px red border · e.g. "PLATFORM CAPABILITIES"

② H2 HEADING — Bebas Neue clamp(28–46px) · ONE key phrase = var(--red)

③ SUBTITLE — DM Sans 16px var(--gray) · max-width 580px · 1–2 lines

④ CONTENT BLOCK — grid / cards / table / split — margin-top:48–56px

⑤ CTA (optional) — btn-red or btn-outline-red · margin-top:32px

Section	Background	Layout	CTA?
Hero	Navy (#1D2B4A)	Centered single col · bg-word + badge + H1 + sub + 3 btns + stats bar	Yes — 3 buttons
Trust / GEO bar	Peach (#F4E8DC)	Horizontal pill row	No
Who We Are	White (#fff)	2-col: pillars left \| VM cards right	No
GA Alternative	Warm off-white (--bg)	2-col compare cards	No
Platform Features	White (#fff)	3-col feature grid	No
Dark Capabilities	Navy (#1D2B4A)	3-col dark cards	No
Enterprise Cost	Peach / cream	2-col: copy \| cost table	Yes
Core Values	White (#fff)	4-col cards	No
Leadership	Warm off-white (--bg)	3-col team grid	No
ISO Cert	White (#fff)	2-col: cert image \| cert points	No
Lead Form	Warm off-white (--bg)	2-col: copy \| form card	Yes — submit
CTA Band	Navy (#1D2B4A)	Centered full-width	Yes — 2 btns + links

HERO VARIANTS BY PAGE

Page	BG Word (Bebas, faint)	Hero Badge	Nav CTA	H1 Pattern
Home	`OWN`	"AI-POWERED MARTECH · CHENNAI, INDIA"	Book a Demo →	OWN YOUR CUSTOMER INTELLIGENCE. ACCELERATE GROWTH.
MarTech Experts	`EXPERT`	"50+ PLATFORMS · 10 ROLES · INDIA, SEA & MENA"	Hire an Expert →	FIND YOUR MARTECH EXPERT. HIRE IN 48 HOURS.
Training	`LEARN`	"MARTECH TRAINING · INDIA · CORPORATE & INDIVIDUAL"	Enquire Now →	YOUR TEAM THINKS GROWTH. NOW TEACH THEM TO BUILD IT.
About	`ABOUT`	"ABOUT CUSTOMER360 · CHENNAI, INDIA"	Book a Demo →	OWN YOUR DATA. DRIVE YOUR GROWTH.
Solutions	Sector word	"[SECTOR] · INDIA, SEA & MENA"	Book a Demo →	[SECTOR PAIN]. [C360 PROMISE.]

All H1 text renders in ALL CAPS automatically because Bebas Neue only has uppercase letterforms · BG word: opacity 0.04, font-size 8–10rem, absolute centered · Hero badge: DM Sans 11px uppercase · All other hero tokens are identical across pages

COPYWRITING PATTERNS

Element	Formula	Example
H1 Hero	Action + noun + <em> key phrase + challenger line · Bebas Neue renders ALL CAPS	OWN YOUR CUSTOMER INTELLIGENCE. ACCELERATE GROWTH.
H2 Section	Statement + <em> contrast phrase	ENTERPRISE CAPABILITY. NOT ENTERPRISE PRICING.
Section Tag	2–4 words all caps · DM Sans	PLATFORM CAPABILITIES · THE BUSINESS CASE · WHO WE ARE
Hero Badge	Category · geo signal · all caps · DM Sans	AI-POWERED MARTECH FOR FUNDED STARTUPS · CHENNAI, INDIA
CTA Button	Action + arrow → · DM Sans weight 700	"Book a Free Demo →" / "Hire an Expert →"
Compare items	❌/✅ + plain language	"❌ Data sampling hides the real picture at scale"
Form note	🔒 + one-line privacy reassurance	"🔒 Your data stored in Customer360's private vault. Never shared."
Ticker content	ALL CAPS · ◆ separator · short punchy phrases	"OWN YOUR FIRST-PARTY DATA · GDPR + DPDP READY · CITED ON CHATGPT"

DO & DON'T

✓ Bebas Neue for ALL headings

Every H1, H2, H3, card title, stat number, team name uses Bebas Neue. One display font, consistently applied.

✗ No Manrope, Poppins, or Nunito

All previous versions used wrong fonts. Bebas Neue is confirmed. DM Sans is body. Nothing else.

✓ #C8282A red as the accent

Confirmed browser inspection. Use for CTAs, active states, heading em, section tag border, role labels.

✗ No orange (#f97316)

All previous system versions used orange. That was wrong. The brand accent is crimson red #C8282A.

✓ Warm peach + navy palette

Background warmth comes from peach tints (#F4E8DC, #F5F0EB). Structural depth from navy #1D2B4A. Cold grays are never used.

✗ No cold grays as backgrounds

Don't use #f1f5f9, #e2e8f0, or similar cold-gray backgrounds. The site palette is warm throughout.

✓ Dark navy sections for contrast

Hero, nav, footer, dark capability cards all use #1D2B4A. This creates strong page structure bookending the warm light content.

✗ Never two dark sections in a row

Always buffer dark navy sections with white or peach sections. Alternating rhythm is essential.

✓ One in red per H2

Bebas Neue headings use one (font-style:normal; color:var(--red)) for the key promise word or phrase.

✗ Don't use italic or cursive em

Bebas Neue doesn't have an italic — must be styled font-style:normal. Never apply italic or a script font for emphasis.

CUSTOMER360 — DESIGN SYSTEM

COLOR TOKENS

✓ Peach + Navy + Red

✗ No orange anywhere

TYPOGRAPHY

✓ Bebas Neue for ALL headings

✗ No Manrope, Poppins, or Nunito

SPACING & RADIUS

MOTION

NAVIGATION BAR

TICKER / MARQUEE

TRUST BAR

HERO ANATOMY

BUTTONS

BADGES & TAGS

STATS BAR

FEATURE CARDS

CUSTOMER DATA PLATFORM

BEHAVIOURAL ANALYTICS

PRIVACY & CONSENT

PILLAR CARDS

FIRST-PARTY DATA SOVEREIGNTY

PRIVACY-BY-DESIGN ANALYTICS

DARK / NAVY CONTENT CARDS

OWN YOUR 1PD

ABM AT SCALE

REVOPS CLARITY

VISION / MISSION CARDS

OUR VISION

OUR MISSION

COMPARE TABLE

COST COMPARISON TABLE

TEAM CARDS

FORM ELEMENTS

BOOK YOUR DEMO

FOOTER

PLATFORM

SOLUTIONS

COMPANY

SECTION ANATOMY

HERO VARIANTS BY PAGE

COPYWRITING PATTERNS

DO & DON'T

✓ Bebas Neue for ALL headings

✗ No Manrope, Poppins, or Nunito

✓ #C8282A red as the accent

✗ No orange (#f97316)

✓ Warm peach + navy palette

✗ No cold grays as backgrounds

✓ Dark navy sections for contrast

✗ Never two dark sections in a row

✓ One <em> in red per H2

✗ Don't use italic or cursive em