Optivo Style Guide

Design tokens, components, and patterns used across the Optivo Partner Portal.

Color Palette

Core brand colors used across all pages and components.

Navy
#161249
Coral / Salmon
#ee6364
Coral Hover
#d94f50
White
#ffffff
Text Light
rgba(255,255,255,0.75)
Text Grey
#555
Text Dark
#333
Border Light
rgba(255,255,255,0.3)
Background Alt
#f8f7ff

Typography

Montserrat is the sole typeface. All weights loaded: 400, 600, 700.

H1
52px / 700
letter-spacing: -0.5px
The quick brown fox
H2
30px / 700
The quick brown fox jumps over the lazy dog
H3
20px / 700
The quick brown fox jumps over the lazy dog
H4
18px / 600
The quick brown fox jumps over the lazy dog
Body
16px / 400
line-height: 1.7
Optivo, powered by esbconnect, is a first-of-its-kind solution in the UK for user identification and remarketing via email. It enables brands to identify anonymous visitors to their website and automatically trigger a follow-up email.
Small
14px / 400
Supporting text, metadata, and secondary information appears at this size.
Caption
12px / 400
Caption text · Labels · Overlines

Spacing Scale

Consistent spacing units used for padding, margins, and gaps.

8px
12px
16px
20px
24px
32px
48px
60px
80px
100px

Container max-width: 1200px

Section padding (vertical): 100px top & bottom

Container horizontal padding: 20px each side

Buttons

All interactive button variants. Hover to see state transitions.

Dark Background

Primary Coral Get Started .opp-btn-coral
Outline Dark Learn More .opp-btn-outline
Disabled Submit .opp-btn-disabled

Light Background

Primary Coral Get Started .opp-btn-coral
Outline Light View Details .opp-btn-outline

Cards & Borders

Card patterns, border treatments, and radius values. Hover cards to see the lift animation.

Salmon Border Thin

Thin coral bottom & right borders for cards and containers.

border-bottom: 2px solid #ee6364;
border-right: 2px solid #ee6364

Salmon Border Thick

Heavy coral bottom & right borders for emphasis and featured cards.

border-bottom: 4px solid #ee6364;
border-right: 4px solid #ee6364

Interactive Container

Full coral border for interactive elements — FAQ items, form fields, clickable containers.

translateY(-4px) + box-shadow on hover

Border Radius Scale

16px (cards, containers)
30px (buttons, pills)

Form Elements

Input fields styled for dark backgrounds. Click to see the coral focus state.

FAQ Accordion

Interactive accordion with animated open/close. Click the items below.

How does the accordion animation work?

The accordion uses the Web Animations API to smoothly transition height from 0 to the content's scrollHeight. A cubic-bezier easing curve (0.4, 0, 0.2, 1) gives it a natural feel. Only one item can be open at a time — opening a new item automatically closes the previous one.

What are the key styling details for FAQ items?

Each item has a 2px coral border at 40% opacity, which transitions to full #ee6364 on hover and when open. The background shifts from 3% white to a subtle coral tint when active. The toggle icon is a circle with a plus/minus symbol that rotates 90 degrees on open. Border-radius is 12px.

Responsive Breakpoints

Media query breakpoints used throughout the portal.

Name Max Width Typical Changes
Mobile 768px Single column layout, reduced font sizes, stacked navigation
Tablet 1024px Condensed grids, typography reflow, adjusted padding
Your current viewport width: