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.

Primary

(XS)

Primary

(XL)

Primary

(XXL)