Design
How Mainframe101 looks.
One calm, clear design across everything we make. Mainframes are serious work, so the design is there to make them feel approachable without ever pretending they are something lighter.
The idea
Calm screens, loud moments.
Four ideas carry through the site, the product and everything after them.
Calm by default
Plenty of space, clear type and nothing competing for attention while you work.
Loud when it counts
When work lands, the screen says so: a number moves, a task ticks, a moment celebrates.
One colour, one job
Green means go: actions, progress and things that just happened. Never a background.
Dark first, light too
Built for long sessions in the dark, with a light theme that is every bit as considered.
The logo
A terminal screen with a face in it.
The face is Zed, who teaches every step of the product. The wordmark is monospace, like the screens it grew up on. It is artwork, drawn once, never retyped in a font.
Two-tone
A green face with the wordmark in the text colour. The everyday version, for headers, footers and anywhere it sits beside words.
All green
For the moments where the logo is the subject: covers, social images and press.
The face
On its own where there is room for only one small thing: app icons and avatars.
Switch the theme at the top of the page to see every version on light. Need the logo for press or a partnership? Ask us.
Colour
Friendly charcoal, and one green.
Soft greys that are easy on the eyes for hours, and a single green that only ever means go. Switch the theme at the top of the page to see the light set.
Background
The page itself
Surface
Cards and panels
Muted
Quiet fills and wells
Text
Words, at full strength
Green
Actions and progress
Soft green
Where green needs to whisper
Type
Geist to read, Geist Mono to work.
One family in two voices. The mono only appears where the thing on screen is a real system: commands, dataset names, job output.
Geist
Aa
Take a job at ZedBank.
Build the bank from a blank machine, and learn each job by doing it.
Geist Mono
Aa
SUBMIT ZBANK.JCL(PAYROLL)
JOB PAYROLL(JOB00042) SUBMITTED
PAYROLL ENDED RC=0000
Zed
One voice, and it belongs to Zed.
Zed is the mentor at ZedBank and the face in the logo. He talks in short, plain lines, one idea at a time, and he would rather you did the work than watched him do it.
Zed
Now look at the screen. It says READY. That means it's waiting for you.
This is TSO. In other words, it's your slice of the machine.
Hundreds of people share it, and each of them gets their own READY. Nobody queues.
Short lines
One idea per line. If it needs a comma, it might be two lines.
Plain words
Nothing a beginner would stop on. Every new term arrives with an everyday picture.
Warm, never cute
Friendly and specific. Reassurance that says exactly what's normal.
The pieces
Built from the same parts, everywhere.
The site and the product share one set of components, so a button, a card or a number looks and behaves the same wherever you meet it.
Buttons
The main action has a raised edge and presses down when you click it. One per screen.
Labels and progress
The four numbers
Rank
Graduate
Reputation
212
Customers
5
Money
£1,250
Naming what it touches
A job has to say which files it wants before it runs. Write one that makes a dataset while you're not watching.
Moments
The screen stays quiet until the work lands.
Then it says so, once: the task ticks, the number counts up, and the screen celebrates. Try it.
Your turn
Submit the payroll job and get a clean return code
Reputation
212
See it in the product.
Everything on this page comes from the simulator and the site you are on.