Brand Style Guide

Colors

The brand palette centers on a signature blue-to-pink gradient, supported by a dark near-black primary and neutral grays. Color usage is intentional — gradient for hero moments, dark for text and CTAs, grays for supporting content.

Brand Gradient

linear-gradient(90deg, #7DCADE → #D82A80)

Used for hero sections, CTA backgrounds, and accent moments. Applied at 90° as the primary direction.

Core Palette

Gradient Blue

#7DCADE

--gradient-blue

Gradient Pink

#D82A80

--gradient-pink

Primary Dark

#1C1C1E

Headings, body text, dark buttons

Body Text Gray

#636366

Secondary text, descriptions

Surface Light

#F8F8FB

Card backgrounds, inputs

Border Light

#E5E5EA

Dividers, borders, separators

White

#FFFFFF

Page background, cards on dark

Black

#000000

Stats section background

White-on-Dark Opacities

100%

White 100%

rgba(255,255,255,1)

Headings on dark/gradient

80%

White 80%

rgba(255,255,255,0.8)

Body text on dark

48%

White 48%

rgba(255,255,255,0.48)

Secondary borders on dark

16%

White 16%

rgba(255,255,255,0.16)

Glassmorphism fills

Typography

The type system pairs Marcellus / Marcellus SC (display serif) with Helvetica Neue (body sans-serif). Marcellus SC is used for hero-level headings, Marcellus for section headings, and Helvetica Neue for all body and UI text.

Font Families

Display — Marcellus SC

The Quick Brown Fox Jumps Over The Lazy Dog

font-family: 'Marcellus SC', Georgia, sans-serif · Weight: 400 · Use: Hero headings, large titles

Heading — Marcellus

The Quick Brown Fox Jumps Over The Lazy Dog

font-family: 'Marcellus', Georgia, sans-serif · Weight: 400 · Use: Section headings, blog titles

Body — Helvetica Neue

The Quick Brown Fox Jumps Over The Lazy Dog. Body text should always use Helvetica Neue at weight 400 for regular content, weight 500 for medium emphasis, and weight 300 for light descriptive text.

font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif · Weights: 100, 300, 400, 500, 700

Type Scale

Hero Heading

72px / 72px · SC

Hero Title

Section H1

48px / 56px

Section Heading

H2 — Stats

48px / 48px · SC

Stat Heading

H3 — Blog

32px / 40px

Blog / Sub-Section Title

H4 — Card

24px / 32px

Card Heading or Feature Title

H5 — Post Title

20px / 28px

Post or Article Title

Body

16px / 24px

This is the standard body text used across all paragraphs, descriptions, and general content blocks throughout the website.

Small / Caption

14px / 20px

Navigation links, captions, metadata, and secondary labels use this smaller size.

Micro

12px / 18px

Footer legal text, copyright notices, and fine print.

Spacing

An 8px base unit spacing system provides consistent rhythm. Larger values (80–160px) are used for section-level padding, while smaller values (8–48px) handle component-level gaps.

XS

8px

SM

16px

MD

24px

LG

32px

XL

48px

2XL

80px

3XL

120px

4XL

160px

Layout Widths

Element	Max Width	Padding
Page container	`1360px`	`40px` left/right
Navbar container	`1000px`	`8px` all sides
Content columns	`672px`	Varies
Blog content (RTE)	`70%` centered	`10%` margin l/r
Case study cards	`328px`	`24px`

Border Radius

Three primary radius values create a cohesive rounded aesthetic. 16px for major containers and cards, 12px for buttons and inputs, 8px for smaller elements.

Small

8px

Images, code blocks

Medium

12px

Buttons, inputs, FAQ

Large

16px

Cards, sections, footer

Pill

80px

Circle buttons, dots

Shadows

Minimal, subtle shadows maintain the clean aesthetic. The brand uses very few elevation levels — most depth comes from background color contrast instead.

None (Default)

Borders only

Soft

0 4px 24px rgba(150,163,181,0.08)

Toast

0 4px 12px rgba(0,0,0,0.1)

Dropdown

0 4px 10px rgba(0,0,0,0.3)

Buttons

Buttons follow a simple system: solid dark for primary actions, outlined for secondary. On dark/gradient backgrounds, the logic inverts — white solid or white-bordered.

On Light Background

Primary Dark Secondary Outline Inverted Fill

Variant	Background	Border	Text
Primary Dark	`#1C1C1E`	`#1C1C1E`	`#FFFFFF`
Secondary Outline	`transparent`	`rgba(28,28,30,0.4)`	`#1C1C1E`
Inverted Fill	`#FFFFFF`	`#1C1C1E`	`#1C1C1E`

On Dark / Gradient Background

Primary White Secondary Outline

Button Specs

Property	Value
Font family	`Helvetica Neue`
Font size	`16px`
Line height	`24px`
Font weight	`400`
Padding	`12px 24px`
Border radius	`12px`
Border width	`1px`

Components

Key UI patterns used throughout the website, including navigation, cards, form inputs, FAQ items, and badges.

Navigation Bar

Brand

Product Solutions Pricing Blog Contact

Fixed position, 1000px max-width, 16px border-radius, 8px internal padding. Light border on light pages; transparent with white text on dark/gradient hero.

Cards

Light Card

Background #F8F8FB with 16px radius and 48px padding. Used for benefits, features, and content blocks.

Dark Card

Social proof sections and review blocks use dark backgrounds with white text at reduced opacity.

Gradient Card

CTA sections and hero moments use the brand gradient with white text for maximum impact.

Form Inputs

Light inputs: #F8F8FB background, 8px radius, 12px 16px padding, 16px font. On dark: rgba(255,255,255,0.16) fill with white text and ::placeholder at rgba(255,255,255,0.56).

FAQ Items

How does the platform work?

What industries do you support?

#F8F8FB background, 12px radius, 32px padding. Question text is 16px/24px weight 500. Answer text is 16px/24px weight 300 color #636366.

Glassmorphism Badge

Featured

backdrop-filter: blur(16px), background rgba(255,255,255,0.24), 8px radius. Used for tags on hero images.

Design Tokens

Complete CSS custom properties and key values for implementation. Copy these directly into your CSS root.

CSS Custom Properties

/* Brand Colors */
--gradient-blue: #7dcade;
--gradient-pink: #d82a80;
--primary-dark: #1c1c1e;
--body-text: #636366;
--surface-light: #f8f8fb;
--border-light: #e5e5ea;

/* Brand Gradient */
--brand-gradient: linear-gradient(90deg, #7dcade, #d82a80);

/* Typography */
--font-display: 'Marcellus', Georgia, sans-serif;
--font-display-sc: 'Marcellus SC', Georgia, sans-serif;
--font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;

/* Spacing */
--space-xs: 8px;
--space-sm: 16px;
--space-md: 24px;
--space-lg: 32px;
--space-xl: 48px;
--space-2xl: 80px;
--space-3xl: 120px;
--space-4xl: 160px;

/* Border Radius */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-pill: 80px;

Breakpoints

Name	Max Width	Key Changes
Desktop	`> 991px`	Full layout, fixed nav, multi-column grids
Tablet	`991px`	Stacked columns, hamburger menu, 48px side padding
Mobile Landscape	`767px`	Single column, reduced heading sizes
Mobile Portrait	`479px`	16px padding, 40px hero headings, full-width buttons

Key Design Patterns

Pattern	Implementation
Glassmorphism panels	`backdrop-filter: blur(80px); background: rgba(255,255,255,0.16)`
Dark overlay on hero images	`linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4))`
Logo ticker masking	`mask-image: linear-gradient(90deg, transparent, #000 10% 90%, transparent)`
Section-to-section spacing	`margin-top: 160px` (desktop), `120px` (mobile)
Card internal padding	`48px` (desktop), `32px` (mobile)
Sticky navigation	`position: fixed; top: 0; z-index: 10`
Content max width	`1360px` with `40px` side gutters