Herkenbaar, zelfs in een ticketmail.
Hello, Computer. legt vast hoe Digital Individuals eruitziet en schrijft, van de homepage tot de mail waarin we een klant laten weten dat hun Computer weer werkt. De strengheid komt uit de industriële computerwereld, de naam van het eerste wat de meesten van ons er ooit in typten.
Voor wie. Klanten die ons hun infrastructuur toevertrouwen en in één oogopslag moeten zien dat het goed zit, en iedereen bij Digital Individuals die voor hen bouwt.
Wat erin staat. Kleur, typografie, het 8 px-grid, blokken, componenten, diagrammen, beweging en hoe we schrijven. Voorstellen, het portaal en release notes gebruiken dezelfde tokens, zodat alles eruitziet alsof het van hetzelfde bedrijf komt.
Waar het leeft. De website, voorstellen en offertes, het MSP-klantportaal, statuspagina’s, runbooks en Foundry, onze eigen applicatie. Elk heeft verderop een eigen stand op de draaiknop.
Hoe je het gebruikt. Kopieer de tokens en lees de principes. Passen twee opties allebei, kies dan de optie die het systeem makkelijker te begrijpen maakt. Retro hoort in de decoratie, nooit in de bediening.
De kit, op één vel.
Vier kleuren plus een rood dat we bewaren voor merktekens, IBM Plex met een pixel-serif voor namen, en de waarden voor grid en timing. Alles wat je zou willen kopiëren staat in Plex Mono.
Kleur
Tekst, de donkerste vlakken, de cursor.
De standaardondergrond. Hetzelfde bijna-witte vel dat Foundry gebruikt.
Rustige vlakken, inactieve staten, de machinekamer.
Het accent. Voor acties, live-staten en het merkvlak.
Voor merktekens, nooit voor tekst. Het zegel, de zon, en alles wat in Foundry draait.
Typografie
Koppen, interfaces en documenten.
Alleen voor waarden, codes, tijdstempels en terminaluitvoer.
Namen, en hooguit één regel per pagina. Geschaald in stappen van 6,25 px, zodat de pixels heel blijven.
Grid en beweging
Elke toepassing loopt op twee klokken.
De expressieve kant leeft in 1984: pixel-serifs, knipperende cursors, ASCII-tekeningen en een vleugje nostalgie. Die geeft het ontwerp karakter en maakt het onthoudbaar. De functionele kant leeft in 2030: strakke typografie, duidelijke staten en aandacht voor data en bruikbaarheid. Die blijft uit de weg en laat dingen werken. Botsen de twee, dan gaat functie voor. Links 1984 in PP Mondwest. Rechts 2030 in Plex Sans.
Minder op het scherm.
Twee Japanse ideeën houden het systeem rustig. Shizen (自然) vraagt om eenvoud zonder kunstgrepen: alles op een scherm is met de hand gemaakt, en niets mag eruitzien alsof het voor het effect is toegevoegd. Yūgen (幽玄) vindt diepte in terughoudendheid: laat het ene zien dat ertoe doet en laat de rest in de mist.
In de praktijk betekent dat ruime marges, één accentkleur per scherm, hooguit één keer rood, en tekeningen die iets suggereren in plaats van alles uit te leggen. Het landschap hierboven is teken voor teken getypt, zoals Foundry zijn smeltovens en bonsai tekent.
Gebouwd met dezelfde kit.
Foundry, het klantportaal, een voorstel en een maandrapportage. Ze staan op verschillende standen van de draaiknop, maar grid, typografie en kleuren blijven overal gelijk. De Foundry-runs zijn echt; klantnamen en cijfers elders zijn voorbeelden.
| 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 aangemaakt in het portaal door de officemanager
- IKE-rekeytimer op 2400 s gevonden op de firewall ter plaatse
- Wijziging voorgesteld: lifetimes gelijktrekken, gepland om 12:30
Twee nodes in het datacenter. Valt er om 3 uur ’s nachts één uit, dan worden wíj wakker gebeld.
Team infrastructuur12 pagina’s
| Hostnaam | Rol | Status | Patchniveau | Laatst gezien |
|---|---|---|---|---|
| fw-utr-01 | Firewall | Wijziging gepland | 20.0 MR2 | 09:41 |
| sw-utr-core | Core-switch | In orde | actueel | 09:41 |
| hv-utr-a | Hypervisor | In orde | actueel | 09:40 |
| nas-utr-01 | Back-updoel | In orde | −1 release | 09:38 |
| ap-utr-3f | Accesspoint | Offline | actueel | ma 18:02 |
Blok voor blok.
De hoofdsite is gebouwd met blokken: vierkante tegels die op één grid vastklikken en rand aan rand aansluiten, zoals de bouwblokjes waarmee de meesten van ons ooit hun eerste huis bouwden. Elk blok heeft één tint en hooguit één teken. Los zeggen ze weinig. Samen tekenen ze de homepage, de iconen van onze diensten en het verhaal van hoe we werken, en met dezelfde blokken bouw je weer iets nieuws.
- Vier kwartblokken, één cirkel.
- Twee deurblokken, één dubbele deur.
- De koepels rusten op de muur, omdat blokken rand aan rand aansluiten.
Regels voor blokken
- Eén blok, één tint, en hooguit één teken.
- Blokken klikken in hele eenheden op het grid: 1 × 1, 2 × 2 of 3 × 3.
- Rand aan rand, zonder tussenruimte en zonder overlap. Zo lopen tekens over meerdere blokken door.
- Tekens draaien in kwartslagen, nooit iets ertussenin.
- Rood is nooit een blok. Het is een teken, één keer, op ink.
- Het DI-logo krijgt het grootste blok, één keer per veld.
- Blokken landen één keer, van de rand naar de tekst toe. Een paar wisselen langzaam tussen twee gezichten, in een lus van 16 tot 24 seconden.
- Blokken versieren; de woorden dragen de betekenis. Een veld is verborgen voor schermlezers en staat stil voor wie minder beweging wil.
De onderdelendoos
Zes tinten, zeven vormen en zeven glyphs. De neutrale tinten volgen het lichte of donkere thema; blauw niet.
Tinten
- Paper
- Light
- Steel
- Ink
- Signal blue
- Deep blue
Vormen
- Kwart
- Half
- Cirkel
- Raam
- Deur
- Balk
- Heat
Glyphs
- DI-logo
- Computers en support
- Mail en bestanden
- Veiligheid en privacy
- Telefonie en internet
- Software
- Advies
Waar ze op de hoofdsite staan
De hero op de homepage. 44 blokken op een grid van 20 × 13 landen één voor één, van de rechterrand naar de kop toe. Zes ervan ademen.
De diensten. Elke dienst is één blok met zijn glyph, 72 px in het vierkant, naast de naam.
Hoe we werken. Een podium van 10 × 10 bouwt zich om terwijl je leest: een kantoor, IT die zich eromheen opstapelt, orde rond het DI-logo, rustig grijs, en dan nieuwe blokken die naar buiten groeien.
Draai aan de knop.
Vierentwintig dingen die we maken, van facturen tot foutpagina’s. Kies er een om de blauwdruk te zien: welk grid het gebruikt, waar blauw mag, waar Plex Mono opduikt en hoeveel retro het aankan. Pijltjestoetsen werken ook. De kleur op elke rug laat de discipline zien.
- Marketing
- Website
- Campagnepagina’s
- Presentaties
- Socialmediaposts
- Klantcases
- E-mailhandtekeningen
- Documenten
- Voorstellen
- Offertes
- Facturen
- Contracten
- Runbooks
- Netwerkdiagrammen
- Servicerapportages
- Service
- Klantportaal
- Statuspagina
- Ticketmails
- Onboardingpakket
- Hulp op afstand
- Product
- Foundry
- Foundry-documentatie
- Beheerconsole
- Release notes
- Foutpagina’s
- Inlogscherm
Gegroepeerd per discipline. De details en de blauwdruk hieronder veranderen mee met je keuze.
Voorstellen
Een document dat vertrouwen moet winnen. Een blauw blok en een regel pixel-serif op het voorblad, daarna eenvoudige genummerde secties die makkelijk te tekenen zijn.
- Expressie
- Discipline
- Documenten
- AGrid
- 8 kolommen op A4, 15 mm marges
- BSignal blue
- Accenten en één blok
- CPlex Mono
- Waarden, codes en tijdstempels
- DRetro-accent
- De pixel-serif, één keer
De stijl van dichtbij.
Het grootste deel van de look komt uit de typografie, het grid en de bewegingscurve. Hieronder kun je alle drie uitproberen.
Expressieve typografie is groot en strak gezet, voor pagina’s waar mensen naar kijken. Productieve typografie is gezet voor schermen waarin mensen werken.
Eén grid
Elke sectie op deze pagina staat op dezelfde 12 kolommen, met 24 px tussenruimte en gelijke marges. Zet de overlay aan en scroll door de pagina.
Of druk op G waar je ook bent op de pagina.
Eén curve, drie snelheden
De regels, en waar ze vandaan komen.
De structuur is geleend van technische handleidingen: strakke grids, genummerde principes en waarden die je kunt meten. De toon is eenvoudiger dan in welke handleiding ook. We tekenen liever het diagram dan dat we een stockfoto kopen, en als een klant om twee uur ’s nachts het portaal opent, helpt het scherm het probleem te vinden en blijft het daarna uit de weg.
Regels en herkomst
Principes
- Nostalgie in expressie, modern in functiealles
- Duidelijkheid vóór karakteralles
- Hetzelfde grid op elke toepassingalles
- Laat het systeem aan het werk ziendiagrammen
- Laat weg wat niet helptalles
- Praat als een menstoon
Herkomst
- Zeami over yūgenbegin 15e eeuw
- Zwitserse internationale stijljaren 50
- IBM Personal Computer1981
- Apple Macintosh1984
- Apple Human Interface Guidelines1987
- IBM Plex-lettertype2017
De tokens worden gekopieerd als CSS custom properties, en de principes staan hierboven. Tik op de terminal om hem opnieuw te laten typen.