MITSkills Design System & Modules
Colors
Primary
Primary
Secondary
Tertiary Color
primary-tint-1
primary-tint-2
primary-tint-3
primary-tint-4
primary-shade-1
primary-shade-2
primary-shade-3
primary-shade-4
secondary-tint-1
secondary-tint-2
secondary-tint-3
secondary-tint-4
secondary-shade-1
secondary-shade-2
secondary-shade-3
secondary-shade-4
tertiary-tint-1
tertiary-tint-2
tertiary-tint-3
tertiary-tint-4
tertiary-shade-1
tertiary-shade-2
tertiary-shade-3
tertiary-shade-4
Heading Text
Body Text
Links
primary-alpha-glow
secondary-alpha-glow
tertiary-alpha-glow
shadow-1
shadow-2
shadow-3
white
black
danger
warning
success
info
white-shade-1
white-shade-2
white-shade-3
white-shade-4
black-tint-1
black-tint-2
black-tint-3
black-tint-4
danger-tint-1
danger-tint-2
danger-tint-3
danger-tint-4
warning-tint-1
warning-tint-2
warning-tint-3
warning-tint-4
success-tint-1
success-tint-2
success-tint-3
success-tint-4
info-tint-1
info-tint-2
info-tint-3
info-tint-4
Heading Text - Light
Body Text - Light
Typography
Headlines - Rubik
H1 - Headlines (Text-3xl 700)
H2 - Headlines (Text-2xl 700)
H3 - Headlines (Text-xl 700)
H4 - Headlines (Text-l 700)
H5 - Headlines (Text-m 700)
H6 - Headlines (Text-m 600)
Body - Inter
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Link - (Text-m)
Gaps
Card Gap (Space-xl)
<-->
Module 1
Module 2
Component Gap (Space-xs)
<-->
Some title
Soem text
Other Text
Tiny Gap (Space-4xs)
Some title
Spacing
Card Padding (space-m)
Some title
Soem text
Other Text
Button Padding (space-2xs space-2xl)
Button
Primary
Secondary
Icon Button
Shadow
Light
Lighter
Lightest
Form Element
Table
#
Description
Status
Action
1
Some text ...
Active
Edit
Alert
Title goes here
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.