Typography
Body text
Primary text used for content paragraphs, articles, and descriptions.
The standard body text used for general content throughout the website.
Body text large
Employed for impactful statements, introductory paragraphs, or highlighted content.
Body text small
Used for footnotes, legal disclaimers, or any text requiring reduced emphasis.
Purpose examples: used for metadata information such as post dates, author names, and categories, also for captions of images or tables, copyright text etc.
Heading 1
Introduces the main topic or section of the page. It’s typically the largest and most prominent heading and often used only once per page.
Heading 2
Divides the content into main sections or topics. It provides a clear hierarchy beneath the H1 and helps users understand the organization of the content.
Heading 3
Further divides content under H2 headings into smaller subsections. It’s useful for breaking down complex topics or providing additional detail within sections.
Heading 4
Further divides content under H3 headings into smaller subsections. It’s useful for breaking down complex topics or providing additional detail within sections.
Heading 5
Further divides content under H4 headings into smaller subsections. It’s useful for breaking down complex topics or providing additional detail within sections.
Heading 6
Further divides content under H5 headings into smaller subsections. It’s useful for breaking down complex topics or providing additional detail within sections.
Spacings
| 2X-Small | --lito-spacing-xxs |
| X-Small | --lito-spacing-xs |
| Small | --lito-spacing-s |
| Medium | --lito-spacing-m |
| Large | --lito-spacing-l |
| X-Large | --lito-spacing-xl |
| 2X-Large | --lito-spacing-xxl |
Colors
Primary color
Used for primary buttons, important call-to-action elements, and highlights.
--lito-color-primary
Primary hover color
Used for hover effects on primary elements.
--lito-color-primary-hover
Primary contrast color
Contrast color to the primary color.
--lito-color-primary-contrast
Secondary color
Used for secondary buttons, accents, and complementary elements.
--lito-color-secondary
Secondary hover color
Used for hover effects on secondary elements.
--lito-color-secondary-hover
Secondary contrast color
Contrast color to the secondary color.
--lito-color-secondary-contrast
Text color
Primary text color for content, providing high readability.
--lito-color-text
Secondary text color
Used for less prominent text, providing hierarchy and visual contrast.
--lito-color-text-secondary
Heading color
Color for headings and titles to make them stand out.
--lito-color-heading
Link color
Color for hyperlinks, providing a clear indication of clickable elements.
--lito-color-link
Link color hover
Color for interactive elements when hovered over, providing visual feedback.
--lito-color-link-hover
Border color
Used for borders around elements such as buttons, forms, or containers.
--lito-color-border
Outline (focus) color
Used for outlining focused or selected elements, providing visual emphasis.
--lito-color-outline
Background color
Main background color for the website, providing a neutral backdrop.
--lito-color-background
Content background color
Background color for the various content areas, such as sidebars, posts grid, comments.
--lito-color-content-bg