# VIREON — Homepage design blueprint & Breakdance reconstruction guide

Version 1.0 · 5 November 2026 · Homepage review stage

## Scope and brand analysis

This deliverable is a standalone HTML/CSS/JavaScript homepage prototype, not a Breakdance template. The existing application in `vireon/` was left unchanged. Review the homepage before commissioning remaining pages. Those pages are specified below, not built.

No separate Brand Book was available in the workspace or conversation attachments. The visual source was `vireon/public/vireon-brand.svg`, a wrapper around an embedded raster logo. Its embedded image has been extracted without redesign or recoloring into `assets/official-brand.png`. The header uses an overflow frame to show the existing lockup without its large surrounding image margins. Request a transparent, tightly framed official SVG/PNG for production; no substitute mark has been invented. The decorative letter V in the system illustration is typography, not a new logo.

The supplied identity suggests a blue-violet V symbol, teal brand detail, widely tracked wordmark and near-black environment. The website translates this into a restrained operating-system aesthetic: thin rules, precise labels, generous editorial typography and clear connected workflows. Blue denotes action; violet denotes adaptation; green denotes system state. Information must never depend on color alone.

Headings use General Sans 500/600; body uses Inter. Fonts currently load from Fontshare and Google Fonts with system fallbacks. Final production should use approved local WOFF2 files with appropriate licenses. The logo and fonts remain pending validation against the missing Brand Book.

## Responsive design system

| Token | Value / use |
|---|---|
| Canvas | #060D0A |
| Surface | #0C1412, with section variation #0A120F |
| Primary action | #3A7BFF |
| Adaptation | #6C3DFF; subdued tint within gradients |
| Ecosystem | #1D9E75; lighter #55C6A0 for small status text |
| Main text | #F5F7FA |
| Body text | #95A19D |
| Divider | #22302A |
| Container | Outer maximum 1248px including 40px side padding; content 1168px |
| Header | Outer maximum 1328px; desktop height 100px; mobile 80px |
| Section rhythm | Desktop 112px top/bottom; tablet 80px; mobile 64px |
| Spacing scale | 4, 8, 12, 16, 24, 32, 40, 56, 80, 112px |
| Radius | Buttons 5px; cards 6px; feature panels 8–9px |
| H1 | Desktop up to 88px; mobile 43–65px; line-height 1.08–1.12 |
| H2 | 34–54px; final conversion headline 42–68px |
| H3 | Usually 21–27px; compact cards 18–20px |
| Body | 14px / 1.65; supporting cards 12–13px; production may increase dense text for readability |
| Labels | 8–10px, uppercase, tracking .13em; decorative or supplemental only |
| Buttons | Minimum 50px height; header compact 40px; visible keyboard focus |
| Breakpoints | Wide >1050px; intermediate 761–1050px; mobile ≤760px |

Do not copy tiny diagram labels as essential instructions. Enlarge for accessibility where needed. Main copy and controls must pass WCAG AA contrast and zoom checks before launch. Desaturated metadata is subordinate, not the sole carrier of information.

Desktop: four system columns, two service columns, five process columns. Tablet: three benefits columns, reduced illustration dimensions, same narrative order. Mobile: navigation disclosure, two system/service columns, stacked comparison/case/matrix, vertical numbered process. At narrow widths the decorative brand-input panel is hidden; the essential system explanation remains in the subsequent four cards. No section relies on horizontal scrolling.

## Section-by-section blueprint

### 1. Hero — make the category tangible

**Purpose:** Establish a premium adaptive media system within seconds.

**Copy:** Selected headline: “Content that gets smarter. Business that grows.” Alternative A: “Your content. An intelligent growth system.” Alternative B: “Every piece of content. A smarter next move.” Supporting copy: “An intelligent system that creates, publishes and learns. Turning every piece of content into a better next move.” Primary CTA: “Book a strategy call.” Secondary: “Explore the system.” Keep “Content That Performs.” in the official lockup.

