All directions

Direction 4 of 5

Civic

Trustworthy and plain: it looks like a public service that works, so nobody wonders whether it is legitimate.

For: A government-funded programme and everyone wary of it: employers filling in PAYE and account details, learners of every reading level, the provider's compliance team.

Type

  • Headings

    Atkinson Hyperlegible

    Bold 700, designed for low-vision readers

    Hours, hand-ins and sign-offs, kept in one place

  • Body

    Atkinson Hyperlegible

    19px body text

    Hand in what you did and a short reflection. Your hours count as soon as you hand in; your tutor then accepts the work or asks for changes, and both are kept on your record.

  • Numerals

    Atkinson Hyperlegible

    Distinct 0/O and 1/l; bold for key figures

    38.5 · 51.5 · 90 · 04/02/2027 · 09876543

All open-licence (SIL Open Font License 1.1), served from this site. Tokens: --font-heading, --font-body, --font-num.

Colour

  • White

    Ground

    --ground #ffffff

  • Black

    Ink

    --ink #0b0c0c

  • Secondary text

    Muted text

    --muted #484f53

  • Go green

    Accent

    --accent #00703c

  • Done green

    Success

    --success #005a30

  • Orange tag

    Warning

    --warning #6e3619

  • Error red

    Danger

    --danger #942514

Supporting colours

  • Surface

    --surface #ffffff

  • Surface, quiet

    --surface-alt #f3f2f1

  • Rule

    --rule #b1b4b6

  • Control border

    --control-border #0b0c0c

  • Accent tint

    --accent-soft #d2e2f1

  • Success tint

    --success-soft #cce2d8

  • Warning tint

    --warning-soft #fcd6c3

  • Danger tint

    --danger-soft #f4cdc6

  • Focus

    --focus #0b0c0c

Every text and colour pair meets WCAG AA (4.5:1 for text, 3:1 for controls), checked by scripts/check-contrast.mjs, including the company brands.

Spacing, corners and motion

Spacing scale

  • --space-15px
  • --space-210px
  • --space-315px
  • --space-420px
  • --space-525px
  • --space-630px
  • --space-740px
  • --space-860px

Corner radius

  • Small0
  • Medium0
  • Large0
  • Buttons0
  • Chips0

Motion

None. Things change state instantly; nothing moves. Focus is a single yellow highlight.

Two real screens

Screen 1

Learner dashboard

Priya, a learner at Meridian Care, on the Tuesday before session 5.

Brand per delivery: switch the look to see this screen as Meridian Care's people would.

PS

AI Leadership Programme · January 2027 cohort

Good afternoon, Priya

Session 5 is on Thursday. One task needs changes and one is due before then.

Your hours

Hours count when you hand a task in.

38.5of 90 hours

Task hours
30.5
Live hours
8
To go
51.5
Tasks
All 16 tasks

  • Weekly report prompt

    Session 5 · 3 hours · Due Thu 4 Feb

    To do

  • Meeting brief for your next one-to-one

    Session 4 · 2 hours · Due Thu 28 Jan

    Johnnie: good start. Add the agenda you would send, then hand it in again.

    Changes asked for

  • Forecast from last quarter's figures

    Session 5 · 2.5 hours · Handed in Mon 1 Feb

    Handed in

  • Inbox triage rules

    Session 3 · 3 hours · Accepted Tue 26 Jan

    Accepted

  • Your AI use at work: a one-page note

    General · 1.5 hours · Due Fri 26 Feb

    To do
Next live session

Session 5 · Reports and forecasts with your assistant

Thu4Feb2pm to 4pmOnline, with Johnnie
Session page

The join button works from 1:45pm. Tick your attendance on the session page afterwards.

Sign-offs still to come
  • Your end-of-course confirmationOpens after session 8, once your end skills scan is in.
  • Your manager's sign-offSam Reid, after your confirmation.
Certificate
Not issued yet

Your trainrs certificate of completion is issued when all of these are in.

Tasks accepted
7 of 16
Checks passed
4 of 8
End skills scan
Not yet
Your confirmation
Not yet
AI coach

The coach can be wrong. Your tutor has the final word on your work.

Screen 2

Employer onboarding

Alex, the company admin at Acme Logistics, in early November, two months before their cohort starts.

Brand per delivery: switch the look to see this screen as Acme Logistics's people would.

AM

Company set-up

Acme Logistics

January 2027 cohort · starts Thu 7 Jan 2027, 2pm · Company number 09876543

4 of 9 done

Do them in any order. Please finish by Fri 27 Nov 2026.

Tasks

  1. Company details

    Registered name, number and address from Companies House, and who we invoice.

    Done
    YouCompany admin

  2. Tech stack and goals

    The tools your people use, and what you want from the course.

    Done
    YouCompany admin

  3. PAYE details

    Your PAYE scheme reference and accounts office reference.

    Done
    Jo PatelFinance · task link

  4. Employer agreement

    You signed on Wed 28 Oct. Waiting for the training provider to countersign.

    With us
    YouCompany admin

  5. Government apprenticeship-service account

    Account created, PAYE scheme added, agreement accepted, training provider added.

    Done
    Jo PatelFinance · task link

  6. Levy balance and funds reserved

    Record your levy balance and reserve the funds for your people.

    In progress
    Jo PatelFinance · task link

  7. Tech-support contact and AI policy

    Who learners ask when a tool is blocked, and whether you have an AI policy.

    Not started
    Not assigned

  8. Pre-course checklist

    Diary invites, AI accounts, course time in working hours, internal guide. 2 of 4 ticked.

    In progress
    Sam OkoroOperations · full login

  9. People and start dates

    6 people added to the January cohort. 2 still need a date of birth.

    In progress
    YouCompany admin

Why this could be trainrs

Employers are being asked for PAYE references, a government account and a signed agreement; a look borrowed from public services says "this is official and safe" before a word is read. It is the most accessible of the five by design (big type, big controls, underlined links), which protects funded learners and makes accessibility reviews short.

Risk: Can look like a government form rather than a premium course; little room for the company's brand or for warmth.