Foundations
Typography defines the visual style of text across the design system. It ensures consistency, readability, and a cohesive brand identity. This section outlines the primary fonts, their usage, and hierarchy for headings, body text, and other elements.
Typography
Font
Font refers to the specific typeface used throughout the design system. It plays a key role in shaping the visual identity, enhancing readability, and maintaining consistency across all text elements.
Accent
Preview
Heading font
variable
Hubot Sans Condensed
A well-crafted typeface as the fingerprint of great design
A well-crafted typeface as the fingerprint of great design
a b c d e f g h i j k l m n o p q r s t u v x y z
a b c d e f g h i j k l m n o p q r s t u v x y z
0 1 2 3 4 5 6 7 8 9
Body Font
variable
DM Sans
A well-crafted typeface is more than just a collection of letters—it is the fingerprint of great design, carrying within it the essence of a brand, a message, and a mood. Just as every fingerprint is unique, a typeface imprints a distinct identity onto a digital or physical space, shaping the way users perceive and engage with content.
The choice of type is not arbitrary; it is a deliberate act of design that influences trust, readability, and emotion. A masterfully designed typeface can evoke nostalgia, inspire confidence, or even challenge conventions. It speaks before words are even read, setting the tone for an entire experience in subtle yet profound ways.
The choice of type is not arbitrary; it is a deliberate act of design that influences trust, readability, and emotion. A masterfully designed typeface can evoke nostalgia, inspire confidence, or even challenge conventions. It speaks before words are even read, setting the tone for an entire experience in subtle yet profound ways.
A B C D E F G H I J K L M N O P Q R S T U V X Y Z
a b c d e f g h i j k l m n o p q r s t u v x y z
0 1 2 3 4 5 6 7 8 9
Color
Foundation colors is a set of variables that should be applied to elements classes. Update colors by selecting an element (style panel) or in the variables panel
Color Variable
Primary Accent
100
#e68b84
90
#1e2326
80
#002b3a
70
#9adbe8
60
#b6bbbf
50
#eb5e22
40
#ffbd70
30
#ffde9e
20
#f4f4f2
10
#ffffff
Accent Secondary
100
#e68b84
90
#1e2326
80
#002b3a
70
#9adbe8
60
#b6bbbf
50
#eb5e22
40
#ffbd70
30
#ffde9e
20
#f4f4f2
10
#ffffff
Neutral inverse
100
#e68b84
90
#1e2326
80
#002b3a
70
#9adbe8
60
#b6bbbf
50
#eb5e22
40
#ffbd70
30
#ffde9e
20
#f4f4f2
10
#ffffff
neutral primary
100
#e68b84
90
#1e2326
80
#002b3a
70
#9adbe8
60
#b6bbbf
50
#eb5e22
40
#ffbd70
30
#ffde9e
20
#f4f4f2
10
#ffffff
amber
100
#e68b84
90
#1e2326
80
#002b3a
70
#9adbe8
60
#b6bbbf
50
#eb5e22
40
#ffbd70
30
#ffde9e
20
#f4f4f2
10
#ffffff
blue
100
#e68b84
90
#1e2326
80
#002b3a
70
#9adbe8
60
#b6bbbf
50
#eb5e22
40
#ffbd70
30
#ffde9e
20
#f4f4f2
10
#ffffff
cyan
100
#e68b84
90
#1e2326
80
#002b3a
70
#9adbe8
60
#b6bbbf
50
#eb5e22
40
#ffbd70
30
#ffde9e
20
#f4f4f2
10
#ffffff
Text Color
primary color
text-secondary
text-primary-accent
Background Color
Accent Primary
Variable
white
Accent Secondary
Variable
white
Primary
Variable
white
Secondary
Variable
white
Spacing
Spacing defines the consistent gaps and padding used throughout the design system to ensure clarity, balance, and visual harmony. It helps maintain a structured layout across different screen sizes.
Fluid size
Defines responsive element sizing.
Variable
Value
Preview
size-4
0.25rem
size-6
0.375rem
size-8
0.5rem
size-10
0.625rem
size-12
0.75rem
size-14
0.875rem
size-16
1rem
size-18
1.125rem
size-20
1.25rem
size-22
1.375rem
size-24
1.5rem
size-26
1.625rem
size-28
1.75rem
size-30
1.875rem
size-32
2rem
size-34
2.125rem
size-36
2.25rem
size-38
2.375rem
size-40
2.5rem
size-42
2.625rem
size-48
3rem
size-52
3.25rem
size-56
3.25rem
size-64
3.5
size-72
4rem
size-80
4.5rem
size-96
6rem
size-128
8rem
Fixed size
Responsive size.
Variable
Preview
8
12
16
18
20
24
32
36
40
48
56
64
72
80
Gap
Set of variables used for grid and flex layouts.
Variable
Preview
gap-xs
gap-sm
gap-md
gap-lg
gap-xl
gap-xxl
Border
Borders define the outline of elements, creating visual separation and emphasis within the design. Consistent border styles help maintain a cohesive look and feel across the interface.
Small
Variable
radius-sm
medium
Variable
radius-md
large
Variable
radius-lg
rounded
Variable
rounded
Icons
Icons are visual symbols that enhance usability by providing quick recognition for actions, status, or features. Consistent sizing ensures clarity and balance across the interface.
Small
Variable
icon-sm
Medium
Variable
icon-md
Large
Variable
icon-lg
Icon / with background
Icons with background are used to draw more attention to the icon and create a clear visual container. This style is suitable for buttons, interactive elements, or when an icon needs higher visibility against various backgrounds.
Small
Class
icon-wrapper
icon-sm
Medium
Class
icon-wrapper
icon-md
Large
Class
icon-wrapper
icon-lg
Components
Typography
Typography components define the hierarchy of text styles such as headings, paragraphs, and captions. They ensure clarity and readability in every context.
Capitalization
Capitalization defines the letter case used to establish visual hierarchy and emphasis. Uppercase is often used for buttons, labels, or acronyms to create distinction, while standard sentence case is preserved for body content to ensure maximum readability and natural reading flow.
Accent
Preview
uppercase
uppercase text
normal text
normal text
Heading
Headings help organize content by indicating levels of importance and structure. They make it easier for users to scan and understand the information on a page.
Accent
Preview
text-9xl
text-9xl
text-8xl
text-8xl
text-7xl
text-7xl
text-6xl
text-6xl
text-5xl
text-5xl
text-4xl
text-4xl
text-3xl
text-3xl
text-2xl
text-2xl
text-xxl
text-xxl
text-xl
text-xl
text-lg
text-lg
text-base
text-base
text-sm
text-sm
Text alignment
Text alignment controls the structure and flow of information. Left alignment is the standard for optimal readability in long texts, while center or right alignment is strategically used for headlines, captions, or data to achieve visual balance and specific emphasis.
Accent
Preview
Left
Text body medium
Center
Text body medium
Right
Text body medium
Forms
The Form component is used to collect user input such as email addresses, feedback, or other data. A consistent form style ensures usability, accessibility, and visual harmony across the website.
Title
Preview
input field
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Submit button
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Avatars are small profile images used to represent users or entities within the interface. They help personalize the experience and improve visual identification.
Avatars
Small
Class
avatar-image
small
Medium
Class
avatar-image
medium
Large
Variable
avatar-image
Structure & Layouts
Page Structure
Page structure provides a consistent layout foundation for organizing content. It ensures alignment, spacing, and responsiveness across all sections.
Navigation
Content
Container
Section
Footer
Section
The Section is a full-width layout element used to organize content into distinct horizontal areas of a page. It serves as the structural foundation for building consistent and scalable layouts.
Heading of the section
This is some text inside of a div block.
Section Default
Class
section
Container
Container defines the max width of the content on a page.
Container Default
Class
container
Section Container
Class
section
container
Flex
The Flex Layout system is used to align and distribute space among items in a container. It allows for both horizontal and vertical alignment, making it ideal for responsive and dynamic layouts.
Flex Layout
flex horizontal
Class
h-flex-default
flex vertical
Class
v-flex-default
Flex horizontal
Class
Preview
h-flex-sm
h-flex-md
h-flex-lg
h-flex-xl
h-flex-xxl
Flex vertical
Class
Preview
v-flex-sm
v-flex-md
v-flex-lg
Class
Preview
v-flex-xl
v-vlex-xxl
Grid
The Grid layout is a powerful CSS layout system that allows for the creation of two-dimensional designs using rows and columns. It is ideal for creating balanced, responsive layouts with precise alignment.
Grid Layout
Class
Preview
grid-dual-sm
grid-dual-md
grid-dual-lg
Class
Preview
grid-dual-xl
grid-dual-xxl