**Layout / hierarchy:** Label → oversized three-line headline → concise explanation and CTA row → full-width operating-system illustration → industry qualifier. The headline dominates, the blue action follows, the illustration explains. An auxiliary editorial statement occupies desktop right whitespace and disappears on small screens.

**Visual concept / background:** Brand input → intelligence core → adaptive output. Radial blue light stays inside a dark bordered console; CSS bars represent the idea of an improving cycle, not real metrics. The illustration is explicitly labeled illustrative. Avoid fake “live” statuses or unsupported numerical claims.

**UX / conversion:** Visitors can understand the value without interacting. Category labels and restaurant/hospitality qualification reduce ambiguity. The exploratory anchor supports visitors who need education before a call.

**Motion:** Seven-second low-amplitude core glow and 200ms button hover. No rotating copy, autoplay video or scrolling hijack. Reduced-motion disables animation.

**Breakdance:** Section → Div vertical stack; Div flex heading row; Heading, Text, Buttons; Div with 3-column grid for console. Build rings from nested Divs with border radius 50%; CSS gradient and bars from Divs. Use Image for the official logo. Set intermediate/mobile visibility rules for secondary diagram detail. Custom CSS only for concentric positioning and glow.

### 2. Problem — expose the missing feedback loop

**Purpose:** Reframe content volume as an incomplete measure of success.

**Copy:** “More content. Isn’t the answer.” Supporting statement: “A full content calendar means very little if nothing moves your business forward.” Contrast “Brief → Create → Post → Repeat” with “Create → Learn → Adapt ↻.” The problem copy describes the disconnected operating model; avoid claiming every social team behaves this way in future sales collateral.

**Layout / hierarchy:** Two-column editorial introduction followed by one bordered comparison split into muted and green-tinted halves. On mobile the halves stack in the same order.

**UX / conversion:** A direct visual comparison makes the cost of a disconnected workflow understandable without relying on fear or invented statistics. It creates a reason to investigate the system.

**Motion:** Static by default; optional short opacity reveal, once, if approved.

**Breakdance:** Section with background; Div 2-column grid; Heading + rich Text; comparison Div with two child Divs and Text arrow sequences. Native border/background controls suffice.

### 3. What is Vireon — simplify the operating model

**Purpose:** Translate “AI Media Operating System” into four understandable actions.

**Copy:** “One connected system. Always getting better.” Cards: Create, Publish, Analyze, Adapt. Copy explains brand-led creation, deliberate distribution, meaningful signals and better next decisions.

**Layout / hierarchy:** Editorial heading row → four connected equal-width cards. Large icon and small ordinal precede each H3, followed by a short paragraph. Borders join the cards into one system rather than four unrelated products.

**UX / conversion:** The system remains comprehensible without technical vocabulary. Visitors can connect capabilities to existing needs.

**Motion:** Icon color hover only; no critical hover-only information.

**Breakdance:** Section; grid Div 4 columns, 2 on mobile; Icon, Text, Heading per child. Reuse a global card class. Do not use buttons for noninteractive cards.

### 4. Vireon Loop™ — explain continuous improvement

**Purpose:** Establish a memorable six-stage framework.

**Copy:** “Growth isn’t a line. It’s a learning loop.” Stages: Create → Publish → Measure → Learn → Adapt → Scale. Each stage has a distinct explanation available in the prototype. Measurement acknowledges attribution limits; scaling follows evidence, not promises.

**Layout / hierarchy:** Left editorial explanation and active-stage detail; right circular visual plus six numbered stage controls in a 3×2 grid. On mobile the visual follows the explanatory content.

**UX / conversion:** Manual exploration provides depth without overwhelming the page. Buttons are keyboard accessible with pressed states and an announced content update. Default stage is visible without any action.

**Motion:** Immediate stage update; optional 150ms opacity transition. No automatic cycling.

