The Technical design system: IBM Plex Sans on a blueprint grid
Technical is Anticode's design system for products and practices that want to look precise. It sets everything in IBM Plex Sans, starts on a dark graphite palette with amber marks, lays a faint blueprint grid behind the page, and frames content in thin outlines with small, tidy corners. It's the one the design engine picks for software, games and clinics.
What "technical" should mean on a website
Sites for software and specialist services are often told to look clean, and end up looking like every other product page: a gradient, rounded cards, a mock-up floating in space. A technical look done properly borrows from the tools the audience already trusts instead, such as terminals, instrument panels and engineering drawings. That means dense but ordered information, visible structure, restrained colour that signals status rather than decorates, and type designed to stay legible at small sizes. The Technical design system with IBM Plex Sans is built around those cues.
What the system sets
- Typeface
- IBM Plex Sans, weights 300 to 700. It was drawn for IBM's corporate identity and has the slightly engineered shapes that suit software and instruments.
- Starting theme
- Dark: graphite background, cool light-grey text and an amber action colour. The light palette swaps to a pale grey background with a darker, brown-amber action colour.
- Background
- A fixed grid of fine lines every 48 pixels, drawn in the palette's line colour, so it stays faint in both themes.
- Outlines
- Images, cards, pricing plans, dashboard panels and figure tiles each get a one-pixel border, and the key facts list sits in its own outlined box.
- Corners
- Six pixels on buttons and tags, ten on cards and panels: present but small.
- Type sizes
- Body at 16.5px, the most compact of the seven systems, and the smallest hero headline, at weight 600, because product pages need room for detail.
- Header
- Slightly translucent over the page, so the grid shows through as you scroll.
The engine sums the look up as a blueprint grid with amber status marks. Amber is a deliberate choice: on graphite it reads like an indicator light, so it draws the eye to buttons and highlights without the cold blue that so many software sites default to.
Where it fits
| Fits well | Think twice |
|---|---|
| Software products, developer tools, APIs | Restaurants, bakeries and other places sold on warmth |
| Clinics, physiotherapists, dentists and vets, in the light theme | Wedding photographers and luxury goods |
| Game landing pages and dashboards | Children's activities |
| Consultancies selling a method or a process | Brands whose identity is built on a serif or a script face |
For a quick preview, the design engine chooses Technical when the request mentions things like software, a startup, an app, an API, a clinic or a game. A model build chooses from your wording, so naming the system or describing a developer-tool feel points it here. For health practices, consider the Light theme: the same structure in a calmer, paler palette.
Switching and adjusting
- Pick it in the inspector. With Edit on, choose Technical under Direction. Your copy, sections and features carry over; the type, palette, outlines and corners change.
- Or ask in words. A change such as "switch to technical, light theme" is understood in your browser and doesn't use your build allowance.
- Change the action colour. If amber clashes with a brand, choose one of the eight action colours; each has a shade for light palettes and one for dark.
- Set the theme explicitly. Auto keeps Technical's own dark palette; it doesn't follow a visitor's device setting. See light and dark themes.
Limits
- No monospace second face. The system uses one family. Code samples in your copy are still set in IBM Plex Sans on design-engine pages.
- The grid is decoration, not layout. The background lines don't line up content to a 48px column system; sections use the engine's ordinary responsive grid.
- Dashboards keep a fixed layout. A dashboard page in Technical looks the part, but its sections can't be reordered in the visual editor.
- Apps are described, not styled. A model-written app receives Technical as a starting description (IBM Plex Sans, amber on graphite, precise and information-dense like a pro tool), which your own words can override.
Questions people ask
Why is Technical dark by default?
Its own palette is graphite with amber, chosen to feel like a tool rather than a brochure. Choose Light under Theme for the paler version.
Will the background grid make text hard to read?
The lines are drawn in the palette's faint line colour, the same one used for dividers, so they stay in the background behind the text.
Is IBM Plex Sans one of the fonts the Critic flags as overused?
No. The overused-fonts check names faces such as Inter, Poppins and Montserrat. IBM Plex Sans isn't on it.