Style guide starter

This is just a style created by Ahmed Al-kheerow

Colors

Start by setting up your colors to keep them consistent across your website. Whether you're using the 60-30-10 rule or want to use a bigger palette, this section will hep you defining all your colours.

60-30-10 Rule

Primary

60%

Secondary

30%

Accent

10%

FULL PALETTE

50

100

200

300

400

500

600

700

800

900

950

Typography

Now that your colors are set, you can move to picking your fonts and set up your text styles for your whole project.

HEADINGS & SUBTITLES

Aa

Outfit

+

Font family

BODY TEXT

Aa

Inter

+

Font family

HEADLINES

This is Heading 1

This is Heading 2

This is Heading 3

This is Heading 4

Big Side text

Text v. large

Text Large

Text Medium

Text Small

Paragraph

V.Small

Small

Links

Set up your links styles for different sections and usages below.

Buttons

Now that your colors are set, you can move to picking your fonts and set up your text styles for your whole project.

Playground

A space to build and list your own components using the styles you've set up above.