Style Guide
The TwoËars Style Guide provides the business with an outline of the brand and all the assets that define its use. It's an evolving document that will be updated as the brand evolves and additional assets are created.
This Style Guide should be referenced whenever the brand is applied.
Elements
Elements
Black
#000000
Grey_light
#F5F7FA
Grey_medium
#EAEAEA
Grey_dark
#4D4D4D
Blue_primary
#233EEC
Blue_pastel
#F4F5FE
Pink_primary
#FD346E
Pink_pastel
#FFF0F4
Yellow_primary
#FFC226
Yellow_pastel
#FFF9EA
Orange_primary
#FE5E37
Orange_pastel
#FFEDEB
Green_primary
#2CDA9B
Green_pastel
#EAFCF5
Purple_primary
#9835FF
Purple_pastel
#FAF5FF
Elements
Used on headers and backgrounds
Elements
Primary
Merriweather
Aa Bb Cc Dd Ee 1234567890
Secondary
Inter
Aa Bb Cc Dd Ee 1234567890
Aa Bb Cc Dd Ee
H1 · 64px
Aa Bb Cc Dd Ee
H2 · 48px
Aa Bb Cc Dd Ee
H3 · 24px
Aa Bb Cc Dd Ee
H4 · 22px
Aa Bb Cc Dd Ee
H5 · 18px
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
Paragraph Large · 18px
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
Paragraph Normal · 16px
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
Paragraph Small · 14px
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
Detail Messages · 12px
Quotes
The ultimate Interface component kit built to create harmony across your products.
Plain Quote Block · 18px
This line rendered as bold text.
This line rendered as italicized text.
This line is treated as deleted text.
This line is treated as underlined text.
You can use the mark tag to highlight text.
Elements
Outer shadow, inner shadow
S1
Shadow
S2
Shadow
S3
Shadow
S4
Shadow
S5
Shadow
Elements
Instruction text here
Looks good!
Instruction text here
Something went wrong
Elements
Elements
Content Pages
Rich Text Elements
Bold · Italic · Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget risus vitae massa semper aliquam quis mattis quam. Morbi vitae tortor tempus, placerat leo et, suscipit lectus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget risus vitae massa semper aliquam quis mattis quam.