Front-end Style Guide

Layout

The designs were created to the following widths:

Desktop
Mobile

Border Radius

Border Radius Small: 4px - chips, badges, labels.
Border Radius Medium: 8px - buttons.
Border Radius Large: 16px - cards.
Border Radius X-Large: 24px - modals, popovers.

Opacity

Opacity High: 0.80 - overlay mask.
Opacity Medium: 0.60.
Opacity Low: 0.40 - disabled element: buttons, inputs.

Shadows

Shadow Small: 0 2px 8px rgba(0, 0, 0, .10) - small elements < 64px.
Shadow Medium: 0 4px 16px rgba(0, 0, 0, .12) - medium elements > 64px.
Shadow Large: 0 4px 24px rgba(0, 0, 0, .16) - hover effect of bigger elements like cards, menu etc.

Spacing

Spacing 2X-Small: 4px.
Spacing X-Small: 8px.
Spacing Small: 12px.
Spacing Medium-S: 20px.
Spacing Medium-L: 24px.
Spacing Large: 32px.
Spacing X-Large: 40px.
Spacing 2X-Large: 48px.
Spacing 3X-Large: 64px.
Spacing 4X-Large: 80px.

Grid

Deskop 1240+:
- Siatka z 14 kolumn, 12 środkowych kolumn o jednakowej szerokości, kolumny 1 i 14 po 15%.
Mobile:

Colors

color-eg_courses_orange: #FF5C00;
color-eg_courses_blue: #00F0FF;
color-eg_abm_yellow: #FFD600;
color-eg_maps_blue: #3B85F7;
color-eg_techbase_green: #00AF51;
color-eg_bs_red: #FF002E;
color-eg_black: #0F0F0F;
color-alert: #FFD15C;
color-success: #02B84B;
color-error: #F0474A;
color-background: #F4F5F6;
color-background-grey: #F7F7F9;
color-typo-primary: #0F0F0F;
color-typo-secondary: #646464;
color-typo-primary: #0F0F0F;
color-white: #FFFFFF;
color-neutral-1: #76768B;
color-neutral-3: #D4D4E3;

Font Styles

Headlines, Body text, Numbers, Button

Family Roboto: Regular, Bold, ExtraBold (https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap)
Weights: 400, 700, 900.
Font size: 12px, 14px, 16px, 18px, 20px, 24px, 32px, 52px, 80px.

Links, Caption

Family Manrope: Regular, Bold (https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&family=Roboto:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap)
Weights: 400, 700.
Font size: 10px, 12px, 14px, 16px.

Buttons

Primary

Large 56px/ Medium 48px/ Small 40px:
- Background:
  - Default: eg_courses_orange: #FF5C00
  - Active: orange - 80% eg_courses_orange: #FF5C00.
  - Disabled: gray - Neutral 3 #D4D4E3.
- Border: none.
- Font: white

Secondary

Large 56px/ Medium 48px/ Small 40px:
- Background: none.
- Border: 1px, inside.
- Font:
  - Default: eg_courses_orange: #FF5C00
  - Active: orange - 80% eg_courses_orange: #FF5C00.
  - Disabled: gray - Neutral 3 #D4D4E3.

Text

Large 56px/ Medium 48px/ Small 40px:
- Background: none.
- Border: none.
- Font:
  - Default: eg_courses_orange: #FF5C00
  - Active: orange - 80% eg_courses_orange: #FF5C00.
  - Disabled: gray - Neutral 3 #D4D4E3.