POPS Notebook Brand Book

Visual Identity & Design System Reference

1. Brand Overview & Identity

POPS Notebook is an offline-first digital reference and operational support tool for UK Public Order and Public Safety officers. The brand identity reflects operational authority, clarity, and field-readiness.

The visual system uses a deep navy primary paired with a high-visibility amber accent — echoing the colour language of UK police operational uniforms and high-visibility kit. This combination ensures the interface remains authoritative while drawing attention to critical actions and status indicators.

All colour values in this document are provided in RGBA and hexadecimal formats for use in marketing materials, presentations, and print collateral. The HSL values used in the application's CSS variable system are also documented for developer reference.

2. Light Mode Palette

Default daytime operational theme. High contrast for maximum readability in standard conditions.

#0B2850

Primary

Brand, headers, primary buttons

rgba(11, 40, 80, 1)

#FFFFFF

Background

Main app surface

rgba(255, 255, 255, 1)

#0E2039

Foreground

Primary text

rgba(14, 32, 57, 1)

#FFD900

Accent (Amber)

Highlights, active states, icons

rgba(255, 217, 0, 1)

#D61F1F

Destructive

Errors, delete actions

rgba(214, 31, 31, 1)

#EBECF0

Secondary

Muted surfaces, chips

rgba(235, 236, 240, 1)

#575E6B

Muted Text

Captions, labels

rgba(87, 94, 107, 1)

#D0D4DC

Border

Dividers, input borders

rgba(208, 212, 220, 1)

3. Dark Mode Palette

Low-light operational theme. Reduces eye strain during evening deployments and indoor briefings.

#FFD900

Primary (Amber)

Brand, active elements

rgba(255, 217, 0, 1)

#0A1317

Background

Main app surface

rgba(10, 19, 23, 1)

#F5F5F5

Foreground

Primary text

rgba(245, 245, 245, 1)

#0F1A29

Card

Card surfaces, panels

rgba(15, 26, 41, 1)

#243042

Secondary

Muted surfaces

rgba(36, 48, 66, 1)

#A6A6A6

Muted Text

Captions, labels

rgba(166, 166, 166, 1)

#C32222

Destructive

Errors, delete actions

rgba(195, 34, 34, 1)

#303D50

Border

Dividers, input borders

rgba(48, 61, 80, 1)

4. Night Mode Palette

Deep red-filtered theme for night-time deployments. Preserves night vision during extended outdoor operations.

#120808

Background

Main app surface

rgba(18, 8, 8, 1)

#E05252

Foreground

Primary text (dim red)

rgba(224, 82, 82, 1)

#2E0F0F

Primary

Headers, surfaces

rgba(46, 15, 15, 1)

#1D0C0C

Card

Card surfaces

rgba(29, 12, 12, 1)

#AD1F1F

Accent

Active states

rgba(173, 31, 31, 1)

#BF4040

Muted Text

Captions, labels

rgba(191, 64, 64, 1)

#721D1D

Destructive

Errors, warnings

rgba(114, 29, 29, 1)

#3C2020

Border

Dividers

rgba(60, 32, 32, 1)

5. Training Mode Palette

Airgap-isolated green theme for Academy training. Visually distinct from live operational deployments.

#15472E

Primary

Brand, headers

rgba(21, 71, 46, 1)

#0C1812

Background

Main app surface

rgba(12, 24, 18, 1)

#DAE7DA

Foreground

Primary text

rgba(218, 231, 218, 1)

#12211A

Card

Card surfaces

rgba(18, 33, 26, 1)

#29A329

Accent

Active states, highlights

rgba(41, 163, 41, 1)

#87A187

Muted Text

Captions, labels

rgba(135, 161, 135, 1)

#8F2424

Destructive

Errors, warnings

rgba(143, 36, 36, 1)

#22392E

Border

Dividers

rgba(34, 57, 46, 1)

6. Chart & Data Visualisation Colours

Used for data visualisation, graphs, and statistical displays. These colours provide sufficient contrast for accessible differentiation in both light and dark modes.

Chart 1

#E76E50

rgba(231, 110, 80, 1)

Chart 2

#2A9D90

rgba(42, 157, 144, 1)

Chart 3

#274754

rgba(39, 71, 84, 1)

Chart 4

#E8C468

rgba(232, 196, 104, 1)

Chart 5

#F4A462

rgba(244, 164, 98, 1)

7. Typography System

The application uses a system-native sans-serif font stack for all roles, ensuring maximum performance and native rendering quality across all devices without external font loading.

--font-heading

Heading — ui-sans-serif, system-ui, sans-serif

Used for page titles, section headers, and button labels. Apply bold weight for emphasis.

--font-body

Body — ui-sans-serif, system-ui, sans-serif

Used for paragraph text, descriptions, and form inputs. Regular weight for readability.

--font-mono

ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas

Used for code blocks, reference codes, and data values.

Marketing Recommendation

For external marketing materials, use Inter, SF Pro Display, or Roboto as web-safe alternatives that closely match the system font rendering. Use bold weight (700) for headings and regular weight (400) for body text.

8. Sizing, Spacing & Layout

The design system enforces specific sizing constraints to ensure operational usability in the field — particularly when wearing gloves or operating in high-stress environments.

Touch Targets

Minimum 44×44px for all interactive elements (buttons, inputs, selects) on mobile devices (max-width: 768px). Enforced via CSS media query.

Border Radius

Base radius: 0.5rem (8px). Derived sizes: lg = 0.5rem, md = calc(0.5rem - 2px), sm = calc(0.5rem - 4px).

Font Sizes

Page titles: 1.5rem–1.875rem (24px–30px). Section headers: 1.125rem–1.25rem (18px–20px). Body text: 0.875rem (14px). Captions: 0.75rem (12px). Minimum visible font: 12px.

Spacing System

Standard Tailwind spacing scale. Cards: p-5 (1.25rem). Sections: space-y-6 (1.5rem). Inline gaps: gap-2 to gap-4 (0.5rem–1rem). Bottom padding: calc(7rem + safe-area-inset-bottom) for tab bar clearance.

Max Content Width

Content areas use max-w-3xl (48rem / 768px) or max-w-4xl (56rem / 896px) for readability on larger screens. Mobile-first responsive layout with single-column default.

9. Design Principles

All marketing and interface materials should adhere to the following operational design principles:

  • Operational Clarity: Prioritise legibility over decoration. Use high contrast between text and background. The navy-on-white or white-on-navy combination is the primary communication pattern.
  • Amber as Action: The amber accent (#FFD900) is reserved for active states, critical highlights, and call-to-action elements. Do not dilute its impact by using it for decorative purposes.
  • Touch-First: All interactive elements in marketing mockups should reflect the 44px minimum touch target. Show generous spacing between interactive elements.
  • Field-Ready: Imagery should depict realistic operational environments. Avoid overly stylised or glossy representations. The product is a tool, not a lifestyle accessory.
  • Information Assurance: Never depict actual operational data, real officer details, or sensitive tactical information in marketing materials. Use the Demo Mode (green theme) for screenshot demonstrations.
  • Theme Awareness: When showcasing the product, depict the appropriate theme for the context — Light Mode for general use, Dark Mode for evening operations, Night Mode for covert deployments.

10. Brand Voice — Direct-to-Tactical Engineering

The POPS Notebook brand voice is defined by a unique development methodology: Domain-Driven Rapid Development (DDRD). The platform is built by an active-duty police sergeant, not a traditional software vendor. This is not a limitation — it is the platform's single greatest competitive advantage.

  • Never apologise for the development model. Do not use defensive language like "not a formal software engineer." The creator is a domain expert who builds software — that is the point. Frame the AI-assisted, domain-first approach as an operational advantage: zero translation loss between frontline friction and software delivery.
  • Velocity is the differentiator. Traditional police IT procurement takes 6–18 months to update a drop-down menu. POPS Notebook pushes over-the-air updates via PWA service workers within days. When the College of Policing revises doctrine or Parliament amends legislation, the platform responds in hours, not quarters.
  • Operational authenticity over corporate polish. The brand voice should sound like it comes from someone who has stood in front of a serial at 06:00 — because it does. Use operational language: "damp briefing rooms," "Code 1 kit," "cellular saturation," "hostile crowd dynamics." Do not sanitise the reality of public order policing.
  • Position as complement, not replacement. When discussing enterprise IT (Microsoft 365, MDM, Teams), frame POPS Notebook as a "Zero-Trust Tactical Edge Module" that extends existing infrastructure into connectivity-denied environments. Never criticise the IT department's core estate.
  • Offline-first is a feature, not a limitation. The app's ability to function entirely without network connectivity is a deliberate design choice for communication blackout scenarios — not a technical constraint. Emphasise this in all messaging.

11. Quick Reference — Core Brand Colours

The essential colour values for immediate use in marketing materials:

POPS Navy

RGBA: rgba(11, 40, 80, 1)

HEX: #0B2850

HSL: 215 75% 18%

Amber Accent

RGBA: rgba(255, 217, 0, 1)

HEX: #FFD900

HSL: 51 100% 50%

POPS Notebook Brand Book — Generated from live design token system. All values verified against src/index.css and tailwind.config.js.