Style Guide

Take your web projects to the next level with this free, comprehensive, and easy-to-use Style Guide, crafted for developers and designers who want seamless responsiveness and scalability without the hassle.

Read Full Documentation

Color

Defines the core colors used in the design system, ensuring a cohesive and consistent look across all elements.

--primary

--primary

--color-primary-hover

--color-primary-hover

--color-secondary

--color-secondary

--color-secondary-hover

--color-secondary-hover

--color-tertiary

--color-tertiary

--color-heading

--color-heading

--color-text

--color-text

--color-text-muted

--color-text-muted

--color-text-dark

--color-text-dark

--color-text-light

--color-text-light

--color-primary-bg

--color-primary-bg

--color-secondary-bg

--color-secondary-bg

--color-border

--color-border

Typography

Standardizes font styles, sizes, and hierarchy for clear and accessible text presentation. This heading uses the clamp function to create a responsive size.

.h1 / --h1

This is a demo headline 01

.h2 / --h2

This is a demo headline 02

.h3 / --h3

This is a demo headline 03

.h4 / --h4

This is a demo headline 04

.h5 / --h5

This is a demo headline 05

.h6 / --h6

This is a demo headline 06

Texts Sizes

Defines the scale for headings, body text, and captions, ensuring readability. This text uses the clamp function to create a responsive size.

.text-xxl / --text-xxl

Here goes your text ... Select any part of your text to access the formatting toolbar.

.text-xl / --text-xl

Here goes your text ... Select any part of your text to access the formatting toolbar.

.text-l / --text-l

Here goes your text ... Select any part of your text to access the formatting toolbar.

.text-m / --text-m

Here goes your text ... Select any part of your text to access the formatting toolbar.

.text-s / --text-s

This is a demo 05

.text-xs / --text-xs

This is a demo 06

Buttons

Details styles for interactive buttons, including size, padding, colors, and hover states.

I am a buttonI am a buttonI am a button

Border Radius

Specifies the curvature of corners for buttons, cards, and other elements to maintain consistency.

--radius-xs

--radius-s

--radius-m

--radius-l

--radius-xl

--radius-xxl

--radius-50

Width

Defines the core colors used in the design system, ensuring a cohesive and consistent look across all elements.

--width-xs

--width-s

--width-m

--width-l

--width-xl

--width-xxl

--container-width

Space

Outlines standard width options for containers and layouts for responsive design.

--space-7xx

--space-6xx

--space-5xs

--space-4xs

--space-3xs

--space-xxs

--space-xs

--space-s

--space-m

--space-l

--space-lx

--space-xxl

--space-3xxl

--space-4xxl

--space-5xxl

--space-6xxl

Grid

Available Grid Variables
This style guide includes 11 predefined grid variables for flexible layouts. You can use the following grid variables to create layouts with 2 to 12 columns:

--grid-2, --grid-3, --grid-4, --grid-5, --grid-6, --grid-7, --grid-8, --grid-9, --grid-10, --grid-11, --grid-12

--grid-2

--grid-2

--grid-3

--grid-3

--grid-3

--grid-4

--grid-4

--grid-4

--grid-4

--grid-5

--grid-5

--grid-5

--grid-5

--grid-5

--grid-6

--grid-6

--grid-6

--grid-6

--grid-6

--grid-6

Flex

Pre-designed layouts using flexbox.

2 Column

2 Column

3 Column

3 Column

3 Column

4 Column

4 Column

4 Column

4 Column

5 Column

5 Column

5 Column

5 Column

5 Column

6 Column

6 Column

6 Column

6 Column

6 Column

6 Column

Section Padding

Provides guidelines for the inner spacing within sections to maintain proper proportions.

.section-space-l / --section-space-l

.section-padding-m / --section-padding-m

.section-padding-s / --section-padding-s

.section-padding-xs / --section-padding-xs