Purple-Forward · Warm Dusk

The working design system for the olark.com redesign. Tokens and components live in one place — site/layouts/partials/redesign/styles.html — and every draft page consumes them. Change a token there and every page follows.

Color

Palette

Warm ivory papers carry the page; deepened purple is the brand through-line (nav, hero, final CTA); burnt amber and gold are the "dusk" accents that band the page; CTA yellow appears on buttons only. Sage and haze are quiet supporting fills.

Brand purple--rd-brand · #5B3E8E
Brand dark--rd-brand-dk · #48306F
Burnt amber--rd-accent · #C6693F
Warm gold--rd-gold · #E9B44C
CTA yellow--rd-cta · #FFC61C — buttons only
Paper--rd-paper · #FBF7F0
Paper 2--rd-paper2 · #F4EDE1
Ink--rd-ink · #241E2B
Ink soft--rd-ink-soft · #5F5766
Line--rd-line · #E4D9C8
Sage--rd-sage · #98AB9B
Haze--rd-haze · #D6DFE0
Type

Typography

Poppins for display (700, tight tracking), Nunito Sans for body, JetBrains Mono reserved for "precise register" moments — prices, traces, feature tables — so mono keeps meaning "this is a fact."

Display / Poppins 700h1/h2 · --rd-display · clamp(30–66px) · lh 1.08 · ls -0.02em
Card heading / Poppins 700 · 22pxh3 · --rd-display
Section lede / Nunito Sans 400 · 18px · ink-soft.section-lede · --rd-body
Body / Nunito Sans 400 · 16px · lh 1.6--rd-body
Eyebrow label.eyebrow · 12px · 700 · caps · +0.16em · amber with gold rule
Mono / JetBrains Mono · precise register only--rd-mono · prices, traces, table headers, badges
Components

Core components

Buttons & try form

Preview Preview Ghost on light Ghost on purple

Form note goes here.

Chat panel + handoff

Visitor message bubble
Agent reply bubble — brand purple
Maya K.Solutions, Olark
● joining live

Pillar card / employee quote

Pillar heading

Supporting copy in ink-soft. Top border rotates purple → gold → sage → amber across the grid.

"Employee quote pattern."
Name · Olark · Team

Second pillar

Gold top border via nth-child.

[ screenshot placeholder pattern ]

Qualification trace (precise register)

LIVE QUALIFICATION TRACE
10:31Visitor arrives · 3rd visit this week
10:34✓ Criteria met: team size, buying signal
10:35→ Routed to Sales · meeting booked in-chat

FAQ + feature table

FAQ item pattern
Answer text in ink-soft, links in brand purple.
FeatureIncludedDetail
Feature nameBETA✓Detail text; amber check, mono header row
Unverified rowVERIFY?Pending product confirmation
Bands

Amber proof band

12,000+stat pattern
4.3/5on amber, gold-lit
Bands

Purple CTA band + dusk dividers

Layered SVG dividers ("dusk") carry the palette between bands: purple → gold → amber → paper. Variants live in partials/redesign/divider.html.