2026 OneSupport Style Guide

01 — Color System

Brand Colors

Six spot colors. Used with precision — each has a role. Never used all at once except in the spectrum gradient.

Pink

#e04072

Primary CTA

Purple

#424082

Gradient / Accent

Royal Blue

#0072bc

Platform / Tech

Light Blue

#40d3e2

Links / Focus / UI

Green

#43d1a1

Success / AI / CX

Yellow

#f4e84e

Callout / Alert

Dark Surface System

Four-level depth stack. All UI lives on these — never on white or light backgrounds.

BG Base

--bg · #0d0e10

Page background

Card

--card · #13151a

Cards, nav, panels

Card 2

--card2 · #16181f

Elevated on card

Border

--border · #1e2128

Dividers, outlines

Text Hierarchy

Three text levels on dark. Use them to create rhythm — not just one flat color for everything.

--text · #f2f3f5

Primary — headlines, key UI, active states

--muted · #858a96

Secondary — body copy, descriptions, supporting text

--dim · #40444e

Tertiary — labels, caps, placeholders, ghost elements

CSS — Color Tokens

:root {
  /* Spot Colors */
  --os-pink:   #e04072;  /* Primary CTA, key highlights */
  --os-purple: #424082;  /* Gradient partner, accent */
  --os-royal:  #0072bc;  /* Platform / tech UI */
  --os-lblue:  #40d3e2;  /* Links, focus rings, eyebrows */
  --os-green:  #43d1a1;  /* Success, AI, CX positive */
  --os-yellow: #f4e84e;  /* Callouts, alerts */

  /* Glow tints (for badge/pill backgrounds) */
  --os-pink-glow:   rgba(224,  64, 114, 0.14);
  --os-purple-glow: rgba( 66,  64, 130, 0.18);
  --os-royal-glow:  rgba(  0, 114, 188, 0.14);
  --os-lblue-glow:  rgba( 64, 211, 226, 0.12);
  --os-green-glow:  rgba( 67, 209, 161, 0.12);
  --os-yellow-glow: rgba(244, 232,  78, 0.12);

  /* Dark surfaces */
  --bg:     #0d0e10;  /* Page base */
  --card:   #13151a;  /* Cards, nav */
  --card2:  #16181f;  /* Elevated elements */
  --border: #1e2128;  /* Borders, dividers */

  /* Text */
  --text:  #f2f3f5;  /* Primary */
  --muted: #858a96;  /* Secondary */
  --dim:   #40444e;  /* Tertiary / ghost */

  /* Spectrum (use sparingly — see gradient kit for full docs) */
  --os-spectrum: linear-gradient(90deg, #e04072, #424082, #0072bc, #40d3e2, #43d1a1);
}

02 — Typography

Font System

Inter carries the weight. Manrope is the accent — used for section labels, the logo, and select callouts only.

Primary — Inter · All headlines & body

Aa 123

The quick brown fox300 Light

The quick brown fox400 Regular

The quick brown fox500 Medium

The quick brown fox600 SemiBold

The quick brown fox700 Bold

The quick brown fox800 ExtraBold ←

The quick brown fox900 Black

Accent — Manrope · Labels & select UI only

Aa 123

The quick brown fox400 Regular

The quick brown fox500 Medium

The quick brown fox600 SemiBold

The quick brown fox700 Bold

The quick brown fox800 ExtraBold ←

Use Manrope for: section labels, logo, navigation CAPS labels, and decorative callouts. Not for body text.

Type Scale

Inter 800 ExtraBold leads all display sizes. Letter-spacing tightens as size increases.

72px / 4.5remInter 800 · -3px · lh 1.05Hero display

OneSupport

48px / 3remInter 800 · -2px · lh 1.1Page H1

Unified CX Platform

36px / 2.25remInter 800 · -1.5px · lh 1.15Section H2

Not Your Typical BPO

28px / 1.75remInter 700 · -1px · lh 1.2H3 / subsection

Operational Engine

22px / 1.375remInter 700 · -0.5px · lh 1.3H4 / card title

Cloud Contact Center

18px / 1.125remInter 400 · 0 · lh 1.7Lead / intro copy

OneSupport designs, implements, and operates scalable support environments for organizations that require flexibility and performance.

15px / 0.9375remInter 400 · 0 · lh 1.65Body copy

Demand patterns are actively managed through workforce planning, scheduling, and real-time operational adjustments across every client program.

13px / 0.8125remInter 400 · 0 · lh 1.6Small / card body

Structured QA processes ensure interactions align with service standards and compliance requirements.

10pxManrope 700 · +2px · CAPSSection labels only

Customer Experience Operations

Text Treatments

Gradient text and spectrum accents — used on hero headlines and key callouts only.

Spectrum Gradient Text

Design First

Single-Color Highlight

Built to Scale.

Spectrum Underline

Talent Transforms CX.

Manrope Accent Callout

"Operational discipline,
not just software."

03 — Buttons

Button System

Two fills only: white (primary action) and #40d3e2 outline (secondary action). No solid color fills. Ghost for tertiary.

Variants

White — Primary LBlue Outline — Secondary White Outline — On dark hero Ghost — Tertiary

Sizes

Small Default Large Small Default Large

Shapes & Disabled

Square-ish → Pill Shape → Pill Outline Disabled

On Hero Dark Background

Talk to an Expert → Learn More Schedule a Demo Contact

CSS — Button System

/* Base */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 700; font-size: 14px;
  border: none; cursor: pointer;
  border-radius: 10px; padding: 12px 24px;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* White — primary fill */
.btn-white {
  background: #ffffff; color: #0d0e10;
  box-shadow: 0 2px 12px rgba(255,255,255,0.12);
}
.btn-white:hover {
  background: #e8e9eb; transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(255,255,255,0.18);
}

/* LBlue outline — secondary */
.btn-outline-lblue {
  background: transparent; color: #40d3e2;
  border: 1.5px solid #40d3e2;
}
.btn-outline-lblue:hover {
  background: rgba(64,211,226,0.08); transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(64,211,226,0.18);
}

/* White outline — for hero/dark bg use */
.btn-outline-white {
  background: transparent; color: #f2f3f5;
  border: 1.5px solid rgba(255,255,255,0.25);
}
.btn-outline-white:hover {
  border-color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.06); transform: translateY(-2px);
}