**Breakdance:** Section 2 columns; Advanced Tabs can supply six native editable stage panels and controls, with a decorative circle Div above. Style tab controls into the demonstrated grid. An exact shared detail-panel replica can use a tiny scoped script, but native tab panels are preferred. Prototype JavaScript is not required in the native rebuild.

### 5. Services — show a connected capability set

**Purpose:** Make the offer concrete while avoiding the feel of an agency service catalog.

**Copy:** “Everything connected. Nothing working in isolation.” Four cards: Adaptive Content Systems, AI Video Production, Performance Analytics, Brand Intelligence. AI video copy explicitly includes human quality control.

**Layout / hierarchy:** Two-column grid of broad cards, each with a unique abstract diagram, category label, service name and concise explanation. Mobile retains two columns, with compact artwork; if approved copy expands, change to one column below 480px.

**UX / conversion:** Visitors recognize their entry point while understanding the capabilities belong to one system. Cards currently explain rather than linking to unbuilt service pages.

**Motion:** Border-color hover transition; diagrams stay still.

**Breakdance:** Grid Div; reusable capability card composed of Div artwork, Heading and Text. Native Icons may replace generic Unicode symbols using one consistent icon set. Keep all explanatory text editable. Use native Div bars/frames rather than imported screenshot art.

### 6. Adaptive Content Matrix™ — demonstrate learning

**Purpose:** Show what adaptation means in a restaurant scenario.

**Copy:** “One idea. A smarter next version.” Three stages: Create a hypothesis; Read the signals; Evolve the creative. Example follows an experience-led restaurant story toward tracked reservation intent. No campaign numbers are invented.

**Layout / hierarchy:** Three manual selectors above a two-column demonstration. Left: an original CSS editorial tile and current content direction. Right: current hypothesis plus message, format, objective and next decision. The asymmetric media/data pairing breaks the rhythm of repeated card blocks.

**UX / conversion:** Visitors can inspect cause and effect. The example is illustrative and explicitly says it has no live campaign data. It is a demonstration of the proposed workflow, not a connected application.

**Motion:** Content changes on selection; no automatic shuffling or layout movement. Optional fade only.

**Breakdance:** Advanced Tabs with three complete native editable content panels. Reuse the same visual structure in each. The plate is nested rounded Divs and radial gradients; a later approved food asset can replace it. Do not depend on expensive video rendering. Native tabs avoid custom state synchronization.

### 7. Why Vireon — translate features into value

**Purpose:** Connect operational design to buyer benefits.

**Copy:** “Less guesswork. More forward.” Five benefits: performance with purpose, consistency at every touchpoint, speed with direction, intelligence that compounds, optimization by design.

**Layout / hierarchy:** Split headline and lead paragraph, then five restrained numbered benefits with top rules. Tablet three columns; mobile two, with final item full-width.

**UX / conversion:** Scannable parallel statements make the offer easy to discuss internally. Claims describe intended operational value, not guaranteed business uplift.

**Motion:** None required.

**Breakdance:** Section; two-column introduction; responsive grid of numbered Heading/Text groups. No carousel.

### 8. Process — remove uncertainty about engagement

**Purpose:** Explain what happens after the visitor starts a conversation.

**Copy:** “A clear path. A system built around you.” Discovery, System setup, Content creation, Optimization, Scaling. Supporting text defines the work in each stage. Secondary call prompt: “Find your starting point.”

**Layout / hierarchy:** Five-column numbered rail beneath heading; vertical numbered list on mobile. A single rule per stage implies progression without complex connectors.

**UX / conversion:** Shows a considered onboarding path and approval stage. Avoid invented implementation timelines until delivery capacity is validated.

**Motion:** Optional once-only stagger, maximum 40ms per item; prototype stays static.

**Breakdance:** Responsive grid Divs; ordinal Text, Heading, Text. On mobile use row layout with number and content. CTA opens the shared popup.

### 9. Case studies — prepare an honest proof system

**Purpose:** Provide a premium format for future documented business outcomes.

