trainrs · the look
Six design directions
Each direction shows its type, colour, spacing and two real screens: the learner dashboard and the employer onboarding page, with the same content in every one. Pick one and it becomes the design system for every screen in trainrs.
Directions 1 to 5 share one screen layout and differ in type and colour. Direction 6 changes what is on the screen: one job per screen, at most three things visible, everything else one tap away.
Direction 1
Ledger
A well-kept record: calm, exact and permanent, like a bound register that someone takes pride in.
Source Serif 4 · Source Sans 3
38.5of 90 hoursAcceptedOpen LedgerDirection 2
Signal
Fast and competent: you see the state of everything at a glance and know exactly what to do next.
Inter
38.5of 90 hoursAcceptedOpen SignalDirection 3
Studio
Warm and encouraging: a good coach who is pleased to see you, not a dashboard that is waiting for you.
Nunito
38.5of 90 hoursAcceptedOpen StudioDirection 4
Civic
Trustworthy and plain: it looks like a public service that works, so nobody wonders whether it is legitimate.
Atkinson Hyperlegible
38.5of 90 hoursAcceptedOpen CivicDirection 5
Atelier
Premium and quiet: a serious professional course that respects your time and your intelligence.
Instrument Serif · Instrument Sans · JetBrains Mono
38.5of 90 hoursAcceptedOpen Atelier6 · Quiet
One job per screen, at most three things visible, everything else one tap away.
Inter
38.5 of 90 hoursOpen QuietTwenty learner homes
Twenty ways to lay out the learner’s home in the Quiet look, in six families. Four open full size.
Open the twentyTwelve task pages
Twelve ways to lay out the task hand-in page, in four families. Four open full size.
Open the twelve
All names, companies and figures on these pages are invented. Fonts are open-licence and served from this site; nothing is loaded from anywhere else.