/* Ghost — tertiary */
.btn-ghost {
  background: transparent; color: #858a96;
  border: 1.5px solid #252830;
}
.btn-ghost:hover { border-color: #40444e; color: #f2f3f5; transform: translateY(-2px); }

/* Sizes */
.btn-sm { padding: 8px 16px; font-size: 12px; border-radius: 8px; }
.btn-lg { padding: 15px 32px; font-size: 16px; border-radius: 12px; }
.btn-pill { border-radius: 100px; }

04 — Pills & Badges

Pills

Default style is gray — three levels of muted. Color tints are contextual only, used to carry meaning (status, category). Gradient border for featured/hero labels.

Default — Gray (primary use)

Solutions Active Utilities Industries Featured Archive Now Hiring

Contextual Color Tints — status & category meaning only

Enterprise CX Managed IT Cloud Contact Active Program Live In Progress

Rule: Use gray pills by default for navigation labels, categories, and tags. Only switch to a color tint when the color carries a specific meaning (e.g., green = active/live, pink = enterprise tier, yellow = in progress). Never use color for decoration alone.

CSS — Gray Default Pills

/* Base pill */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 600;
  border-radius: 100px; padding: 5px 14px;
}

/* Default gray — primary use */
.pill-default {
  background: rgba(255,255,255,0.05);
  color: #858a96;
  border: 1px solid #252830;
}
.pill-text {
  background: rgba(242,243,245,0.08);
  color: #f2f3f5;
  border: 1px solid rgba(255,255,255,0.1);
}
.pill-dim {
  background: transparent;
  color: #40444e;
  border: 1px solid #1e2128;
}

