Skip to content
ButtonsPrimary buttonsStroked buttonsBare buttonsSocial buttonsInput fieldsText inputsOTP/code inputsNumber inputsCurrency inputsDropdown inputsCard inputSearch InputInteractionsSpinnerBlinkerTab selectorForm control elementSuccess animationCheckboxRadio buttonsAtoms, molecules and organismsAtom/Nav-item pillsAtom/Status pillsAtom/FlagsMolecule/Table element
Neutral colourThis consists of grey colours ranging from dark grey to light greyPrimary colourA blue hue colour with the base colour: #4361EESecondary colourA purple hue colour with the base colour: #890AFFSuccessA green hue colour with the base colour: #3FA748WarningA yellow hue colour with the base colour: #F59E0BDestructiveA red hue colour with the base colour: #E63532Accent/alte colourA blue hue colour with the base colour: #1F6AF1Generic colourGeneric black: #000 and Generic white: #FFF
GelicaInter
Display fontHeading fontParagraph font
Font Inter is exclusively for use within the digital product/web appGelica font is designated for website display, headers, and marketing design purposes only.
Download and install the Font Awesome Font pack on your computer.In Figma, access 'Text tool' from the toolbar.Choose ‘‘Font Awesome’’ from the font options..* Type the desired icon as text and the font will automatically render it as an iconFor access to over 30,000 icons on Font Awesome, consult the glossary:
At Motherboard, as much as possible, we prioritize following an atomic design methodology, where smaller elements form larger components. This approach emphasizes the organization of atoms into molecules, molecules into organisms, and organisms into templates, ultimately combining to create cohesive pages.
Atomic system components
The atomic components consist of
Style guide
Colours
The brand colour palette is made up of the following colours
Fonts
The Motherboard brand employs 2 fonts:
Font Categories
Font Usage Guideline
Icon font
We utilize Font Awesome for all iconography within our product and across all digital channels.
How to use Font Awesome
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.