To ensure responsive design across devices, we’ve implemented six width values. These predefined widths can be applied to elements, automatically adjusting based on screen size, providing flexibility and consistency throughout your site. Here’s a breakdown:

• –width-xs: For the narrowest width, ideal for small components like icons or tightly constrained content areas.
• –width-s: Slightly broader, used for compact elements where space is limited but more content is needed.
• –width-m: The medium width, suitable for balanced sections like cards or form elements.
• –width-l: This width provides more room, ideal for larger elements like content blocks or feature sections.
• –width-xl: A wide format, perfect for expansive layouts or wide-screen displays.
• –width-xxl: The broadest setting, used sparingly for elements that require a full-width presence on larger screens.

Each section’s padding is automatically responsive, based on the site’s core spacing system, allowing sections to breathe while maintaining a sleek, minimalist appearance. The values ensure the right amount of space between content blocks:

• None: No padding, for tightly grouped content.
• XS: Minimal padding, often used for small elements or sections where space is constrained.
• S: A light amount of padding, creating a subtle buffer between content and its surroundings.
• M: Standard padding, providing comfortable space for most sections.
• L: Larger padding, useful for prominent sections or when more visual separation is needed.
• XL: Significant padding for spacious sections, giving large content areas room to stand out.
• XXL: Maximum padding, suitable for expansive layouts but should be used selectively to avoid over-spacing.

Element padding provides internal spacing for individual components, ensuring they maintain a clean and readable design. Six padding options offer varying levels of content separation:

• XS Padding: Very tight padding, keeping the content near the edges, often used for small components like buttons or tags.
• S Padding: Slightly more space than XS, providing a minimal buffer while still maintaining a compact design.
• M Padding: The standard padding that offers a balanced amount of breathing room for most elements.
• L Padding: Extra padding for more spacious designs, ideal for elements that need emphasis.
• XL Padding: Significant padding, giving ample space around the content for an open, airy look.
• XXL Padding: Maximum padding, used for large elements but should be avoided in confined spaces to prevent overcrowding.

There are three shadow styles available to enhance depth and create a multi-layered visual effect for elements:

• Box shadow M: A subtle shadow to add a light touch of depth.
• Box shadow L: A more pronounced shadow, creating stronger visual separation from the background.
• Box shadow XL: The most dramatic shadow, adding bold depth and prominence to the element.

We use minimal rounding in line with the minimalist look, offering subtle curvature for elements. Six border-radius values ensure that the corners maintain a clean, refined edge:

• Extra Small (XS): Barely noticeable rounding for a sharp, sleek look.
• Small (S): Subtle rounding, maintaining the minimalist aesthetic.
• Medium (M): A balanced roundness, offering a soft touch.
• Large (L): More noticeable but still minimal for larger elements.
• Extra Large (XL): Used sparingly for enhanced prominence.
• Double Extra Large (XXL): Avoid in confined spaces to preserve the minimalist feel.