1. Colors

Brand

#E5731C

--orange

#FBFBFB

--eggshell

Neutrals

#060301

--black

#212121

--grey-600

#464646

--grey-500

#777777

--grey-400

#A4A4A4

--grey-300

#D3D3D3

--grey-200

#E7E7E7

--grey-100

#FFFFFF

--white

Functional

#1A00FF

--focus

#FF0000

--error

#0ABE00

--success

#E7E7E7

--border

2. Typography

h1 / --font-size-h1
40→56px · Light · -0.02em

The quick brown fox

h2 / --font-size-h2
32→44px · Light · -0.02em

The quick brown fox

h3 / --font-size-h3
28→36px · Light · -0.02em

The quick brown fox

h4 / --font-size-h4
20→28px · Light · -0.02em

The quick brown fox

h5 / --font-size-body-lg
16→20px · Regular

The quick brown fox

h6 / --font-size-caption
14px · Regular · +0.01em

The quick brown fox

body / --font-size-body-lg
16→20px · Light

The quick brown fox jumps over the lazy dog. Paragraph text at body-lg scale, light weight, used as the default body copy across the site.

--font-size-body-sm
12→14px · Light

The quick brown fox jumps over the lazy dog. Small body text used for captions, meta, and secondary copy.

--font-size-utility
14→18px · Regular

Button labels, nav links, UI text

a — link
orange · hover opacity

This is a text link

3. Buttons

.btn-primary — Default state · Hover (orange) · Disabled

Primary link

.btn-secondary — Text + rotating ↗ arrow · Hover (→) · Disabled

Secondary link

.btn-icon — Light variant · Dark variant · Disabled

light

dark

disabled

WP Block buttons: .wp-block-button__link and .is-style-secondary

WP Primary

WP Secondary

4. Form Fields

.form-input — Default · Focus (orange border) · Error state

This field is required.

.form-textarea — with character counter

0 / 500

.form-row — responsive two-column layout

5. Icons

arrow-cta

plus

close

chevron-right

chevron-left

chevron-down

menu

external-link

warning

instagram

linkedin

All icons use currentColor — wrap in any text-color class to tint them.

6. Spacing

--space-2xs 4→8px

--space-xs 8→12px

--space-sm 12→16px

--space-md 16→20px

--space-lg 20→28px

--space-xl 28→48px

--space-2xl 40→60px

--space-3xl 60→80px

--space-4xl 80→120px

7. Layout Utilities

.container — max-w-7xl, centered, horizontal padding

⟵ max-w-7xl · px-4 sm:px-6 lg:px-8 ⟶

.section — py-12 md:py-16 lg:py-20

.section — vertical padding at fluid scale

.card — white bg, shadow, rounded, overflow-hidden

Card Title

Card body text. This is a standard .card component with shadow and border-radius.