Join us
Join us

Style guide.

Welcome to the Style Guide, where you’ll find the foundation of the design system. This guide ensures consistency across all pages by defining key styles and reusable elements.

Most of the design properties—colors, spacing, typography, headings, buttons, and more—are stored in variables. This makes customization effortless: simply adjust the variables, and the changes will reflect throughout the project.

What you can customize:

  • 🎨 Colors – Update primary, secondary, and neutral tones.
  • 📏 Spacing – Modify margins, paddings, and layout gaps.
  • 🔠 Typography – Adjust fonts, sizes, weights, and line heights.
  • 🎯 Headings & Text Styles – Refine the look of titles, paragraphs, and labels.

By leveraging variables, you gain full control over the design system while maintaining visual harmony across the project. Dive in and make it your own! 🚀

Headings

Heading H1

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

Heading H2

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

Heading H3

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

Heading H4

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

Heading H5
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
Heading H6
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

Heading classes

Heading Large
Sample text helps you understand how real text may look.
Heading Medium
Sample text helps you understand how real text may look.
Heading Small
Sample text helps you understand how real text may look.
Heading H1
Sample text helps you understand how real text may look.
Heading H2
Sample text helps you understand how real text may look.
Heading H3
Sample text helps you understand how real text may look.
Heading H4
Sample text helps you understand how real text may look.
Heading H5
Sample text helps you understand how real text may look.
Heading H6
Sample text helps you understand how real text may look.

Other HTML Tags

All paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

All links

default

Text Link

Custom

Text Link
Text Link
All quotes
Block Quote
All Ordered Lists
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
All Unordered Lists
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
Rich text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Text Classes

Text Sizes
text-size-large

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

text-size-medium

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

text-size-regular

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

text-size-small

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

Text Styles

text-style-strikethrough

text-style-strikethrough

text-style-italic

text-style-italic

text-style-muted

text-style-muted

text-style-allcaps

text-style-allcaps

text-style-nowrap

text-style-nowrap

text-style-link

text-style-link

text-style-quote

Sample text is being used as a placeholder.

Text Weights

text-weight-light

text-weight-light

text-weight-normal

text-weight-normal

text-weight-medium

text-weight-medium

text-weight-semibold

text-weight-semibold

Button

button custom
Button TextButton Text

Colors

Colors
Forest shadow
Urban Fog
Sage Mist
Soft Stone
Pure White
Mint Cloud
Ash Green
Deep Charcoal
Slate Gray
Midnight Forest
Eucalyptus