Digital Allies — Brand System
← Back to Index
Digital Allies
Brand System · Style Manual

The Digital Allies Brand System.

Voice, color, type, spacing, components, and brand assets — the complete operating manual for designing on-brand for Anthony's shop in Kingman, Arizona. "Technological solutions for people with better things to do."

01Voice & Tone2 specimens
02Color3 specimens
03Typography3 specimens
04Spacing & Structure3 specimens
05Components9 specimens
06Brand & Assets6 specimens
Digital Allies · Est. 2024 · Kingman, AZ contact@digitalallies.net · (928) 228-5769
Section 01

Voice & Tone

How Digital Allies sounds
Voice · Tone Coordinates Casual 65 · Dry 55 · Plain 70 · Confident 75 · Authentic 100
The Tone Coordinates — calibrated, not vague
Formal ←→ Casual65% casual
Dry ←→ Warm55% dry
Technical ←→ Plain70% plain
Confident ←→ Eager75% confident
Performing ←→ Authentic100% authentic
Voice · Jargon Table Corporate speak ↔ DA translation as a brand rule
The Jargon Jar — the brand's translation rule
Corporate SpeakDA Translation
"Leverage synergies"→"Make the parts work together."
"Scalable solutions"→"It works now and won't fall apart later."
"Robust backend"→"Quiet stuff so nothing crashes."
"Holistic brand alignment"→"Your logo and site look like they know each other."
"Onboarding optimization"→"Getting started without the runaround."
Section 02

Color

The 95/5 rule
Core Palette The five anchor colors — Bone White, Charcoal, Pulse Blue, Light Pink, Signal Red
Bone White#F9F6F0Canvas · 75%
Charcoal#2D2D2DStructure · 20%
Pulse Blue#3A7BD5Action · live
Light Pink#FADEEBHover wash
Signal Red#C5301APOI · 5%
The 95/5 Rule 75% canvas + 20% structure + 5% signal — never stacked
75% Bone White
Canvas · 75%Bone White does the heavy lifting.
Structure · 20%Charcoal text + 1 px borders.
Signal · 5%The one moment of red, and only one.

"95% of the canvas serves the 5% masterpiece. When I signal the user, the signal is absolute."

Semantic Tokens CSS vars: bg, fg, accent, signal, border
TokenCSS VarUse
bg--bg / --bone-whitepage canvas
bg-alt--bg-altpinned notes, quotes
fg--fg / --charcoalall body + heading text
fg-muted--fg-mutedsecondary body, captions
accent--accent / --pulse-bluelinks, live state, pulse dot
accent-soft--accent-soft / --light-pinkhover wash, highlight plate
signal--signal / --signal-redprimary CTA, POI marker
border--border (1 px solid)the structural-border
Section 03

Typography

Lexend Deca + JetBrains Mono
Type — Display & Headings Lexend Deca display + H1–H4 step-down
Lexend Deca · Local · Variable 100–900
Display64 / 700 / −0.01em

Solutions.

H140 / 700 / −0.005em

The Departments

H230 / 700

Strategy is Free.

H318 / 600

Dept. of Cooperation

H414 / 700

Corporate Speak

Weight rangeThin → Black
Thin Light Regular Medium SemiBold Bold ExtraBold Black
Type — Body & Mono Lexend Deca specimen + JetBrains Mono specimen
Lexend Deca · Local · 100–900 JetBrains Mono · Local · 100–800 + Italic
Lexend Deca · Headers
Aa Bb Cc

High x-height for scannability under glare. Titles, card headers, action callouts.

H1 Title · 700
H2 Subtitle · 600
H3 Body Lead · 500
JetBrains Mono · Body
Aa Bb Cc

Enforces alignment. Body, prices, tables, system parameters, manual instructions.

SYSTEM = #2D2D2D
Phase 1 · ($0.00)
Last updated 2026
JetBrains Mono · Weight range + italic
100Thin
200ExtraLight
300Light
400Regular
500Medium
600SemiBold
700Bold
800ExtraBold
ItalicPhase→1
Type — Eyebrow & CTA Uppercase tracked eyebrows + the bracketed-CTA pattern
All fonts local · No network request
Eyebrow · signal-red, tracked widest · JetBrains Mono 700 Based in Kingman, AZ · Serving Everywhere Else
FamilyJetBrains Mono
Size10px
Weight700
Tracking0.18em
Color--signal-red
Eyebrow + display headline — the brand's lobby pattern Identity · Style Manual · Spec Sheet
Technological Solutions for People with Better Things to Do.
Bracketed CTA — the brand's button label convention · Lexend Deca 700 13px
[ Inquire Within ] [ View the Diagrams ] [ Report a Signal ]
Tagline — Lexend Deca 600 18px · used in card intros We translate the internet into plain English.
Section 04

Spacing & Structure

The 20px Technical Lace grid
Spacing Scale 4 px sub-units anchored to the 20 px Technical Lace grid
space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-5 ◆
20px · lace
space-6
24px
space-8
32px
space-10
40px
space-12
48px
space-16
64px
space-20
80px · section

◆ 20 px is the Technical Lace baseline. Everything else is 4 px multiples derived from it. "2× the padding of a generic template" is the rule.

Technical Lace & Symmetry Break Ruled-paper 20 px grid + the +8 px red-dot offset

Visual Balance

Red dot nudged +8 px right of center: a calculated "visual itch."

