Design System Template Kit

A set of assets and guidelines for building a consistent and good user experience this design system is minimalist and exclusively optimized to include only essential elements, ensuring fast and efficient web design in Bricks

Foundations → Colors

The color palette with various color tones allows you to create a beautiful User Interface to match your website.

── Brand Colors

Primary Palette
These are your dominant colors

PRIMARY

SECONDARY

ACCENT

Text

── Base Colors

Background
Base color used for the background color of sections, cards

Background

── Neutral

Greyscale
Base color used for the background color of sections, cards

10%

20%

30%

40%

50%

Border
Base color used for divider, border, etc

Border

Foundations → FLUID Typography

Collection of essential typography components that form the backbone of the website’s design system. From fonts to styles, every element is crafted to ensure consistency, readability, and visual harmony

Font Style

Lato

Regular

Medium

Bold

0123456789
!@#$%^&*()-+
ABCDFGHIJKLMNOPQRSTUVWXYZ

abcdefghijkolmnopqrstuvwxyz

Playfair

Regular

Medium

Bold

0123456789
!@#$%^&*()-+
ABCDFGHIJKLMNOPQRSTUVWXYZ

abcdefghijkolmnopqrstuvwxyz

── Heading

HERO

Almost before we knew it, we had left the ground

LEAD

Almost before we knew it, we had left the ground

H1

Almost before we knew it, we had left the ground

H2

Almost before we knew it, we had left the ground

H3

Almost before we knew it, we had left the ground

H4

Almost before we knew it, we had left the ground

H5

Almost before we knew it, we had left the ground Almost before we knew it, we had left the ground

H6

Almost before we knew it, we had left the ground Almost before we knew it, we had left the ground

── Base

Body (16px)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet molestie nibh sit amet pretium. Mauris ut auctor eros. Etiam a libero pellentesque, placerat lectus in, sodales erat. Suspendisse posuere semper neque sed porttitor. Sed condimentum mi malesuada lorem auctor lacinia. Vestibulum elementum a lacus at rhoncus.

Tiny (14px)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet molestie nibh sit amet pretium. Mauris ut auctor eros. Etiam a libero pellentesque, placerat lectus in, sodales erat. Suspendisse posuere semper neque sed porttitor. Sed condimentum mi malesuada lorem auctor lacinia. Vestibulum elementum a lacus at rhoncus.

Mini (12px)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet molestie nibh sit amet pretium. Mauris ut auctor eros. Etiam a libero pellentesque, placerat lectus in, sodales erat. Suspendisse posuere semper neque sed porttitor. Sed condimentum mi malesuada lorem auctor lacinia. Vestibulum elementum a lacus at rhoncus.

Foundations → Button

Default