🎨 Brand Kit
Brand Guidelines
Everything you need to know about using Context's brand assets and identity.
Typography
Primary Font
Suisse
Desktop
H1
The quick brown fox
H2
The quick brown fox
H3
The quick brown fox
H4
The quick brown fox
H1: 64px / tracking-[-2%] / leading-[115%]
H2: 48px / tracking-[-1.5%] / leading-[125%]
H3: 32px / tracking-[-1%] / leading-[130%]
H4: 18px / tracking-[-0.5%] / leading-[135%]Colors
Primary Colors
White
bg-whiteSky Blue
bg-blue-500Black
bg-gray-900Green
bg-emerald-500Orange
bg-orange-500Purple
bg-purple-500Secondary Colors
Gray 100
#F3F4F6Gray 200
#E5E7EBGray 300
#D1D5DBGray 400
#9CA3AFGray 500
#6B7280Gray 600
#4B5563Accent Colors
Blue 50
#EFF6FFBlue 100
#DBEAFEBlue 200
#93C5FDBlue 300
#60A5FABlue 400
#3B82F6Blue 500
#2563EB
Brand Assets
Stylistic
Usage Guidelines
Spacing
Base unit: 4px (0.25rem)
Grid gap: 32px (2rem)
Section padding: 24px (1.5rem)
Base unit: 4px (0.25rem)
Grid gap: 32px (2rem)
Section padding: 24px (1.5rem)Border Radius
Default: 6px (rounded-md)
Large: 8px (rounded-lg)
Default: 6px (rounded-md)
Large: 8px (rounded-lg)
