# Probe Security — Design System

Toronto's premier **condominium security & concierge** provider, in business **since 1978**
(45+ years). Probe protects luxury condo communities across the Greater Toronto Area with
highly trained, sharply uniformed officers who blend hospitality-grade concierge service
with serious protection. This design system modernizes and elevates the brand — "taking it
up a few levels" from the dated current site — while staying rooted in the company's real
heritage, imagery, and voice.

> **Positioning:** premium, trustworthy, established. White-glove service meets genuine
> security expertise. The audience is condo boards, property managers, and residents of
> high-end buildings who "expect the very best."

## Sources reviewed
- **Logo:** `uploads/Probe-Logo-22-11-2023.png` — shield + "PS" monogram + "Since 1978" banner + Trajan-style serif wordmark. Processed into `assets/logo/`.
- **Brochure:** `uploads/Probe Security Print File Brochure Design-V1-28-11-2023.pdf` — services copy, testimonials, actor/officer photography (extracted to `assets/imagery/`).
- **Business card:** `uploads/Igor Cuckovic -Visiting card.pdf` — "PROUDLY SERVING ONTARIO SINCE 1978", contact details.
- **Live site:** https://www.probesecurity.com — services, values, real Google reviews, GTA service areas, contact info.
- **Not received:** the two archives referenced in the brief (`EDIT.zip`, `Probe Security.zip`) were **not present** in the project filesystem — only the three files above and the logo PNG were available. If those held brand fonts or additional assets, re-upload them and we can fold them in.

---

## CONTENT FUNDAMENTALS

**Voice.** Warm, confident, service-forward. Probe is a protector and a host at once —
the tone is reassuring and human, never cold or militaristic. It leans on heritage
("Since 1978", "45+ years") as proof, not nostalgia.

**Person.** Speaks as **"we"** to the client's **"you/your"**: *"we pledge unwavering
dedication to **your** safety."* Client-centric — the reader's community, residents, and
peace of mind are the subject.

