Color Pallete
This style guide contains a set of standards for writing and designing this website content.
Brand Colors
A palette of colors that are used to represent your brand.
Pri – #ff5906
Sec – #295abd
Tertiary
Accent
Neutral Colors
A palette of colors that are used in your website.
Base
Neutral
Semantic Colors
A palette of colors denote standard value states (such as good, bad, warning and info).
Success
Danger
Warning
Info
Typography
Guidelines for typography styles and usage to represent your brand effectively.
Font Families
The primary and secondary font families used for headings & body text respectively.
Tiempos
Satoshi
Headings
Different heading levels used across the website.
Heading 1 (H1)
Heading 2 (H2)
Heading 3 (H3)
Heading 4 (H4)
Heading 5 (H5)
Heading 6 (H6)
Body Text
Guidelines for body text styles to ensure readability and consistency across the website.
To make things clearer, this placeholder text is designed to reflect real-world formatting. This version follows formatted patterns similar to how actual copy is structured on your website.
“Here’s how a quote appears when used in text—stylish, distinct, and ready to make an impact.”
Traditionally, placeholder text like Lorem Ipsum has been used for this purpose, but not everyone recognizes it, which can sometimes cause confusion. That’s why we use a more intuitive approach.
For example;
- this is bold text,
- this is italicized text.
🔗 This is a sample link shows how hyperlinks appear in your design. If you’re curious about what underlined text looks like, here’s what text looks like when underlined.
There are also other placeholder text alternatives, such as Hipster Ipsum, Zombie Ipsum, and Bacon Ipsum—while fun, they can sometimes be just as confusing.
Weight
Different font weights used for textual content.
Aa
Light 300
Aa
Regular 400
Aa
Bold 700
Buttons
Guidelines for button styles to maintain a consistent look and feel.
Brand Colors
A palette of colors used for button backgrounds to represent your brand.
Neutral Colors
A palette of neutral colors used for button backgrounds.
Semantic Colors
A palette of semantic colors used for button states (such as success, danger, warning, and info).
Sizes
Different sizes used for buttons to ensure consistency.