How this site was built
ArteyuLabs sells Excel workbooks that work, so the site is built like one. These are the design notes.
The concept
The site is the workbook: every page a sheet, every number a live cell, every claim a formula you can inspect.
The previous version referenced a spreadsheet - a formula bar here, sheet tabs there - sitting on a conventional marketing layout. This one tries to be one. The difference shows most in two places: the white cell in the hero that genuinely takes typing, and the inventory sheet that replaced a wall of 48 cards.
Colour
Every pair below was measured against the real composited background, not eyeballed. Anything under 4.5:1 for small text does not ship.
A trap documented from the start: deep gold on cream is only 2.4:1. It still slipped into one small seal, and only the automated audit caught it.
Typography
Two typefaces only. Plus Jakarta Sans for the voice, JetBrains Mono for the data. The rule is simple: if it is a claim or a feeling it is Jakarta; if it is a fact or furniture it is mono. You should be able to squint and know which parts of the page are data.
Heading size carries meaning, so it is not flat across the site. Every route opens at 49.6px, and only the homepage gets 66.4px.
Motion
Seven named behaviours. Any animation that cannot be named as one of them is not allowed. The Malay names are not decoration - they force each movement to explain itself. The seventh, SELAK, is how the workbook on the front page changes sheet: one sheet in front at a time, each a real document, and the tabs under it work the way Excel's do - click, and the sheet changes; scroll, and the workbook flips.
The hardest rule: text is never rendered at partial opacity. That holds for the resting state and for every frame of every animation.
The reason is simple: an entrance animation that holds text at partial opacity drops that text below readable contrast for as long as it waits. Text you cannot read yet is not text.
The phone
The phone is designed at 320px first, not squeezed down from the desktop. Three things are tested at that width: the dashboard has to stay on the first screen, no label may fall below 11px, and anything you tap has to sit inside thumb reach.
Now the phone follows what Excel on a phone does. The sheet tabs move to the bottom, inside thumb reach. Each chapter carries a name box that sticks to the top, so you always know which part you are reading. The ledger's header row freezes the way freeze panes does - desktop does not even have that. The dashboard moves up: you watch the machine work before you need to scroll.
Performance
Two runtime dependencies: react and react-dom. No Tailwind, no animation library, no WebGL. Those are all fine techniques. The buyer here is just on a mid-range Android phone on 4G, and anyone can look impressive with a GPU and 800KB of JavaScript.
What slows a site like this is not JavaScript - it is page length. That is why the homepage catalogue is an inventory list rather than a wall of cards: a list carries the same items in a third of the height, and height is what a phone has to lay out.
All figures measured on 11 Ogos 2026 with mobile Lighthouse against the real build.