Typography

H1 Heading

H1: Doyle // Weight: 500 // size: 3 REM // Color: Gray900

H2 Heading

H2: Doyle // Weight: 500 // size: 2.25 REM // Color: Gray900

H3 Heading

H3: Inter // Weight: 600 // size: 1.25 REM // Color: Gray900

H4 Heading

H4: Inter // Weight: 600 // Size: 1.25 REM // Color: Gray900
H5 Heading
H5: Inter // Weight: 400 // Size: 1.25 REM // Color: Gray500
H6 Heading
H6: Inter // Weight: 600 // Size: 0.875 REM // Color: Gray600

This is our paragraph text. The font is Inter, the weight is 400, Normal. The size is 1 REM (which is 16px). It's color is our Gray500 variable.

Paragraph
This is our block quote, it's font is Inter, the weight is 400, Normal. The size is 1.125 REM. It has a left border of 6px in our Gray300 color.
Block Quote
This is a link inside a text block.
Text Link
View Project
Button

Color

Text colors

font color - Gray 900
#101828
font color - Gray 500
#667085

Main colors

BRAND COLOR: Primary 600
#1570EF
BRAND COLOR: Primary 100
#D1E9FF
BRAND COLOR: Accent/Magenta
#d70073
BRAND COLOR: Pink 100
#FCE7F6

Neutral colors

Gray 50
#F9FAFB
Gray 200
#EAECF0
Gray 400
#98A2B3
gray 100
#F2F4F7
Gray 300
#D0D5DD
Gray 500
#667085

Logo

MAIN LOGO Multi-color SVG
DOWNLOAD
Mark Multi-color svg
DOWNLOAD

RICH TEXT

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript