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
#333333
--color-body
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-xlarge
140px
Large
--space-large
120px
Medium
--space-medium
100px
Small
--space-small
80px
X-Small
--space-xsmall
60px
Border Radius
Border radius tokens for consistent rounded corners.
Full
50px
--radius-full
Button
30px
--radius-button
Large
16px
--radius-large
Card
12px
--radius-card