AGENT WALLACE
Your Family's Loyal Digital Guardian
Brand Essence
Brand Story
Agent Wallace represents the perfect fusion of cutting-edge technology and the timeless loyalty of man's best friend. Inspired by the playful nature, unwavering loyalty, and intuitive sense of your own dog, we've created a digital companion that embodies these qualities in the digital realm. In an increasingly complex world, Agent Wallace stands guard over what matters most—your family.
Brand Purpose
To provide families with uncompromising protection through technology that feels as approachable and trustworthy as your favorite family pet.
Brand Promise
Smart protection with personality. Agent Wallace delivers peace of mind through intelligent security that fits your family's lifestyle with a friendly, approachable presence.
Core Values
- Playful Protection: Security doesn't have to feel serious to be effective
- Intuitive Intelligence: Smart enough to detect threats, wise enough to know when to alert
- Familiar Companion: Security that feels like a friend, not a system
- Adaptive Guardian: Growing with your family and evolving with changing needs
- Trustworthy Friend: A reliable presence that becomes part of the family fabric
Logo Guidelines
Primary Logo
The Agent Wallace logo features a friendly, stylized dog with tech-inspired elements. The design balances playfulness with protection, using bold geometric shapes and a vibrant orange color scheme.
Logo Clear Space
Always maintain a minimum clear space around the logo. This space should be equal to the height of the letter "A" in "AGENT".
Minimum Size
To maintain legibility, never reproduce the logo smaller than 30px in height for digital applications or 0.5 inches in print.
Logo Misuse
- Do not alter the colors
- Do not distort or stretch
- Do not rotate
- Do not add effects like shadows or gradients
- Do not place on busy backgrounds without sufficient contrast
Color Palette
The Agent Wallace color palette balances vibrant energy with trustworthy stability. The primary orange represents friendliness and warmth, inspired by the brand's canine mascot, while the supporting blues and neutrals add technological sophistication and reliability.
Color Usage
Use the primary orange as the leading color for buttons, highlights, and important UI elements. The navy blue serves as an anchor for headers and footers. White and light gray provide breathing room, while black is reserved for text and outlines.
/* CSS Variables */
:root {
--color-orange: #FF9E2C;
--color-navy: #162B4B;
--color-sky-blue: #88CCEE;
--color-white: #FFFFFF;
--color-black: #202020;
--color-light-gray: #F5F5F5;
--color-medium-gray: #D1D1D1;
--color-dark-gray: #707070;
}
Vibrant Orange
#FF9E2C
RGB: 255, 158, 44
CMYK: 0, 38, 83, 0
Deep Navy
#162B4B
RGB: 22, 43, 75
CMYK: 71, 43, 0, 71
Sky Blue
#88CCEE
RGB: 136, 204, 238
CMYK: 43, 14, 0, 7
Night Black
#202020
RGB: 32, 32, 32
CMYK: 0, 0, 0, 87
Typography
Quicksand
Primary font for headlines, branding, and display text. This friendly, geometric sans-serif with rounded terminals feels approachable yet refined.
Quicksand Light 300
Quicksand Regular 400
Quicksand Medium 500
Quicksand Semi-Bold 600
Quicksand Bold 700
Web-safe Alternative
Arial Rounded MT Bold, Avenir, sans-serif
Proxima Nova
Secondary font for body copy and interface elements. This versatile sans-serif balances readability with personality.
Proxima Nova Regular 400
Proxima Nova Medium 500
Proxima Nova Semi-Bold 600
Proxima Nova Bold 700
Web-safe Alternative
Arial, Helvetica, sans-serif
/* Typography CSS */
/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
/* Font hierarchy */
body {
font-family: 'Proxima Nova', Arial, Helvetica, sans-serif;
font-weight: 400;
line-height: 1.6;
color: var(--color-black);
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Quicksand', 'Arial Rounded MT Bold', Avenir, sans-serif;
font-weight: 600;
line-height: 1.2;
color: var(--color-navy);
}
/* Font sizes */
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1rem; }
.subtitle { font-size: 1.25rem; font-weight: 400; }
.body-large { font-size: 1.125rem; }
.body-small { font-size: 0.875rem; }
.caption { font-size: 0.75rem; }
Grid System & Layout
Agent Wallace uses a flexible 12-column grid system that provides structure while allowing for creative layouts. The system accommodates various screen sizes through responsive breakpoints.
Key Specifications
- 12-column grid
- 30px gutters (15px on each side)
- 1200px max container width
- 20px padding on mobile
Breakpoints
- Mobile: < 768px
- Tablet: 768px - 1024px
- Desktop: > 1024px
/* Grid System CSS */
.aw-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.aw-row {
display: flex;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
}
.aw-col {
padding-left: 15px;
padding-right: 15px;
flex: 1 0 0%;
}
.aw-col-6 {
padding-left: 15px;
padding-right: 15px;
flex: 0 0 50%;
max-width: 50%;
}
.aw-col-4 {
padding-left: 15px;
padding-right: 15px;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.aw-col-6, .aw-col-4 {
flex: 0 0 100%;
max-width: 100%;
}
}
Grid Demonstration
UI Components
Buttons
<button class="button-primary">Primary Button</button> <button class="button-secondary">Secondary Button</button> <a href="#" class="button-text">Text Link</a>
Notifications
Your home is secure and being monitored.
Unknown person detected at the front door.
Smoke detected in kitchen area.
<div class="alert alert-success"> <i class="fas fa-check-circle mr-3"></i> <p>Your home is secure and being monitored.</p> </div>
Cards
Security Report
All systems functioning normally. No unusual activity detected in the last 24 hours.
<div class="bg-white rounded-lg shadow-md p-6">
<h4 class="font-bold mb-3">Security Report</h4>
<p class="mb-4">All systems functioning normally.</p>
<div class="flex justify-end">
<button class="button-text">View Details</button>
</div>
</div>
Form Elements
<div class="mb-4">
<label class="block text-sm font-semibold mb-2">Email Address</label>
<input type="email" class="w-full px-4 py-2 border rounded-lg"
placeholder="your@email.com">
</div>
Voice & Tone
Brand Personality
- Friendly: Approachable and conversational
- Watchful: Alert without being intrusive
- Clever: Smart without being complicated
- Playful: Bringing joy to security
- Reassuring: Confidently protective without alarming
Key Messages
Primary Message: "Protection with a Heart"
Supporting Messages:
- "Security that fits your family's lifestyle"
- "The watchful companion that's always there"
- "Smart protection with personality"
- "The guardian that feels like family"
Tone Examples
Standard Alert
❌ "INTRUDER ALERT: Unknown person detected. Threat level high. System activated."
✅ "I noticed someone at your door. It's not a familiar face. Would you like me to respond?"
Status Update
❌ "System scan complete. No anomalies detected in specified time range."
✅ "Your home has been secure all day. The children arrived safely at 3:15 PM."
Emergency Notification
❌ "DANGER: Smoke detector triggered in kitchen. Emergency protocol initiated."
✅ "Unusual smoke levels detected in the kitchen. Emergency services have been notified. Moving to monitor the situation."
Campaign Concepts: "Family's Best Friend"
Campaign Overview
"Family's Best Friend" positions Agent Wallace as the digital evolution of man's best friend. The campaign features the playful yet protective character of Agent Wallace seamlessly integrating into family life, bringing both security and smiles to everyday moments.
Digital Video: "Meet Wallace"
30-second spot introducing Agent Wallace as a character who becomes part of the family. The stylized dog moves around the house, checking on sleeping children, alerting to a delivery person, and settling down in "guard mode" at night, all with personality and charm.
TAGLINE
"Always There. Always Aware."
Print Series: "Family's Best Friend"
A series of visually striking ads showing Agent Wallace in various family scenarios:
- "Nightwatch" - Character glowing softly in a hallway as children sleep
- "Welcome Committee" - Character alerting to visitors with friendly but alert posture
- "Home Team" - Character as part of family movie night, still vigilant but relaxed
TAGLINE
"Protection with a Heart"
Social Campaign: "Wallace Moments"
Shareable, short animations showing Agent Wallace reacting to different home scenarios with personality and humor while still performing its security functions.
Interactive content will encourage families to share their own "Wallace Moments" to build a community around the brand.
HASHTAG
#WallaceMoments
Application Examples
Digital Applications
Mobile App Interface
Home Status: Secure
Last updated: 2 min ago
Security
Cameras
Family
History
Physical Applications
Product Packaging
AGENT WALLACE
Your Family's Loyal Digital Guardian
Package Contents:
- Agent Wallace Smart Guardian Device
- Charging Base
- Power Adapter
- Quick Start Guide
- 2-Year Limited Warranty
Social Media
Instagram Post
Image Placeholder
agentwallace Meet your family's newest guardian! Agent Wallace keeps watch while you rest easy. #FamilyProtection #SmartHome #WallaceMoments
Marketing Collateral
Brochure Design
AGENT WALLACE
Your Family's Loyal Digital Guardian
Introducing a New Kind of Protection
Agent Wallace combines advanced security technology with the friendly presence of a family pet. It's not just a device—it's a guardian with personality.
Smart Protection
Intelligent Alerts
Mobile Control
Family-Friendly
CSS Implementation Guide
Complete CSS Framework
Below is a comprehensive CSS framework that can be used to implement the Agent Wallace brand consistently across digital platforms.
/* AGENT WALLACE - Brand Style Framework */
/* Color Variables */
:root {
--color-orange: #FF9E2C;
--color-navy: #162B4B;
--color-sky-blue: #88CCEE;
--color-white: #FFFFFF;
--color-black: #202020;
--color-light-gray: #F5F5F5;
--color-medium-gray: #D1D1D1;
--color-dark-gray: #707070;
/* Font Sizes */
--font-size-xs: 0.75rem; /* 12px */
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1rem; /* 16px */
--font-size-lg: 1.125rem; /* 18px */
--font-size-xl: 1.25rem; /* 20px */
--font-size-2xl: 1.5rem; /* 24px */
--font-size-3xl: 1.875rem; /* 30px */
--font-size-4xl: 2.25rem; /* 36px */
--font-size-5xl: 3rem; /* 48px */
/* Spacing */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.5rem; /* 24px */
--space-6: 2rem; /* 32px */
--space-8: 2.5rem; /* 40px */
--space-10: 3rem; /* 48px */
/* Borders */
--border-radius-sm: 4px;
--border-radius-md: 8px;
--border-radius-lg: 12px;
--border-radius-full: 9999px;
}
/* Typography */
html {
font-size: 16px;
}
body {
font-family: 'Proxima Nova', Arial, Helvetica, sans-serif;
font-weight: 400;
line-height: 1.6;
color: var(--color-black);
background-color: var(--color-white);
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Quicksand', 'Arial Rounded MT Bold', Avenir, sans-serif;
font-weight: 600;
line-height: 1.2;
color: var(--color-navy);
margin-top: 0;
}
h1 { font-size: var(--font-size-5xl); }
h2 { font-size: var(--font-size-4xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }
.subtitle {
font-size: var(--font-size-xl);
font-weight: 400;
}
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
/* Colors */
.text-orange { color: var(--color-orange); }
.text-navy { color: var(--color-navy); }
.text-sky-blue { color: var(--color-sky-blue); }
.text-white { color: var(--color-white); }
.text-black { color: var(--color-black); }
.text-dark-gray { color: var(--color-dark-gray); }
.bg-orange { background-color: var(--color-orange); }
.bg-navy { background-color: var(--color-navy); }
.bg-sky-blue { background-color: var(--color-sky-blue); }
.bg-white { background-color: var(--color-white); }
.bg-black { background-color: var(--color-black); }
.bg-light-gray { background-color: var(--color-light-gray); }
/* Layout */
.aw-container {
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
.aw-row {
display: flex;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
}
.aw-col {
padding-left: 15px;
padding-right: 15px;
flex: 1 0 0%;
}
.aw-col-12 { flex: 0 0 100%; max-width: 100%; }
.aw-col-6 { flex: 0 0 50%; max-width: 50%; }
.aw-col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.aw-col-3 { flex: 0 0 25%; max-width: 25%; }
/* Spacing */
.m-0 { margin: 0; }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-5 { margin: var(--space-5); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
.p-0 { padding: 0; }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
/* Buttons */
.button-primary {
display: inline-block;
background-color: var(--color-orange);
color: white;
font-family: 'Quicksand', 'Arial Rounded MT Bold', Avenir, sans-serif;
font-weight: 600;
padding: 10px 24px;
border-radius: var(--border-radius-full);
text-align: center;
text-decoration: none;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.button-primary:hover {
background-color: #E88F1C;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.button-secondary {
display: inline-block;
background-color: var(--color-navy);
color: white;
font-family: 'Quicksand', 'Arial Rounded MT Bold', Avenir, sans-serif;
font-weight: 600;
padding: 10px 24px;
border-radius: var(--border-radius-full);
text-align: center;
text-decoration: none;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.button-secondary:hover {
background-color: #0E1B31;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.button-outline {
display: inline-block;
background-color: transparent;
color: var(--color-navy);
font-family: 'Quicksand', 'Arial Rounded MT Bold', Avenir, sans-serif;
font-weight: 600;
padding: 9px 23px;
border-radius: var(--border-radius-full);
text-align: center;
text-decoration: none;
transition: all 0.3s ease;
border: 1px solid var(--color-navy);
cursor: pointer;
}
.button-outline:hover {
background-color: rgba(22, 43, 75, 0.05);
transform: translateY(-2px);
}
.button-text {
display: inline-block;
background-color: transparent;
color: var(--color-navy);
font-family: 'Quicksand', 'Arial Rounded MT Bold', Avenir, sans-serif;
font-weight: 600;
padding: 10px 0;
text-align: center;
text-decoration: none;
transition: all 0.3s ease;
border: none;
cursor: pointer;
position: relative;
}
.button-text::after {
content: "";
position: absolute;
bottom: 5px;
left: 0;
width: 0%;
height: 2px;
background-color: var(--color-orange);
transition: width 0.3s ease;
}
.button-text:hover {
color: var(--color-orange);
}
.button-text:hover::after {
width: 100%;
}
/* Cards */
.card {
background-color: var(--color-white);
border-radius: var(--border-radius-md);
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
padding: var(--space-4);
margin-bottom: var(--space-4);
border: 1px solid var(--color-medium-gray);
}
.card-title {
font-family: 'Quicksand', 'Arial Rounded MT Bold', Avenir, sans-serif;
font-weight: 600;
font-size: var(--font-size-xl);
color: var(--color-navy);
margin-top: 0;
margin-bottom: var(--space-3);
}
/* Alerts */
.alert {
padding: var(--space-4);
border-radius: var(--border-radius-md);
margin: var(--space-4) 0;
display: flex;
align-items: center;
}
.alert-success {
background-color: rgba(136, 204, 238, 0.2);
border-left: 4px solid var(--color-sky-blue);
}
.alert-warning {
background-color: rgba(255, 158, 44, 0.2);
border-left: 4px solid var(--color-orange);
}
.alert-danger {
background-color: rgba(255, 99, 71, 0.2);
border-left: 4px solid tomato;
}
.alert-icon {
margin-right: var(--space-3);
}
/* Forms */
.form-group {
margin-bottom: var(--space-4);
}
.form-label {
display: block;
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--color-navy);
margin-bottom: var(--space-2);
}
.form-control {
display: block;
width: 100%;
padding: 10px var(--space-3);
font-size: var(--font-size-base);
line-height: 1.6;
color: var(--color-black);
background-color: var(--color-white);
border: 1px solid var(--color-medium-gray);
border-radius: var(--border-radius-md);
transition: border-color 0.15s ease-in-out;
}
.form-control:focus {
border-color: var(--color-orange);
outline: 0;
box-shadow: 0 0 0 3px rgba(255, 158, 44, 0.2);
}
.form-select {
display: block;
width: 100%;
padding: 10px var(--space-3);
font-size: var(--font-size-base);
line-height: 1.6;
color: var(--color-black);
background-color: var(--color-white);
border: 1px solid var(--color-medium-gray);
border-radius: var(--border-radius-md);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23212529' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5l-5.5-5.5h11l-5.5 5.5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px 12px;
}
.form-checkbox {
display: inline-block;
vertical-align: middle;
margin-right: var(--space-2);
}
/* Utilities */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-grow { flex-grow: 1; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.rounded-sm { border-radius: var(--border-radius-sm); }
.rounded-md { border-radius: var(--border-radius-md); }
.rounded-lg { border-radius: var(--border-radius-lg); }
.rounded-full { border-radius: var(--border-radius-full); }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.w-full { width: 100%; }
.h-full { height: 100%; }
.border { border: 1px solid var(--color-medium-gray); }
.border-t { border-top: 1px solid var(--color-medium-gray); }
.border-r { border-right: 1px solid var(--color-medium-gray); }
.border-b { border-bottom: 1px solid var(--color-medium-gray); }
.border-l { border-left: 1px solid var(--color-medium-gray); }
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
/* Responsive */
@media (max-width: 768px) {
.aw-col-6, .aw-col-4, .aw-col-3 {
flex: 0 0 100%;
max-width: 100%;
}
h1 { font-size: 2.25rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }
.mobile-hidden { display: none; }
.mobile-block { display: block; }
}