/* Featured — spectrum gradient border */
.pill-featured {
  background: var(--card);
  color: #858a96;
  position: relative; border: 1px solid transparent;
  background-clip: padding-box;
}
.pill-featured::before {
  content: ''; position: absolute; inset: 0;
  border-radius: 100px; padding: 1px;
  background: var(--os-spectrum);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Contextual color tints — pattern for all six */
.pill-green { background: rgba(67,209,161,0.12); color: #43d1a1; border: 1px solid rgba(67,209,161,0.3); }
.pill-pink  { background: rgba(224,64,114,0.14);  color: #e04072; border: 1px solid rgba(224,64,114,0.3); }
.pill-lblue { background: rgba(64,211,226,0.12);  color: #40d3e2; border: 1px solid rgba(64,211,226,0.3); }
/* etc. */

05 — Cards

Card Variants

Cards live on --card. Top accent bars use a single spot color or the spectrum. Hover lifts 3px with shadow.

Foundation Layer

Omnichannel Engagement

Managed CX programs and structured operational execution across customer channels.

Cloud Layer

OneConnect Cloud

Modern cloud contact center infrastructure and CX technology platforms built for scale.

Optimization Layer

Operational Visibility

Real-time insight into customer interactions and service performance across all touchpoints.

Gradient Border Card

Spectrum border wrap

For featured content or CTA cards — 1px gradient border via mask technique.

Stat Card

100%

North American footprint — US, Canada & Mexico

Hover this card

Spectrum bar reveals on hover

Card interaction

Lifts 4px · border lightens · shadow deepens

Transition spec

0.25s · cubic-bezier(0.16,1,0.3,1)

CSS — Card Base + Hover

.card {
  background: #13151a;
  border: 1px solid #1e2128;
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.22s, transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s;
}
.card:hover {
  border-color: #252830;
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}
/* Top accent bar */
.card-bar { height: 3px; background: #e04072; }
/* Or gradient: */
.card-bar-spectrum { background: var(--os-spectrum); }

06 — Glowing Orbs & Ambient Light

Decorative Glow Elements

Blurred radial blobs placed behind content. They add depth without literal imagery. Use one or two per section — never all colors at once.

Multi-orb composition

Pink + Purple + Royal · opacity 0.45 · blur 60–80px

Pink Hero Glow

CTA / Hero sections

Royal + Light Blue

Tech / platform sections

Green Ambient

Success / AI / CX sections

CSS — Glowing Orb

/* Section wrapper must have position:relative; overflow:hidden */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}
/* Example placements */
.orb-pink-tl   { background: #e04072; width:260px; height:260px; top:-80px; left:-60px; }
.orb-purple-tr { background: #424082; width:320px; height:320px; top:-100px; right:-80px; filter:blur(80px); opacity:0.35; }
.orb-green-br  { background: #43d1a1; width:200px; height:200px; bottom:-60px; right:10%; }
/* Content must be z-index:1 relative to orbs */

07 — Geometric Backgrounds

Subtle Background Textures

Minimal and geometric. Two patterns: the dot grid (used on the main page bg) and the line grid (used in hero sections).

Dot Grid · 28px · 4–5% white

Used on: global page background. Applied via body::before.

Line Grid · 40px · 3% white

Used on: hero section backgrounds, dark feature panels.

CSS — Both Grid Patterns

/* Dot grid — global page background */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

/* Line grid — hero / feature sections */
.hero-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

Accent Bars

Horizontal lines using spectrum or single spot colors. Used as section dividers, card tops, and decorative rule elements.

3px spectrum — top of page / major sections

2px single color — card top bars

6px spectrum — hero accent line above headline

Segmented color dots — decorative window chrome

08 — Motion & Animation

Motion Principles

Fast, purposeful, spring-forward. All transitions use cubic-bezier(0.16,1,0.3,1) — an ease-out-expo that feels snappy and confident.

Pulse Glow

box-shadow · 2.5s · ease-in-out · ∞

🧩

Float

translateY(-8px) · 3s · ease-in-out · ∞

Spectrum Shift

background-position · 3s · linear · ∞

Content reveals on load

Fade In Up

opacity + translateY(12px) · 0.6s · ease-out-expo

Loading Spinner

rotate · 1s · linear · ∞ · spectrum border

Card Hover Lift

translateY(-4px) · scale(1.01) · 0.25s

CSS — Easing + Duration Tokens

:root {
  /* Easing — all UI uses ease-out-expo */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1); /* micro-interactions */

  /* Durations */
  --dur-snap:  120ms;  /* color changes, opacity */
  --dur-fast:  200ms;  /* hover states */
  --dur-base:  250ms;  /* default transitions */
  --dur-slow:  400ms;  /* reveals, page elements */
  --dur-enter: 600ms;  /* page load / section enters */
}

/* Standard card hover */
.card       { transition: transform 0.25s var(--ease-out-expo), box-shadow 0.25s, border-color 0.2s; }
.card:hover { transform: translateY(-3px); }

/* Button hover */
.btn        { transition: all 0.22s var(--ease-out-expo); }
.btn:hover  { transform: translateY(-2px); }

09 — Navigation

Site Nav

Dark bar on --card. Logo uses Manrope 800. Nav links use Inter 500. Sticky with backdrop-filter: blur(16px) on scroll.

How Can We Help You?

Your Partner for Unified
Customer Experience.

OneSupport designs, implements, and operates scalable, dependable support environments for organizations that require flexibility and performance.

Talk to an Expert → Learn More

10 — Forms

Form Elements

Inputs sit on #0f1015. Focus ring is --lblue. Error state is --pink. Label is Inter 600 uppercase 11px.

First Name

Legal first name

Last Name

Business Email

Solution Interest

Error State

Please enter a valid business email address.

I agree to receive communications from OneSupport

Submit Request →

11 — Spacing, Radius & Shadow

Spacing Scale

4px base unit. All layout spacing uses multiples of 4.

4px
xs

8px
sm

12px
—

16px
md

20px
—

24px
lg

32px
xl

40px
—

48px
2xl

64px
3xl

80px
4xl

96px
5xl

Border Radius

4px
sm

8px
md

10px
—

12px
lg

14px
—

16px
xl

24px
2xl

999px
pill

Shadows (Dark Mode)

sm

md

lg

xl

2xl

pink glow

royal glow

lblue glow

12 — Misc UI Elements

Small Components

Avatar rings, progress bars, focus rings, and dividers.

JM

🚀

Avatar / Icon Ring

72% complete

38% complete

Progress Bars

🎯

Gradient border

Focus / Feature Rings

Plain divider — 1px #1e2128

Spectrum divider — 1px at 60% opacity

Pink divider — section accent

Short spectrum rule (80px) — above headlines