Design system
Foundations
Logo
Typography
Bebas Neue Bold
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890-=!@#$%^&*()_+[]\{}|;’:”,./<>?
Bebas Neue Regular
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890-=!@#$%^&*()_+[]\{}|;’:”,./<>?
Roboto Condensed Regular
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890-=!@#$%^&*()_+[]\{}|;’:”,./<>?
Roboto Condensed Bold
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890-=!@#$%^&*()_+[]\{}|;’:”,./<>?
Roboto Condensed Italic
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890-=!@#$%^&*()_+[]\{}|;’:”,./<>?
Roboto Regular
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890-=!@#$%^&*()_+[]\{}|;’:”,./<>?
Roboto Bold
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890-=!@#$%^&*()_+[]\{}|;’:”,./<>?
Roboto Italic
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890-=!@#$%^&*()_+[]\{}|;’:”,./<>?
Bebas Neue Bold
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890-=!@#$%^&*()_+[]\{}|;’:”,./<>?
Bebas Neue Regular
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890-=!@#$%^&*()_+[]\{}|;’:”,./<>?
Roboto Condensed Regular
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890-=!@#$%^&*()_+[]\{}|;’:”,./<>?
Roboto Condensed Bold
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890-=!@#$%^&*()_+[]\{}|;’:”,./<>?
Roboto Condensed Italic
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890-=!@#$%^&*()_+[]\{}|;’:”,./<>?
Roboto Regular
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890-=!@#$%^&*()_+[]\{}|;’:”,./<>?
Roboto Bold
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890-=!@#$%^&*()_+[]\{}|;’:”,./<>?
Roboto Italic
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890-=!@#$%^&*()_+[]\{}|;’:”,./<>?
Title
H1 Title

This is an h1 title

This is an title

H2 Title

This is an h2 title

This is an h2 title

H3 Title

This is an H3 title

This is an H3 title

H4 Title

This is an H3 title

This is an H4 title

H5 Title
This is an H5 title
This is an H5 title
H6 Title
This is an H6 title
This is an H6 title
Paragraphs
Paragraph XL

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph LG

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph SM

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph XS

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph XXS

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph XL

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph LG

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph SM

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph XS

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph XXS

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph XL Italic

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph LG Italic

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph Italic

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph SM Italic

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph XS Italic

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph XXS Italic

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph XL Italic

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph LG Italic

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph Italic

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph SM Italic

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph XS Italic

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph XXS Italic

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph XL Bold

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph LG Bold

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph Bold

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph SM Bold

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph XS Bold

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph XXS Bold

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph XL Bold

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph LG Bold

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph Bold

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph SM Bold

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph XS Bold

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Paragraph XXS Bold

Ducimus velit aspernatur deserunt. Et deleniti delectus pariatur culpa. Libero quis repudiandae eum voluptates ut fugiat eos et porro.

