This page defines structural rules and usage principles, not final brand aesthetics.
Fonts, colors, and visual tone may change per project — hierarchy, spacing logic, and component behavior will not.
Theme settings typography style & hierarchy example
Typography shown below demonstrates hierarchy and scale only.
H1 = Primary Page Heading
H2 = Section Heading
H3 = Subsection Heading
H4 = Supporting Heading
H5 = Minor Heading
H6 = Utility / Label Heading
P = Mi tempus imperdiet nulla malesuada pellentesque elit eget gravida. Ut diam quam nulla porttitor massa id neque aliquam. Lectus mauris ultrices eros in cursus turpis massa tincidunt dui. Felis imperdiet proin fermentum leo vel orci porta non. Malesuada nunc vel risus commodo. At in tellus integer feugiat scelerisque. Leo a diam sollicitudin tempor id eu nisl nunc mi. Vulputate mi sit amet mauris commodo. Fermentum posuere urna nec tincidunt praesent semper feugiat.
Heading Structure Rules
→ One H1 per page
→ H2 for sections
→ H3 for sub-sections
→ Headings define document structure, not visual size. Visual emphasis should be controlled through styling, spacing, or components — not heading level changes.
Layout Spacing
(Sections & Columns)
→ 4% → tight sections (dense content)
→ 6% → default spacing (most sections)
→ 9–12% → relaxed / expanded spacing (features, heroes)
Element Spacing
(Inside Columns)
→ 12px → tight grouping
→ 24px → default spacing
→ 36px → emphasized separation
Character Limit Standards
→ H1 — 52 ideal / 60 max. 2 lines max.
→ H2 — 60 ideal / 75 max. 2 lines max.
→ H3 — 38 ideal / 42 max. 2 lines max.
→ Buttons — 22 ideal / 26 max. 1 line only.
Line Behavior Rules
- Headlines: max 2 lines. No 3-line wraps.
- Buttons: must never wrap.
- No nested bullet lists.
Theme Color Tokens
(Used by Buttons & Global UI)
These colors are assigned in Theme Settings and are automatically applied to buttons and global interface elements throughout the site.
Primary Accent Color
(Theme Settings → Accent Color)
Used for: Primary buttons / Primary CTAs / High-priority interactive elements
Rule: Only one primary accent button per section.
Secondary Accent Color
(Theme Settings → Theme Extra Color #1)
Used for: Secondary buttons / Supporting CTAs / Alternate actions
Rule: Never compete visually with the primary accent.
Primary Brand Color
(Theme Settings → Theme Extra Color #2)
Used for: Brand surfaces / Structural UI elements / Non-interactive emphasis
Rule: Not a CTA color.
Secondary Brand Color
(Theme Settings → Theme Extra Color #3)
Used for: Supporting brand surfaces / Visual depth and variation
Rule: Used alongside the primary brand color, not instead of it.
Theme Color Gradient
Subtle visual enhancement used to add depth to individual elements without drawing focus.
Used for: Small-scale element emphasis (columns, icons, low-priority callouts).
Rule: Not for full section backgrounds or primary CTAs.
Theme Color Gradient #2
Alternate gradient used for visual variation at the component level.
Used for: Supporting visual accents and secondary interactive elements.
Rule: Use sparingly. Never more than one gradient per section.
How to Use Brand Colors Across the Website
This section defines how each brand color is used for backgrounds, text, and interface elements across the website to ensure clarity, hierarchy, accessibility, and consistent visual structure.
Background & Text Color Use:
Base Light Background + Dark Text
Primary canvas for content. Optimized for readability, spacing, and long-form use.
Typical use cases: Page body background / Text-heavy sections / Default content areas
Distribution ≈ 40–60% of the page
Base Dark Background + Light Text
High-contrast section used to introduce visual weight and create strong separation.
Typical use cases: Feature sections / Key informational blocks / Section breaks that need contrast
Distribution ≈ 15–25% of the page
Base Medium Background + Dark Text
Structural background used to add depth and separation without emphasis.
Typical use cases: Alternating sections with Base Light / Sub-sections nested within Base Light / Visual separation without emphasis
Distribution ≈ 10–20% of the page
Highlight Background + Dark/Light Text
Supporting background used to subtly separate and highlight content within a section.
Typical use cases: Supporting callouts / Inline highlights / Secondary emphasis within larger sections
Distribution ≈ 5–10% of the page
Feature Background + Dark/Light Text
High-impact section background used to create visual focus for the most important moments on the page. Often limited to a single smaller section per page.
Typical use cases: Primary CTA section / Key conversion block / One-off feature moment that must stand out from everything else
Distribution< 5% of the page
Component Backgrounds (Use Only When Needed)
If a section already has a background color, do not add a component background unless separation is required.
Base Component
Default background for cards or columns placed on base sections.
Typical use cases: Cards / Content columns / Info panels sitting on Color 1 or Color 2
Emphasized Component
Adds visual weight to important content within a neutral section.
Typical use cases: Emphasized content blocks / Key informational panels
Gradient Component
Used for large, featured components that need depth.
Typical use cases: Large feature columns / Highlighted informational areas / Never behind long paragraphs.
Buttons & Calls to Action
Rules: One primary CTA per section / Primary buttons only use the Primary Accent Color / Secondary buttons never visually overpower primary buttons
Primary button
Used for: Primary CTA / Main action per section
Rules: One per section / Uses Primary Accent Color only
Secondary button
Used for: Supporting actions / Secondary CTAs on light or neutral backgrounds
Rules: Never visually compete with Primary / Used when multiple actions are present in the same section
Dark Inverse Button
Used for: Supporting actions that shouldn’t dominate / Light backgrounds / Accent sections / Brand color sections / Background images
Rules: Must remain legible against background surfaces / Not used on dark backgrounds
Light Inverse Button
Used for: Supporting actions that shouldn’t dominate / Dark backgrounds / Accent sections / Brand color sections / Background images
Rules: Must remain legible against background surfaces / Not used on light backgrounds
