Style Guide

This guide provides a comprehensive overview of utilizing Opala template tokens and components. Familiarize yourself with the in-depth instructions on employing size classes, typography, color variables and components for a seamless design experience.

Sizes

Explore pre-defined functional classes such as padding-top, wrap-ver, and section-gap within this template. Based on a 4px module, these classes are ideal for effortlessly composing two elements, ensuring optimal performance across all resolutions.

Padding and Margins

Effortlessly compose multiple elements using wrap-ver or wrap-hor classes, acting as flexbox-wrapped elements with defined spacings. While each wrap defaults to aligning elements to the top-left, introducing the combo class wrap-ver_align-center achieves centered alignment.

Discover classes like margin-top, margin-bottom, and a universal margin for consistent spacing on all sides. Ranging from 4 to 40 with a 4-step increment, larger margins like 80-100-120 cater to specific scenarios. For nuanced spacing on various resolutions, consider creating unique class components, e.g., about__card__paddings.

Wraps

Effortlessly compose multiple elements using wrap-ver or wrap-hor classes, acting as flexbox-wrapped elements with defined spacings. While each wrap defaults to aligning elements to the top-left, introducing the combo class wrap-ver_align-center achieves centered alignment.

Sections Gap

Utilize three section gap sizes: XL, L, and M. XL (320px) offers the largest gap, recommended when the preceding section lacks internal spacing. In such cases, opt for the L gap (120px).

Typography

Embrace the Amiri and Inter Google fonts, specifically adapted for typography on both small screens (below 1439px, 991px, 767px) and large screens (above 1440px). All text size based on ratio rule:

• Desktop: 1.25 (major third)
• Tablet: 1.2 (Minor third)
• Mobile: 1.125 (Major second)

Colors

Within the variables section, find a curated selection of colors employed throughout the project. To modify the color palette, it is advisable to make adjustments directly within the variables, ensuring a consistent application across the entire project.

• Grey: Universal colors for text and icons.
• Fill: Colors dedicated to page and cards backgrounds.

Icons

All icons on the site are added using embed code. You can view it and access the SVG code. To swap out an icon, insert an image or copy and paste the SVG code to replace the existing one.