The usual way
Grow your business
1.76 · 1.98 · 1.95 · failColoured words on cream. Looks festive and does not read: all three pairs are under 2:1, three times worse than the minimum.
MR LAB · Company site · 2022
The site of the company where I spent five years building the product. The palette is deliberately light-hearted: mint, teal, peach, lilac and blue on warm cream. None of them would read as text on that ground, and none of them became text. Colour here is always a field under ink, which is exactly why the headings are struck through with a marker instead of being coloured in. I measured it off the live page: the lowest pair gives 4.52, the highest 13.48, and not one falls below AA.
Where the facts come from. Everything here was measured on the live page on 11 October 2026: Playwright walks every text node, reads the computed styles and resolves each colour against its painted ground. The sizes, line heights, tracking and every contrast ratio below are read values, not my memory of the file.
One disclosure about the faces. The site runs RF Dewi Extended on display and Five Years Later in text. Neither is free to host and neither carries the Cyrillic this bilingual page needs. So the display here is Manrope 800 and the text is Nunito: the same geometry and roundness, different faces. The colours, the spacing and every figure are the originals.
What I did not write. The copy on this site is not mine: it arrived written. That matters, because further down I take apart lines like “100% satisfied” and “number-one approaches”, and I am taking apart someone else's work, not my own.
Brief
Role
One designer on the site. The concept, the palette, the typography, the illustration, the geometry, all nine sections and the responsive behaviour came through me. The copy arrived written, and that is the one thing I did not control, which later became the main constraint.
MR LAB sells custom software, and in that market every site looks the same: a dark blue gradient, an abstract 3D sphere, the word “solutions” three times a screen. It looks solid and it does not stick. The job was not to make another one of those but to make a site that reads as a laboratory rather than an outsourcing shop.
Hence warm cream instead of navy, pastels instead of neon, hand-drawn icons instead of 3D renders, and stickers carrying lines of their own (“Whatever you need we can engineer”, “More than result”) instead of another paragraph about synergy. The site should sound like people rather than like a tender document.
Pastels on cream have one well-known problem: they do not read. Mint on cream gives 1.76, peach 1.95, teal 1.98. If those colours had gone into text, the site would have been unreadable and still pretty in a screenshot, which is exactly the trap this kind of palette usually falls into.
So the system got one rule, and it holds the whole site up: colour is a field, never a letter. Any of the five may be a ground under ink and none of them may be the ink. Hence the marker headings, the coloured button plates, the coloured cards and the coloured stickers, and not one coloured word on cream across nine sections.
Colour
Both columns below are measured on the live page. On the left, each colour as a ground under ink #262626. On the right, the same colour as text on the cream ground #FFFCF4. The difference between the columns is the system.
| Colour | As a field | As text | Where it is used |
|---|---|---|---|
warm #FAF0E9 | 13.48 | 1.09 | Plates and highlights |
sand #F7E0CF | 11.90 | 1.24 | Bubble cards |
green #86D295 | 8.41 | 1.76 | The marker on the lead headings |
orange #FFA06A | 7.56 | 1.95 | The Contact Us button |
teal #83C1C0 | 7.46 | 1.98 | Stickers and the second marker |
purple #A48DD1 | 5.27 | 2.80 | Accents in the geometry |
blue #758CC0 | 4.52 | 3.27 | The dot grid, a case cover |
| Blue at 4.52 is the floor of the system and the only one sitting near the line. That is precisely why it carries no text at all: it works as the dot grid and as a large cover, where being a tenth out harms nobody. | |||
Grow your business
1.76 · 1.98 · 1.95 · failColoured words on cream. Looks festive and does not read: all three pairs are under 2:1, three times worse than the minimum.
Grow your business
8.41 · comfortably overThe same colours, inverted. Ink on mint gives 8.41, nearly double AA, and the colour has not gone anywhere: it became the field.
accents, none of them a letterform
coloured words on the cream ground
lowest pair: 4.52 against 4.5
Screens
The wordmark is a word in a black box, and the heading carries the same device: a green field with ink over it. The geometry on the right is drawn rather than rendered, deliberately: a 3D sphere here would put the site straight back in line with its competitors. At 390 the heading centres and breaks into two marker fields instead of one.
The site's main component: a sand bubble with a black outline, a tail and a hard black block offset behind it. There is no soft shadow anywhere on the site; depth is made with that offset every time. The icon in each card is drawn in the same hand as the geometry in the hero.
Three projects, and behind the button each one carries a record with fields: role, team and duration, industry, country, services, technologies, solutions. On sites of this kind the portfolio is usually client logos with no facts at all. Here the facts exist, and they are what makes the section evidence rather than decoration.
Five steps from the first conversation to release, each marked with a two-tone circle rather than a number in a ring. The watermelon at the end is the site's one outright joke, and it sits exactly where the copy says “reap the fruits”. Things like this either make a site feel alive or look out of place, and it holds here only because there is just the one.
Parts
What follows are not screenshots but live elements, built with the site's own colours and proportions. If they reproduce from three rules, it is a system rather than a collection of drawings.
A 2px outline, the top-right corner cut away, and the block behind offset 10px on both axes. There is not one soft shadow on the site: depth is always this offset, which is why the page stays flat even where elements overlap.
Rotated seven degrees, the lower right corner cut, the same hard block behind it. A sticker carries a remark, not a heading: it says the thing the official copy will not, which is why it can sit over the composition.
The one place the blue works. The grid fills the emptiness between sections without adding another outlined object, and gives rhythm where the copy has ended and the next section has not started.
Three parts and one colour rule produce all nine sections. The icons, the watermelon, the lightbulb and the geometry are drawn in one hand: a black outline of the same weight, flat fill from the palette, no gradients and no volume. That is why none of the illustration reads as stock, and why more of it can be drawn later without asking anyone.
Decisions
One rule, and everything else follows from it: the marker headings, the coloured button plates, the coloured cards. Pastels on cream do not read, and the rule does not fight that but uses it: it inverts every pair so that the same combination goes from failing to eightfold. There is not one coloured word on cream anywhere on the site.
There is not one rounded corner and not one soft shadow on the site. A 2px outline and an offset black block give a depth that does not blur when scaled, does not depend on the ground, and reads the same on cream, on sand and on teal. It also means the page has nowhere for the browser to paint a blur, so it has one fewer way to be slow.
Every object on the site is a flat shape with a black outline: the icons, the geometry, the lightbulb, the watermelon. The first 3D sphere or stock isometric illustration would have put the site back in the row it had to be pulled out of. There is a practical consequence too: any new element is drawn from the same three rules, with no photographer and no stock subscription required.
Behind every “View more” sits a record with the same structure: role, team and duration, industry, country, services, technologies. 8 FTE, Japan for one project, 5 FTE, Hungary for the second, 6 FTE for the third. Those are checkable facts, and they do more for trust than any amount of “100% custom”.
Nine sections and exactly one terminal action: the form at the bottom. “Contact Us” in the header and “Hire Us” in the process both lead to it. For a contractor that is right: a reader either comes round over one scroll or does not come round at all, and a second competing action here only takes from the first.
What I would change now
“100% satisfied”, “number-one approaches”, “Unlimited Geography of Work”. The copy arrived written and I took it without argument. I would not now: the evidence was already in the portfolio two sections away, 8 FTE and Japan, and it could have filled the sections that currently hold claims.
The <title> on the site is literally “mrlab.ae”, there is no meta description, and the lang attribute is empty. In search results and in a link preview that makes the site look unfinished, which it is not.
4.52 against a threshold of 4.5 is a margin of two hundredths. It holds only because the blue carries no text anywhere, but that is habit holding it rather than the system. Today I would either darken the blue a couple of steps or write the prohibition into a document instead of leaving it in my head.
I never saw the enquiries, the conversion or the traffic sources: the analytics stayed with the company and I left it. So there is no outcome in this case, and I would rather write that down than put an invented number in its place.