# Sighthound Design System β€” v0.9.1 (Provisional) > 🟑 **Provisional, internal-use, decisions reversible.** Use freely; don't publish > externally as canonical. See [`OPERATING_MODE.md`](./OPERATING_MODE.md) for how to keep > moving without sign-off. > > **v0.9.1 (May 2026)** β€” reframed imagery as optional supporting context rather than a > primary visual driver. Added composition motifs (grids, schematics, data panels, soft > gradients) as first-class alternatives to photography. See *Visual Foundations β†’ > Composition systems* below. A design system for **Sighthound Inc.** and its sub-brand **Sighthound Redactor**. Based on the official *Sighthound Brand Guidelines* (April 2022), the *Content Style Guide v2026.04*, and a May 2026 internal audit of live practice across Slack, sales/proposal docs, and the production sites. > **Read first:** [`AUTHORITATIVE_STATUS.md`](./AUTHORITATIVE_STATUS.md) is the audit-of-record. Every > rule below is annotated there as βœ… Confirmed, ⚠️ Practice not policy, or πŸ”΄ Open gap. > Items awaiting sign-off live in [`DECISIONS_LOG.md`](./DECISIONS_LOG.md). --- ## About the brand **Sighthound** is an IoT / computer-vision company that turns video feeds into actionable data. Their tagline is **"Turning sight into insight."** The greyhound (named **Lucy**, after the founder's dog) is the mascot β€” a visual metaphor for keeping things in sight and tracking them with speed and responsiveness. ### Brand feel (v0.9.1) The Sighthound design system should feel: **Premium Β· Calm Β· Modern Β· Technical but approachable Β· Enterprise-grade Β· Flexible Β· Trustworthy Β· Data-aware Β· Product-ready Β· Scalable** across software, hardware, marketing, and internal tools. It should feel recognizably Sighthound *even when no imagery is used*. > βœ… **Sighthound + Sighthound Redactor are one unified brand**, deliberately connected > via JSON-LD schema: *"sighthound.com ⟷ redactor.com now read as one brand, not two."* > Redactor is a sub-brand, not a separate identity. ### Products | Product | What it is | Site | |---|---|---| | **Sighthound ALPR+** | Software β€” Automatic License Plate Recognition + vehicle make/model/color/generation (MMCG) | sighthound.com/products/alpr | | **Sighthound Redactor** | Software β€” AI-powered video, image & audio redaction (faces, plates, audio) for FOIA / GDPR / CJIS workflows | redactor.com | | **Sighthound Edge Compute** | Hardware β€” Edge AI compute cameras & nodes; IP67 rugged, made in USA | sighthound.com/products/hardware | | **Sighthound Video** | Software β€” Flexible agile Video Management System (VMS) β€” the original product | sighthound.com/products/sighthound-video | ### Audience Government, Engineering, and Enterprise β€” City Traffic Engineers, Retail Store Managers, Python Developers, Business Developers, Law Enforcement. ### Brand pillars Easy Β· Insightful Β· Data-Driven Β· Evolving Β· Connecting Β· Protecting ### Differentiators Made in USA Β· Specialized CV expertise Β· Outcomes-focused Β· Free 24Γ—7Γ—365 support Β· Future-proof (software-defined hardware) Β· High performance. --- ## Sources used - **`uploads/Sighthound-BrandGuidelines-Jul12.pdf`** β€” Official 62-page brand guide (April 2022). Primary visual source of truth. - **Content Style Guide v2026.04** β€” internal copy guide. Active. - **`anti-ai-writing-style.md`** β€” internal. Active. - **May 2026 Slackbot audit** β€” captured verbatim in `AUTHORITATIVE_STATUS.md`. The authoritative cross-reference of what's confirmed, what's practice, and what's open. - **www.sighthound.com** (Squarespace) β€” product pages, hero imagery. - **www.redactor.com** (Webflow) β€” sub-brand visuals. No codebase or Figma library was provided. For pixel-perfect fidelity, attach those. --- ## Content Fundamentals **Tone.** *Informal yet polished.* The brand guide puts it explicitly: "We speak human, even if we are referring to extremely complex technical concepts." Short, honest, solution-oriented. No arrogance, no "talking at" the reader. Sleeves-up, collaborative. **Voice traits.** Authentic Β· Succinct Β· Approachable Β· Helpful Β· A little quirky (the team is a mix of entrepreneurs, AI researchers and CV scientists β€” "we might be the oddballs in the industry, but we're fine with that"). **Person.** Prefers **we/our** (Sighthound) β†’ **you/your** (customer). Collaborative, not prescriptive. Examples from the sites: - *"We solve complex edge & visual AI problems at scale."* - *"Redactor gives you full control over what stays visible, and what gets anonymized."* - *"Let's chat and see how we can make Sighthound ALPR+ work for you."* **Case.** Sentence case everywhere except H4 / overlines / running headers which are ALL CAPS. Titles are Title Case. Logo wordmark is all-lowercase. **βœ… Blog and web headers are sentence case** (Content Style Guide v2026.04). Never use all-lowercase body copy. **Product naming (confirmed).** - βœ… **"Sighthound Redactor"** β€” proper case in all contexts. - βœ… **"ALPR+"** β€” exact form. Never "ALPR Plus", never bare "ALPR". - ⚠️ Use **"Sighthound ALPR+"** in marketing and product headers; bare **"ALPR+"** is OK in dense technical / product-UI contexts. - ⚠️ Spell out **MMCG** (Make/Model/Color/Generation) on first use. **Confirmed privacy claim.** - βœ… *"Sighthound does not collect customer data; all data stays in the customer's deployment."* Usable verbatim or paraphrased. **AI-generated content rule.** - βœ… *"All AI-generated content must be manually verified."* No auto-publish. (Internal rule; no required external-facing disclosure language yet β€” see `DECISIONS_LOG.md` #13.) **Copy patterns.** - Benefit-led, metric-backed: *"Cut Costs by 93%"*, *"Up to 160 FPS on GPU"*, *"Over 2,800 Customers & Partners"*. - "Made Easy" framing: *"Vehicle & Pedestrian Insights Made Easy."* - Action verbs in CTAs: **Talk to our team** Β· **Get started** Β· **Book demo** Β· **Start Free Trial** Β· **Watch Demo** Β· **Explore Compute Hardware**. - Checkmark lists for features (3–4 bullets, parallel construction). **Emoji & gifs.** The brand guide says they "aim to keep things fun, with gifs, puns and casual writing" β€” but the production websites use **no emoji**. Treat emoji as internal / social-only; avoid in product and marketing UI. For icons, use the brand's illustrated system (see Iconography). **Examples to emulate.** - *"The fastest, most accurate, and automated Video Redaction product available today."* - *"Rugged. Proven Powerful. Made in the USA."* - *"A privacy tool that works as hard as you do."* --- ## Visual Foundations ### Color - **Primary:** Blurple `#4f60dc` + White. Per 2022 guide, Blurple drives ~60% of a composition. ⚠️ *Has softened in practice β€” Redactor reads more navy-forward today. Awaiting sign-off (`DECISIONS_LOG.md` #5).* - **Secondary:** Dark Navy `#1a1d38` + Neutral Gray `#eff3f7`. ~30%. **All body text is Dark Navy on light backgrounds.** - **Accents:** Light Orange `#f99f25` Β· Medium Orange `#f05d22` Β· Red Orange `#f62470`. Sparingly (~10%) β€” icons, gradients, illustration pops, key highlights. On orange/pink backgrounds, headings are **white**. - **Gradients:** Used sparingly (~10%). Freeform or linear, any angle, built from palette colors. Brand gradient runs Blurple β†’ Red Orange. ### ⚠️ Accessibility warning β€” orange palette is contrast-risky - **Light Orange `#f99f25` on white** β€” borderline AA. Use for **large text / decorative only**, not body. - **Red Orange `#f62470` on white** β€” **fails AA**. **Never** use for body text. - **Blurple `#4f60dc` on white** β€” passes AA at large sizes; borderline for body. Prefer Navy for long-form copy. - βœ… Navy on white and white on Navy are AA-safe. - πŸ”΄ We have **not formally committed to a WCAG target level**. Recommended: WCAG 2.1 AA minimum (`DECISIONS_LOG.md` #1). ### Typography - **Primary:** **Lexend** (Google Fonts). βœ… Confirmed still the brand face. - **Marketing hierarchy** (per 2022 guide): H1 Lexend Medium 46/1.2 Β· H2 Lexend Light 32/1.33 Β· H3 Lexend Light 16/1.5 Β· H4 Lexend Semibold ALL CAPS 16/1.5 Β· H5 Lexend Light 18/1.5 Β· **Body Lexend Regular 16/1.5**. - **App hierarchy** ⚠️ *practice, not policy:* body is **Lexend Regular 14/1.5** for density. Light 300 is reserved for display type β‰₯32px. (`DECISIONS_LOG.md` #3) - **Alternative (email / software):** **Verdana** ⚠️ practice as the fallback for Lexend. Regular ↔ Lexend Light, Bold ↔ Lexend Semibold. (`DECISIONS_LOG.md` #9) - **Logo wordmark:** **Robofan** β€” ⚠️ vendor-locked, no license confirmed. Never recreate the wordmark; use the logo files in `assets/`. (`DECISIONS_LOG.md` #8) ### Spacing, radii, shadows - Rounded corners are generous and modern. **Buttons: 20px radius** per 2022 guide. ⚠️ Practice split: **20px for CTA / marketing**; **8px for compact app controls** (table actions, chips, toolbar). (`DECISIONS_LOG.md` #10) - Cards: 12px. Inputs: 8px. Pills: 999px. - Spacing scale is 4/8/12/16/24/32/48/64/96 ⚠️ 4pt grid in practice; no formal 4 vs 8 decision. - Shadows are soft and navy-tinted (not black) β€” see `colors_and_type.css`. - Borders are subtle; navy on interactive hover/focus. ### Imagery & photography **Core rule.** Imagery should support the content only when it adds specific meaning. The Sighthound design system should **not** depend on literal photography, traffic visuals, camera feeds, redaction screenshots, hardware renders, or road imagery to feel branded. Prefer flexible composition, strong information hierarchy, abstract visual systems, product UI structure, and placeholder-friendly layouts. Use real imagery only where it improves understanding, trust, evidence, or product context. **When imagery genuinely earns its place** (product-specific nuance): | Product | Imagery is useful for | |---|---| | **Sighthound ALPR+** | Live recognition, vehicle events, camera feeds, evidence review | | **Sighthound Redactor** | Before/after redaction examples, media review, workflow explanation | | **Sighthound Edge Compute** | Hardware, deployment, edge infrastructure context | | **Sighthound Video** | Monitoring, playback, camera management, video workflows | **When imagery is wrong by default** (across all products): Dashboards Β· Settings Β· Analytics Β· Reports Β· Onboarding Β· Admin tools Β· Documentation Β· Internal tools Β· Pricing Β· Forms Β· Empty states Β· Navigation Β· 404s Β· System screens Β· Auth flows Β· Marketing pages without a specific subject. **Treatment rules when imagery does appear:** - **People:** warm, human, smiling β€” only when the page is *about* people. - **Vehicles / expansive views:** bird's-eye, panorama, day-time. Only when the page is *about* mobility, traffic, or geography. - **Equipment:** product on black laptops / monitors / phones β€” only when the page is *about* the device. - **Redactor-specific:** raw footage β†’ redacted, side-by-side. Only when the page is *about* redaction. - **Avoid:** screenshots of code, low-quality / pixelated images, heavy text overlays, software screenshots without a device mockup. ### Composition systems β€” first-class alternatives to imagery A layout should feel recognizably Sighthound **even with no photography**. These motifs do that: - **Typography-led.** A confident H1 + supporting H5 + a thoughtful spacing rhythm carries most pages without an image. - **Data panels.** Tables, KPI tiles, sparklines, status pills β€” the brand reads through structure and color hierarchy, not pictures. - **Cards as the unit of layout.** White on Neutral Gray, 12px radius, soft navy-tinted shadow. Stackable, gridable, sortable. - **Soft gradients.** Blurple β†’ White, or Navy β†’ Blurple at low saturation. Hero backdrops without committing to imagery. - **The wave.** Signature curved form β€” any palette color, any opacity, any angle. Used sparingly as accent, not as wallpaper. - **Detection-grid pattern.** Faint dot or square grid in `--sh-gray-200` over white β€” references CV/sensor language without literal cameras. - **Map-inspired patterns.** Topographic line patterns, road-vector lines, low-opacity. References the geographic / mobility domain abstractly. - **Schematic elements.** Outlined boxes with thin connectors, labelled callouts, isometric line diagrams β€” the "deployment diagram" feel. Great for hardware, architecture, and integration pages. - **Icon-led sections.** A primary illustration icon + heading + body is sufficient β€” no photograph required. - **Neutral placeholder blocks.** Solid Neutral Gray or Navy 700 panels with caption-style label text. Indicates "here is where evidence/footage/screenshot would live" without forcing one. - **Product UI structure.** Show a slice of a real product UI (sidebar + content) when teaching how the product works β€” more informative than stock imagery. Imagery is one tool. Composition is the system. ### Motion & interaction - Motion is subtle and purposeful β€” the Redactor homepage uses a looping product-demo video. No bouncy/playful anim; favor standard `cubic-bezier(0.2, 0, 0.2, 1)` fades and slides at 200–320ms. - **Hover:** buttons invert (primary β†’ darker blurple; secondary whiteβ†’navy background); links underline and deepen in blurple. No glow, no scale. - **Press:** mild darken, no shrink. - **Focus:** 3px blurple ring at 35% alpha for accessibility. ### Layout & graphic motifs - **The wave.** The signature graphic element β€” a flowing curved form that can appear horizontal, angled or vertical. "Innovation, global technology, all-reaching, scanning, futuristic." Can be any palette color or gradient; transparency adjusted to blend. - **Detection-grid pattern.** A faint dot or square grid using `--sh-gray-200` β€” the CV-language equivalent of graph paper. Use as section backgrounds at low opacity; never as wallpaper. - **Map / topo patterns.** Subtle topographic-line patterns at low opacity for sections about deployment, geography, or mobility. Stroke 1px in `--sh-blurple-100` or `--sh-gray-200`. - **Schematic illustrations.** Outlined diagrams β€” labelled boxes, thin connectors, isometric line art. The "deployment diagram" feel. 1.75px stroke in Navy or Blurple. - **Illustrations.** Flat, minimalist, abstract. No more than 3 colors. Subjects: data/charts, cities, highways, parking, infrastructure. - **Cards.** White surface, 12px radius, soft navy-tinted shadow, thin `#e4e8ef` border. The unit of layout. No colored left-accent. - **Transparency & blur.** Used most in redacted imagery (the product IS blur); otherwise used lightly over wave / pattern backgrounds. - **Corner radii.** Buttons (CTA) 20px Β· Buttons (compact) 8px Β· Cards 12px Β· Inputs 8px Β· Pills 999px. --- ## Sub-brand architecture βœ… **Sighthound + Sighthound Redactor read as one connected brand.** Speaker rules (in practice β€” `DECISIONS_LOG.md` #19 for formal architecture): | Surface | Speaker | |---|---| | Product UI + `redactor.com` | **Sighthound Redactor** | | Legal / footer / billing | **Sighthound, Inc.** | | Embedded Redactor (partner OEM) | **Branding stripped** | **Incoming sub-brand:** A new ALPR UI product is being named β€” current candidates from All Hounds include **Sighthound Checkpoint**, **Sighthound Beacon**, **Sighthound Command**. Master-brand descriptor proposal: *"Sighthound Vision AI"*. The 2022 category lockups (Recognizer, Identifier, Signaler, Sighthound Labs) remain placeholders. (`DECISIONS_LOG.md` #4) --- ## Iconography **Primary icons.** Flat illustration style (closer to a small illustration than a line icon). Orange + navy palette, slightly rounded edges, outline style with a medium stroke weight. Used only for major products, services, industries. The Redactor feature grid is the canonical example β€” see `assets/redactor-icon-*.avif`. ⚠️ **No production SVG source files exist** for the 2022 guide's primary/secondary icon set (`DECISIONS_LOG.md` #6). **Secondary icons.** Same design language but applied more freely (list items, benefits, contact). May use an **orange gradient** with navy or white. **Emoji?** No, not in production. Brand guide allows gifs/puns in casual internal comms, but the live marketing sites contain no emoji. **What's in this project.** - Product illustrations (hero imagery) β€” `assets/hero-*`. - Redactor feature icons (6) β€” `assets/redactor-icon-*.avif`. - Compute hardware renders β€” `assets/sighthound-compute-*.png`. - Logos (horizontal/white, Redactor sub-brand) β€” `assets/sighthound-logo-*`, `assets/redactor-logo-*`. - For UI-level icons, use **Lucide** (`unpkg.com/lucide@latest`) at 1.75 stroke weight, `currentColor`. ⚠️ Unblessed but uncontested β€” recommend formal adoption (`DECISIONS_LOG.md` #6). Navy by default, blurple for brand-forward moments, orange reserved for primary-icon illustrations. --- ## Index ``` β”œβ”€β”€ README.md ← you are here β”œβ”€β”€ OPERATING_MODE.md ← v0.9 provisional β€” how to use w/o sign-off β”œβ”€β”€ AUTHORITATIVE_STATUS.md ← audit of every rule: βœ… / ⚠️ / πŸ”΄ β”œβ”€β”€ DECISIONS_LOG.md ← items awaiting sign-off β”œβ”€β”€ SKILL.md ← Agent Skill manifest β”œβ”€β”€ colors_and_type.css ← design tokens + semantic CSS vars β”œβ”€β”€ assets/ ← logos, hero imagery, product icons, hardware renders β”œβ”€β”€ preview/ ← design-system preview cards (registered in Asset panel) β”œβ”€β”€ ui_kits/ β”‚ β”œβ”€β”€ sighthound-marketing/ ← sighthound.com recreation β”‚ └── redactor-app/ ← Redactor product UI recreation └── uploads/ ← source materials (brand guidelines PDF) ``` --- ## Open gaps tracked separately These sit in `DECISIONS_LOG.md` rather than this doc until they're ratified: - πŸ”΄ WCAG target level + AA-safe palette audit - πŸ”΄ Semantic color mapping (success / warning / danger / info) - πŸ”΄ Dark mode palette - πŸ”΄ Motion & animation spec - πŸ”΄ Data visualization palette - πŸ”΄ Partner / OEM white-label rules - πŸ”΄ Compliance copy kit (accuracy, privacy, footer legal) - πŸ”΄ Error & empty-state voice patterns - πŸ”΄ External AI-disclosure language - πŸ”΄ Sub-brand architecture diagram + ALPR UI product naming - πŸ”΄ Wave graphic canonical SVGs + usage rules - πŸ”΄ Photography DAM - πŸ”΄ Robofan licensing - πŸ”΄ Email signature + deck / whitepaper templates - ⏸️ Localization (deferred) --- ## Caveats - **Guidelines are from April 2022** and have not been formally updated. This system is effectively becoming the operational reference. See `AUTHORITATIVE_STATUS.md` for the status of every decision. - **Robofan** (logo wordmark typeface) is vendor-locked β€” never recreate the wordmark. - **No codebase / Figma provided** β€” UI kits are built from live-site observation + brand tokens. - **UI icons** use Lucide as a stand-in for the (non-existent) internal icon set. - **Orange accents fail or barely-pass AA on white** β€” use sparingly and never for body text. Formal a11y commitment pending (`DECISIONS_LOG.md` #1).