Color
Neutral
.bg-neutral-100
#FAFBFC
.bg-neutral-200
#EFF0F2
.bg-neutral-300
#DCDEE3
.bg-neutral-400
#D6D8E0
.bg-neutral-500
#AEB2BC
.bg-neutral-600
#9499A5
.bg-neutral
#7F8493
.bg-neutral-800
#6B7180
.bg-neutral-900
#595E6A
.bg-neutral-1000
#474B55
.bg-neutral-1100
#363840
.bg-neutral-1200
#24262B
.bg-neutral-1300
#121315
Contrast
.bg-contrast-100
#D4DEED
.bg-contrast-200
#A9BDDB
.bg-contrast-300
#779CD3
.bg-contrast-400
#3C5E90
.bg-contrast-500
#365481
.bg-contrast-600
#2A4265
.bg-contrast
#1B2A41
.bg-contrast-800
#1B2A41
.bg-contrast-900
#0B1A31
.bg-contrast-1000
#071224
.bg-contrast-1100
#020E1E
Secondary
.bg-secondary-100
#F2F4FD
.bg-secondary-200
#D3D8F9
.bg-secondary-300
#B9C0EE
.bg-secondary-400
#939DDF
.bg-secondary-500
#7583E3
.bg-secondary-600
#5F71F5
.bg-secondary
#4156F6
.bg-secondary-800
#3045E3
.bg-secondary-900
#2738BE
.bg-secondary-1000
#14249B
.bg-secondary-1100
#091678
Danger
.bg-danger-100
#F9EEEE
.bg-danger-200
#F2DBDB
.bg-danger-300
#F4D5CB
.bg-danger-400
#FFBFB1
.bg-danger-500
#F39884
.bg-danger-600
#F98369
.bg-danger
#E96D51
.bg-danger-800
#E55A5A
.bg-danger-900
#CC5050
.bg-danger-1000
#B24646
.bg-danger-1100
#993C3C
.bg-danger-1200
#7F3232
Success
.bg-success-100
#DCFFE1
.bg-success-200
#CEFBD5
.bg-success-300
#A2F7AF
.bg-success-400
#94EDA1
.bg-success-500
#7BE78B
.bg-success-600
#69E47B
.bg-success
#66E979
.bg-success-800
#53DC67
.bg-success-900
#46D45B
.bg-success-1000
#42BC54
.bg-success-1100
#45A553
.bg-success-1200
#308B3D
Warning
.bg-warning-100
#FFFBED
.bg-warning-200
#FDF5D8
.bg-warning-300
#FDF0C1
.bg-warning-400
#FAE7A1
.bg-warning-500
#F6DC7C
.bg-warning-600
#EACE69
.bg-warning
#E9C74C
.bg-warning-800
#D48538
.bg-warning-900
#BC7632
.bg-warning-1000
#A5672C
.bg-warning-1100
#8D5825
.bg-warning-1200
#764A1F
Spacing
No. Size REM Pixels
1 0.25 rem 4px
.w-1
2 0.5 rem 8px
.w-2
3 0.75 rem 12px
.w-3
4 1 rem 16px
.w-4
5 1.25 rem 20px
.w-5
6 1.5 rem 24px
.w-6
7 1.75 rem 28px
.w-7
8 2 rem 32px
.w-8
9 2.25 rem 36px
.w-9
10 2.5 rem 40px
.w-10
11 3 rem 48px
.w-12
12 3.5 rem 56px
.w-14
13 4 rem 64px
.w-16
14 5 rem 80px
.w-20
15 6 rem 96px
.w-24
16 8 rem 128px
.w-32
17 12 rem 192px
.w-48
18 16 rem 256px
.w-64
19 20 rem 320px
.w-80
Grid
Container
Border radius
.rounded-sm
4px
.rounded
8px
.rounded-md
12px
.rounded-lg
16px
.rounded-xl
32px
.rounded-full
50%
Backdrop filter
.backdrop-blur-sm
4px
.backdrop-blur
8px
.backdrop-blur-lg
16px
Shadow
.shadow-xs
.shadow-sm
.shadow
.shadow-lg
.shadow-darkXs
.shadow-darkSm
.shadow-dark
.shadow-darkLg
Iconography
Compononents
Button
Contrast
Contrast border
Contrast ghost
Secondary
Secondary border
Secondary ghost
Danger
Danger border
Danger ghost
success
success border
success ghost
Light
Light border
Light ghost
Input
Input text
Optional
Helper text
Optional
Helper text
Optional
Helper text
Optional
Helper text
Checkbox
Slider
Navigation
Tooltip
Chat
Notifications
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
12
Chip & Tag
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Table
Name Purpose Addition information
Pipedrive We use Pipedrive as our Customer Relationship Management. Pipedrive is GDPR compliant. More details
Mailjet We use MaiJet as our Email processing. MailJet is GDPR compliant. More details
Google Tag Manager We use Google Tag Manager in our website. This service allows website tags to be managed via an interface. The Google Tag Manager only implements tags. No cookies are installed and no personal information is collected. The Google Tag Manager triggers other tags that may collect data. The Google Tag Manager does not access this data. If a desactivation has been made at the domain or cookie level, it remains valid for all tracking tags if they are implemented with Google Tag Manager. More details
CMP Sirdata We use Sirdata as our Content Management Platform. Sirdata is GDPR compliant. It allows users to opt-in or out of data collection via cookie consentment. More details
Google Advertising Products We use Google Ads as a marketing tool to promote our products and services. More details
Facebook We use Facebook Ads as a marketing tool to promote our products and services. More details
LinkedIn Ireland Unlimited Company We use LinkedIn Ads as a marketing tool to promote our products and services. More details
Youtube We redirect users to our Youtube channel for tutorials and product promotions’ purposes. More details
Breadcrumb
Toast
avatar
12
LG
BS
SM
XS
LG
BS
SM
XS
LG
12
BS
SM
XS
LG
12
BS
SM
XS
+4
+4
+4
+4
Foundations
Header
Navigation
Boost your team
productivity

Collaborate in real-time and communicate directly among each project or mission with spontaneous conversations or scheduled meetings

Hackathons