Style Guide
Colors
The core color palette used throughout the Travlo template.
Dark
#090909
--color-dark
Lime
#daff97
--color-lime
Green
#084d2b
--color-green
Cream
#f6efe6
--color-cream
Mint
#eaf3ef
--color-mint
White
#ffffff
--color-white
Body Text
#4a4a4a
--text-secondary
Typography
Font families and heading sizes used in the design system.
Heading Font
Clashdisplay
var(--font-heading)
Body Font
Manrope
var(--font-body)
Heading One (h1 Sample)
Heading Two
Heading Three
Heading Four
Body text is set at 20px using the Manrope font family with a line height of 1.5 and color #333333.
Buttons
Button variants available in the design system.
Spacing
Spacing tokens used for consistent padding and margins.
X-Large
--space-section-xl
120px
Large
--space-section-lg
96px
Medium
--space-section-md
72px
Small
--space-section-sm
56px
Border Radius
Border radius tokens for consistent rounded corners.
Small
12px
--radius-sm
Medium
16px
--radius-md
Large
20px
--radius-lg
Pill
999px
--radius-button