Blueprint to Passive – Visual Brand & UX System

A living style guide for how we design, write, and build experiences that feel clear, calm, and empowering.

This Visual Board is the foundation for every Blueprint to Passive website, page, and experience. It brings together our colors, typography, layout rules, components, and UX principles so that everything we create feels consistent, intentional, and easy to use.

Brand Identity

Blueprint to Passive exists to help people become architects of their own digital future. The design system reflects that: structured but human, modern but warm, clear but never cold.

Core values:

Clarity: Every element has a job. No noise.
Empowerment: The design should make people feel capable, not confused.
Simplicity: Fewer steps, less friction, more flow.
Consistency: Familiar patterns build trust and ease.
Accessibility: Everyone should be able to participate.

Tone & feel:

Calm
Confident
Helpful
Future‑focused
Human

DIVI 5 terminology

Divi 5 introduces a new way of thinking about how websites are built and styled. Instead of styling individual modules one at a time, Divi 5 encourages a system‑based approach using global variables, presets, and shared option groups. The terminology below describes how the new framework is applied to the overall website design.

Layout Structure Elements

These are the containers that define the structure of a page:

Sections – the largest layout blocks
Rows – horizontal groups inside sections
Columns – vertical divisions inside rows

These elements control layout, spacing, and alignment, and they can have their own presets.

Modules Elements

Modules are the actual content elements placed inside columns. Examples include:

Text
Heading
Button
Image
Accordion
Blog
Testimonial

Each module is an element type, and each can have its own Element Preset.

Global Variables

Divi 5 uses Global Variables to define the core design tokens of your site. These variables act as reusable values that control styling across modules, presets, and components. Updating a variable updates every element that uses it.

Below is a clear breakdown of what each variable type is for — based on your understanding, refined and structured.

The variables are:

Numbers
Text
Images
Links
Colors
Fonts

Numbers

Numbers are the foundational design tokens that define the measurable aspects of the visual system. They give the typography, spacing, and layout a consistent rhythm across every device and every component. By declaring these values once, using fluid, responsive formulas, we ensure that the entire site scales gracefully without relying on breakpoints or ad‑hoc adjustments.

Numbers are not styles; they are rules. They form the mathematical backbone of our brand experience.

Typography Scale

Typography uses a fluid clamp‑based scale that adapts to screen size while maintaining hierarchy and readability. These values are applied across all text presets and components.

Font-Size-H1 - clamp(2.1rem, 1.6rem + 2.2vw, 3.25rem)
Font-Size-H2 - clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem)
Font-Size-H3 - clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem)
Font-Size-H4 - clamp(1.25rem, 1.1rem + .07vw, 1.6rem)
Font-Size-H5 - clamp(1.125rem, 1.05rem + .035vw, 1.3rem)
Font-Size-H6 - clamp(1rem, .098rem + 0.2vw, 1.125rem)
Font-Size-Body - clamp(1rem, 0.95rem + 0.25vw, 1.125rem)
Font-Size-Small-Text - 0.875rem

Line Heights

Line height tokens ensure consistent vertical rhythm and readability across headings and body text.

Line-Height-H1 - 1.1em
Line-Height-H2 - 1.15em
Line-Height-H3 - 1.2em
Line-Height-H4 - 1.25em
Line-Height-H5 - 1.3em
Line-Height-H1 - 1.35em
Line-Height-Body - 1.8em

Width Tokens

Width tokens define the maximum readable width of content across the site. They create predictable structure, improve readability, and ensure that layouts feel intentional rather than stretched or cramped.

These values are used for sections, rows, containers, and any component that requires a controlled reading width.

Width‑Content‑Wide - clamp(320px, 75vw, 1200px)
Width‑Content‑Narrow - clamp(320px, 50vw, 800px)
Width‑Full-Max - clamp(100vw, 100vw, 1600px)

Usage guidance:

Wide is ideal for mixed content, hero sections, images, and marketing layouts.
Narrow is optimized for long‑form reading and text‑heavy pages.
Full‑Max is used for edge‑to‑edge sections that still require an upper bound for comfort.

Spacing Scale

Spacing ramp provides a fluid, predictable system for margins, padding, and gaps. Each value scales proportionally with screen size, maintaining balance and breathing room across all breakpoints.