**Casing.** Headlines are sentence case in the modern system (the print brochure used
Title Case; we've modernized to sentence case for a sleeker read). The wordmark and
eyebrows are the exception — **ALL CAPS**, widely tracked, set in Cinzel.

**Sentence style.** Short, declarative, benefit-led. Pairs a promise with a proof point.
Favors active verbs: *safeguard, protect, greet, respond, elevate.*

**Signature phrases (use verbatim):**
- "Proudly Serving Toronto Since 1978"
- "Full-Service Condominium Concierge Services"
- "Reach Out for a Safer Tomorrow"
- "24/7 Custom Security Solutions"
- Values: *Safety First · Expertise & Excellence · Client-Centric Approach · Community Partnership*

**Do.** "Highly trained professional condo security guards." · "Best-in-class security,
where residents and guests are always greeted with a smile."
**Don't.** No fear-mongering, no jargon, no exclamation-heavy hype, **no emoji.** Numerals
for stats ("45+", "24/7", "1978"); write out small counts in prose.

---

## VISUAL FOUNDATIONS

**The idea:** *Charcoal & Brass.* Near-black ink (the tailored uniform, the wordmark), a
single refined **brass-gold** accent (the amber name badge; the gold-leaf art in the
lobbies Probe protects), cool **slate** steel neutrals (condo interiors), all on warm
**ivory** paper. Elevated, calm, heritage-premium.

**Color.**
- **Ink** (`--ink-950…500`) is the authority color — dark sections, the wordmark, body on light.
- **Brass** (`--brass-500` primary) is the *only* chromatic accent. Used sparingly: CTAs, eyebrows, icons, stat figures, the diamond ornament. Restraint is what keeps it premium — never flood a layout with gold.
- **Slate** carries text (`--text-body` = slate-700), hairline borders (`--border-subtle` = slate-200), and sunken surfaces.
- **Ivory/paper** are the default page surfaces; pure white is reserved for raised cards.
- Status colors are deliberately **muted** (desaturated green/amber/red/blue) so they never cheapen the palette.

**Type.**
- **Cinzel** — inscriptional roman caps; echoes the "PROBE" wordmark. Brand moments only: the logo wordmark, eyebrows, big stat figures, section-marker labels. Never body.
- **Hanken Grotesk** — modern humanist grotesque; all headings, UI, and body (300–800).
- **IBM Plex Mono** — data, badge IDs (e.g. `SEBASTIAN · #72463284`), metadata.
- Headlines: bold (700–800), tight tracking (-0.01 to -0.02em), `text-wrap: balance`.
- Eyebrows: Cinzel, `--tracking-widest` (0.24em), uppercase, brass, with a leading tick rule.

**Backgrounds.** Solid ivory / sunken slate / ink — **no gradients** except the functional
dark scrim over hero photography (`linear-gradient` ink→transparent) so white text stays
legible. No patterns, no textures, no decorative blur.

**Imagery.** The brand's own photography: tailored officers in black/charcoal suits with the
embroidered shield, warm luxury condo lobbies (teal-slate walls, gold-leaf abstract art),
candid concierge and handshake moments. Tone is **warm, natural, human** — real people,
soft daylight, shallow depth of field. Full-bleed in heroes with an ink scrim; framed in
`--radius-lg` cards elsewhere. Never stock-cliché "hooded hacker" security imagery.

**Corner radius.** Restrained — precision reads premium. Cards `--radius-lg` (12px), buttons
& inputs `--radius-sm` (4px), pills for badges. Nothing is heavily rounded.

**Cards.** White surface, 1px `--border-subtle` hairline, soft cool shadow (`--shadow-sm`),
12px radius. Optional 3px brass top rule (`borderAccent`) for emphasis. Interactive cards
lift 3–4px with a `--shadow-lg` on hover.

**Shadows.** Cool, low-spread, layered (see `--shadow-xs…xl`). A dedicated `--shadow-brass`
glow for hero/CTA emphasis only.

**Borders.** Hairlines do most structural work — `--border-subtle` on light, `--border-ink`
on dark, `--border-brass` for accented dividers. The heritage flourish is a small **brass
diamond** centered in a rule (`Divider ornament`).

**Motion.** Understated and confident. `--dur-fast` (140ms) for hovers, `--dur-base` (220ms)
for lifts/reveals, eased with `--ease-standard` / `--ease-out`. Hover = subtle lift +
shadow + image zoom (1.05) + arrow nudge. Press = color deepen (brass-600→700). **No
bounces, no infinite loops, no flashy entrances.**

**Transparency & blur.** Only two uses: the hero ink scrim, and the header's
frosted-ivory backdrop-blur once scrolled. Otherwise surfaces are opaque.

**Layout.** Centered containers (`--container-max` 1200 / `--container-wide` 1360 /
`--container-narrow` 780). Generous vertical rhythm (`--section-y` ≈ 104px). Sticky header.
8px spacing base with fine steps.

---

## ICONOGRAPHY

The brand had **no consistent icon set** — the live site uses a handful of custom PNG value
icons and a Google-review star SVG. To give the system a coherent, scalable set we use
**Lucide** (MIT) line icons: 2px stroke, round caps/joins, 24px grid — clean and neutral,
matching the sleek modern direction. **This is a substitution** and is delivered via the
`Icon` component, which embeds a curated subset of Lucide paths (`shield`, `shield-check`,
`badge-check`, `phone`, `mail`, `clock`, `map-pin`, `star`, `users`, `arrow-right`, `check`,
`building-2`, `package`, `key-round`, `siren`, `headset`, `menu`, `x`, `quote`, …). Add more
by extending the map in `components/core/Icon.jsx`.

- **The shield mark** (`assets/logo/probe-shield*.png`) is the brand's true icon — use it for
  crests/seals, not as a UI glyph. Never redraw it.
- **No emoji.** No unicode-glyph icons. Icons are always the `Icon` component or the shield asset.
- If you have licensed brand icons, drop the SVGs in `assets/` and we'll wire them into `Icon`.

---

## FONT SUBSTITUTION NOTE ⚠️
The original wordmark appears to be set in **Trajan** (a licensed Adobe face). We substitute
**Cinzel** (Google Fonts) — an inscriptional roman that is visually very close and free to
embed — for the wordmark and display accents, and pair it with **Hanken Grotesk** for UI/body.
Fonts load from the Google Fonts CDN (no local binaries shipped). **If you have the licensed
brand typefaces, send them and we'll self-host exact `@font-face` binaries.**

---

## INDEX / MANIFEST

**Root**
- `styles.css` — entry point (import this). Imports → `tokens/`.
- `readme.md` — this guide. · `SKILL.md` — Agent-Skills wrapper.

**Tokens** (`tokens/`) — `fonts.css`, `colors.css`, `typography.css`, `spacing.css`, `effects.css` (radius/shadow/motion), `base.css`.

**Assets** (`assets/`)
- `logo/` — `probe-logo(.png/-white)`, `probe-shield(.png/-white)`.
- `imagery/` — `uniform-detail`, `officers-console`, `concierge-desk`, `handshake`, `training-audience`.

**Components** — reusable primitives (`window.ProbeSecurityDesignSystem_fdf8ef`):
- **Brand:** `Logo`, `Eyebrow`
- **Core:** `Button`, `Badge`, `Card`, `Divider`, `Icon`
- **Forms:** `Input`, `Textarea`, `Select`
- **Marketing:** `SectionHeading`, `ValueCard`, `StatBlock`, `ServiceCard`, `Testimonial`, `ContactMethod`

**UI kits** (`ui_kits/`)
- `website/` — modernized Probe Security homepage (interactive, with proposal modal). Entry: `index.html`.

**Foundation cards** (`guidelines/`) — specimen cards for the Design System tab (Colors, Type, Spacing, Brand).

### Intentional additions
- **`Icon`** — a wrapper over a curated Lucide subset, added because the brand lacked a
  coherent icon set (see ICONOGRAPHY). It gives every component a consistent glyph source.