Traders@SMU | StyleGuide
Colors
Primary Colors
Primary 1
#242529
Primary 2
#060606
Secondary Colors
Color 1
#3324D5
Color 2
#F2F1FF
Neutral Colors
Neutral 800
#171717
Neutral 700
#626262
Neutral 600
#8B8B8B
Neutral 500
#BABABA
Neutral 400
#E1E1E1
Neutral 300
#F2F2F2
Neutral 200
#F7F7FC
Neutral 100
#FFFFFF
Typography
Display 1 - Aa Bb Cc Dd
Display 1
Clarity City
80px / 1.250em
Display 2 - Aa Bb Cc Dd
Display 2
Clarity City
64px / 1.344em
Display 3 - Aa Bb Cc Dd
Display 3
Clarity City
50 / 1.280em
Display 4 - Aa Bb Cc Dd
Display 4
Clarity City
28px / 1.429em
Heading H1 - Aa Bb Cc Dd
Heading H1 - Aa Bb Cc Dd
Heading H1
Clarity City
54px / 1.222em
Heading H2 - Aa Bb Cc Dd
Heading H2 - Aa Bb Cc Dd
Heading H2
Clarity City
38px / 1.316em
Heading H3 - Aa Bb Cc Dd
Heading H3 - Aa Bb Cc Dd
Heading H3
Clarity City
24px / 1.417em
Heading H4 - Aa Bb Cc Dd
Heading H4 - Aa Bb Cc Dd
Heading H4
Clarity City
22px / 1.273em
Heading H5 - Aa Bb Cc Dd
Heading H5 - Aa Bb Cc Dd
Heading H5
Clarity City
18px / 1.333em
Heading H6 - Aa Bb Cc Dd
Heading H6 - Aa Bb Cc Dd
Heading H6
Clarity City
16px / 1.375em
Body
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 cursu.
Body Large
Clarity City
24px / 1.583em
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.
Body Default
Clarity City
18px / 1.667em
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.
Body Small
Clarity City
14px / 1.714em
Text single
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
400
Clarity City Regular
Clarity City Medium
Clarity City SemiBold
24px / 1.583em
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
300
Clarity City Regular
Clarity City Medium
Clarity City Bold
20px / 1.100em
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
200
Clarity City Light
Clarity City Medium
Clarity City Bold
18px / 1.111em
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
100
Clarity City Regular
Clarity CityMedium
Clarity City Bold
16px / 1.125em
Text Sigle Uppercase
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
400
Clarity City Regular
Clarity City Medium
Clarity City Bold
24px / 1.583em
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
300
Clarity City Regular
Clarity City Medium
Clarity City Bold
20px / 1.100em
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
200
Clarity City Light
Clarity City Medium
Clarity City Bold
18px / 1.111em
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
100
Clarity City Regular
Clarity City Medium
Clarity City Bold
16px / 1.125em
Rich Text
Lorem ipsum dolor sit amet consectetur
Text Bold
Clarity City
Text Link
Clarity City
- Lorem ipsum dolor sit amet consectetur
- Posuere enim mi pharetra neque proin dic
- Mauris aliquet faucibus iaculis dui vitae ullamco
Bullet List
Clarity City
- Lorem ipsum dolor sit amet consectetur
- Posuere enim mi pharetra neque proin dic
- Mauris aliquet faucibus iaculis dui vitae ullamco
Numbered List
Clarity City
"Lorem ipsum dolor sit amet, consectetur adipiscing elt at mauris vitae neque platea amet velit aliquet lobortis nullam etiam eget"
Blockquote
Clarity City
18px / 1.667em
Lorem ipsum dolor sit amet consectetur
Text Uppercase
Clarity City
Lorem ipsum dolor sit amet consectetur
Text Strikethrough
Clarity City
Lorem ipsum dolor sit amet consectetur
Text Underline
Clarity City
Links
Primary links
Secondary links
Download Apps buttons
Badges
Small
Badge Small
Default
Badge Default
Large
Badge Large
Inputs
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input - Small
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input - Default
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input - Small
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input - Default
Text area
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Checkbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Radio Button
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Avatars