**Copy:** “Built to be measured. Not just noticed.” Restaurant case placeholder: “From audience attention to reservation intent.” KPI slots: qualified reach, booking actions, cost per outcome. Values remain em dashes.

**Layout / hierarchy:** Split editorial cover and report panel, with three compact KPI cells. Explicit placeholder badge and no-results disclaimer remain visible.

**UX / conversion:** The structure demonstrates accountability, but placeholders are not social proof. Before public launch replace with a verified case or hide the section; do not imply clients or results exist.

**Motion:** None; do not animate empty metrics.

**Breakdance:** Two-column Div with native Heading/Text; 3-column KPI Div. Once case volume exists, use a Post Loop Builder and a case-study post type with fields for context, dates, baseline, outcomes, attribution and client approval. Publish only approved records.

### 10. Testimonials — reserve credible human proof

**Purpose:** Prepare a dignified testimonial treatment without fabricated endorsements.

**Copy:** Current placeholder: “The strongest endorsement will come from the people we work with.” Supporting note specifies permission and attribution. Production component accepts actual quote, name, role, organization and optional approved portrait.

**Layout / hierarchy:** Oversized decorative quotation mark, generous text width, small attribution area. No slider dots or fake star ratings.

**UX / conversion:** A real specific experience can reduce buyer uncertainty. The current placeholder does not claim that benefit has been proven.

**Motion:** None.

**Breakdance:** Div flex; decorative Text marked aria-hidden; Blockquote or Text; attribution fields. Replace placeholder with one approved quote or hide before launch.

### 11. Conversion block — offer a useful next step

**Purpose:** Turn understanding into a qualified conversation.

**Copy:** “Your content could be doing more.” Supporting: “Let’s map what an adaptive media system could look like for your business.” CTA: “Book a strategy call.” Expectation: “A focused conversation. Your goals. A clearer next step.”

**Layout / hierarchy:** Large bordered, softly lit panel; left-aligned headline and action with a decorative low-opacity arrow on the right. The action remains above decorative content at all sizes.

**UX / conversion:** Offers clarity, not an unsubstantiated guarantee or artificial deadline. Repeats the same primary action used in the hero.

**Motion:** Button hover only.

**Breakdance:** Section/Div; native gradient background; Heading/Text/Button; absolutely positioned decorative Icon. Shared Popup for initial qualification, or link to a dedicated strategy-call page once ready.

**Prototype behavior:** All call CTAs open a native browser dialog with name, work email, business and goal fields. Browser validation precedes creation of a local downloadable brief. No network submission, CRM write or appointment occurs. This limitation appears before submission and in the result. Launch requires a real booking destination, configured delivery, confirmation and error paths.

### 12. Footer — finish with clarity

**Purpose:** Reinforce the brand and provide a compact route back to key information.

**Copy:** “Intelligence in motion. Content that performs.” Links to system, capabilities, process, strategy call and prototype privacy information.

**Layout / hierarchy:** Four-column desktop footer, two-column mobile; subdued copyright and prototype label. Production legal links must point to actual approved pages.

**UX / conversion:** Reassures visitors through orderly information architecture. No fake social links, addresses or email destinations.

**Motion:** Link hover only.

**Breakdance:** Footer template; native Image; responsive Div grid; link groups. Remove developer implementation-guide link and prototype label before launch. Add legal company details when supplied.

## Reusable component specifications

| Component | Editable fields | Variants / behavior |
|---|---|---|
| Section intro | Ordinal, eyebrow, H2, supporting copy | Split or stacked; supporting text optional |
| Primary CTA | Label, destination/action, icon | Full-size 50px; compact header; shared blue preset |
| Text CTA | Label, destination, arrow | Anchor or button according to behavior |
| Capability card | Artwork, category, title, description | Four art variants; common border/padding |
| System card | Icon, ordinal, title, description | 4/4/2 grid progression |
| Stage panel | Label, title, description | Six loop / three matrix panels; native tabs |
| KPI group | Label, value, period, source note | Three cells; no value until verified |
| Case card | Industry, title, narrative, KPI group, link | Placeholder or approved published case |
| Testimonial | Quote, name, role, organization, portrait | One quote; no automatic carousel |
| Strategy popup | Name, email, business, objective, action | Qualification; confirmation; error; privacy text |
| Header/footer | Official logo, navigation, legal links | Site-wide templates |

