Marketing design system
Atoms
Foundations, brand assets, actions, icons, surfaces and labels.
00 / Foundations
The shared decisions
Color, typography, spacing, shape, and icons establish the system. Brand identity blue stays distinct from the darker blue used for readable actions.
Brand identity
--color-brand
Action
--color-accent
Action hover
--color-accent-hover
White
--color-white
Warm
--color-warm
Primary text
--color-text
Secondary text
--color-text-sec
Error
--color-error
Orange
--color-accent-orange
Purple
--color-accent-purple
Green
--color-accent-green
Pink
--color-accent-pink
Amber
--color-accent-amber
Red
--color-accent-red
Typography / Inter
Precision with personality.
Clear headings, comfortable body text, and visible labels.
Spacing
4px
8px
12px
16px
24px
32px
48px
64px
24px page gutters. Section padding: 64px mobile, 112px desktop. Site width: 1080px.
Icon scale
badge
sm
md
lg
display
12 / 16 / 20 / 24 / 32px. Stroke 1.8; small status marks use 2.5.
Actions and states
Tab to see focus states. Hover to see pointer states.
Surfaces and spacing
default radius / subtle elevation
panel radius / subtle elevation
large radius / subtle elevation
Icon containers
SMS notice
Message frequency varies. Message and data rates may apply. Reply STOP to opt out or HELP for help. See our Privacy Policy and SMS Terms.
Token register
All named tokens from the marketing stylesheet. CSS remains authoritative.
--color-brand
#2383E2
--color-bg
#FFFFFF
--color-white
#FFFFFF
--color-warm
#F7F6F3
--color-text
#37352F
--color-text-sec
#6F6F6F
--color-text-ter
#6F6F6F
--color-border
#E5E5E5
--color-border-light
rgba(0, 0, 0, 0.06)
--color-accent
#1A6BB8
--color-accent-hover
#165B9D
--color-accent-soft
rgba(35, 131, 226, 0.08)
--color-accent-med
rgba(35, 131, 226, 0.12)
--color-icon-bg
#F5F5F5
--color-hero-sub
#8A8986
--color-accent-orange
#D9730D
--color-accent-orange-soft
#FDF0E3
--color-accent-purple
#6940A5
--color-accent-purple-soft
#F0EBF8
--color-accent-green
#0F7B6C
--color-accent-green-soft
#E3F2EF
--color-accent-pink
#AD1A72
--color-accent-pink-soft
#F8E8F2
--color-accent-amber
#DFAB01
--color-accent-amber-soft
#FDF6E3
--color-accent-red
#E03E3E
--color-accent-red-soft
#FDECEA
--color-avatar-blue
#EBF3FC
--color-avatar-teal
#E3F2EF
--color-avatar-cream
#FDF6E3
--color-label
#6B6B6B
--color-border-hover
#D0D0CE
--color-control
#E9E9E7
--color-card-border
rgba(0, 0, 0, 0.1)
--color-error
#B42318
--container-site
1080px
--container-detail
720px
--container-intro
520px
--spacing-section-x
24px
--spacing-section-y
64px
--spacing-section-wide
112px
--spacing-card
28px
--radius-panel
16px
--shadow-surface-rest
0 4px 18px rgba(0,0,0,0.04), 0 2px 7.85px rgba(0,0,0,0.027), 0 0.8px 2.93px rgba(0,0,0,0.02), 0 0.175px 1.04px rgba(0,0,0,0.01)
--shadow-surface-hover
0 8px 32px rgba(0,0,0,0.06)
--shadow-card-rest
0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04)
--shadow-card-hover
0 2px 8px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.08)
--shadow-btn-primary-rest
0 0 0 3px rgba(35,131,226,0.15), 0 2px 8px rgba(35,131,226,0.25)
--shadow-btn-primary-hover
0 0 0 3px rgba(35,131,226,0.22), 0 6px 16px rgba(35,131,226,0.38)
--shadow-btn-ghost-rest
0 1px 3px rgba(0,0,0,0.04)
--shadow-btn-ghost-hover
0 2px 6px rgba(0,0,0,0.06)
--shadow-input-focus-ring
0 0 0 3px rgba(35,131,226,0.12)
--radius-input
9px
--radius-btn
10px
--radius-icon
11px
--radius-card
12px
--radius-card-lg
18px
--tracking-display
-1.5px
--tracking-page
-1.2px
--tracking-section
-0.8px
--tracking-card
-0.3px
--tracking-tier
-0.2px
--tracking-label
2.5px
--leading-display
1.05
--leading-page
1.08
--leading-snug
1.1
--leading-relaxed
1.7
--font-sans
var(--font-inter), -apple-system, system-ui, sans-serif