# Sentinel Cad — Brand Guidelines v1.0
Community. Connected.

## Identity
A composed, dependable voice for FiveM community dispatch. Write in plain language. Lead with the action.
The shield represents protection; its angular S represents Sentinel.
Keep clear space of half a shield width. Minimum shield height: 24px. Minimum wordmark width: 180px.
Never stretch, rotate, or add effects. Use the light wordmark on light surfaces and the dark wordmark on dark surfaces.
SVG wordmarks use Arial for portability. Product typography uses Geist.

## Colors
- Sentinel teal #2DD4BF: dark-surface highlights.
- Deep teal #0F766E: light-mode links and actions with white labels.
- Midnight #0B1220: dark canvas and light-mode text.
- Slate #64748B: supporting neutral.
- Cloud #F4F7FA: light canvas.
- White #FFFFFF: light panels.
- Night panel #111C2D: dark panels.

Never use bright teal for small text on white.
Available: green. Assigned: amber. Emergency: red. Offline: slate.
Pair status colors with labels or icons. Teal is a brand accent, not an emergency indicator.

## Typography
Geist Sans for headings and body. Geist Mono for callsigns, times, incident IDs.
Body: 14–16px, line-height 1.5–1.7. Use sentence case; reserve uppercase for compact labels.
Voice: direct, composed, human. Short messages and clear next steps.

## Appearance
Light: Cloud canvas, white panels, Midnight text, Deep teal actions.
Dark: Midnight canvas, Night panels, Cloud text, Sentinel teal highlights.
Honor system preference unless the user chooses an override.
Keep spacing, hierarchy, and status meanings consistent across appearances.

## Assets and implementation
- sentinel-mark.svg: standalone shield
- sentinel-light.svg: wordmark for light surfaces
- sentinel-dark.svg: wordmark for dark surfaces
- SentinelMark: reusable React mark
- ThemeSwitch: persistent light/dark/system control
- Storage key: sentinel-theme
- Global CSS variables theme the existing UI components.

The dispatch preview uses illustrative sample data.

## PNG exports
All PNGs have transparent backgrounds. Mode names indicate the intended background.
- sentinel-light.png: full wordmark with dark text for light backgrounds, 2200 x 500.
- sentinel-dark.png: full wordmark with light text for dark backgrounds, 2200 x 500.
- sentinel-mark-light.png: teal shield for light backgrounds, 896 x 1024.
- sentinel-mark-dark.png: bright teal shield for dark backgrounds, 896 x 1024.
- sentinel-mark.png: default shield, same as the light variant.
Matching SVG shield variants are also included.