Use shared classes or presets for cards and spacing. Use Global Blocks for repeating editable CTA sections where appropriate. Use post fields for repeated proof content rather than duplicating each completed case manually.

## Realistic native Breakdance reconstruction

HTML cannot be imported as editable native Breakdance sections. Rebuild the element tree manually, using this prototype as a visual and behavior reference. Do not paste the homepage into a giant Code Block or embed it as an iframe.

1. Prepare staging WordPress and confirm the installed Breakdance edition supports the chosen elements.
2. Establish global palette, typography, container, button and form settings. Official reference: [Global Settings](https://breakdance.com/documentation/the-editor/global-settings/).
3. Build shared Header and Footer templates. Add native navigation and its mobile disclosure behavior.
4. Reconstruct the section trees listed above with Sections, Divs, Headings, Text, Buttons, Images and Icons.
5. Build Loop and Matrix with native Advanced Tabs, preserving visible defaults and keyboard interaction. Native panel duplication is preferable to custom content replacement for editor usability.
6. Use native Popup Builder for the shared call flow. Official reference: [Creating a Popup](https://breakdance.com/documentation/popups/creating-a-popup/).
7. Configure native Form Builder fields, validation, submission actions and truthful confirmation messaging. Official reference: [Form Builder](https://breakdance.com/documentation/elements-controls-reference/elements/forms-elements/form-builder/). Decide whether leads go to email, WordPress storage or an approved CRM; configure intentionally and test receipt. No credentials are included in this deliverable.
8. Connect an approved booking provider or dedicated booking page; a lead submission must not be described as an appointment until a real time slot is confirmed.
9. Recreate responsive changes using builder breakpoint controls. Add custom CSS only for necessary decoration and type sizing.

### Required custom CSS / JavaScript boundaries

Native builder controls: layout, grids, typography, spacing, borders, gradients, responsive visibility, basic hover, tabs, popup and form behavior.

Small custom CSS: gradient text using background-clip; decorative orbit ring positioning; low-amplitude glow keyframe; reduced-motion overrides; exact clamp sizing where needed; optional art-specific gradients. Keep selectors scoped to `.vireon-*` classes. The delivered `style.css` is the prototype stylesheet, not a drop-in production stylesheet for generated Breakdance markup.

Custom JavaScript is optional in the WordPress version: native tabs and popup replace the demonstration handlers. Do not copy `app.js` into WordPress without remapping it to the rebuilt DOM. Local text download is a prototype review feature and can be removed. Booking provider embeds may require vendor code; defer loading until requested and evaluate consent requirements. No WebGL, canvas, ThreeJS, animation libraries or framework runtime are required.

## Page-by-page content structure — planned, awaiting homepage review

| Page | Content sequence | Primary action |
|---|---|---|
| Home | Hero → problem → system → Loop → capabilities → Matrix → benefits → process → outcomes → testimonial → call → footer | Strategy call |
| The system | Category introduction → operating model → human oversight → Loop deep dive → inputs/outputs → measurement/attribution → FAQ | Discuss your system |
| Capabilities | Connected overview → content systems → AI video → analytics → intelligence → delivery boundaries → engagement fit | Map your needs |
| Restaurants & hospitality | Business context → common content challenges → sample operating scenarios → location/brand consistency → approved proof → FAQ | Explore your opportunity |
| Outcomes | Verified cases only → industry filter if justified → methodology explanation → related cases | Review your opportunity |
| Individual case | Business/context → baseline + measurement window → intervention → results → attribution limits → client approval/quote → next step | Discuss a similar challenge |
| About | Purpose → operating principles → human strategy + AI → verified people/credentials → engagement philosophy | Meet Vireon |
| Strategy call | Clear offer → suitability → short qualification → actual calendar → confirmation → privacy notice | Select a real time slot |
| Privacy / cookies / legal | Approved legal identity, processing purposes, providers, retention, rights, contact and applicable policies | Relevant legal contact |

No remaining pages have been built or published. The current navigation uses real homepage anchors, so review does not lead to empty pages.

## Asset inventory

Delivered: unchanged official raster logo extraction; CSS system console, orbit rings, bars, video frames, brand-intelligence diagram and abstract restaurant creative tile. The CSS tile is an editorial visual metaphor, not AI-generated food photography. No paid stock or synthetic client imagery is used.

Required for launch: approved tight/transparent official logo; Brand Book; local licensed font files; actual client case records and permission; approved testimonials; any real campaign stills/video; company/legal identity; booking URL; lead destination; privacy copy. Add approved case photography only when it documents actual work. Use responsive AVIF/WebP and descriptive alt text. Do not replace the official lockup with typed lettering.

## Performance, accessibility and conversion plan

Keep the standalone page buildless. Production targets: compressed CSS/JS, responsive logo, local font subsets, no render-blocking third-party booking embed, no autoplay video and minimal motion. These are implementation targets, not measured Lighthouse results. Raster logo is larger than necessary; optimize once the official production export is supplied.

Verify semantic heading order, visible labels, focus order, Escape-to-close, focus return, reduced motion, zoom at 200%, contrast and no horizontal overflow at 360/390/768/1024/1440px. All essential content must remain available without hover. Native tab keyboard behavior must be tested in the production builder output.

Conversion measurement, after consent/configuration: primary CTA click by location, qualification start, validated lead submit, booking start and confirmed booking. Use success events only after the corresponding server/provider action succeeds. Evaluate qualified lead rate and confirmed booking rate, not just clicks. No analytics are installed in the prototype.

## Implementation roadmap

1. **Homepage review:** approve visual direction, hierarchy, messaging, mobile layouts and illustrative interactions.
2. **Brand/content readiness:** supply missing Brand Book, approved logo export, claims evidence and booking details; confirm actual service/delivery boundaries.
3. **Native reconstruction:** establish globals and templates; rebuild homepage sections; implement native tabs and popup.
4. **Remaining pages:** create the approved information architecture, reuse components and add verified content. Do this after homepage approval.
5. **Integrations:** configure real form delivery, calendar, consent and analytics; test success/failure and duplicate-submission behavior.
6. **Release QA:** responsive, keyboard, contrast, performance, SEO metadata, actual lead receipt, appointment confirmation and privacy review. Replace or hide proof placeholders. Remove prototype/developer labels. Back up, publish and monitor actual conversion paths.

## Running the delivered prototype

Open `index.html` directly for a buildless preview, or serve this directory using any local static server. Files: `index.html`, `style.css`, `app.js`, `assets/official-brand.png`, this guide. External font imports require connectivity; system fallbacks preserve usability offline. No npm install or build step is needed. The strategy brief stays local; do not mistake it for a connected sales system.


## V1.1 — Official Vireon branding applied

The header, footer and strategy dialog now use a tightly framed version of the supplied official logo. The system core and Loop use the actual Vireon symbol from the same artwork, replacing the decorative typed V. `assets/vireon-lockup.svg` and `assets/vireon-symbol.svg` preserve the original embedded artwork, colors and proportions; only the SVG viewports change. These wrappers are not new vector masters and retain the raster source. Use the same official assets as native Breakdance Images; preserve aspect ratio. A tightly cropped, transparent production master is still preferable when available.

Primary actions use a restrained blue-to-violet gradient; system accents retain the teal/green ecosystem color. The page structure and prototype behavior remain as reviewed. No external API, booking or publishing integration was added.