GRIP Design System — reference

Color

Core palette

tokens — used across the whole site

--color-bg

#0A0B0D

rgb(10, 11, 13)

page floor / background

--color-text

#F6F7F9

rgb(246, 247, 249)

cool white text

--color-gray

#61656E

rgb(97, 101, 110)

borders, eyebrows, labels

--color-gray-dim

#383A41

rgb(56, 58, 65)

muted / card-fill ref

--color-surface

#15161B

rgb(21, 22, 27)

subtle card on the floor

--color-accent

#5C7B96

rgb(92, 123, 150)

steel-cyan — interaction ONLY

--color-line

#F4F7FC

rgb(244, 247, 252 @ 8%)

hairline borders

Dark surface ladder

cards · panels · insets

--surface-1

#111318

rgb(17, 19, 24)

card on the floor

--surface-2

#0c0d12

rgb(12, 13, 18)

dossier / step fill

--surface-3

#0a0b0e

rgb(10, 11, 14)

near-floor inset

Signal palette

DATA / FEEL only — never chrome

--color-signal

#34e2b0

rgb(52, 226, 176)

live-message teal

--color-equity

#7c9a6e

rgb(124, 154, 110)

equity-positive sage

--color-approval-low

#b5705a

rgb(181, 112, 90)

approval gauge — clay

--color-approval-mid

#c2a14d

rgb(194, 161, 77)

approval gauge — amber

Hero — resting gradient + live shader

non-token; the home hero mood

warm amber glow

#c67c3e

rgb(198, 124, 62)

hero still + shader

cool navy glow

#213447

rgb(33, 52, 71)

hero still + shader

linear start (warm dark)

#160f08

rgb(22, 15, 8)

hero still

linear end (cool dark)

#0b0f16

rgb(11, 15, 22)

hero still

near-black

#0a0a0b

rgb(10, 10, 11)

hero still / WebGL fallback

focus glow

#6B8CA3

rgb(107, 140, 163)

light behind “buying power”

stars / dust

#E6E8EB

rgb(230, 232, 235)

shader sparkle

logo gray

#646464

rgb(100, 100, 100)

cool-pull target

Spoke haze (solution pages — current)

static dithered gradient

base

#07070e

rgb(7, 7, 14)

near-black base

top glow

#322c58

rgb(50, 44, 88)

soft indigo pool

bottom glow

#2a2415

rgb(42, 36, 21)

faint warm floor

Text-opacity ladder

all = #F6F7F9 over transparent

--text-strong

246, 247, 249 @ 80%

--text-muted

246, 247, 249 @ 56%

--text-faint

246, 247, 249 @ 40%

Typography

Switzer

--font-sansheadings + body · weights 300–800

JetBrains Mono

--font-monolabels · data · code · kbd

Scale

body 18 · UI ×1.25 · display φ(1.618)

--text-xs12px · lh — · ls —

Tier 1 · RO · prescreen

--text-sm14px · lh — · ls —

UI label / small title

--text-base18px · lh 1.55 · ls —

Body copy — the canonical paragraph size.

--text-sub20px · lh 1.55 · ls —

Section subtext — the muted paragraph under a title.

--text-lg22.5px · lh 1.5 · ls —

Lead / large UI

--text-xl28px · lh 1.15 · ls —

Card / block title

--text-d1~29px · lh 1.15 · ls —

Display 1

--text-d2~47px · lh 1.06 · ls -0.015em

Section title

--text-d3~76px · lh 1.02 · ls -0.02em

Page hero

--text-hero≤115px · lh 0.98 · ls -0.025em

Know their buying power.

Weights

Switzer

300 Lightfooter links, light body, card descriptions

400 Regularbody

500 Mediumtitles, UI labels, nav

600 Semiboldsection titles, strong text

800 Extraboldthe “buying power” emphasis (.u)

Corner radii

--radius-sharp2pxRETIRED — not for buttons / cards

--radius-sm9pxsmall

--radius-md11pxmedium

--radius-lg14pxcards

--radius-xl16pxlarge panels / hero card

pill32px / 50%CTAs + avatars only

Strokes & borders

Border-based depth. Standard hairline is 1px; centre dividers go 0.5px. Opacity carries the weight, not thickness.

0.5px · center dividers (nav grid)

1px @ 8% · --color-line hairline

1px @ 10% · card border

1px @ 8% · section frame / campaign / spoke rule

1px @ 30% · header CTA outline

1px · accent — focus ring / ::selection ONLY (never chrome)

Components

Buttons

one CTA system · 32px pill · no square, no steel

Get started Talk to us Book a demo Book a demo See how it works

primary = real .cta-btn--primary (#ecebe6 fill) · ghost = .cta-btn--ghost · header chrome pill = .site-header__cta (13px). Hero + closing CTA always pair these. RETIRED: the steel .cta / .btn / sharp-2px square buttons — gone.

Cards — everything derives from the DRIP card

.card-glimpse is the canonical surface

Campaign Lab

DRIP card

The hero card chrome, as a shared shell — every premium feature card wears this surface. Translucent near-black, a top-lit glimmer hairline, film grain, a deep pool shadow, softer #d9d8d3 text, radius 16.

Surface card

The plain variant when the DRIP chrome is too much: 1px @ 9% hairline, --surface-2 fill, --radius-lg, flat — depth from the border, no shadow.

DRIP recipe (.card-glimpse): bg color-mix(#0a0a0c 90%) · radius 16 · glimmer border linear-gradient(150deg, #f7f7f7 17%→7%→8%) as a ::before mask-exclude ring · film-noise ::after @ 6% · pool shadow 0 44px 100px -54px rgba(0,0,0,.92) + inset top hairline · text #d9d8d3 (the softer DRIP white, cards only). Card labels: --text-sm, #d9d8d3 @ 56–84%.

Chips & dividers

data tints live inside product mockups only

Equifax · prescreen ● live

Section header

headline stands alone — NO eyebrow / kicker above it

Know their buying power.

Lead with the title. The muted paragraph reads --text-muted at --text-sub, one --gap-head-sub below — no label, no number, no uppercase mono kicker.