Style Guide

Explore the core elements that define our visual and design identity. This guide outlines our principles, standards, and aesthetics to ensure a cohesive and impactful presence.

Colors

Choosing clean colors typically refers to selecting vibrant, pure hues that evoke a sense of freshness and clarity.
These colors often feature minimal muddiness or saturation, allowing them to appear crisp and appealing.

Primary
#191919
Secondary
#666666
Auxiliary color 1
#000000 (50%)
Auxiliary color 2
#e7e7e7
Auxiliary color 3
#ebebeb
Button bg
#ececec

Typography

Inter Tight is a specialized version of Inter with tighter spacing, for display usage. Inter is a variable font family carefully crafted & designed for computer screens.

H1 Heading 1

Inter Tight

Size: Desktop - 3.0 rem
H2 Heading 2

Outfit Font

Size: Desktop - 2.00 rem
H3 Heading 3

Outfit Font

Size: Desktop - 1.50 rem
H4 Heading 4

Outfit Font

Size: Desktop - 1.30 rem
H5 Heading 5
Outfit Font
Size: Desktop - 1.00 rem
H6 Heading 6
Outfit Font
Size: Desktop - 1.00 rem

Text - Normal

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.

Size: Desktop - 1.00 rem

Rich text

Here you can see and change the form component

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