--color-primary: The main color used for important elements like buttons, links, and highlights. Represents the brand’s identity.

--color-primary-hover: The color used when interacting with primary elements, like hovering over buttons or links.

--color-secondary: A complementary color used for secondary buttons, accents, or less prominent elements.

--color-secondary-hover: The hover color for secondary elements, ensuring clear interaction feedback.

--color-tertiary: A third accent color used sparingly for unique highlights or decorative elements.

--color-heading: The color for all headings (e.g., H1, H2). Typically bold and noticeable for readability and emphasis.

--color-text: The default color for regular text, like paragraphs and descriptions.

--color-text-muted: A softer color for less important text, like captions, placeholders, or hints.

--color-primary-bg: The background color for sections or areas that emphasize the primary brand theme.

--color-secondary-bg: The background color for secondary sections or areas that complement the primary theme.

--color-border: The color used for borders around elements like buttons, cards, or inputs.

Primary Color

The primary color is the main color used throughout your design. It represents the brand’s identity and is applied to key elements like buttons, links, and important highlights to grab attention.

Example Usage:

• Buttons
• Active links
• Icons

Primary Color Tints

Tints of the primary color are lighter variations of the primary color. They are used to create subtle backgrounds, hover effects, or soft accents, ensuring the design feels cohesive and polished.

Example Usage:

• Backgrounds for cards or sections
• Button hover states
• Decorative elements

Secondary Color

The secondary color is used to complement the primary color and provide visual variety. It often highlights less prominent elements or secondary actions, making the interface more dynamic and engaging.

Example Usage:

• Secondary buttons
• Highlights or accents
• Links or call-to-action elements

Secondary Color Tints

Tints of the secondary color are lighter versions created by mixing the secondary color with white. These are great for creating a soft, subtle background or hover effects.

Example Usage:

• Backgrounds for cards or sections
• Hover states for secondary buttons
• Subtle visual highlights

Typography Overview

Typography is an essential element of your style guide, ensuring consistency and readability across all text elements on your website. Below are detailed descriptions of the key components.

Heading

Headings are used for titles and to structure your content hierarchy. Each heading size (H1, H2, H3, etc.) is designed to stand out, guiding users through the content. These are responsive, scaling beautifully on all devices thanks to the clamp() function.

Use Cases:

• Page titles (H1)
• Section headings (H2, H3)
• Subsections and smaller headings (H4, H5, H6)

Text Size

Text sizes are standardized and responsive, providing consistency in font scaling across the website. Using the clamp() function, the sizes automatically adapt based on screen width, ensuring a perfect balance between readability and aesthetics on all devices.

Use Cases:

• Headlines
• Subheadings
• Inline text elements

Body Text

Body text refers to paragraph text and is the most commonly used text style across the website. It is designed for readability and responsiveness, using the clamp() function to scale dynamically without requiring manual adjustments for breakpoints.

Use Cases:

• Article content
• Descriptive paragraphs
• Any regular text displayed across the site

This setup ensures all your typography elements maintain a clean, modern, and adaptive design.

Button

Buttons are an essential interactive element on your website, designed to grab attention and encourage user actions. They are styled consistently with responsive typography and background colors that adapt based on hover states. Buttons use your primary and secondary colors to align with your branding.

Use Cases:

• Call-to-action buttons (e.g., “Buy Now,” “Sign Up”)
• Navigation buttons
• Form submission buttons

Note: Buttons automatically adapt to different screen sizes for usability on all devices.

Border Radius

Border radii define the roundness of corners for various elements, adding a softer and more polished appearance to your design. Border radius values range from subtle curves to fully rounded edges, allowing for versatile design applications.

Values Included:

• XS: Minimal rounding for sharp-edged components.
• S: Slight rounding for a subtle, modern look.
• M: Balanced rounding for most components.
• L: Noticeable rounding for buttons and cards.
• XL: Highly rounded, often used for badges or pills.

Use Cases:

• Buttons
• Cards
• Modals
• Form inputs

---

Shadow

Shadows add depth and hierarchy to your design, making elements stand out while providing a modern aesthetic. Predefined shadow styles can be used to create subtle or pronounced effects depending on your design needs.

Types of Shadows:

• Light shadow: Creates a soft elevation, ideal for inputs or small cards.
• Medium shadow: Provides moderate depth for cards and modals.
• Heavy shadow: For prominent elements like sticky headers or call-to-action sections.

Use Cases:

• Highlighting interactive components (e.g., buttons)
• Giving depth to cards or containers
• Enhancing visual hierarchy

---

Icon

Icons are small visual elements that help users understand actions or content quickly. They align with your brand’s typography and color palette, ensuring visual consistency across your site.

Features:

• Responsive sizing to match text or container elements.
• Can inherit colors from your primary or secondary palette for better alignment.
• Simple, clear design for effective communication.

Use Cases:

• Buttons with icons (e.g., a shopping cart or arrow)
• Visual cues for actions (e.g., delete, save, or search)
• Decorative enhancements for lists or content sections

