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.
Primary
Brand, headers, primary buttons
rgba(11, 40, 80, 1)
Background
Main app surface
rgba(255, 255, 255, 1)
Foreground
Primary text
rgba(14, 32, 57, 1)
Accent (Amber)
Highlights, active states, icons
rgba(255, 217, 0, 1)
Destructive
Errors, delete actions
rgba(214, 31, 31, 1)
Secondary
Muted surfaces, chips
rgba(235, 236, 240, 1)
Muted Text
Captions, labels
rgba(87, 94, 107, 1)
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.
Primary (Amber)
Brand, active elements
rgba(255, 217, 0, 1)
Background
Main app surface
rgba(10, 19, 23, 1)
Foreground
Primary text
rgba(245, 245, 245, 1)
Card
Card surfaces, panels
rgba(15, 26, 41, 1)
Secondary
Muted surfaces
rgba(36, 48, 66, 1)
Muted Text
Captions, labels
rgba(166, 166, 166, 1)
Destructive
Errors, delete actions
rgba(195, 34, 34, 1)
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.
Background
Main app surface
rgba(18, 8, 8, 1)
Foreground
Primary text (dim red)
rgba(224, 82, 82, 1)
Primary
Headers, surfaces
rgba(46, 15, 15, 1)
Card
Card surfaces
rgba(29, 12, 12, 1)
Accent
Active states
rgba(173, 31, 31, 1)
Muted Text
Captions, labels
rgba(191, 64, 64, 1)
Destructive
Errors, warnings
rgba(114, 29, 29, 1)
Border
Dividers
rgba(60, 32, 32, 1)
5. Training Mode Palette
Airgap-isolated green theme for Academy training. Visually distinct from live operational deployments.
Primary
Brand, headers
rgba(21, 71, 46, 1)
Background
Main app surface
rgba(12, 24, 18, 1)
Foreground
Primary text
rgba(218, 231, 218, 1)
Card
Card surfaces
rgba(18, 33, 26, 1)
Accent
Active states, highlights
rgba(41, 163, 41, 1)
Muted Text
Captions, labels
rgba(135, 161, 135, 1)
Destructive
Errors, warnings
rgba(143, 36, 36, 1)
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:
RGBA: rgba(11, 40, 80, 1)
HEX: #0B2850
HSL: 215 75% 18%
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.