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.
