Aesthetic Conversion - Styleguide - v1
Typography
HTML Headings Tags
HTML tags define default Heading styles.
Info:
Heading are properly scaled now. You need proper font scaling for readability, accessibility, and a good user experience (UX) across all devices, ensuring text isn't too small to read (causing eye strain) or too large (looking unprofessional), while also creating clear visual hierarchy for important info and maintaining consistent, polished design.
Tip:
PLEASE try adjusting the font scaling in the CSS variables first, before changing individual font sizes. Please see this document (docs.google.com/document/d/1-y1amUtu5xDApGdcsxo7htkPRgWVmF-A7JTNY6fTibg/edit?tab=t.0)
All H1 Headings
Heading 1
All H2 Headings
Heading 2
All H3 Headings
Heading 3
All H4 Headings
Heading 4
All H5 Headings
Heading 5
All H6 Headings
Heading 6
Headings Classnames
Heading classes when typography style doesn't match the default HTML tag.
heading
Heading-style
This class defines the font-family, line-height, font-weight, and other general styles you want applied to all heading elements.
h1
Heading-h1
This class sets the font size and uses the value of the H1 CSS variable.
h2
Heading-h2
This class sets the font size and uses the value of the H2 CSS variable.
h3
Heading-h3
This class sets the font size and uses the value of the H3 CSS variable.
h4
Heading-h4
This class sets the font size and uses the value of the H4 CSS variable.
h5
Heading-h5
This class sets the font size and uses the value of the H5 CSS variable.
h6
Heading-h6
This class sets the font size and uses the value of the H6 CSS variable.
Other HTML Tags
Heading classes when typography style doesn't match the default HTML tag.
All Paragraphs
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.
All Links
All Block Quotes
Block Quote
All Unordered Lists
- This is some text inside of a div block.
- This is some text inside of a div block.
- This is some text inside of a div block.
Text Sizes
Info:
This is an alternative to the class names h1 to h6 and can be used for text blocks
text-h1
Text-Size-h1
text-h2
Text-Size-h2
text-h3
Text-Size-h3
text-h4
Text-Size-h4
text-h5
Text-Size-h5
text-h6
Text-Size-h6
text-small
Text-Size-Small
text-tiny
Text-Size-Tiny
Text Align
text_left
Text-Align-Left
text_center
Text-Align-Center
text_right
Text-Align-Right
Text Color
This will be based on the colors set in CSS custom properties (variables). This helps reduce the number of colors used and ensures greater consistency across the site.
color_white
Text Color White
color_black
Text Color Black
color_1
Text Color 1
color_2
Text Color 2
color_3
Text Color 3
color_4
Text Color 4
color_5
Text Color 5
color_6
Text Color 6
color_7
Text Color 7
color_8
Text Color 8
color_9
Text Color 9
color_10
Text Color 10
Richtext
Info:
H1 and H2 elements inside the richtext are now disabled. This is is to avoid multiple H1 in a page and force good document structure.
richtext
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
Other Elements
Image HTML
All Images
Image Classnames
img
img
ratio_square
Image's aspect ratio will be 1:1 or square
img
ratio_portrait
Image's aspect ratio will be 2:3
img
ratio_landscape
Image's aspect ratio will be 3:2
img
ratio_standard_portrait
Image's aspect ratio will be 3:4
img
ratio_standard_landscape
Image's aspect ratio will be 4:3
img
ratio_widescreen
Image's aspect ratio will be 16:9
img
ratio_univism
Image's aspect ratio will be 2:1
img
ratio_anamorphic
Image's aspect ratio will be 2.39:1
Structure Classes
Layout
Main
main
main
aside_left
main
aside_right
main
aside_both
header
footer
Section
section
Article
article
Aside
aside
wrapper
wrapper
width_sm
wrapper
width_md
wrapper
width_lg
wrapper
width_full
wrapper
pad_none
wrapper
two_columns
wrapper
two_columns
big_left
wrapper
two_columns
small_right
wrapper
two_columns
big_right
wrapper
two_columns
small_left
wrapper
three_columns
wrapper
four_columns
wrapper
five_columns
wrapper
six_columns
column
ratio_square
Aspect ratio will be 1:1 or square
ratio_portrait
Aspect ratio will be 2:3
ratio_landscape
Aspect ratio will be 3:2
ratio_standard_portrait
Aspect ratio will be 3:4
ratio_standard_landscape
Aspect ratio will be 4:3
ratio_widescreen
Aspect ratio will be 16:9
ratio_univism
Aspect ratio will be 2:1
ratio_anamorphic
Aspect ratio will be 2.39:1
bg_white
bg_black
bg_1
bg_2
bg_3
bg_4
bg_5
bg_6
bg_7
bg_8
bg_9
bg_10
Image HTML
All Images
Forms
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Buttons
btn
btn-sm
btn
btn-lg
btn
btn-xl
btn
btn-alt
btn
btn-outline
Icons