Get Started
Home / Style Guide
Design System

Style Guide

The complete design language for Saasix — colors, typography, buttons, and icons that power every interface.

6
Brand colors defining the visual identity.
3
Button variants for every interaction state.

Colors

Primary One #5149D0
Primary Two #30F8F8
Secondary #BE85FF
Body Color #060606
Icon Color #CFCFCF
Neutral Color #D7B5FF

Typography

Fonts

Manrope

Heading 1

H1 — Manrope — 700 — Manrope

Heading 2

H2 — Manrope — 600 — Manrope

Heading 3

H3 — Manrope — 600 — Manrope

Heading 4

H4 — Manrope — 600 — Manrope

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.

Paragraph Large — Manrope — 400 — Manrope

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.

Paragraph Small — Manrope — 400 — Manrope

Buttons

Primary Button Primary Button (Manrope — 600 — Manrope)
Secondary Button Secondary Button (Manrope — 600 — Manrope)

Icons