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

Black/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

── Heading

HERO

I am a heading

LEAD

I am a heading

H1

I am a heading

H2

I am a heading

H3

I am a heading

H4

I am a heading

H5

I am a heading

H6

I am a heading

── Base

P (18px)

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.

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