Design Elements
15 copy-paste design blocks that match the optimizationstack.com design language. Each element below is a self-contained Gutenberg block. To use one: open this page in the editor, find the block, click Copy, paste into the target page. Delete the blue info box before publishing.
1. Section Header with Eyebrow + Gradient Line
Element 1 — Copy the block below this box
Description: Small-caps eyebrow, large serif H2, gradient underline bar — all in one tidy wrapper.
Best for: Top of any content section on Home, /stack, or /audit.
Why it works: Creates a hierarchy moment that signals ‘new section’ without a heavy divider. The gradient bar ties back to brand colors.
Description: Small-caps eyebrow, large serif H2, gradient underline bar — all in one tidy wrapper.
Best for: Top of any content section on Home, /stack, or /audit.
Why it works: Creates a hierarchy moment that signals ‘new section’ without a heavy divider. The gradient bar ties back to brand colors.
The System
Every variable.
One system.
2. Frosted Glass Card (Dark Backgrounds)
Element 2 — Copy the block below this box
Description: Semi-transparent card with backdrop blur + inner radial glow. Designed to sit over dark gradient backgrounds.
Best for: Dark sections on /audit, /protocol, or /stack hero.
Why it works: Creates premium depth — content feels layered rather than flat. The blur effect signals quality.
Description: Semi-transparent card with backdrop blur + inner radial glow. Designed to sit over dark gradient backgrounds.
Best for: Dark sections on /audit, /protocol, or /stack hero.
Why it works: Creates premium depth — content feels layered rather than flat. The blur effect signals quality.
3. Statistic Callout Row
Element 3 — Copy the block below this box
Description: Three large numbers in a rule-separated row — fast visual data with label underneath each.
Best for: Home page between hero and cards, /stack page above the opt-in.
Why it works: Anchors claims in data. Breaks prose monotony. Scannable in 2 seconds.
Description: Three large numbers in a rule-separated row — fast visual data with label underneath each.
Best for: Home page between hero and cards, /stack page above the opt-in.
Why it works: Anchors claims in data. Breaks prose monotony. Scannable in 2 seconds.
4. Decorative Pull Quote
Element 4 — Copy the block below this box
Description: Oversized quotation mark in brand color, large italic serif quote, attribution line below.
Best for: Mid-page on /about, after the intro bio section; also works on /stack as social proof.
Why it works: Stops scrolling. Makes copy feel curated, not generic. The large punctuation adds visual weight.
Description: Oversized quotation mark in brand color, large italic serif quote, attribution line below.
Best for: Mid-page on /about, after the intro bio section; also works on /stack as social proof.
Why it works: Stops scrolling. Makes copy feel curated, not generic. The large punctuation adds visual weight.
“
The standard healthcare system is not designed to help you perform. It’s designed to catch disease. There’s a massive gap between “not sick” and operating at your ceiling.
Rick Ramos
5. Animated Gradient Border Card
Element 5 — Copy the block below this box
Description: Card with a slowly rotating conic gradient border — the inner content stays static while the border animates.
Best for: On /audit for the primary offer card; on /protocol for the access gate teaser.
Why it works: Motion signals premium value. The gradient subtly echoes brand colors. Restrained enough to not distract.
Description: Card with a slowly rotating conic gradient border — the inner content stays static while the border animates.
Best for: On /audit for the primary offer card; on /protocol for the access gate teaser.
Why it works: Motion signals premium value. The gradient subtly echoes brand colors. Restrained enough to not distract.
Limited availability
Health Performance Audit — $999
Taking applications now. Spots are kept limited to maintain the depth of each analysis.
Apply now6. Large Background Ghost Typography
Element 6 — Copy the block below this box
Description: Massive outline-only ghost word floats behind real content — uses -webkit-text-stroke for the traced letter effect.
Best for: Between sections on /stack (word: STACK) or /protocol (word: PROTOCOL) on light backgrounds.
Why it works: Creates visual depth and reinforces the brand vocabulary without competing with copy.
Description: Massive outline-only ghost word floats behind real content — uses -webkit-text-stroke for the traced letter effect.
Best for: Between sections on /stack (word: STACK) or /protocol (word: PROTOCOL) on light backgrounds.
Why it works: Creates visual depth and reinforces the brand vocabulary without competing with copy.
7. Glowing Gradient Section Divider
Element 7 — Copy the block below this box
Description: Gradient line with a centered diamond ornament — uses brand blue-to-light-blue gradient and a subtle glow shadow.
Best for: Between any two light-background content sections on any page.
Why it works: More elegant than a plain <hr>. The diamond gives pause without weight.
Description: Gradient line with a centered diamond ornament — uses brand blue-to-light-blue gradient and a subtle glow shadow.
Best for: Between any two light-background content sections on any page.
Why it works: More elegant than a plain <hr>. The diamond gives pause without weight.
8. Scrolling Ticker Marquee Band
Element 8 — Copy the block below this box
Description: Dark band with continuously scrolling italicized brand phrases — smooth, seamless loop.
Best for: Between major sections on Home or /stack — creates rhythm and energy between content blocks.
Why it works: Animated ticker adds life to an otherwise static page. The dark band also serves as a section separator.
Description: Dark band with continuously scrolling italicized brand phrases — smooth, seamless loop.
Best for: Between major sections on Home or /stack — creates rhythm and energy between content blocks.
Why it works: Animated ticker adds life to an otherwise static page. The dark band also serves as a section separator.
9. Asymmetric Bento Grid
Element 9 — Copy the block below this box
Description: 2-column bento grid — one tall dark left cell, two stacked right cells. Modern asymmetric layout.
Best for: Home page replacing the current two-column cards, or as a feature grid on /audit.
Why it works: Bento grids are the dominant premium layout pattern right now. Asymmetry creates visual interest.
Description: 2-column bento grid — one tall dark left cell, two stacked right cells. Modern asymmetric layout.
Best for: Home page replacing the current two-column cards, or as a feature grid on /audit.
Why it works: Bento grids are the dominant premium layout pattern right now. Asymmetry creates visual interest.
Free
The optimization stack
10 modules covering every variable that matters. Built the way Bryan Johnson would, priced the way you’d want.
10
Modules
$0
To start
10. Animated Floating Pill Badge
Element 10 — Copy the block below this box
Description: Pill badge with gradient fill and gentle floating animation — great as a label near CTAs.
Best for: Above the primary CTA on any page. Near the opt-in form on /stack.
Why it works: Motion draws the eye. The badge contextualizes the CTA before the user reads the button text.
Description: Pill badge with gradient fill and gentle floating animation — great as a label near CTAs.
Best for: Above the primary CTA on any page. Near the opt-in form on /stack.
Why it works: Motion draws the eye. The badge contextualizes the CTA before the user reads the button text.
Free to access
The optimization stack
11. Three-Step Numbered Timeline
Element 11 — Copy the block below this box
Description: Three-step vertical timeline with numbered circles connected by a line — shows a process clearly.
Best for: On /stack showing how it works; on /audit showing the application process.
Why it works: Reduces friction by making the path clear. Process becomes approachable, not daunting.
Description: Three-step vertical timeline with numbered circles connected by a line — shows a process clearly.
Best for: On /stack showing how it works; on /audit showing the application process.
Why it works: Reduces friction by making the path clear. Process becomes approachable, not daunting.
1
Order your labs
The stack tells you exactly which blood panels and hormone tests to order. No guessing.
2
Read the protocol
10 modules cover what to measure, what to optimize, and in what order. Structured, not overwhelming.
3
Know your numbers
Baseline established. Now you have data — and a system for what to do with it.
12. Scroll-Triggered Fade-Up Reveal
Element 12 — Copy the block below this box
Description: Content block that fades and slides up as it enters the viewport using IntersectionObserver.
Best for: Any content section below the fold — works on all pages.
Why it works: Creates a sense of intentional motion. Modern UX pattern that signals craft and attention to detail.
Description: Content block that fades and slides up as it enters the viewport using IntersectionObserver.
Best for: Any content section below the fold — works on all pages.
Why it works: Creates a sense of intentional motion. Modern UX pattern that signals craft and attention to detail.
This block fades in on scroll
You can’t optimize what you don’t measure.
The optimization stack tells you exactly what to test, what the numbers mean, and what to do about them.
13. Abstract Dot Grid Decoration
Element 13 — Copy the block below this box
Description: SVG 7×5 dot grid that can float as a corner decoration near cards, headings, or images.
Best for: Top-right corner of the /about photo section; background accent on /stack feature cards.
Why it works: Adds texture and sophistication without competing with content. The dots pick up the brand’s geometric sensibility.
Description: SVG 7×5 dot grid that can float as a corner decoration near cards, headings, or images.
Best for: Top-right corner of the /about photo section; background accent on /stack feature cards.
Why it works: Adds texture and sophistication without competing with content. The dots pick up the brand’s geometric sensibility.
Rick Ramos
Former CMO. Healthtech executive. Author. The dot grid above is a free-floating SVG decoration — position it absolutely relative to any card.
14. Pulsing Glow CTA Block
Element 14 — Copy the block below this box
Description: Dark section with a heading, subtext, and a CTA button with a pulsing glow animation.
Best for: End of /stack before footer; end of /audit before the form; also works as a mid-page CTA.
Why it works: Pulsing glow creates urgency without being aggressive. The dark section signals transition to action.
Description: Dark section with a heading, subtext, and a CTA button with a pulsing glow animation.
Best for: End of /stack before footer; end of /audit before the form; also works as a mid-page CTA.
Why it works: Pulsing glow creates urgency without being aggressive. The dark section signals transition to action.
15. Accent Key Insight Callout
Element 15 — Copy the block below this box
Description: Left-bordered insight panel with small-caps label, large serif key insight, and light blue background.
Best for: Mid-page on /stack, /audit, or /about to highlight a critical idea before asking for action.
Why it works: Acts as a visual rest stop. Readers who skim will read this. It builds authority with one sentence.
Description: Left-bordered insight panel with small-caps label, large serif key insight, and light blue background.
Best for: Mid-page on /stack, /audit, or /about to highlight a critical idea before asking for action.
Why it works: Acts as a visual rest stop. Readers who skim will read this. It builds authority with one sentence.