STAFFIO — Styleguide

Typography

Headings

The crazy frog jumps over the lazy dog and something should happen but doesn't. Fortunately for the frog, that wasn't a cat

Font weight: Medium | Font size: 72px | Line height: 100% | Letter spacing: -3%

The crazy frog jumps over the lazy dog and something should happen but doesn't. Fortunately for the frog, that wasn't a cat

Font weight: Medium | Font size: 50px | Line height: 100% | Letter spacing: -2%

The crazy frog jumps over the lazy dog and something should happen but doesn't. Fortunately for the frog, that wasn't a cat

Font weight: Medium | Font size: 40px | Line height: 100% | Letter spacing: -2%

The crazy frog jumps over the lazy dog and something should happen but doesn't. Fortunately for the frog, that wasn't a cat

Font weight: Medium | Font size: 32px | Line height: 100% | Letter spacing: -2%

The crazy frog jumps over the lazy dog and something should happen but doesn't. Fortunately for the frog, that wasn't a cat

Font weight: Medium | Font size: 24px | Line height: 100% | Letter spacing: -1%

The crazy frog jumps over the lazy dog and something should happen but doesn't. Fortunately for the frog, that wasn't a cat

Font weight: Medium | Font size: 20px | Line height: 100% | Letter spacing: 0%

Labels

The crazy frog jumps over the lazy dog and something should happen but doesn't. Fortunately for the frog, that wasn't a cat

Font weight: Medium | Font size: 16px | Line height: 100% | Letter spacing: 0%

The crazy frog jumps over the lazy dog and something should happen but doesn't. Fortunately for the frog, that wasn't a cat

Font weight: Medium | Font size: 14px | Line height: 120% | Letter spacing: 0%

The crazy frog jumps over the lazy dog and something should happen but doesn't. Fortunately for the frog, that wasn't a cat

Font weight: Medium | Font size: 12px | Line height: 100% | Letter spacing: 0%

Paragraphs

The crazy frog jumps over the lazy dog and something should happen but doesn't. Fortunately for the frog, that wasn't a cat

Font weight: Regular | Font size: 18px | Line height: 140% | Letter spacing: 0%

The crazy frog jumps over the lazy dog and something should happen but doesn't. Fortunately for the frog, that wasn't a cat

Font weight: Regular | Font size: 16px | Line height: 140% | Letter spacing: 0%

The crazy frog jumps over the lazy dog and something should happen but doesn't. Fortunately for the frog, that wasn't a cat

Font weight: Regular | Font size: 14px | Line height: 140% | Letter spacing: 0%

The crazy frog jumps over the lazy dog and something should happen but doesn't. Fortunately for the frog, that wasn't a cat

Font weight: Regular | Font size: 12px | Line height: 140% | Letter spacing: 0%

Colors

primary

purple#7952DF

yellow-green#D8FA50

white#FFFFFF

ghost-white#F9FAFF

alice-blue#F1F2FF

periwinkle#CCCCE9

secondary

deep-violet#1E0A52

twilight-blue#5F5F86

gradients

gradient-1#1A084B#4A24A5

gradient-2#F3F4FF#FFFFFF

gradient-3#FFFFFF#D8FA50

gradient-4#E7EDFF#FAFAFF

gradient-5#960202#5C0000

Buttons

Type

normal

disabled

Properties

Primary Large

| Padding: 24px | Font weight: Medium | Font size: 16px | Display: flex items-center justify-center gap-2.5

WARNING! In order to change the background you need to use : bg-none! *:first:bg-...! That's because the gradient has been set as a background image and it covers the button's own background color

Outlined Large

| Padding: 24px | Font weight: Medium | Font size: 16px | Display: flex items-center justify-center gap-2.5

Primary Small

| Padding: ↕14px ↔24px | Font weight: Medium | Font size: 16px | Display: flex items-center justify-center gap-2.5

WARNING! In order to change the background you need to use : bg-none! *:first:bg-...! That's because the gradient has been set as a background image and it covers the button's own background color

Outlined Small

| Padding: ↕14px ↔24px | Font weight: Medium | Font size: 16px | Display: flex items-center justify-center gap-2.5

Primary Small Round

| Padding: ↕14px ↔24px | Font weight: Medium | Font size: 16px | Display: flex items-center justify-center gap-2.5

WARNING! In order to change the background you need to use : bg-none! *:first:bg-...! That's because the gradient has been set as a background image and it covers the button's own background color

Outlined Small Round

| Padding: ↕14px ↔24px | Font weight: Medium | Font size: 16px | Display: flex items-center justify-center gap-2.5

Square Arrow-UP

| Square size: 60px | Icon size: 32px

WARNING! Pay attention to the fact that the arrow icon is bigger than you may expect. The svg itself has its own paddings If you want to check it out use: [&>span>svg]:bg-black/20

Square Arrow-LEFT

| Square size: 60px | Icon size: 32px

Square Arrow-DOWN

| Square size: 60px | Icon size: 32px

Square Arrow-RIGHT

| Square size: 60px | Icon size: 32px

Circle Arrow-UP

| Circle Size: 80px | Icon size: 40px

Circle Arrow-LEFT

| Circle Size: 80px | Icon size: 40px

Circle Arrow-DOWN

| Circle Size: 80px | Icon size: 40px

Circle Arrow-RIGHT

| Circle Size: 80px | Icon size: 40px

Any button can be changed on the bg-, text- ← (same for the icon), gap-, px-, py-, etc.

Just keep in mind to use ! after each style className and do NOT forget to use :enabled while using hover: in order to leave disabled buttons in peace.

Example: text-yellow-green! hover:enabled:text-purple!. And just like this for ANY property excluding the only exception with the background of 1 type of buttons (read warnings)