DESIGN SYSTEM / VERIFICATION

Warm Intelligence Showcase

The official visual spec and component directory of openreach.agency. Toggle themes above to view dynamic translations.

01 / IDENTITY

Warm Intelligence

Brand Statement

"We understand where customers are going before most businesses do."

The visual language balances editorial discipline with technological precision. It avoids loud neon "AI bro" graphics, opting instead for calculated restraint.

Voice & Tone

Calm, Precise, Confident, Intelligent, and humanely approachable.

Abstract Symbol
Flexible line marks
02 / CHROMATICS

Color System & Ratios

An editorial color palette driven by warm ivory and forest greens, utilizing copper as a sparse signal element.

Target usage ratio
55% Ivory 25% Ink 12% Forest 5% Stone 3% Copper
Warm Ivory #F6F3EC
Paper Canvas #FCFAF5
Editorial Ink #171916
Deep Forest #18342B
Muted Copper #B86B43
03 / EDITORIAL SYSTEM

Typography & Type Scale

Instrument Serif handles display messaging, Inter commands interface flows, and IBM Plex Mono presents intelligence and stats.

DISPLAY XL (Instrument Serif, 80px / 0.95)
Be there before the decision.
DISPLAY (Instrument Serif, 68px / 0.98)
Turn questions into customers.
HEADING 1 (Instrument Serif, 56px / 1.02)

Customer acquisition, closer to intent.

HEADING 2 (Instrument Serif, 42px / 1.08)

Find demand before your competitors do.

BODY LARGE (Inter, 20px / 1.55)

Offline and local businesses require credible, restrained discovery signals, not hyped SaaS trends.

BODY STANDARD (Inter, 16px)

We audit conversational channels, identify high-intent local queries, and connect target campaigns directly to real-world outcomes.

DATA / INTELLIGENCE (IBM Plex Mono, 13px)

LOC: AUSTIN_TX // CTR: 0.184 // OPPORTUNITY: STRONG // INTENT: HIGH

04 / STRUCTURE

Spacing Scale

Constructed using a modular 8px grid foundation to enforce generous whitespace across marketing layouts.

Space 4 (16px)
Space 5 (24px)
Space 6 (32px)
Space 8 (48px)
Space 10 (80px)
05 / ACTIONS

Button System

Action components designed with premium constraints. Primary actions leverage forest tones with clean text.

06 / CAPTURE

Premium Lead Form

Forms are styled with flat surfaces and clear focus states. No unnecessary questions are asked.

Find My Opportunity

07 / CONTAINERS

Card Library

Physical layer design cards featuring soft ambient shading and responsive border styles.

Hover Interaction Card

Moves slightly upward (translateY) and transitions its border color to muted copper.

Static Base Card

Flat surface card used primarily for grouping text content without drawing highlight attention.

08 / CONVERSATIONS

Conversation Signal

Shows specific intent captured from user questions within AI-driven search models.

CUSTOMER SIGNAL
"I need a reliable roofing company in Austin. How much should a roof replacement cost?"
Intent HIGH
Location AUSTIN, TX
Stage COMPARISON
Category ROOFING
09 / METRICS

Intelligence & KPIs

Muted meters, lists, and line indicators highlighting real opportunities. No colored charts or high-saturation fills.

QUALIFIED OPPORTUNITIES
0
+18.4% / 30 DAY VIEW
MARKET SIGNAL: DENTAL / MIAMI
Customer Intent: HIGH
Competitive Density: MEDIUM
Opportunity: STRONG
Share of Inbound Intent
01 Our Campaign
64.2%
02 Competitor A
20.8%
10 / ADVERTISING

Conversational Ad Mockup

Demonstrates sponsor placement within AI answer modules. Strictly framed as a conceptual mock.

User Prompt: "Where can I get high-end custom wood tables made in Portland?"
"For custom dining and accent tables in Portland, here are high-quality local recommendations..."
SPONSORED PLACEMENT

Oak & Steel Craft

Creating handcrafted, heirloom-quality dining tables from sustainable local hardwoods. Custom sizes available.

* Illustrative example of AI search context matching. Not actual partnership.
11 / TARGET SECTORS

Industry Feeds

Pre-defined maps showing how local verticals capture demand in real-time conversational channels.

Dental Surgery

Dental & Aesthetics

Capturing queries for emergency treatments, veneer costs, and cosmetic specialists.

Contracting

Home Services

Routing immediate demand directly to local roofing, remodeling, and HVAC partners.

05 / PROCESS STAGES

How we capture opportunity

A five-stage process connected by intent monitoring, delivering highly qualified commercial acquisitions.

01

Discover

Scan search models for active conversational interest.

02

Interpret

Analyze signals to isolate true commercial intent.

03

Position

Publish targeted messaging feeds directly matching the search context.

13 / MOTION

Transition Tests

Animations are strictly secondary, focusing on numbers, simple reveals, and spring-based button tracking.

BUTTON PULL
REVEAL EVENT

Soft Scroll Entrance

14 / IMAGERY

Photography System

Visual treatment filters apply a soft warm grading overlay to represent authentic, documentary-style business operations.

Dental Office Clinic
Authentic Warm Grading
Contracting Site
Muted Monochrome Treatment
15 / RESPONSIVE

Viewport Simulator

Verify card layout wrapping, readable columns, and label alignment states.

Sandbox preview
SIGNAL

Dental surgery

"Looking for dental veneers near me"

STAGE

Acquisition

Targeted feeds routes intent directly.