Style Guide
Explore Bacaro’s typography, colour system, buttons, components and reusable layout styles.
Brand Accent primary color
Brand Accent secondary color
Primary 10
Primary 50
Primary 100
Primary 200
Primary 300
Primary 400
Primary 500
Primary 600
Primary 700
Primary 800
Primary 900
Primary 950
Secondary 10
Secondary 50
Secondary 100
Secondary 200
Secondary 300
Secondary 400
Secondary 500
Secondary 600
Secondary 700
Secondary 800
Secondary 900
Secondary 950
Neutral 0
Neutral 50
Neutral 100
Neutral 200
Neutral 300
Neutral 400
Neutral 500
Neutral 600
Neutral 700
Neutral 800
Neutral 900
Neutral 950
Body Background
Body Background Dark
Light Subtle
Light Base
Light Strong
Dark Subtle
Dark Base
Dark strong
Headings
H1 Base Heading
H2 Base Heading
H3 Base Heading
H4 Base Heading
H5 Base Heading
H6 Base Heading
Custom Headings
Heading Custom / is 2XLarge
Heading Custom / is XLarge
Heading Custom / is Large
Heading Custom / is Medium
Heading Custom / is Small
Heading Custom / is XSmall
Heading Custom / is 2XSmall
Heading bold
Heading Custom / is 2XLarge
Heading Custom / is XLarge
Heading Custom / is Large
Heading Custom / is Medium
Heading Custom / is Small
Heading Custom / is XSmall
Heading Custom / is 2XSmall
Explore
Use this paragraph style for standard body copy. It’s optimized for readability, spacing, and long-form content across pages and CMS templates.
Explore
Use this variant for supporting descriptions, captions, and secondary content where you want a slightly different rhythm.
Use this variant for supporting descriptions, captions, and secondary content where you want a slightly different rhythm.
Use this variant for supporting descriptions, captions, and secondary content where you want a slightly different rhythm.
Explore
Use bold paragraphs for emphasis - introductions, key takeaways, and short statements that should stand out.
Use bold paragraphs for emphasis - introductions, key takeaways, and short statements that should stand out.
Use bold paragraphs for emphasis - introductions, key takeaways, and short statements that should stand out.
Explore
Considered details for memorable nights
Rich Text Block
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Use this paragraph style for standard body copy. It’s optimized for readability, spacing, and long-form content across pages and CMS templates. Use this paragraph style for standard body copy. It’s optimized for readability, spacing, and long-form content across pages and CMS templates.
Block quote
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
Code
Columns
With Fill
Column 1
Column 2
Column 2
Column 3
Column 3
Column 3
Column 4
Column 4
Column 4
Column 4
Column 30
Column 70
Column 40
Column 60
Flex
Flex
Flex Row
Flex Col
Flex Wrap
Explore
Max W15
Max W20
Max W30
Max W40
Max W48
Max W56
Max W64
Max W72
Max W72
BG Colors
Subtle
Base
Strong
dark Subtle
Dark base
Dark strong
Subtle secondary
Base secondary
Strong secondary
dark Subtle secondary
Dark base secondary
Dark strong secondary
Transparent
Tab content example
