Web Style Guide

Typography

Heading 1

Class: Heading-1
‍Font-size: 68px
‍Line-height: 1.2 EM
Text indent: -0.04 EM
‍700-Bold

Heading 2

Class: Heading-2
‍Font-size: 46px
‍Line-height: 1.2 EM
Text indent: -0.04 EM
‍700-Bold

Heading 3

Class: Heading-3
‍Font-size: 28px
‍Line-height: 1.2 EM
Text indent: -0.04 EM
‍700-Bold

Heading 4

Class: Heading-4
‍Font-size: 18px
‍Line-height: 1.2 EM
‍700-Bold

Paragraph_1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Class: Paragraph-1
‍Font-size: 16px
‍Line-height: 1.4 EM
Letter spacing: 0.03 EM
300-Light

Eyebrow Text

Class: Text-Eyebrow
‍Font-size: 14px
‍Line-height: 1.4 EM
Letter spacing: 0.03 EM
500-Medium

*Condition: No eyebrow text above or below the Heading 4.

Typography - Examples

Eyebrow Text

Heading 1

Paragraph_1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Eyebrow Text

Heading 2

Paragraph_1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Eyebrow Text

Heading 3

Paragraph_1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Heading 4

Paragraph_1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Class Naming Rules

RULE 1. Naming Structure

Element-PageName / ComboClass

ex) Div-webstyleguide / ComboClass
ex) Container-webstyleguide / ComboClass

RULE 2. Use Dash.

Use "-" to separate the Element and Page Name.

Yes: DivBlock-webstyleguide
Yes: Divblock-WebStyleGuide
‍
No: Div_webstyleguide
No: Div_webstyleguide

RULE 3. No Spaces.

No spaces in Classes.
‍
Yes: DivBlock-webstyleguide
Yes: Divblock-WebStyleGuide
‍
No: Div Block-web style guide
No: Divblock-Web Style Guide

RULE 4. TextSpan

Use 'TextSpan' to highlight a part of the text.
‍
TextSpan Classes:
TextSpan-SambaBlue
TextSpan-SambaRed

Buttons

Button-Primary
Button-Secondary
Button-Tertiary
Button-Primary
Button-Secondary-Dark
Button-Tertiary-Dark

Buttons (Primary, Secondary)
‍
Font size: 14px
Letter spacing: 0.05 EM
Top margin: Font size + 1px - stroke width(2px) = 13px
Bottom margin: Font size - 1px - stroke width(2px) = 12px
Left/Right margin: Font size x2 - stroke width(2px) = 26px
Stroke width: 2px
Roundness: 100px
‍
‍
Buttons (Tertiary)
‍
Font size: 14px
Letter spacing: 0.05 EM
Top margin: Font size/2 + 1px = 8px
Bottom margin: Font size/2 - 1px = 6px
Left/Right margin: Font size = 14px
Stroke width: 2px
Roundness: 100px

Buttons are available in "Components"

Never change the components itself.
Only change the instances to change the text and the link.

Components name are as followed:
Button-Primary
Button-Secondary, Button-Secondary-DarkBG
Button-Tertiary, Button-Tertiary-DarkBG


Box treatment/Grey Background treatment

Box shadows: 0px, 2px, 10px, 0px
Color: rgba(0, 0, 0, 0.1)
Radius: 2pt
Minimum margin: 10px
Stroke: None