Foundations
Typography
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.
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
0ldschool grotesk
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
Paragraph font
variable
general 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
Button font
variable
general sans
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 color
main
#0f0f0f
surface
#f5f5f5
border
#bfbfbf
hover
#2a2a2a
pressed
#1a1a1a
focus
#ddd
Secondary color
main
#6fff98
surface
#e9fff0
border
#a8f0c2
hover
#4eb56b
pressed
#3b9f59
focus
#d0ffde
Success color
main
#259e3d
surface
#daf2d7
border
#c1eabc
hover
#3a9f2c
pressed
#3b9f59
focus
rgba(37, 158, 61, 0.2)
Warning color
main
#fcb028
surface
#feefd4
border
#fee5b7
hover
#d29321
pressed
#7e5814
focus
#fffce1
focus
#f4f1d0
Error color
main
#e74c3c
surface
#fff1f0
border
#f7c3be
hover
#c03f32
pressed
#73261e
focus
#f5d3cc
Info color
main
#1aa6ed
surface
#cde0f6
border
#acccf0
hover
#0555b0
pressed
#03336a
focus
#1aa6ed
Neutral
10
#ffffff
20
#f5f5f5
30
#ededed
40
#d6d6d6
50
#c2c2c2
60
#c2c2c2
70
#606060
80
#383838
90
#262626
100
#171717
Text Color
Content
Text Primary
Class
text-body-md
neutral-10
Content
Text Secondary
Class
text-body-md
neutral-70
Background Color
Primary
Variable
primary-main
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-84
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
icon-wrapper
medium
Variable
icon-wrapper
large
Variable
icon-wrapper
rounded
Variable
icon-wrapper
Components
Typography
Typography components define the hierarchy of text styles such as headings, paragraphs, and captions. They ensure clarity and readability in every context.
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
Heading 1
Heading 1
Heading 2
Heading 2
Heading 3
Heading 3
Heading 4
Heading 4
Heading 5
Heading 5
Heading 6
Heading 6
Body
Accent
Preview
Body XLarge
Text body large
Body Large
Text body large
Body Medium
Text body medium
Body Small
Text body small
Text alignment
Accent
Preview
Left
Text body medium
Center
Text body medium
Right
Text body medium
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
Buttons group
Button groups organize multiple related actions in a single horizontal layout. They help maintain alignment and visual hierarchy when presenting multiple options.
Accent
Preview
Center
Stretch
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
Avatars are small profile images used to represent users or entities within the interface. They help personalize the experience and improve visual identification.
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.
Heading of the section
This is some text inside of a div block.
Container Default
Class
container
Heading of the section
This is some text inside of a div block.
Section Container
Class
Section
container
Navigation
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.
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