This SOP governs how Hardt Web Development implements designs in Kadence — from the first Customizer setting to the final QA pass. The goal is not literally "pixel perfect" but design-faithful and intentionally consistent: typography, spacing, colors, proportions, and component behavior that are deliberate and repeatable across every page and screen size.
The three-layer mental model
Every Kadence build has three layers. Work top-down through them — never skip to layer three. Layer 1: Global design tokens (colors, fonts, spacing). Layer 2: Component library (reusable block patterns). Layer 3: Page-level assembly. Skipping layers 1 and 2 and going straight to page building is the source of 90% of inconsistency problems in Kadence sites.
Common failure mode
Styling elements one at a time instead of setting global tokens first, then building components, then assembling pages. This produces sites that look inconsistent and require hours of manual correction.
If working from a Figma mockup or reference design, extract all design values before touching Kadence. This document becomes your build spec and prevents ad-hoc decisions during the build.
A
Colors — extract every hex value
List every color used anywhere in the design: primary, secondary, accent, text, background, border, error, success. A well-designed site has 6–12 colors total. Write down the exact hex codes. Name them semantically (Primary, Text Dark, Background, Border) not by appearance ("the blue one").
B
Typography — font families and type scale
Record: font families (typically 1–2), sizes for H1–H6 and body, line heights, letter spacing for headings and body. Most professional designs use a base unit (8px or 4px) scaled up: 16, 24, 32, 48, 64px. Identify the scale in use.
C
Spacing scale — the repeating unit
Identify the consistent spacing values: section padding, column gap, heading-to-paragraph margin. Common scales: 8, 16, 24, 32, 48, 64, 96px. Write these down — you will use them on every block's padding and margin settings.
D
Border radius, shadows, dividers
Are buttons and cards square, slightly rounded (4–6px), or pill-shaped (24px+)? Is there a box shadow on cards? What is the exact value? Are section dividers used — and if so, are they rules, gradients, or diagonal cuts?
Step 1 assumes a source design to extract values from. When there isn't one, these five categories are where design decisions matter most — invest effort here first, in this order, before polishing anything else.
1
Photography — the single biggest lever
Real or well-chosen photography does more to make a page feel custom than any other element. Stock is the fastest way to make a page feel templated, regardless of build quality.
- Environmental over posed — mid-conversation, hands on a keyboard, walking a hallway, beats a stiff arms-crossed portrait
- Detail shots as texture — hands adjusting equipment, a stethoscope on a table — good for section breaks and backgrounds
- Consistent color grading across every photo on the site, even mismatched sources, to unify stock + real photos
- Duotone or single-color overlay tinted to the brand color — turns mediocre stock into something site-specific
- Real space beats perfect stock — any client phone photo of their actual office/sanctuary/treatment room reads as authentic instantly
- Vary orientation and crop per section — reusing the same aspect ratio/crop everywhere flattens visual rhythm
- Negative space in the photo — empty sky/wall/floor on one side gives a natural spot for text without a heavy gradient
The first thing anyone sees, and the thing most likely to be compared side-by-side with a competitor's site — worth disproportionate attention relative to its screen real estate.
- Split-screen (image right, content left) reads editorial/modern; full-bleed background reads dramatic/bold — pick based on photo strength
- An eyebrow/chip above the headline adds a credibility signal ("Board-Certified · Serving Hampton Roads Since 2014") without cluttering it
- Mixed-weight or italic treatment on part of the headline gives rhythm without needing a second font
- A stat bar under the CTA buttons (years in practice, patients served, congregation size) turns dead space into a trust signal
- Asymmetric CTA pairing — one solid primary + one ghost secondary, never two equally weighted buttons
- Subtle motion (soft fade-in, slow-panning background) makes a static hero feel alive without being gimmicky
- Try a diagonal gradient instead of the default left-to-right overlay if the standard version feels flat
3
Typography pairing and treatment
How the fonts are used matters more than which fonts are chosen.
- Contrast in mood, not category — a warm serif against a clean neutral sans works because they don't compete; two similar-weight fonts fight each other
- Tight/negative tracking on big display headlines feels confident; wide tracking + uppercase on small labels feels editorial and premium
- Oversized headline numerals for stats sections (15+, 200+, 98%) create an instant visual anchor
- Tighter line-height (1.0–1.1) on short headlines feels bold; generous line-height (1.6–1.8) on body copy feels calm — especially valuable for medical/wellness trust
- Pull quotes styled distinctly from body text (different font, larger size, brand color) turn a testimonial into a visual moment
- Weight contrast within one font family (700 headline vs. 400 subhead) is a subtler alternative to a second font when stuck
How a color is deployed matters more than the hex value itself.
- Reserve the accent color exclusively for interactive elements (buttons, links, active states) so it always signals "click here"
- Tint, don't just swap — a 5–10% tint of the brand color as a section background reads more sophisticated than a flat saturated block
- One full-width dark section breaks up an all-white/off-white page and gives a natural spot for a CTA banner or stat section to feel like a moment
- Gradient overlays on photos (brand color to transparent) read more custom than a flat percentage-opacity tint
- Thin 1px borders in a muted version of the accent tie small UI details back to the palette even where a full color block won't fit
- Keep icon color and weight consistent (usually the accent) rather than letting icons default to black
5
The one non-template section
See Step 8, move 5 for why this matters structurally. Niche-specific starting ideas:
- Medical: insurance/credentials strip (accepted insurance logos, board certifications) — low effort, high trust payoff
- Medical: "meet the team" with a quote or fun fact per provider instead of a static headshot grid — breaks the sterile-directory feel
- Alt-health: before/after or transformation gallery (photo-based, with consent) — highly niche-specific, rarely in generic templates
- Alt-health: an "our approach"/philosophy section distinct from services — explains why, not just what
- Nonprofit/church: impact numbers section (meals served, lives touched, years serving) — turns abstract mission into concrete proof
- Nonprofit/church: a sermon series or current campaign spotlight — signals the site is actively maintained
- Any niche: a "what to expect" first-visit timeline — reduces anxiety for a new patient/visitor/donor
- Any niche: an FAQ accordion with niche-specific (not generic) questions — cheap to build, signals real expertise
Map your extracted colors to Kadence's named palette slots. Name them semantically. Once set, every block references these slots — change a color once and it updates everywhere.
Recommended slot naming:
- Palette 1: Primary brand color
- Palette 2: Secondary / accent
- Palette 3: Dark text color
- Palette 4: Body text
- Palette 5: Muted / secondary text
- Palette 6: Background
- Palette 7: Surface / card background
- Palette 8: Border color
- Palette 9: White
Set font families, sizes, weights, line heights, and letter spacing for H1–H6 and body text. Kadence connects directly to Google Fonts. Set the base body font size — use 16–18px minimum for medical and nonprofit clients who often serve older populations.
3
Container width and global spacing
Set Container Width (typically 1200–1280px for modern designs). This controls the maximum content width on all pages. Set once, never touch per-page.
In Customizer → Buttons, set primary and secondary button styles: background color, text color, border radius, padding, font size, font weight, hover state. Every button block on the site inherits these styles. Never style individual button blocks unless there is a specific semantic reason.
5
Header and footer builders
Build header and footer before any page content. They appear consistently on every page automatically once built. For medical clients: sticky header, click-to-call button, booking CTA visible in the header. For nonprofits and churches: donate button and service times prominent.
Rule: No page content is built until all five global settings above are configured. The global settings are the foundation. Building pages before setting globals is like framing walls before pouring the foundation.
Before building any client page, build a blank unpublished page called "[ClientName] — Design System". On this page, build one polished example of every component that will repeat across the site. Save each as a Kadence Block Pattern. From this point forward, you insert patterns — you never build a component from scratch twice.
→
Standard components to build for every medical / nonprofit site
- Full-width hero — heading, subheading, CTA button, optional background image
- Two-column feature section — icon/image left, text right
- Three-column service or program card grid
- Testimonial / impact story section
- Team member or staff grid
- Stats or impact numbers section
- CTA banner — full-width, single action
- Contact form section
- Donate section (nonprofits) or Booking section (medical)
- FAQ accordion section
- News / blog post grid
How to save a pattern: Select all blocks in the component → click the three-dot menu in the toolbar → "Create pattern" → name it with a prefix (e.g. HWD — Hero Full Width). To insert on any page: open the block inserter → Patterns tab → find by name.
| Element | Desktop value | Mobile value | Notes |
|---|
| Full section padding | 80px top/bottom | 48px top/bottom | Hero and major content sections |
| Compact section padding | 48px top/bottom | 32px top/bottom | Secondary content, form sections |
| Hero section padding | 120px top/bottom | 64px top/bottom | Homepage hero only |
| Column gap | 32–40px | 24px | Gap between columns in Row block |
| Heading → paragraph | 16–24px | 16px | Margin-bottom on heading block |
| Before new subheading | 32–48px | 24px | Space before a new H2/H3 in a section |
| Card inner padding | 24–32px | 20px | Padding inside testimonial or feature cards |
Never use arbitrary spacing values. Pick from your spacing scale (multiples of 8px) and use them consistently. A section with 83px padding next to one with 80px padding looks identical in the builder but creates subtle visual noise that makes a site feel unpolished.
Advanced: CSS custom properties for spacing. Define your spacing scale as CSS variables in Customizer → Additional CSS, then reference them in block settings.
Additional CSS — spacing scale
:root {
--space-xs: 8px;
--space-sm: 16px;
--space-md: 24px;
--space-lg: 32px;
--space-xl: 48px;
--space-2xl: 64px;
--space-3xl: 80px;
--space-4xl: 120px;
}
✓
Use heading levels — not size overrides
Always set the heading level (H1, H2, H3) in the block and let global typography control the size. If every H2 uses a custom per-block size, changing the design later means touching every single block. Use global styles — override per-block only for deliberate exceptions.
✓
Body text — never override per paragraph
Set body copy at the paragraph block level using the global size. Resist making individual paragraphs larger or smaller unless there is a specific semantic reason (e.g. a legal disclaimer at 11px).
✓
Buttons — global styles only
Primary and secondary button styles are set globally in the Customizer. Every button block inherits those styles. Never customize individual button blocks — if you find yourself doing this, that is a signal to update the global button style instead.
✓
Minimum body font size for medical / nonprofit
Use 16–18px body text minimum. Medical clients and nonprofits frequently serve older populations. Readability is a mission issue as much as a design issue. Never go below 16px for body copy on these sites.
| Scope | Where to add | Use for |
|---|
| Global styles | Customizer → Additional CSS | Spacing variables, global hover states, link colors, font overrides |
| Page-specific | Kadence Page Settings → CSS tab | One-off layout adjustments specific to a single page |
| Block-specific | Block → Advanced → Additional CSS Class + global CSS | Targeting a single instance of a component that needs a variation |
The DevTools workflow. Right-click any element on the staging site → Inspect → identify the exact Kadence CSS class applied → modify the value in DevTools to confirm the fix visually → copy the CSS to Additional CSS.
CSS you will write most often on Kadence builds:
- Hover states on buttons and cards that Kadence does not expose in the UI
- Fine-tuning mobile typography sizes when global responsive settings are not granular enough
- Adding a border or subtle divider between sections
- Overriding Kadence's default link underline behavior
- Controlling exact column width when the percentage slider does not hit precisely
- Custom focus states for accessibility compliance
- Adjusting the z-index of a sticky header in edge cases
Example — custom hover state on a card component
.hws-service-card {
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.hws-service-card:hover {
box-shadow: 0 8px 32px rgba(0,0,0,0.10);
transform: translateY(-2px);
}
Avoid CSS debt. If you find yourself writing more than 50 lines of custom CSS to make something work, that is a signal you are fighting the framework. Step back and reconsider the approach — either use a different Kadence block, restructure the layout, or accept a slight design deviation rather than accumulating brittle CSS overrides.
→
Responsive discipline — the per-section habit
After building each section at desktop, immediately switch to tablet view in the block editor and check it, then check mobile. Fix responsive issues per section as you go — not at the end of the project. Responsive debt compounds.
Common responsive adjustments:
- Reduce section padding from 80px to 40–48px on mobile
- Reduce heading sizes if they wrap awkwardly at small widths
- Check multi-column layouts stack in correct reading order
- Verify CTAs and phone numbers are tap-sized (minimum 44px touch target)
- Check that hero text is still legible over background images on mobile
→
Show/hide by device — use deliberately
Kadence Blocks Pro's show/hide by device feature is powerful but easy to abuse. Use it for elements that genuinely should not appear at certain sizes — a decorative large background element, a desktop sidebar — not as a way to avoid making something responsive. Hidden elements still load — they just do not display.
→
Test on real devices before delivery
Chrome's mobile simulator is useful but not definitive. Before any client delivery, test the staging URL on: a real iPhone (Safari), an Android device (Chrome), and desktop Chrome. BrowserStack free tier covers edge cases. Common simulator failures: font rendering differences, tap target sizes, scroll behavior on iOS.
Kadence starter templates are scaffolding — use them for structural bones, then replace everything visible to the user. After these five moves, the template origin is invisible and the site reads as a custom build.
Go to Customizer → Typography and replace all font families with the client's brand fonts. Nothing says "starter template" more than the default Kadence font pairing still showing up on a client's live site.
2
Replace the entire color palette
Go to Customizer → Colors and update every palette slot with the client's actual brand colors. Do not keep any default template colors, even ones that happen to be similar — use the exact client hex values.
Remove every section from the template that you are not using. Do not just hide it or leave it with placeholder text — delete it. Unused sections add page weight, create confusion during handoff, and occasionally appear accidentally.
4
Rebuild the hero from scratch
Use the template's hero layout as a reference for proportion and structure, but delete the blocks and rebuild with entirely new content, images, and spacing values. The hero is the first impression — it must not look like any other site using the same template.
5
Add one section type not in the original template
Build at least one section that does not appear in the original starter template. This breaks the template fingerprint entirely. For medical sites: an insurance/credentials section. For nonprofits: an impact numbers section or a board member grid. See
Step 1b for a fuller idea bank on hero and section ideas if you're stuck.
Open the staging site on your phone and scroll every page top to bottom. You are looking for design-system consistency — not individual errors. Ask: does every section feel like it belongs to the same site?
- Spacing rhythm is consistent — no section noticeably tighter or looser than its neighbors
- All headings use global styles — no manually-sized heading blocks
- All buttons use global button styles — no individually-styled button blocks
- All colors reference palette slots — no hard-coded hex values in individual blocks
- Typography is consistent across all pages — no rogue font families or sizes
- Mobile layout checked on real device — not just Chrome simulator
- Hero text legible on mobile over any background image
- All CTAs are above fold on mobile without scrolling
- Phone numbers are tap-to-call links on all instances
- All images have alt text — run WAVE to confirm
- Color contrast passes 4.5:1 on body text — check with WebAIM
- PageSpeed 90+ on mobile — test homepage and one key service/program page
- All forms tested — submission received, confirmation email sent
- No placeholder text or template copy remaining anywhere
- All external links open in new tab where appropriate
- Footer copyright year is current
- No broken images — check on mobile where paths sometimes resolve differently
- Favicon is set and correct
- Browser tab title shows correct page title on every page
- Custom CSS file reviewed — no debug/test code left in
The phone scroll test. The fastest way to catch inconsistencies is a slow phone scroll through every page. Your eye notices rhythm breaks faster on a small screen than on a large monitor. Do this last, after everything else — it catches what the builder does not surface.