WatchdogPROPERTY INTELLIGENCE
Brand CenterIdentity, product design, content & implementation
Developer protected
Dashboard
WATCHDOG BRAND SYSTEM
One source of truth for how Watchdog looks, sounds and behaves.
This is the internal handoff for designers, developers, agencies, contractors and AI tools. Use it to keep every Watchdog surface consistent across product UI, public pages, charts, marketing, editorial content and future platforms.
01 · FOUNDATION
StrategyWhat the brand is supposed to feel like
Agencies normally begin with positioning, personality and experience principles before they decide how a button looks. These rules are the filter for every visual and content decision.
Precise
Property data, dates, sources, definitions and limitations should be explicit. Accuracy matters more than cleverness.
Calm
Dense information should feel organized, not alarming. Use whitespace and hierarchy rather than visual noise.
Useful
Show the useful thing before the sales pitch. The product earns trust by helping first.
Human
Homeowners should understand the language while professionals still see enough depth to trust the analysis.
Turn public property data into clear, useful decisions.
Watchdog is not simply a database. The value is organizing facts into context people can act on.
Consumer simplicity. Professional depth.
Use progressive disclosure. A homeowner should never feel buried, while a Pro or Pro+ user should be able to drill into evidence and detail.
Watchdog should
- Feel like a modern property-intelligence product, not a lead form wrapped in marketing.
- Let data and useful actions dominate the first screen.
- Use quiet, repeatable UI patterns that scale to hundreds of data points.
Watchdog should not
- Look like a generic AI SaaS template with glowing gradients and ornamental cards.
- Overstate confidence where data is stale, inferred or incomplete.
- Use hype as a substitute for product value.
02 · IDENTITY
IdentityLogo and brand lockup
The current product identity is the dog mark plus the Watchdog wordmark. Until a dedicated vector master is formally approved, the product lockup below is the implementation reference.
WatchdogPROPERTY INTELLIGENCE
Construction
- Standard product mark: 42 × 42px, 12px radius.
- Gradient:
#183b84→#2f6df6. - Wordmark: Inter 800, about 21px in the desktop app shell.
- Descriptor: 8px uppercase with wide tracking.
- Keep at least 25% of the mark width as clear space around the lockup.
Use
- The dog mark for Watchdog identity and established Agent Intel brand contexts.
- White or very light neutral surfaces around the primary lockup whenever possible.
Avoid
- Stretching, skewing, rotating, outlining or applying unrelated effects.
- Replacing the dog with a generic house icon when representing Watchdog itself.
03 · COLOR
TokensCanonical product palette
Watchdog blue carries action and active state. Navy creates authority. Neutrals do most of the work. Semantic colors mean something and are not decoration.
Older public pages contain a navy/gold language. Treat that as a maintained legacy context, not permission to introduce gold into new product UI without a documented reason.
04 · TYPOGRAPHY
TypeA two-font product system
New product work uses Plus Jakarta Sans for display and Inter for body/UI. Existing editorial surfaces may keep their established exceptions until they are redesigned.
PLUS JAKARTA SANS · DISPLAY
Property intelligence without the noise.
Use for major headings, section titles and high-value display numbers.
INTER · PRODUCT UI / BODY
Watchdog organizes property records, assessments, tax signals and professional tools into a clear workspace that is easy to scan.
Use for controls, labels, tables, body copy, navigation and dense product information.
EDITORIAL EXCEPTION
Editorial serif is an accent, not an app font.
Existing public content may use Playfair Display or Source Sans 3. Do not introduce serif display type into dashboards or data tools.
05 · SPACING & SHAPE
LayoutRepeatable geometry
A small spacing and radius vocabulary makes separate tools feel like one product. Use the scale before inventing one-off dimensions.
Spacing scale
4 / 8pxMicro gaps, icon spacing
12 / 16pxControls, compact cards
20 / 24pxCard padding, group spacing
32 / 40pxPage sections and desktop gutters
48 / 64pxMajor editorial or landing-page rhythm
Radius system
8pxCompact surfaces
10pxButtons and inputs
12pxStandard cards/controls
18pxLarge panels and drawers
999pxStatus/filter pills only
Use subtle shadows: 0 8px 24px rgba(40,55,82,.045) for everyday elevation. Large menus/modals can use a stronger elevated shadow. Avoid making every card float.
06 · COMPONENTS
UI kitWhat the system looks like in practice
These are reference behaviors, not a separate component library. Reuse the same visual grammar when building new product surfaces.
BUTTON HIERARCHY
FORM CONTROL
STATUS
Active Verified Review Error
DATA CARD
ANNUAL PROPERTY TAX$8,412
2025 billed amount · NJ Division of Taxation MOD-IV
Component behavior
- One obvious primary action per local context.
- Cards represent meaningful grouping, not decoration.
- Use icon + text where status meaning matters.
Avoid UI clutter
- Nested cards inside cards unless the nesting communicates actual hierarchy.
- Pills for every button, label and piece of metadata.
- Thick borders, colored side rails and decorative outlines.
07 · RESPONSIVE
Mobile firstMobile is a product mode, not a resize
Watchdog should behave like a modern web app on a phone. Reorder by task priority, preserve legibility and prevent sticky UI from covering information.
1280px+
Wide desktop. Use full multi-column layouts when the content benefits.
1024px
Desktop/tablet transition. Reduce rail widths and optional chrome.
760px
Primary mobile breakpoint. Reorder around the user’s next action.
480px
Small phone. Reduce decorative copy before reducing readability.
- Primary mobile controls should preferably provide about 52px of vertical target height.
- Dense tables should scroll, summarize or transform. Never compress until the text becomes unreadable.
- Sticky controls must not cover property data, CTAs, map controls or form fields.
- Mobile order follows task priority, not desktop DOM order by default.
08 · DATA VISUALIZATION
DataEvery chart should answer a question
Watchdog is a data product. Charts are evidence, not wallpaper. Use units, time range, source and freshness wherever they materially affect interpretation.
Series order
#2f6df6 → #183b84 → #748198 → semantic colors only when meaningful.
Directness
Prefer direct labels, clear baselines and visible units. Make comparison logic obvious.
Trust
Show the data date/source and distinguish observed values from inferred or modeled values.
Use
- Simple lines, bars, areas or scatter plots suited to the question.
- Accessible legends and text summaries.
Avoid
- 3D charts, decorative gradients and rainbow palettes.
- Red-versus-green-only differentiation.
09 · MOTION
InteractionMotion explains state change
Animation is useful when it shows continuity, reveals hierarchy or confirms an interaction. It is not a requirement for every element entering the viewport.
Fast · 160ms
Hover, micro-state and small opacity transitions.
Standard · 240ms
Menus, panels, cards changing state.
Deliberate · 320ms
Large drawers or transitions where continuity matters.
Preferred easing: cubic-bezier(.2,.8,.2,1). Always preserve full functionality under prefers-reduced-motion.
10 · IMAGERY & ICONS
ExpressionUse local, credible visual context
Photography should support the property story. Iconography should support recognition. Neither should fill empty space simply because a layout feels too quiet.
Photography direction
- Real New Jersey homes and property details.
- Streetscapes, towns, maps and recognizable local context.
- Owned or properly licensed imagery first; Unsplash when appropriate.
Icon direction
- Font Awesome 6 is the primary existing icon library.
- Use icons at restrained sizes and only where they improve recognition.
- Reserve the dog mark for brand/Agent Intel contexts already established.
Avoid
- Obvious AI-generated homes, generic handshake imagery, fake dashboards or misleading property images.
- Implying a stock image depicts the exact property being discussed.
11 · VOICE & COPY
ContentPlainspoken, specific and credible
Watchdog content should sound like a smart person explaining the property facts clearly. The goal is trust and usefulness, not a performance of expertise.
Lead with the answer
Put the useful fact or action first. Technical context can follow.
Explain terms
Translate tax, assessment, appeal and real-estate language into normal language without dumbing it down.
State limits
If data is annual, delayed, modeled or incomplete, say so near the result that depends on it.
Preferred CTAs
- View property
- Compare towns
- See full report
- Save property
- Upgrade to Pro
Avoid
- AI-writing tropes, canned transitions and fake excitement.
- “Revolutionary,” “game-changing,” “ultimate” and similar hype unless a fact truly supports it.
- Em dashes in published Watchdog editorial copy.
12 · ACCESSIBILITY
RequiredTarget WCAG 2.2 AA
Accessibility is part of brand quality. A polished interface that cannot be navigated or understood is not on-brand.
Keyboard
Visible focus and complete keyboard paths through interactive flows.
Contrast
Readable text and control contrast across normal, hover, focus and disabled states.
Semantics
Real labels, headings, landmarks and meaningful control names.
Motion
Reduced-motion users keep the full experience without unnecessary animation.
- Never use placeholder text as the only form label.
- Never rely on color alone to communicate status.
- Charts need a readable summary or equivalent text when the information is not otherwise available.
13 · IMPLEMENTATION
Developer handoffCopy the system, not a random page
New surfaces should reuse shared patterns and stable tokens. Page-level exceptions stay exceptions until they are deliberately promoted into the system.
:root {
--wd-bg: #f5f7fb;
--wd-surface: #ffffff;
--wd-ink: #111d38;
--wd-text: #31435c;
--wd-muted: #748198;
--wd-subtle: #8794a7;
--wd-line: #e2e7ef;
--wd-soft: #edf1f6;
--wd-primary: #2f6df6;
--wd-primary-dark: #183b84;
--wd-primary-soft: #e9f0ff;
--wd-success: #18a966;
--wd-warning: #f5a20a;
--wd-danger: #e34f5f;
}Shared references
/property/css/app-shell-2027.cssis the strongest current visual reference for new product chrome./property/js/access-guard.jsowns protected route access./property/partials/sidemenu.htmlowns shared signed-in navigation.
Engineering rules
- Prefer shared variables/components over copied page CSS.
- Do not introduce a new font, accent, radius or shadow family without updating this system.
- Use stable CSS/JS filenames. Do not add
?v=query-string version numbers to new references.
14 · LLM HANDOFF
AI readyGive another model this context first
The full machine-readable spec is more detailed. This prompt is the minimum safe handoff when using another model or coding agent on Watchdog.
You are working on Watchdog Property Intelligence. Before changing UI or copy, read /property/branding/brand-system.json and /property/branding/LLM-BRAND-GUIDE.md. Treat them as the brand source of truth unless I explicitly override them. Preserve Watchdog typography, color, spacing, shape, content voice, responsive behavior, accessibility and access-control patterns. Reuse existing shared components before inventing new systems. Do not create generic AI-SaaS styling, excessive gradients/glassmorphism/pills, a third font system, new accent colors, em dashes in published editorial copy, or ?v= query-string versions on new CSS/JS references. If legacy code conflicts with the brand system, flag the conflict and move new work toward the canonical system.
For exact structured instructions, use /property/branding/brand-system.json. For a human-readable concise handoff, use /property/branding/LLM-BRAND-GUIDE.md.
15 · ASSET INVENTORY
FilesWhere the important brand pieces live
This is intentionally an inventory, not a folder of copied assets. Reference the source rather than creating duplicates that drift.
Machine-readable brand system/property/branding/brand-system.json
OpenLLM brand guide/property/branding/LLM-BRAND-GUIDE.md
OpenCurrent product shell reference/property/css/app-shell-2027.css
OpenProtected route access/property/js/access-guard.js
OpenSigned-in navigation/property/partials/sidemenu.html
OpenFavicon set/favicon.svg · /favicon.ico · /favicon-96x96.png · /apple-touch-icon.png
Open
Asset debt: Watchdog currently uses the product HTML/CSS dog lockup as its identity reference. A dedicated approved vector logo package should eventually include SVG, monochrome, reversed, icon-only and social/avatar variants.
16 · GOVERNANCE
Operating modelHow agencies keep a brand consistent
The expensive part of a brand system is not choosing colors. It is governance: defining authority, documenting exceptions and requiring system-level changes to update the source of truth.
| Layer | What it governs | Watchdog source | Rule |
|---|---|---|---|
| Brand strategy | Positioning, personality, promise, experience principles | This Brand Center | Changes should be intentional and rare. |
| Visual identity | Logo, color, typography, imagery direction | Brand Center + brand-system.json | New visual language requires a system update. |
| Product design system | Spacing, shape, components, responsive behavior, motion | brand-system.json + shared CSS | Reuse before creating one-offs. |
| Content system | Voice, terminology, CTA style, editorial rules | LLM guide + Brand Center | Copy should sound recognizably Watchdog. |
| Asset library | Approved logo, favicon, photos, templates | Source-file inventory | Reference originals instead of duplicating assets. |
| Governance | Who can change the system and how exceptions work | Brand Center | System changes update documentation in the same change. |
Authority order
brand-system.jsonLLM-BRAND-GUIDE.md- This visual Brand Center
app-shell-2027.css- Legacy page-level CSS
Before approving a change
- Does it look unmistakably like the same product as Dashboard and Home?
- Is the main task obvious before marketing copy?
- Does mobile feel intentionally designed?
- Did we add decoration with no information purpose?
- Are access, keyboard, contrast and reduced-motion requirements preserved?