A system for the trust we ask of every applicant.
Sentinel is the visual and component language of the recruits application portal. It carries the institutional weight expected of a police service while staying clear, calm, and accessible for first-time applicants navigating an unfamiliar process.
Color
A deep navy carries authority. Gold appears only at moments of consequence — badges, seals, milestone confirmations. Neutrals do the rest of the work.
Navy — Primary
Used for headings, primary actions, top chrome, and trust-signalling surfaces. --navy-600 is the default action color.
Gold — Badge Accent
Reserved for badge moments, seals, and the thin line under the brand bar. Avoid using gold for ordinary UI accents; it loses meaning if it appears too often.
Neutrals
Semantic
Process updates, helpful context, non-urgent notices.
Confirmations: documents accepted, stage cleared.
Action required, deadlines approaching, manual review.
Failed validation, ineligibility, destructive actions.
Typography
Public Sans is the system typeface — designed for government interfaces, optimized for clarity at small sizes. Geist Mono labels record-keeping data: applicant IDs, document hashes, timestamps.
Spacing
A 4-pixel base scale. Use small steps (1–4) inside controls, mid steps (5–8) between elements within a section, and large steps (10+) between sections. Stay on the scale.
Radii
Radii are intentionally restrained. The institution this system represents is not a consumer product — corners are crisp, edges are confident. Pills are reserved for badges and progress indicators.
Elevation
Shadows are tinted with navy, never neutral gray. The system uses elevation sparingly — primarily for floating surfaces (modals, dropdowns, sticky bars).
Iconography
Two icon families work side-by-side. UI icons (Lucide, 1.75 stroke) handle the operational vocabulary — upload, edit, search. Badge motifs appear at heraldic moments: confirmations, stage transitions, certificates.
UI icons · 16px / 20px / 24px · 1.75 stroke
Badge motifs · used sparingly, for milestone moments
Buttons
One primary action per view. Use the gold button only for terminal commitments — “Submit application,” “Accept offer.” Secondary, ghost, and danger variants handle everything else.
Variants
Sizes
With icons
Forms & Inputs
Form fields are the heart of this portal. Defaults are calm and clear; errors are direct without scolding. Every field carries a label, optional hint, and dedicated error region.
File upload
Badges & Tags
Status badges communicate where an application — or a piece of evidence — sits in the process. Tags are softer, used for skills, languages, and categorisation.
Status badges
Tags
Cards
Cards group related information. The accent variant uses a thin gold rule to elevate milestone surfaces — offer letters, acceptance receipts.
Written examination
Scheduled · 22 May 2026 · Hall B-3
Arrive 30 minutes early with your applicant ID card and a valid government photo ID. Calculators and personal devices are not permitted.
Conditional offer · Academy intake 2026-B
Issued 14 May 2026 · expires 28 May 2026
Pending final medical and fingerprint clearance. Review your conditional offer carefully and respond before the deadline.
Alerts
Four severities. The left rule carries the meaning at a glance; the icon reinforces it. Place alerts at the top of the affected scope, not site-wide unless truly system-wide.
Your fingerprint appointment is confirmed.
Bring your applicant ID card and a valid government photo ID. The session lasts approximately 45 minutes.
Background check cleared.
All checks completed on 11 May 2026. You can proceed to the medical examination stage.
Action required — secondary school transcript is missing.
Upload your transcript by 20 May 2026 to keep your application active for the 2026-B intake.
Application withdrawn.
This application is closed and cannot be reopened. You may submit a new application in the next intake window (Sept 2026).
Tables
Used for test scores, document inventories, and cohort lists. Mono numerals keep score columns aligned.
| Assessment | Date | Score | Pass mark | Result | Reference |
|---|---|---|---|---|---|
| Written examination — General aptitude | 22 Apr 2026 | 84 / 100 | 60 | Cleared | WE-04713-A |
| Physical fitness — 2.4 km run | 03 May 2026 | 11:42 | ≤ 13:00 | Cleared | PF-04713-R |
| Physical fitness — Push-ups (1 min) | 03 May 2026 | 38 | 35 | Cleared | PF-04713-P |
| Psychological assessment | 09 May 2026 | — | — | In review | PS-04713 |
| Medical examination | — | — | — | Scheduled | MD-04713 |
Stepper
The application is a journey of seven stages. The stepper makes that journey legible — what is done, what is happening now, and what is still ahead.
Application timeline
The vertical companion to the stepper — used on the dashboard to show what has happened and what is next, with timestamps drawn from the audit log.
Your application was received and assigned ID APP-2026-04713. Initial eligibility confirmed automatically.
National ID, secondary school transcript, and proof of address accepted by the records officer.
Above the 60-point threshold. You have advanced to the physical assessment stage.
Two of three components recorded. Final result will be posted within seven business days.
Modals
Reserved for actions that interrupt the application — submission, withdrawal, identity confirmation. Always offer a clear way out.
Submit your application?
Once submitted, your application is locked. Changes after this point require contacting your recruiter and may delay processing.
Empty states
An empty state should always tell the applicant what to do next — never just confirm that the screen is blank.
Start by uploading your national ID, then your secondary school transcript, and finally your proof of residential address.
Your assessments will appear here once your documents have been verified by a records officer.
Patterns
Recurring compositions assembled from the components above. These are the screens applicants will encounter most often.
Eligibility checklist
The very first screen of the application. Applicants self-assess against the published criteria before opening a new application file.
Eligibility check · 2026 intake
6 of 7 criteria met. Review the remaining item before submitting.
Document upload & verification
A single row per required document. Verification status is the source of truth, not the upload itself.