Recognisable from a ticket email.
Hello, Computer. covers how Digital Individuals looks and writes, from the homepage to the email telling a client their Computer is fixed. It borrows its rigour from industrial computing, and its name from the first thing most of us typed into one.
Who it serves. Clients who hand us their infrastructure and need to trust it at a glance, and everyone at Digital Individuals who builds things for them.
What it covers. Colour, type, the 8 px grid, components, diagrams, motion and how we write. Proposals, the portal and release notes pull from the same tokens, so they look like they came from the same company.
Where it lives. The website, proposals and quotes, the MSP client portal, status pages, runbooks, and Foundry, our own application. Each sets its own level of expression on the dial further down.
How to use it. Copy the tokens and read the principles. When two options both fit, pick the one that makes the system easier to understand. Retro touches go in the decoration, never in the controls.
The kit, on one sheet.
Four colours plus a red kept for marks, IBM Plex with a pixel serif for names, and the grid and timing values. Anything you might copy is set in Plex Mono.
Colour
Text, the darkest fields, the cursor.
The default ground. The same near-white sheet Foundry uses.
Quiet fields, inactive states, the machine room.
The accent. Used for actions, live states and the brand field.
For marks, never text. The seal, the sun, and anything running in Foundry.
Type
Headings, interfaces and documents.
Values, codes, timestamps and terminal readouts only.
Names, and at most a line per page. Sized in 6.25 px steps so the pixels land whole.
Grid and motion
Every surface runs on two clocks.
The expressive side lives in 1984: pixel-grid serifs, blinking cursors, ASCII drawings, and a sense of nostalgia. It’s there to give the design character and make it memorable. The functional side lives in 2030: clean typography, clear states, and a focus on data and usability. It stays out of the way and lets things work. When the two clash, function comes first. Left, 1984 in PP Mondwest. Right, 2030 in Plex Sans.
Less on the screen.
Two Japanese ideas keep the system quiet. Shizen (自然) asks for no artifice: everything on a screen is made by hand, and nothing should look added for effect. Yūgen (幽玄) finds depth in restraint: show the one thing that matters and leave the rest in the mist.
In practice that means wide margins, a single accent colour on any screen, red used once at most, and drawings that hint rather than explain. The landscape above is typed character by character, the same way Foundry draws its furnaces and bonsai.
Built from the same kit.
Foundry, the client portal, a proposal and a monthly report. They sit at different points on the dial, but the grid, type and colours don’t change between them. The Foundry runs are real; client names and figures elsewhere are samples.
| Recent runs | Branch | Status | Took | When |
|---|---|---|---|---|
| Profile pictures for people and organisationssonnet-foundry · #3 images.yml | main | Succeeded | 2m 38s | 4 h ago |
| images: build on Foundry, push to Packagessonnet-foundry · #2 images.yml | main | Succeeded | 3m 24s | 5 h ago |
| promotefoundry-ide · #11 promote.yml | main | Succeeded | 34s | 7 h ago |
| buildfoundry-ide · #10 build.yml | main | Succeeded | 8m 11s | 7 h ago |
| buildfoundry-ide · #9 build.yml | main | Cancelled | 17s | 7 h ago |
- Ticket opened from portal by office manager
- IKE rekey timer found at 2400 s on site firewall
- Change proposed: align lifetimes, schedule 12:30
Two nodes in Datacenter. If one fails at 3 a.m., we’re the ones who get woken.
Infrastructure practice12 pages
| Hostname | Role | Status | Patch level | Last seen |
|---|---|---|---|---|
| fw-utr-01 | Firewall | Change due | 20.0 MR2 | 09:41 |
| sw-utr-core | Core switch | Healthy | current | 09:41 |
| hv-utr-a | Hypervisor | Healthy | current | 09:40 |
| nas-utr-01 | Backup target | Healthy | −1 release | 09:38 |
| ap-utr-3f | Access point | Offline | current | Mon 18:02 |
Turn the dial.
Twenty-four things we make, from invoices to error pages. Pick one to see its blueprint: the grid it uses, where blue is allowed, where Plex Mono shows up and how much retro it can take. Arrow keys work too. The colour on each spine shows its discipline.
- Marketing
- Website
- Campaign pages
- Event slides
- Social posts
- Case studies
- Email signatures
- Documents
- Proposals
- Quotes
- Invoices
- Contracts
- Runbooks
- Network diagrams
- Service reports
- Service
- Client portal
- Status page
- Ticket emails
- Onboarding pack
- Remote support
- Product
- Foundry
- Foundry docs
- Admin console
- Release notes
- Error pages
- Sign-in screen
Grouped by discipline. The details and blueprint below update as you choose.
Proposals
A document that has to win trust. A blue block and a pixel-serif line on the cover, then plain numbered sections that are easy to sign.
- Expression
- Discipline
- Documents
- AGrid
- 8 columns on A4, 15 mm margins
- BSignal blue
- Accents and a single block
- CPlex Mono
- Values, codes and timestamps
- DRetro accent
- The pixel serif, used once
The style, up close.
Most of the look comes from the type, the grid and the motion curve. You can try all three below.
Expressive type is set large and tight for pages people look at. Productive type is set for screens people work in.
One grid
Every section on this page sits on the same 12 columns, with 24 px gutters and equal margins. Turn the overlay on and scroll through the page.
Or press G anywhere on the page.
One curve, three speeds
The rules, and where they came from.
The structure is borrowed from engineering manuals, with strict grids, numbered principles and values you can measure. The tone is plainer than any manual. We draw the diagram rather than buy a stock photo, and when a client opens the portal at two in the morning, the screen helps them find the problem and then stays out of their way.
Rules and lineage
Principles
- Nostalgia in expression, modernity in functionall
- Clarity before characterall
- The same grid on every surfaceall
- Show the system workingdiagrams
- Leave out what doesn’t helpall
- Speak like a personvoice
Lineage
- Zeami on yūgenearly 1400s
- Swiss International Style1950s
- IBM Personal Computer1981
- Apple Macintosh1984
- Apple Human Interface Guidelines1987
- IBM Plex typeface2017
The tokens copy as CSS custom properties, and the principles are just above. Tap the terminal to make it type again.