Community Wolf
Community
APIAboutContact
Book a demo

Community Wolf

Real-time safety intelligence for citizens and the teams who protect them.

Community Tools

  • Public map
  • Namola
  • WhatsApp

Business Tools

  • Access Control
  • Intelligence
  • Safety API
  • Group Agents
  • Patrol Management
  • Roster Management
  • Safety Survey
  • Pricing
  • Pricing calculator

Resources

  • Docs
  • Changelog
  • Design system

Company

  • Community
  • Business
  • API
  • About
  • Contact

Get pilot updates

New features, city launches, and integration partnerships - delivered monthly.

Subscribe to updates

(c) 2026 Community Wolf. All rights reserved.

Privacy PolicyTerms of Service
Wolf design system
Foundations
  • Brand
  • Voice and tone
  • Colour
  • Typography
  • Spacing and layout
  • Radius, elevation and borders
  • Motion
  • Iconography
  • Imagery and photography
  • Data visualisation
  • Accessibility
Patterns
  • App shell
  • Hero sections
  • Empty states
  • Error states
  • Skeletons and loading
  • Forms
  • Tables and data density
  • Confirmation and destructive actions
  • Authentication surfaces
Components
  • Button
  • Input
  • Card
  • Badge
  • Dialog
  • Label
  • Textarea
  • Select
  • Checkbox
  • Radio group
  • Switch
  • Form field
  • Tabs
  • Popover
  • Tooltip
  • Accordion
  • Alert dialog
  • Confirm dialog
  • Toast (Sonner)
  • Skeleton
  • Empty state

foundations

Data visualisation

Every chart is an argument. Never encode by colour alone. Respect the risk taxonomy. Honesty over aesthetics.

Read the full spec

Chart-type decision guide

Pick from the intent, not the aesthetic. This is the short version of the decision tree — the spec covers edge cases.

  • Change over time — one series
    Line
    alt · Area (when volume matters)
  • Change over time — 3+ series
    Line, small-multiple
    alt · Stacked area (composition)
  • Comparison across categories
    Horizontal bar
    alt · Vertical bar if names short
  • Part-to-whole — few parts
    Donut with labels
    alt · Stacked bar
  • Part-to-whole — many parts
    Treemap
    alt · Never pie
  • Distribution
    Histogram
    alt · Box plot (expert)
  • Correlation
    Scatter
    alt · Hex-bin for dense data
  • Geographic density
    Heatmap (H3 grid)
    alt · Choropleth
  • Risk score over time
    Line + threshold
    alt · Area with banded severity

Line — multi-series with end labels

Two risk categories tracked over eight weeks. End-of-line labels mean colour is not the only way to tell the series apart.

tsx
<Line dataKey="theft" stroke="var(--risk-theft)" />
<Line dataKey="assault" stroke="var(--risk-assault)" />

Area — single-series volume

Daily report volume over a week. Area fits when cumulative magnitude matters; otherwise use line.

Horizontal bar — ranked comparison

Comparison across areas. Horizontal bars avoid rotated labels and let long area names sit naturally.

Donut — part-to-whole with labels

Four categories max before a donut becomes illegible. Over four, switch to a stacked bar or a treemap.

  • Theft44%
  • Vehicle22%
  • Assault18%
  • Disorder16%

Stat card

The KPI summary card. Label, value, optional unit, and an explicit change indicator paired with an icon — colour alone never carries the signal.

Reports this week

1,247

+12% vs last week

Active areas

42

unchanged

Response SLA

94%

−3pp vs last week

Previous — FoundationsImagery and photography
Next — FoundationsAccessibility