Style Guide
Brand Palette
Colors
Your site's color palette is thoughtfully curated to provide a rich visual experience that aligns with your brand's identity. It includes shades across various color categories, each chosen for aesthetic impact and functional versatility. The following colors and shades are available for this project.
Primary
Secondary
Tertiary
Base
Neutral
Color Relationships
Text
Auto Color Relationships
Sample heading
This is what text will look like on ultra light background areas. You can also control link color relationships and there's an example button below.
Sample heading
This is what text will look like on light background areas. You can also control link color relationships and there's an example button below.
Sample heading
This is what text will look like on dark background areas. You can also control link color relationships and there's an example button below.
Sample heading
This is what text will look like on ultra dark background areas. You can also control link color relationships and there's an example button below.
Cards & Icons
Light Cards
Media Card
Here goes your text ... Select any part of your text to access the formatting toolbar.
Avatar Card
Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready.
dark cards
Media Card
Here goes your text ... Select any part of your text to access the formatting toolbar.
Avatar Card
Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready.
Headings AND Text
Typography
Primary Heading:
Upstage Custom Font
Upstage Custom Font, is a bold and modern sans-serif font. Its geometric design and uniform thickness make it stand out, perfect for headlines or anywhere you want to make a strong visual impact. Despite its boldness, Upstage maintains excellent legibility, making it a versatile choice for various design projects.
Body Font
Montserrat is a modern, geometric sans-serif typeface inspired by the signs and monuments of Buenos Aires. Its clean and unornamented design makes it highly versatile and readable, suitable for both headings and body text. With a wide range of weights, Montserrat can lend a contemporary, minimalist aesthetic to a variety of design projects.
The quick brown fox jumps over the lazy dog
h1
The quick brown fox jumps over the lazy dog
h2
The quick brown fox jumps over the lazy dog
h3
The quick brown fox jumps over the lazy dog
h4
The quick brown fox jumps over the lazy dog
h5
The quick brown fox jumps over the lazy dog
h6
The quick brown fox jumps over the lazy dog
h1 & L
This is large placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.
The quick brown fox jumps over the lazy dog
h2 & m
This is default placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.
The quick brown fox jumps over the lazy dog
h3 & s
This is small placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.
Content Width & Spacing
General Spacing
Content Width
Grid Gap
Card Gap
Content Gap
Default Section Padding
Container Gap