Product Designer Handover

Explore

Product Design Handover Doc

Design system

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

⁠

Atomic components

⁠

Design style guide

⁠

The atomic components consist of

Buttons

Primary buttons

Stroked buttons

Bare buttons

Social buttons

Input fields

Text inputs

OTP/code inputs

Number inputs

Currency inputs

Dropdown inputs

Card input

Search Input

Interactions

Spinner

Blinker

Tab selector

Form control element

Success animation

Checkbox

Radio buttons

Atoms, molecules and organisms

Atom/Nav-item pills

Atom/Status pills

Atom/Flags

Molecule/Table element

⁠

Style guide

Colours

The brand colour palette is made up of the following colours

Neutral colour

This consists of grey colours ranging from dark grey to light grey

Primary colour

A blue hue colour with the base colour: #4361EE

Secondary colour

A purple hue colour with the base colour: #890AFF

Success

A green hue colour with the base colour: #3FA748

Warning

A yellow hue colour with the base colour: #F59E0B

Destructive

A red hue colour with the base colour: #E63532

Accent/alte colour

A blue hue colour with the base colour: #1F6AF1

Generic colour

Generic black: #000 and Generic white: #FFF

⁠

Fonts

The Motherboard brand employs 2 fonts:

Gelica

Inter

⁠

Font Categories

Display font

Heading font

Paragraph font

Font Usage Guideline

Font Inter is exclusively for use within the digital product/web app

Gelica font is designated for website display, headers, and marketing design purposes only.

⁠

Icon font

We utilize Font Awesome for all iconography within our product and across all digital channels.

How to use Font Awesome

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 icon

⁠

Screen Recording 2024-03-14 at 08.51.56.gif

⁠

For access to over 30,000 icons on Font Awesome, consult the glossary:

Find the Perfect Icon for Your Project | Font Awesome Search all the icons and match your project with a look and feel that's just right, including the all-new Sharp Solid Icons, now available in Font Awesome 6. fontawesome.com⁠

⁠

Atomic system components

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.