Space-XS - clamp(0.25rem, 0.2rem + 0.3vw, 0.75rem)
Space-Small - clamp(0.5rem, 0.3rem + 0.6vw, 1rem)
Space-Medium - clamp(1rem, 0.6rem + 0.8vw, 1.5rem)
Space-Large - clamp(1.5rem, 1rem + 1vw, 2.5rem)
Space-XL - clamp(2rem, 2rem + 2vw, 4rem)

Usage guidance:

XS and Small are ideal for tight UI elements and micro‑layouts.
Medium and Large form the backbone of section and component spacing.
XL is reserved for hero sections, major dividers, and generous breathing room.

Why Numbers Matter

By centralizing all numeric values into a single system, we create:

Consistency across every page and component
Scalability as the site grows
Responsiveness without relying on breakpoints
Clarity for anyone building within the system
Efficiency when creating presets, components, and layouts

Numbers are the invisible architecture that holds the visual identity together. They ensure that every part of Blueprint to Passive feels intentional, balanced, and unmistakably belong.

Text

Text variables store reusable text strings that appear in multiple places.

Examples:

Contact details
Copyright text
Taglines
Repeated labels
CTA microcopy
Footer text

These are not styling variables — they are content tokens.

If the same text appears in multiple places, store it here.

Text Variables will be added as the website is developed.

Images

Image variables store reusable images such as:

Logos
Icons
Background textures
Brand graphics
Repeating decorative elements

If an image is used in more than one place, it should be a variable.

Image Variables will be added as the website develops.

Colors

Color variables define your entire brand palette:

Primary
Secondary
Accent
Neutrals
Backgrounds
Text colors
Semantic colors (success, warning, error)

Every color used in your design system should be declared here.

This is where your Color Palette section below connects directly to Divi 5.

Why This Matters

By defining all core design tokens in Global Variables, you ensure:

consistency
scalability
easy updates
predictable styling
a true system‑based workflow

This is the foundation of the entire Visual Brand & UX System.

Element Presets

Presets applied to a specific element.

Examples:

Section 1
Row 1
Column 1
Btn - Primary
Heading - H2
Card - Feature

Element Presets ensure that every instance of that element looks and behaves consistently across the website.

Option Groups

Option Groups are shared categories of settings that appear across multiple modules.

Examples:

Text Options
Heading Text Options
Spacing Options
Border Options
Background Options

These groups allow Divi 5 to unify styling across different modules.

Nested Preset.

Stacked Presets

Color Pallette

Introduction:

Our colors are chosen to feel modern, trustworthy, and quietly optimistic.

All brand colors are stored as Global Color Variables within Divi 5. This ensures consistent color usage across every module, preset, and component. Updating a color variable updates every element that uses it.

Core colors:

Primary Blue (#1A73E8): Links, primary buttons, key highlights, borders.
Deep Navy (#0F1A2A): Headings, key text, backgrounds for contrast.
Soft Gray (#F5F7FA): Backgrounds, sections, cards.
Dark Gray (#4A4A4A): Body text, secondary text.
Accent Gold (#F4C542): Highlights, subtle emphasis, small visual anchors.

Semantic colors:

Success (#2ECC71): Confirmations, positive states.
Warning (#F1790F): Caution, non‑critical alerts.
Error (#E74C3C): Errors, validation messages.

Usage notes:

Primary Blue for main CTAs and links.
Navy for headings and strong anchors.
Soft Gray for section backgrounds to create visual rhythm.
Gold sparingly, to draw the eye without shouting.

Primary Blue (#1A73E8): Links, primary buttons, key highlights.

Deep Navy (#0F1A2A): Headings, key text, backgrounds for contrast.

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

Dark Gray (#4A4A4A):
Body text, secondary text.

Accent Gold (#F4C542): Highlights, subtle emphasis, small visual anchors.

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

Warning (#F1C40F):
Caution, non‑critical alerts.

Error (#E74C3C):
Errors, validation messages.

Typography

Introduction:

Our typography should feel clean, readable, and structured—like a well‑designed blueprint.

A clear, readable type system is essential for creating calm, structured experiences.

Font pairing:

These are defined as Global Variables in the Font section.

Headings: Montserrat (bold, confident, modern).
Body: Open Sans (clean, highly readable).

Type scale (example using clamp):

The scaling is defined within the Numbers section of Global Variables. See discussion above.

Usage notes:

One primary heading font, one body font no mixing beyond that.
Keep paragraphs short and scannable.

Text Styles

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

Heading Preset 1

Heading Preset 2

Heading Preset 3

Heading Preset 4

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.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Layout, Grid & Spacing

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.