COMPONENT
LIBRARY
Every UI pattern available for use across the wiki — callouts, cards, tables, split layouts, interactive elements, and more. This page is the design system reference.
Typography
Heading and body scale used across all wiki pages. Never use font-size utilities arbitrarily — always pull from this scale.
Display — Article H1
Stop Treating
Your Website Like
A Brochure.
Section Title — H2
The Explanation Tax
Subsection — H3
What to Expect Next
Body Large
You've built a seven-figure business, but your website makes you look like you're still in year one. Here is exactly how we blueprint a digital presence.
Body Default
Most property managers, general contractors, and service pros make the exact same mistake: they build a website to check a box. They throw up an "About Us" page and wonder why it isn't generating leads.
Body BOLD
Most property managers, general contractors, and service pros make the exact same mistake: they build a website to check a box. They throw up an "About Us" page and wonder why it isn't generating leads.
Caption / Label
Dan Design — Diagnostic Framework
Monospace / Data
> IMPLEMENTING THIS BLUEPRINT STRATEGY RESULTS IN A 40–60% INCREASE IN QUALIFIED LEAD CONVERSION WITHIN 90 DAYS.
Color System
All colors in the wiki are derived from this palette. Never introduce new colors outside this set.
Core Palette
Black
#020a06
Blue 600
#347de6
Surface
#FFFFF
Card BG
#F8F9FA
Accent & Utility
X-Light Blue
Red
Green
Yellow
Black /10
Callout Boxes
Five semantic variants. Use sparingly — one or two per article maximum.
Critical Warning (black bg, blue border-left)
Confusion is the ultimate conversion killer. We design for extreme clarity over cleverness.
Pro Tip / Info (blue-50 bg, blue border-left)
When reviewing your blueprint, look at it through the eyes of your most skeptical, impatient prospect.
Neutral / Note (gray bg, black border-left)
This applies to all new clients starting after Q1 2025. Existing projects follow the original process document.
Success / Completed (green tint)
Your kickoff call is confirmed. Discovery questionnaire link has been sent to the email on file.
Danger / Blocker (red tint, black bg)
We cannot begin Phase 1 without logo files in SVG format and GA4 editor access confirmed.
Content Cards
Three card patterns — feature/icon card, stat card, and link card. All include hover states.
Icon Feature Cards (2-column grid)
Strategic Messaging
Positioning your business to attract the right client at the right price point.
Frictionless UX
Clear pathways that guide users to the specific action you want them to take.
Stat Cards (3-column grid)
Overview / Section Link Cards
Tables & Data
Three table patterns: 3-column diagnostic, feature comparison (check/X), and data/benchmark box.
3-Column Diagnostic Table (Symptom / Diagnosis / Fix)
Feature Comparison Table (Check / X)
Data / Benchmark Box
The Benchmark
> IMPLEMENTING THIS BLUEPRINT TYPICALLY RESULTS IN A 40–60% INCREASE IN QUALIFIED LEAD CONVERSION WITHIN THE FIRST 90 DAYS POST-LAUNCH.
Split Layouts
50/50 split for comparison and contrast. Use for direct before/after or option-A vs option-B content.
50/50 Comparison Split (Black vs Blue)
The Commodity
Trap
Generic templates, jargon-heavy copy, and a static brochure site that forces you to over-explain on every call.
Visual
Authority
Intentional negative space, elite typography, and objective-led UX. The site pre-sells the prospect before they book.
Process & Steps
Numbered phase cards used in How It Works, sprint timelines, and sequential guides.
Numbered Phase Card (border-left color accent)
Diagnosis & Discovery
We audit your existing site, review competitors, and run a 90-minute strategy call to lock in positioning and conversion goals.
You Provide
- —Current site access
- —GA4 editor access
We Deliver
- Site audit report
- Positioning statement
Numbered Vertical Steps (simple)
Interactive Components
Live interactive elements: accordion (FAQ), checklist row, and progress bar.
FAQ Accordion
Interactive Checklist Row
Link sent via email after booking.
Progress Bar
73% Complete
Breadcrumbs
Previous / Next Article Navigation
Section Dividers
Section Label with Left Bar
Media Blocks
Video embed placeholder, pullquote, and image caption block.
Video Embed Placeholder
Video · 4:32 · Screen-recorded walkthrough
Pullquote / Blockquote
"You're not writing to sound smart. You're writing to make the prospect feel understood."
— Dan Design, Strategic Blueprint GuideImage Caption Block
Figure 1: Homepage wireframe from the Phase 2 Blueprint — showing messaging hierarchy and CTA placement.
Badges & Status
Tags, status indicators, and category labels used throughout the wiki.
Content Badges
Category Tags (section labels)
Status Dot Indicators
CTAs & Buttons
Full-width CTA strip, inline CTA block, and all button variants.
Full-Width CTA Strip (black bg)
Ready to Start?
Book a free 30-minute call. We'll audit your current site and map out the sprint.
Button Variants
Button with Icon
Dan Design — Component Library v1.0 — All patterns above are production-ready