ALIGNED
[ Technical Lace · 20 px ] ◆ Symmetry Break
Borders & Shadows Structural 1 px + hairline + dashed + pinned variants
Borders — corners stay square
structural1 pxsolid #2D2D2D
hairline15%card divider
dashedprice row18% charcoal
pinnedred 4 px+ solid 1 px
Shadows — used sparingly
restingshadow-sm0 1 2 / 4%
live demoshadow-md0 6 12 / 6%
hover liftshadow-lg0 16 32 / 8%
red pinshadow-pin0 2 4 / 20%
Section 05

Components

The working parts
Buttons Primary CTA, secondary, dark, hover, pressed, disabled
Primary · CTA[ Inquire Within ]
Secondary[ View the Diagrams ]
Dark · DownloadDownload PDF
Hover wash[ Inquire Within ]
Pressed · invert[ View the Diagrams ]
Disabled[ Not Available ]
Small · pill rowShow All
Small · activeShow All
Inline linkView the FAQ →
Form Fields Inputs, textarea, EN|ES toggle, error state
NameAs you'd like to be greeted
Email · focused
What are you trying to do?
Phone · errorLooks incomplete — try a full number.
Language
Newsletter
Top Nav Pulse dot lockup, link row, EN|ES toggle
Department Cards 4-up services grid with hover-wash and red top-border

The Design Bureau

Design & Brand

Polished visuals that look like you meant it.

Dept. of Cooperation

Integrations

Your apps talk to each other without arguing.

Self-Governing Bureau

Automation

Boring repetitive stuff runs automatically.

Observation Post

Support

If something breaks at 2am, that's my problem.

Jargon Jar Card Flip-card pair — corporate speak ↔ DA translation
Jargon Jar — click-to-flip card pair (front + back)

Corporate Speak

"Leverage synergies across touchpoints"

DA Translation

"Make the parts work together."

Corporate Speak

"Robust backend infrastructure"

DA Translation

"Quiet stuff running behind the scenes so nothing crashes."

Pinned Note Yellow-paper card + red 4 px pin — used for pull quotes
The Pinned Note · pull quote

"Clean engineering, clear communication, and follow-through that won't require follow up."

Manual registry · field-note variant
Manual Registry

"If you need a glossary to read your website, you've already lost them."

— Jargon Protocol
Pulse Dot Logo Animated blue dot + ring — the only continuous animation
Digital Allies
The Pulse Dot
Dot12 × 12 px · Pulse Blue
Ring16 × 16 px · scale 1→2.4×
Border1 px Charcoal
Pulse3 s ease-in-out infinite
Ring2.2 s ease-out infinite
Uselogo · live indicator
Ruleonly continuous animation
Diagram Accordion Bordered details list with rotating + glyph
AEO & SEO Architecture+
Getting found by search engines is a structural problem. I review the foundation and fix the parts that keep you invisible. Discover → Design → Build → Maintain.
The Four-Step Process+
Language & Accessibility Architecture+
Transparency Table Free / Paid split with dashed price rows

The Reciprocity Loop

Tech ConsultingFree
AI ConsultingFree
Brand DiscoveryFree
AEO & SEO ReviewFree

I do not charge for conversations or clarity. Call it a professional courtesy.

Tactical Deployments

Website DesignFrom $100
Graphic DesignFrom $75
Full ProjectFrom $100
Monthly MaintenanceFrom $50

All quotes given before work begins. No surprises. No silent scope creep.

Section 06

Brand & Assets

Logo, icons, imagery
Logo Lockups Live pulse-dot + horizontal banner variants + favicon
Digital Allies
Pulse lockup (live)Primary
Banner · bluelogo-banner-blue.png
Banner · vermilionlogo-banner-vermilion.png
Banner · glow on darklogo-banner-vermilion-glow.png
Wordmark onlylogo-wordmark.png
Favicon · red squarefavicon.svg
Artifact Icons Topo, compass, rotary phone, metronome, engine, Route 66
The Artifact Icons — 1 px line-art, optional red focal dot
Topo map lines Obs. Post Topo Map
Compass SEO / AEP Compass
Rotary phone Service Rotary
Metronome Integrations Metronome
Engine   Engine
Suspension bridge Tension Bridge Bridge

Hard rule: abstract tech shapes (clouds, gears, generic nodes) are forbidden. Replace with literal vintage artifacts. Lucide is the sanctioned CDN fallback for utility UI. Pending: monocle artifact not yet in asset library.

Department Badges Circular badge variants for the four departments
Department badges — used in the four-card services grid
The Design BureauDesign
Dept. of CooperationIntegrations
Self-Governing BureauAutomation
Observation PostSupport
Suspension Bridge Motif Technology as a bridge — the mission illustration
Suspension bridge
The mission motif

Technology as a bridge

The suspension bridge is the brand's literal manifesto: "good technology connects people to opportunity."

Use on About / mission pages, year-end posts, manifesto banners. Never alongside red signal dots in the same eyeline.

Abstract Brand Art Wavy-line banners + luminous-blue-dot tiles
Abstract art — thin wavy lines + luminous blue dot

Used as full-bleed hero overlays, blog headers, and social tiles. Black + Pulse Blue only.

Photography Vibe Kingman highways · desert beige · warm analog
Desert highway, Kingman AZ
Photography vibe

Desert beiges, dusk light, no people.

Route 66, Kingman highways, museum off-whites. Warm, analog, slightly faded. Pulse Blue and Signal Red are the only colors that appear.