Width

The Width section defines standard width values for elements, ensuring consistency and alignment throughout your design. These width values are flexible and responsive, adapting to different screen sizes.

Use Cases:

• Containers
• Grids and layouts
• Columns in responsive designs

Space

The Space section defines spacing values (margins and paddings) to create consistent gaps between elements, enhancing readability and layout clarity. These values range from small to large, ensuring flexibility for various designs.

Predefined Spacing Values:

• XS: Minimal spacing for tight layouts.
• S: Standard spacing for compact sections.
• M: Balanced spacing for most designs.
• L: Generous spacing for large sections or whitespace.
• XL: Spacious gaps for prominent elements.

Use Cases:

• Separating sections
• Adding padding inside containers
• Margins around headings or text blocks

Section Padding

Section Padding defines the space inside each section, creating comfortable layouts and ensuring content is visually balanced. Padding levels are flexible and responsive to accommodate various design needs.

Predefined Padding Levels:

• Extra Small (XS): – Minimal padding for tightly packed sections or smaller screens.
• Small (S): – Compact padding for sections with limited content.
• Medium (M): – Standard padding, ideal for most sections.
• Large (L): – Generous padding for spacious, visually prominent sections.
• Extra Large (XL): – Ample padding for hero sections or areas requiring significant whitespace.

Use Cases:

• XS: Compact sections like announcements or headers on small screens.
• S: Supporting sections like testimonials or smaller call-to-actions.
• M: Standard sections such as “About Us” or “Features.”
• L: Prominent sections like “Hero” or “Contact Us.”
• XL: Full-width banners or large, immersive sections.

This range allows for consistent spacing while adapting seamlessly to different screen sizes and content densities.

How to Use the Style Guide

This style guide is designed for simplicity and flexibility. You can customize it effortlessly by adjusting predefined variables. Below is a step-by-step guide on how to customize each part of the style guide to fit your design needs.

1. Changing the Primary Color

The primary color defines your brand’s main visual identity. To customize it:

1. Locate these variables:
   • --primary-h
   • --primary-s
   • --primary-l
2. Convert your desired color (e.g., #9EDF9C) to HSL format. You can use any color converter tool.
   Example: #9EDF9C → hsl(118, 51%, 74%)
3. Update the variables:cssCopy code--primary-h: 118; --primary-s: 51%; --primary-l: 74%;
4. The --color-primary variable automatically adapts using this formula:
   hsl(var(--primary-h), var(--primary-s), var(--primary-l))
5. All related tints, shades, and elements using the primary color will update automatically.

---

2. Changing the Secondary Color

Follow the same steps as for the primary color, but update the --secondary-h, --secondary-s, and --secondary-l variables.

---

3. Customizing Other Colors

To adjust other colors, directly modify these variables:

• --color-primary-hover
• --color-secondary-hover
• --color-tertiary
• --color-heading
• --color-text
• --color-text-muted
• --color-primary-bg
• --color-secondary-bg
• --color-border

Use tools like a color picker or a tint and shade generator for better customization.

---

4. Typography

Headings

• Predefined classes (.h1 to .h6) and variables are available for heading styles.
• Font sizes use the clamp function for fluid responsiveness. Adjust clamp settings with a clamp calculator.

Steps to Modify Headings:

1. Define maximum size (desktop) and minimum size (mobile).
2. Set Rem Value (pixels): 10 if the root font size is unchanged.
3. Paste the generated clamp value into the variable or class.

Text Sizes

• Predefined classes (.text-xs to .text-xxl) control text size.
• Variables and classes are fully customizable.

Body Text

• Three predefined classes:
  • .body-text-s
  • .body-text-m
  • .body-text-l
• Use font weight classes (.font-200 to .font-900) for further customization.

---

5. Buttons

• Button colors adapt automatically to the --primary-h, --primary-s, and --primary-l variables.
• Predefined sizes: .btn-xs to .btn-xl.
  No additional changes are needed unless required.

---

6. Border Radius

Adjust these variables to customize the border radius:

• --radius-xs
• --radius-s
• --radius-m
• --radius-l
• --radius-xl
• --radius-xxl
• --radius-50 (for circular borders).

---

7. Shadows

Change shadow intensity by modifying these variables:

• --shadow-xs
• --shadow-s
• --shadow-m
• --shadow-l
• --shadow-xl
• --shadow-xxl

---

8. Icons

• Icon types: .icon, .icon-outline, and .icon-filled.
• Icon sizes: --icon-xs to --icon-xxl.

---

9. Width

Width settings can be adjusted using variables:

• --width-xs
• --width-s
• --width-m
• --width-l
• --width-xl
• --width-xxl

---

10. Space

Spacing uses the clamp function to maintain fluid design.

• Variables range from --space-xs to --space-xxxl.

---

11. Section Padding

Adjust padding for sections by customizing these classes:

• .section-padding-xs
• .section-padding-s
• .section-padding-m
• .section-padding-l

Padding values adapt responsively, ensuring consistency across devices.