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

#151515

Secondary

#707070

Auxiliary color 1

#9e9e9e

Auxiliary color 2

#e6e6e6

Auxiliary color 3

#444444

Typography

A beautiful geometric sans: The official typeface for brand automation company outfit.io. Inspired by the ligature-rich outfit wordmark, Outfit.io is delighted to release it's own type family. The Outfit typeface links the Outfit written voice to Outfit product marks; on brand by default.

H1 Heading 1

Inter Font

Size: Desktop - 2.5 REM

H2 Heading 2

Inter Font

Size: Desktop - 2 REM

H3 Heading 3

Inter Font

Size: Desktop - 1.75 REM

H4 Heading 4

Inter Font

Size: Desktop - 1.5 REM

H5 Heading 5

Inter Font

Size: Desktop - 1.25 REM

H6 Heading 6

Inter Font

Size: Desktop - 1 REM

Text - Normal

Our passion for designing websites stems from the desire to create engaging,
user-friendly experiences that not only captivate visitors but also effectively
communicate a brand's message.

Size: Desktop - 1 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

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

Created by: smartpixel