Brand
Guidelines
This document defines how Fox & Shield presents itself — through logo, color, typography, voice, and visual structure. It is for partners, vendors, and collaborators who need to represent the brand accurately.
Our mark
The Fox & Shield mark — a fox face within a shield — represents intelligence, agility, and protection. Always use provided artwork. Never redraw, recolor, or alter the mark.
- Use the color logo on white or warm backgrounds
- Use the white-reversed logo on dark or navy surfaces
- Maintain a clear zone equal to the height of the shield on all sides
- Use the black version for single-color print or engraving
- Always use original artwork files — never recreate the mark
- Place the color logo on a dark, navy, or busy background
- Stretch, skew, rotate, or distort the mark
- Add drop shadows, outlines, glows, or other effects
- Use the logo below a size where the fox face is illegible
- Separate the fox icon from the wordmark outside approved icon-only contexts
Download brand assets
All approved logo files for use on websites, presentations, and marketing materials. Use only the provided artwork — never redraw or recreate the mark.
Color system
Three structural colors carry all brand weight. Color is used functionally, not decoratively. No gradients. No tints used for backgrounds except those listed here.
Type system
Three typefaces with strict, non-overlapping roles. Do not substitute one for another. Do not use any other typeface to represent Fox & Shield.
built to last.
| Role | Size | Weight | Tracking | Preview |
|---|---|---|---|---|
| Hero h1 | 80px | 800 | −2.5px | Hero headline |
| Page h1 | 64–72px | 800 | −2px | Page headline |
| Section h2 | 48px | 800 | −1.5px | Section title |
| Card h3 | 18–20px | 700 | 0 | Card heading |
| Body | 15–17px | 400 | 0 | Body paragraph text runs here. |
| UI label | 11px | 700 | +2px | UPPERCASE LABEL |
| Badge text | 10–11px | 700 | +1.5px | Featured |
How we speak
Fox & Shield sounds like a sharp engineer who actually listens. Confident and direct — never corporate, never salesy. Every claim is specific and backed up.
Expert but human
Speak as someone who knows their craft deeply and explains it clearly. Avoid jargon stacking. If five words do it, don't use ten.
Honest about complexity
We tell clients when off-the-shelf is the right answer. We flag trade-offs before code is written. This honesty is the brand.
Specific over general
Every claim is backed by a real detail: "8+ years of production experience," not "experienced team." Specifics build trust; vagueness erodes it.
No hype
"The work speaks." No superlatives unless earned. Adjective stacking — "innovative, cutting-edge, best-in-class" — is never acceptable.
Software and AI, built to last.
Engineering for the AI era.
When you work with us, you work directly with us.
Grid & spacing
All spacing derives from an 8px base grid. Sections breathe — padding is generous. Content is constrained to a 1280px max-width, centered on the page.
Core components
A compact set of interface elements used across all Fox & Shield products. These are the only approved patterns — do not introduce new variants without explicit approval.
Primary
Navy fill, white text. Hover: #1e3290. 8px radius. Main CTAs only.
Outline
Transparent, 1.5px #e6e6e6 border. Hover: navy. Secondary actions.
Nav button
Compact, 6px radius. Navy fill. Navigation bar only.
Two variants: amber (warm, for featured/primary tags) and navy (neutral label). Always ALL CAPS, 10–11px, weight 700, tracking 1.5px. Radius 4px — deliberately sharp.
Amber dot (7–8px, filled circle) + muted uppercase label (11px, weight 600, tracking 2px). Appears 16–18px above the section h2 on every section without exception.