Nine Style Guide
Headings: H1 to H6
Heading H1
H1: 64px or 4rem / Bold
Heading H2
H2: 40px or 2.5rem / Semi-Bold
Heading H3
H3: 26px or 1.625rem / Semi-Bold
Heading H4
H4: 22px or 1.375rem / Semi-Bold
Heading H5
H5: 20px or 1.25rem / Semi-Bold
Heading H6
H6: 18px or 1.125rem / Semi-Bold
H2 Size Variants
H2: Heading Variant 02
H2: 30px or 1.875rem
H2: Heading Variant 03
H2: 28px or 1.75rem
H2: Heading Variant 04
H2: 26px or 1.625rem
H2: Heading Variant 05
H2: 24px or 1.5rem
H2: Heading Variant 06
H2: 22px or 1.375rem
H2: Heading Variant 07
H2: 20px or 1.25rem
H2: Heading Variant 07
H2: 18px or 1.125rem
H2: Heading Variant 07
H2: 16px or 1rem
H2: Heading Variant 07
H2: 14px or 0.875rem
Typography
Text Variants
Large-Paragraph
Paragraph: 20px or 1.25rem / Semi-Bold
Paragraph: 20px or 1.25rem / Medium
Paragraph: 20px or 1.25rem / Regular
Medium-Paragraph
Paragraph: 18px or 1.125rem / Semi-Bold
Paragraph: 18px or 1.125rem / Medium
Paragraph: 18px or 1.125rem / Regular
Small-Paragraph
Paragraph: 16px or 1rem / Semi-Bold
Paragraph: 16px or 1rem / Medium
Paragraph: 16px or 1rem / Regular
Extra small-Paragraph
Paragraph: 14px or 0.875rem / Semi-Bold
Paragraph: 14px or 0.875rem / Medium
Paragraph: 14px or 0.875rem / Regular
Colors
Main Colors
Primary color
Primary color
Primary-900
Primary-800
Primary-700
Primary-600
Primary-500: Base Color
Primary-400
Primary-300
Primary-200
Primary-100
Primary-50
Primary-25
Primary-0
Secondary color
Secondary color
Secondary-900
Secondary-800
Secondary-700
Secondary-600
Secondary-500: Base Color
Secondary-400
Secondary-300
Secondary-200
Secondary-100
Secondary-50
Secondary-25
Secondary-0
Neutral colors
Neutral color
Neutral-900
Neutral-800
Neutral-700
Neutral-600
Neutral-500: Base Color
Neutral-400
Neutral-300
Neutral-200
Neutral-100
Neutral-50
Neutral-25
Neutral-0
Accent Color
Accent color
Accent-900
Accent-800
Accent-700
Accent-600
Accent-500: Base Color
Accent-400
Accent-300
Accent-200
Accent-100
Accent-50
Accent-25
Accent-0
Accent Color
Semantic Color
Success
Use on Success Message
Warning
Use on Warning Message
Info
Use on info Message
Error / Danger
Alert the user
Disabled / Muted State
Use on Disabled/Muted state
Surface
Mostly used in design
Rows
Row widths
Row Size Default (80rem/1280px)
Row Size Default (80rem/1280px)
Row Size Default (80rem/1280px)
Space
8PT Gride Space
Eds:Spacing-0rem (0px)
Eds:Spacing-0.25rem (4px)
Eds:Spacing-0.5rem (8px)
Eds:Spacing-1rem (16px)
Eds:Spacing-1.5rem (24px)
Eds:Spacing-2rem (32px)
Eds:Spacing-2.5rem (40px)
Eds:Spacing-3rem (48px)
Eds:Spacing-3.5rem (56px)
Eds:Spacing-4rem (64px)
Eds:Spacing-4.5rem (72px)
Eds:Spacing-5rem (88px)
Eds:Spacing-5.5rem (88px)
Eds:Spacing-6rem (96px)
Eds:Spacing-6.5rem (104px)
Eds:Spacing-7rem (112px)
Eds:Spacing-7.5rem (120px)
Eds:Spacing-8rem (128px)