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

components

Components

The primitives. Grouped by form, interactive, and composed helpers. Every component is the canonical implementation for its role — pick it first, and only deviate with a written reason.

Form primitives

Controls that capture user input.

  • InputText input primitive, sizing and state variants.
  • TextareaMultiline text input, auto-sizing optional.
  • LabelAccessible text label bound to a form control.
  • SelectAccessible listbox for constrained choice.
  • CheckboxUnchecked, checked, indeterminate, disabled.
  • Radio groupSingle-choice group with keyboard roving focus.
  • SwitchBinary on/off toggle for settings surfaces.
  • Form fieldLabel + control + hint + error, bound to react-hook-form.

Interactive surfaces

Triggers, containers and navigational primitives.

  • Button7 variants × 5 sizes, with icons, loading, disabled, asChild.
  • BadgeSeven semantic variants, with and without icon.
  • CardStatic, interactive-hover, selected, with media.
  • TabsUnderline and pill variants, keyboard-navigable.
  • PopoverNon-modal floating surface anchored to a trigger.
  • TooltipContextual hint on hover and keyboard focus.
  • AccordionCollapsible panels for progressive disclosure.
  • DialogModal surface for focused tasks and confirmations.
  • Alert dialogFocus-trapping confirmation for critical actions.

Compositions and helpers

Higher-level building blocks assembled from the primitives.

  • Confirm dialogDestructive-action pattern built on AlertDialog.
  • Toast (Sonner)Transient status messages via Sonner.
  • SkeletonShimmer placeholder with reduced-motion fallback.
  • Empty stateZero-data surface with icon, heading, helper and CTA.