Style Guide

The living component library for the Coinbax marketing site. Typography, color, and interface components, all on the brand system.

Typography

Heading 1

h1 · Suisse Intl · 500 · clamp 40–64px · 1.2

Heading 2

h2 · Suisse Intl · 500 · clamp 32–48px · 1.2

Heading 3

h3 · Suisse Intl · 500 · clamp 24–32px · 1.2

Heading 4

h4 · Suisse Intl · 500 · 24px · 1.2
Heading 5
h5 · Suisse Intl · 500 · 18px · 1.2
Heading 6
h6 · Suisse Intl · 500 · 16px · 1.2

Body copy

p · Suisse Intl · 400 · 16px · 1.7
Caption / meta textcaption · Suisse Intl · 14px

Color

Gray — Mist / Stone / Carbon

#FAFAFAMIST 50
#F1F3F6MIST 100
#D8DDE0MIST 200
#BBC5C7MIST 300
#8E9396STONE 500
#56575ASTONE 700
#222126CARBON 800
#1D1C21CARBON 850
#17161BCARBON 900
#101014CARBON 950

Accents

#FF5705ORANGE BURSTPrimary actions, active states
#00D26AEMERALDSuccess, completion
#FFB800HARVESTWarnings, highlights
#F50538CRIMSONErrors, urgent
#1A6BFFCOBALTInformational, links

Buttons

Variants

Base class .btn plus a variant. Primary is the brand baseline (black background, inverts in dark theme).

Primary.btn .btn-primary
Secondary.btn .btn-secondary
Blue.btn .btn-blue

Sizes

Size modifiers apply to any variant. Baseline (no modifier) is 40px.

Small.btn-sm · 32px · 13px
Base(base) · 40px · 14px
Large.btn-lg · 48px · 16px
Extra Large.btn-xl · 56px · 18px

Matrix

Every variant at every size.

Primary
SmallBaseLargeExtra Large
Secondary
SmallBaseLargeExtra Large
Blue
SmallBaseLargeExtra Large
← Back to Home