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 Get the Free Style Guide Now

Color Typography Buttons Border Radius Shadow Icon Widht Space Grid Flex Section Padding

Color

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

--color-primary

--color-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

Primary Color

The main brand color applied to buttons, links, and key components.

--color-primary

--color-primary

Tints

Lighter variations of the primary color for backgrounds and highlights.

--color-primary-tint-9

--color-primary-tint-8

--color-primary-tint-7

--color-primary-tint-6

--color-primary-tint-5

--color-primary-tint-4

--color-primary-tint-3

--color-primary-tint-2

--color-primary-tint-1

Secondary Color

A complementary color used for accents and less prominent elements.

--color-secondary

--color-secondary

Tints

Lighter versions of the secondary color for subtle backgrounds or highlights.

--color-secondary-tint-9

--color-secondary-tint-8

--color-secondary-tint-7

--color-secondary-tint-6

--color-secondary-tint-5

--color-secondary-tint-4

--color-secondary-tint-3

--color-secondary-tint-2

--color-secondary-tint-1

Tertiary Color

A complementary color used for accents and less prominent elements.

--color-tertiary

--color-tertiary

Tints

Lighter versions of the secondary color for subtle backgrounds or highlights.

--color-secondary-tint-9

--color-secondary-tint-8

--color-secondary-tint-7

--color-secondary-tint-6

--color-secondary-tint-5

--color-secondary-tint-4

--color-secondary-tint-3

--color-secondary-tint-2

--color-secondary-tint-1

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

This is a demo 01

.text-xl / --text-xl

This is a demo 02

.text-l / --text-l

This is a demo 03

.text-m / --text-m

This is a demo 04

.text-s / --text-s

This is a demo 05

.text-xs / --text-xs

This is a demo 06

Body Text

The default style for paragraphs and content blocks, optimized for clarity. This text uses the clamp function to create a responsive size.

.body-text-s / body-text-s

Lorem ipsum dolor sit amet netus tincidunt vulputate nibh dictum class fames dignissim laoreet ac nostra enim tortor pretium ridiculus

.body-text-m / body-text-m

Lorem ipsum dolor sit amet netus tincidunt vulputate nibh dictum class fames dignissim laoreet ac nostra enim tortor pretium ridiculus

.body-text-l / body-text-l

Lorem ipsum dolor sit amet netus tincidunt vulputate nibh dictum class fames dignissim laoreet ac nostra enim tortor pretium ridiculus

.font-200

Lorem ipsum dolor sit amet netus tincidunt vulputate nibh dictum class fames dignissim laoreet ac nostra enim tortor pretium ridiculus

.font-300

Lorem ipsum dolor sit amet netus tincidunt vulputate nibh dictum class fames dignissim laoreet ac nostra enim tortor pretium ridiculus

.font-400

Lorem ipsum dolor sit amet netus tincidunt vulputate nibh dictum class fames dignissim laoreet ac nostra enim tortor pretium ridiculus

.font-500

Lorem ipsum dolor sit amet netus tincidunt vulputate nibh dictum class fames dignissim laoreet ac nostra enim tortor pretium ridiculus

.font-600

Lorem ipsum dolor sit amet netus tincidunt vulputate nibh dictum class fames dignissim laoreet ac nostra enim tortor pretium ridiculus

.font-700

Lorem ipsum dolor sit amet netus tincidunt vulputate nibh dictum class fames dignissim laoreet ac nostra enim tortor pretium ridiculus

.font-800

Lorem ipsum dolor sit amet netus tincidunt vulputate nibh dictum class fames dignissim laoreet ac nostra enim tortor pretium ridiculus

.font-900

Lorem ipsum dolor sit amet netus tincidunt vulputate nibh dictum class fames dignissim laoreet ac nostra enim tortor pretium ridiculus

Buttons

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

I am a button I am a button I am a button I am a button I am a button

I am a buttonI am a buttonI am a button

I am a button I am a button I am a button I am a button I 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

Shadow

Defines the depth and layering effects for cards, modals, and other components.

--shadow-xs

--shadow-s

--shadow-m

--shadow-l

--shadow-xl

Icon

Establishes the style and size of icons, ensuring visual alignment with the overall design.

.icon

.icon .icon-outline

.icon .icon--filled

--icon-xs

--icon-s

--icon-m

--icon-l

--icon-xl

--icon-xxl

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-padding-l / --section-padding-l

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

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

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