Soft Gray (#F5F7FA): Backgrounds, sections, cards.  

Success (#2ECC71): Confirmations, positive states.

The following Heading Styles are set within Global Variables and used within Heading Presets

Main Body Preset

Heading 1

Heading 2

Heading 3

Heading 4

Headings are as in Heading Presets above which uses Montserrat font. Text is Open Sans. Both declared in Global Variables.

A calm, intentional layout is one of the strongest signals of a mature brand. The layout system creates structure, rhythm, and breathing room across every page by combining three core elements:

• A flexible, content‑first grid

• Width tokens defined in Numbers

• A fluid spacing scale

Together, these create a visual experience that feels balanced, readable, and consistent — no matter who builds the page or what content it contains.

How Our Layout System Works

The layout philosophy is simple: Content defines the layout — not the device.

Instead of relying on fixed breakpoints or arbitrary padding, we use fluid values that scale naturally with screen size. Rows inherit their maximum width from the width tokens defined in the Numbers Global Variables, and spacing between elements is controlled by the Space‑XS → Space‑XL scale also defined in the Numbers Global Variables, .

This approach keeps the layout predictable, flexible, and easy to maintain.

Grid & Width

The grid is a content‑first system designed to keep layouts readable, structured, and visually calm. It is not a rigid set of columns — it is a responsive container model that adapts to the content and the device.

All width values used throughout the site come from the following tokens declared in Numbers:

• Width‑Content‑Wide

• Width‑Content‑Narrow

• Width‑Full‑Max

These tokens determine how wide a row or section can grow, ensuring that text remains readable and layouts never feel stretched or cramped.

When to Use Each Width

Width‑Content‑Wide

Used for layouts that combine text, images, and visual elements. Ideal for:

• hero sections

• feature blocks

• marketing layouts

• mixed‑media content

Width‑Content‑Narrow

Used for focused reading experiences. Ideal for:

• long‑form articles

• documentation

• text‑heavy pages

• storytelling sections

Width‑Full‑Max

Used for edge‑to‑edge layouts that still require an upper comfort limit. Ideal for:

• banners

• dividers

• background‑driven sections

• full‑width visual elements

These width tokens ensure that every page feels intentional, balanced, and consistent — no matter who builds it or how the content evolves.

Spacing System

The spacing scale uses fluid clamp values that scale smoothly across all device sizes, eliminating abrupt jumps between breakpoints.

Spacing is what gives our pages rhythm. It creates separation, hierarchy, and breathing room. The spacing scale uses fluid clamp values defined in Numbers:

• Space‑XS
• Space‑Small
• Space‑Medium
• Space‑Large
• Space‑XL

These values are applied consistently across:

• section padding
• row padding
• column gaps
• module spacing
• component internal padding

Because the spacing scale is fluid, the layout feels comfortable on every device without needing breakpoint overrides.

Section, Row & Column Structure

To keep layouts modular and predictable, we follow a simple structure:

Sections

• Section padding is set to zero by default.

• Sections act as structural wrappers, not spacing containers.

• Visual spacing is applied at the row level using spacing tokens.

Rows

• Rows control vertical rhythm using Space‑Small → Space‑XL.

• Rows inherit their max‑width from the width tokens.

• Rows define the primary content flow of the page.

Columns

• Columns follow Divi’s native grid.

• Column gaps are controlled by spacing tokens.

• Columns should not override width or spacing unless required by a component.

This structure keeps spacing consistent and prevents stacking or compounding padding.

Why This System Works

A unified layout, grid, and spacing system:

• creates visual calm
• improves readability
• speeds up page building
• prevents inconsistent spacing
• ensures every component feels like part of the same brand
• scales effortlessly as the site grows

By grounding layout and spacing in the Numbers system, we maintain a single source of truth for all structural decisions. This is what makes Blueprint to Passive feel intentional, cohesive, and unmistakably ours.

Components are the reusable building blocks of the Blueprint to Passive design system. Each one is built using Divi 5 modules, global variables, and carefully defined presets to ensure consistency across every page.

Every component in this library follows the same foundation:

• Global Variables control typography, spacing, colors, and layout behavior

• Module Presets apply these variables consistently across headings, text, buttons, cards, and more

• Component‑level Presets are used when a module requires a specific configuration (e.g., a card layout, CTA block, or feature row)

• Fluid spacing and responsive breakpoints ensure each component adapts smoothly across all devices

By combining Divi 5 modules with the global design system, each component becomes predictable, scalable, and easy to reuse — whether you’re building a single landing page or an entire site.

This section will continue to grow as the website evolves and new modules or layout patterns come into play. Some components will be single modules with presets, while others will be Groups — collections of modules combined to serve a specific purpose.

We’ll begin with the core components used throughout the site:

• Buttons

• CTAs

• TL;DR summaries

• Table of Contents

• Accordions

• Testimonials

• Blog layouts & cards

Buttons

Buttons are one of the most frequently used interactive elements across the Blueprint to Passive website. They guide users toward actions, reinforce hierarchy, and maintain a consistent visual rhythm throughout the site.

All buttons are built using:

• Divi 5 Button Module
• Global Variables for color, typography, and spacing
• Module Presets for consistent styling and responsive behavior
• Fluid spacing using the XS–XL spacing ramp
• Responsive breakpoints to ensure readability and usability across devices

Button Types

1. Primary Button

Used for the main action on a page or section.

• Background: Primary Color
• Text: White
• Border: None
• Padding: Spacing–Small (mobile), Spacing–Medium (tablet+desktop)
• Hover: Display icon
• Preset: Btn – Primary

2. Secondary Button

Used for secondary actions or lower‑priority CTAs.

• Background: Transparent
• Border: 2px solid Primary Color
• Text: Primary Color
• Padding: Same as Primary Button
• Hover: Display icon
• Preset: Btn – Secondary

3. Ghost / Minimal Button

Used in low‑emphasis contexts (e.g., inside cards, footers, or inline actions).

• Background: Light Grey
• Text: Primary
• Border: Dark Gray
• Padding: XS or Small
• Hover: Display icon
• Preset: Btn – Ghost

Global Variables Applied

• Typography: Body font, medium weight
• Font Size: Uses global Body variable
• Line Height: Body line height
• Spacing: XS–Medium depending on context
• Colors: Primary, White, Body Text, depending on button type
• Border Radius: Optional — if used, apply a global variable for consistency

Responsive Behavior

Buttons adjust automatically across breakpoints:

• Phone Portrait: XS or Small padding, full‑width when needed
• Phone Wide: Small padding, inline or stacked depending on layout
• Tablet: Medium padding, inline layout
• Desktop: Medium padding, inline layout with spacing between buttons
• Widescreen / Ultra Wide: Same as desktop, but spacing between button groups may increase

Button Groups

When two or more buttons appear together (e.g., Primary + Secondary):

• Use Spacing–Small as the horizontal gap
• Stack vertically on Phone Portrait
• Align inline from Phone Wide upward
• Maintain clear hierarchy (Primary first, Secondary second)

Usage Guidelines

• Use one Primary Button per section to avoid competing actions
• Use Secondary Buttons for alternative or supporting actions
• Use Ghost Buttons for low‑priority or inline actions
• Avoid mixing more than two button types in a single block
• Maintain consistent spacing above and below buttons using the spacing ramp