Style Guide
Colors
Colors are setup as variables at a global level but they are also setup as classes that can be used to define a certain background color.
For e.g bg-brand-1
Variables can be accessed from the + signs on the Color field.
For e.g bg-brand-1
Variables can be accessed from the + signs on the Color field.
brand-1
brand-2
brand-3
brand-4
brand-5
brand-6
brand-7
brand-8
grey-100
grey-200
black
white
Spacer
Typography
Typography is setup using variables for Desktop and Mobile font sizes and also based on the certain styles. For standard H tags the sizes and colors are predefined from the variables but we can also call a certain style on any text that we need by using classes.
e.g heading-m
e.g heading-m
Typefaces
Century Gothic
IBM Plex Serif
Standard
H1
H2
H3
H4
H5
H6
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
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
Styles
Heading XXL
Heading XL
Heading L
Heading M
Heading S
Heading XS
Body Title
Body L
Most fonts have a particular weight which corresponds to one of the numbers in Common weight name mapping. However some fonts, called variable fonts, can support a range of weights with a more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight.
Most fonts have a particular weight which corresponds to one of the numbers in Common weight name mapping. However some fonts, called variable fonts, can support a range of weights with a more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight.
Body M
Most fonts have a particular weight which corresponds to one of the numbers in Common weight name mapping. However some fonts, called variable fonts, can support a range of weights with a more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight.
Most fonts have a particular weight which corresponds to one of the numbers in Common weight name mapping. However some fonts, called variable fonts, can support a range of weights with a more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight.
Body S
Most fonts have a particular weight which corresponds to one of the numbers in Common weight name mapping. However some fonts, called variable fonts, can support a range of weights with a more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight.
Most fonts have a particular weight which corresponds to one of the numbers in Common weight name mapping. However some fonts, called variable fonts, can support a range of weights with a more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight.
Label
Number M
Number S
Link
Spacer
Buttons
Button are more special components that are built using a Link Block, within this link block we add the elements that we need to form our button.
All buttons are Global Components so they can be freely added and customised for specific scenarios.
All buttons are Global Components so they can be freely added and customised for specific scenarios.
button-no-text
button-pill
All
Spacer
Inputs
Inputs inherit global styling so they just need to be added asper specific scenario.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Spacer
Spacing
Inputs inherit global styling so they just need to be added asper specific scenario.