Skip to main content
Design system

Clear under pressure.
Calm by design.

The MyGuardForce design system is the shared set of principles, colours, type and patterns behind every screen, so compliance work reads the same on a desk monitor at noon and a phone on a night shift.

Book a demoSee the product
3
brand colours
3
typefaces, one job each
AA
contrast in light and dark
Brand paletteLight and dark
  • Deep Navy#0C3060
  • Royal Blue#3078C0
  • Sky Cyan#24A8D8
Headings
Montserrat
Body
Inter
Data
IBM Plex Mono
Principles

Six rules every screen follows.

Security teams check MyGuardForce between calls, on patrol and in front of an auditor. These principles keep every page quick to read and hard to misread.

  1. Summary before detail.

    Every page answers “what needs my attention?” in its first screenful: where you are, then the numbers that matter, then the work itself.

  2. One way to do each thing.

    One page header, one table, one status badge and one set of empty, loading and error states. Learn one page and you know how the rest behave.

  3. Calm, never alarmist.

    Colour means status, not decoration. Red is kept for lapsed, failed and destructive moments, so it still means something when it appears.

  4. Built for the field.

    Screens have to survive a phone, a hurry and bad lighting. Every view works at phone width with no sideways scrolling and tap targets sized for thumbs.

  5. Accessible in both themes.

    Light and dark mode are designed together, and text, links and status colours are chosen to meet WCAG 2.1 AA contrast in each.

  6. Honest about the data.

    A read that failed is never shown as zero or empty. The screen says what went wrong and offers a retry, because a compliance number has to be true.

Colour

Every colour has one job.

The palette is small on purpose. Blue drives action, navy carries the structure, and status colours appear only when a record needs you.

  • #0C3060

    Deep Navy

    Structure and trust: the shield, page bands and headers.

  • #3078C0

    Royal Blue

    Action: buttons, links, focus rings and selection.

  • #24A8D8

    Sky Cyan

    Verified and growth moments, used sparingly.

  • Steel Depth#1F5485
  • Ink Text#1B2A39
  • Cloud Calm surfaces#EAF1F8

One scale for compliance status.

Licence and compliance status reads the same way wherever it appears: five steps, in order of urgency. Each step keeps its meaning and order in light and dark mode, and every fill carries a text colour that passes AA on it.

  1. Valid
    Active, compliant, approved, paid
  2. Review
    Pending, conditional, restricted, on probation
  3. Expiring
    Expiring, due soon
  4. Due
    Suspended, due inside the compliance window
  5. Lapsed
    Expired, inactive, revoked, failed
Typography

Three typefaces. Three jobs.

Headings get character, reading gets comfort and facts get precision. A size follows the role it plays on the page, so the most important line is always the biggest.

  • Display and headings

    Montserrat

    Every officer ready for the next shift.

  • Body text and interface

    Inter

    Licences, training and assignments in one record, written in plain words.

  • IDs, dates, statuses and labels

    IBM Plex Mono

    OFC-00418 · 2027-03-14 · VALID

Page anatomy

Every page reads top to bottom the same way.

Whether it is people, licences, training or scheduling, a page is built from the same three layers, so nobody has to relearn where to look.

  1. The header

    Says where you are.

    Each area opens with the same header: an icon, the page name, a short description on hover and one main action. Everything else waits in a menu.

  2. The summary

    Says what needs attention.

    A short row of numbers counts what is expiring, overdue or waiting. Each one opens the list already filtered to those records.

  3. The work

    Is where things get done.

    Lists and records share one table and one detail view, with search, filters and status in the same places on every page.

Foundations

The quiet details underneath.

Spacing, theming, screen size and motion are decided once for the whole product, so a new page fits in before anyone styles it.

  1. A 4 px rhythm

    Spacing steps in multiples of four, so gaps between cards, fields and sections line up across every page.

  2. Light and dark

    Every colour is a named token with a light and a dark value, so nothing is tuned for one theme and broken in the other.

  3. Phone-ready

    Layouts collapse to one column, tables scroll inside their card and menus move behind a button on small screens.

  4. Quiet motion

    Short, gentle transitions that explain where something came from, and none at all when reduced motion is on.

Voice

Words are part of the design.

Labels, statuses and messages follow the same rules as colour and type: short, specific and in the language of the security industry.

  1. Plain words

    Say what happened and what to do next. Errors explain the cause in everyday language, never a code.

  2. The industry’s terms

    Officers, guards, applicants and posts: the words security teams already use, kept consistent on every screen.

  3. Status in words

    Colour is never the only signal. Every badge carries its word, so status reads in greyscale and to screen readers.

  4. Facts in mono

    Licence numbers, dates and IDs are set in a monospaced face so they line up and are easy to read back over the phone.

Next step

See the design system at work.

Walk through licences, training and scheduling with the team that designed them, and see how a calm screen changes a busy day.

Book a demoSee pricing