Style Guide

This style guide page contains styles and components used through the website. You can change any style from this page and it will be updated throughout the site.

Typography

Various font dimensions employed on the website.

Large h1

Aheader.

Aheader.

h1

This is a header.

This is a header.

h2

This is a header.

This is a header.

h3

This is a header.

h4

This is a header.

h5
This is a header.
h6
This is a header.
Large Paragraph

Icon Squad is a collection of custom illustration characters with the aim of expressing culture, personality, and individuality.

Paragraph

Icon Squad is a collection of custom illustration characters with the aim of expressing culture, personality, and individuality.

Small Paragraph

Icon Squad is a collection of custom illustration characters with the aim of expressing culture, personality, and individuality.

Quote

Icon Squad is a collection of custom illustration characters with the aim of expressing culture, personality, and individuality.

List


  • All buttons now have tooltips

  • Spell checker number issue fixed

  • Heading line height is fixed

Figure with caption

Rich Text

This is a header.

The wealthy text component permits the creation and styling of headings, paragraphs, blockquotes, images, and videos all in a singular location rather than adding and formatting them separately. Simply double-click to effortlessly generate content.

Icon Squad is a collection of custom illustration characters with the aim of expressing culture, personality, and individuality. Through hand-drawn hairstyles, facial expressions, and clothing, the Icon Squad embraces what it means to be on common ground, but with a sense of individuality.

Latest updates


  • Heading line height is fixed

  • All buttons now have tooltips

  • Spell checker number issue fixed

Colors

The different weights of greys and colours used throughout the website.

Buttons

Button used in this website as a CTA, with various style variations.

Primary
Grey
SmL Primary
SmL Blue
SmL Light
SmL Outline

Grids

How the spacing roles relate to the hierarchy of user interface elements.

4 Grid
3 Grid
2 Grid
2-1 GRID
1-2 Grid
1-2 Grid

Spacers

How the spacing roles relate to the hierarchy of user interface elements.

16 px
24 px
32 px
48 PX
64 PX
80 PX
96 PX
128 PX

Forms

Default form field styles for all forms used on the site.

I'm a radio button

I'm a checkbox

Tabs

This is just a basic style guide, and you can customize it to fit your specific needs. For example, you may want to add more buttons or tabs, or you may want to change the wording of the paragraphs. You may also want to include additional information, such as your brand's mission statement or values.

Monthly drops

Generated designs

Community giveawat

Monthly drops

Generated designs

Community giveawat

© Built by moisedavid. Powered by Framer.

© Built by moisedavid. Powered by Framer.