SiteDNA® Gallery
Every visual element the system can generate. Each combination produces a unique brand identity.
Theme Presets
The foundation — color palettes selected by industry. Each preset carries its own DNA accents, font pairings, and default variants.
Professional
CPA, law, consulting, finance
Trades
Plumbing, HVAC, electrical, handyman
Local Service
Landscaping, cleaning, pest control
Professional Alt
Real estate, insurance, financial planning
Contractor
Restoration, roofing, general contractor
Service
Cleaning, moving, home services
Nav Variants
The navigation bar is a frame component — it wraps every page. The variant defines the brand feel before a visitor reads a single word.
Single-Row
Logo left, links right, CTA at the end. One continuous bar.
Structural type: single-row · 3 color treatments
Centered Two-Row
Logo centered above nav links. Two rows, editorial feel.
Structural type: centered · 1 color treatment
Two-Row Brand
Info row (tagline, logo, phone) on white. Colored nav row below with pipe-separated links.
(555) 000-0000 Structural type: two-row-brand · 1 color treatment
Split Centered
Logo centered between two link groups. Dark background, CTA right.
Structural type: centered-flanked · 1 color treatment
Hamburger
Logo and hamburger menu only. No visible links until toggled.
Structural type: minimal · 2 color treatments
DNA Accent Treatments
Seven visual micro-treatments that define the character of every block. The AI builder selects these per theme preset, and every one can be overridden per site.
Button Style
Type: buttonStyle
Eyebrow Style
Type: eyebrow
Card Treatment
Type: cardTreatment
Icon Treatment
Type: iconTreatment
Photo Treatment
Type: photoTreatment
Divider Style
Type: divider
Badge Style
Type: badgeStyle
Footer Variants
Site-wide footer with business info, navigation links, and legal text.
Standard
standardSingle column, dark bg, centered. Contact info + links + copyright.
Standard Light
standard-lightSame layout, light background. Professional feel.
Centered
centeredEverything stacked: logo, tagline, links, contact, copyright. Minimal.
Minimal
minimalLogo + copyright only. Clean, modern.
Columns
columnsMulti-column: brand + social left, links middle, contact right. Editorial.
Mega
megaExpanded columns with service categories, recent posts, newsletter. Full-featured.
CTA Variants
Call-to-action section variants — the close of every page.
Banner
bannerFull-width bar with headline and button. Works on any background.
Card
cardElevated card with gradient background, headline, body, button.
Minimal
minimalHeadline + button only. No background treatment.
Accent
accentSplit layout: headline left, body + button right. Accent background.
Split
splitTwo-column: text left, form right. High-converting.
Image
imageFull-bleed background image with overlaid text and CTA.
Hero Variants
The top of every landing page. Sets the tone for the entire site.
Fullscreen
fullscreenFull-viewport image with overlay. H1, sub, CTA centered.
Split
splitImage right, text left. Professional. Clean layout.
Centered
centeredH1 centered, no image. Typography-forward.
Form
hero-formText left, contact/quote form right. Lead gen focused.
Card
hero-cardFloating card over full-bleed background image.
Sample Combinations
How the elements combine into complete brand identities. Each row shows a different theme with its matching nav, button, card, and photo treatments.
Home · Services · Contact Home · Services · About · Contact (520) 881-6000 Portfolio · About · Contact Team Contact
Every combination above is reproducible by the AI builder. Each #tag is a setting the CMS can override per site.