Mate Academy Design System
Design System

Mate Academy UI Kit

Comprehensive design system based on Mate Academy visual identity. Built with Tailwind CSS for modern web applications.

Color palette

&

Guidelines

The color selected are design to be harmonious, ensure accessible text, and distinguish interface elements and components from one another. Color is also used to add meaning and support design communication.

Brand Colors

#E25544

Primary | Coral

#4F898E

Secondary | Teal

#FFBE15

Accent | Yellow

#22262F

Gray | Dark

Alerts Colors

#13CE66

Success | Grass Green

#3366FF

Info | News Blue

#FFB020

Warning | Warn

#FF000D

Danger | Error

Text Colors

800
#1F2937
700
#384252
600
#4B5563
500
#6B727F
400
#AFB4BE
300
#D2D5DA
200
#E4E6EB
100
#F3F4F6
50
#F9FAFB
Guidelines

Typography

About Manrope Font

The font selected is designed to be harmonious, ensure accessible text, and distinguish interface elements and components from one another. Font is also used to add meaning and support design communication.

Text Scaling Text Size Text weight

H1 Headline

 64px Bold

H2 Headline

 52px Bold

H3 Headline

 40px Bold

H4 Headline

 32px Bold
H5 Headline
 24px Bold
H6 Headline
 20px Semi-Bold

Body-Text, Subtitle, Caption

Body Large - 18px

 18px Medium

Body-Text - 16px

 16px Regular

Subtitle - 14px

 14px Medium

Caption - 12px

 12px Medium

Spacing System

Guidelines

8px - 16px

My preferred method is an 8px linear scale for element and 4px for spacing icons or small text blocks.

16px

Typography

Manrope
18 PX
4px
8px
12px
16px
24px
32px
40px
Components

Buttons

Primary

Secondary

Outline

Ghost

Components

Form Inputs

Text Inputs

This field is required

Select & Checkboxes

Components

Cards

Basic Card

A simple card component with padding and shadow.

Card with Image

Card with a header image or gradient.

Feature Card

Highlighted card for important features.

Border Radius

4px
8px
10px
16px
24px
full

Grids &

Guidelines

Breakpoints

Adaptive grids for flexible interfaces, with variable-defined min and max values simplifying customization and ensuring design consistency.

1280 Breakpoint - min Desktop 1440px+ Breakpoint - max
1
2
3
4
5
6
7
8
9
10
11
12
Breakpoint Name Mobile Tablet Desktop Desktop +
Breakpoint - min 320px 768px 1280px 1440px +
Breakpoint - max 767px 1279px 1439px -
Effects

Shadows

Shadow SM

Subtle elevation

Shadow Card

Default card shadow

Shadow Hover

Elevated state

Edit with