How this site was made.
This page records the design decisions behind this website: the concept, colour, type, spacing, motion, the parts it is built from.
Concept
Mukamal delivers the finished website, not a tool: the client approves instead of building. So the site shows the work itself: real sites reviewed, each finding pinned to its screen, the approval drawn in code. The look is the Mukamal design system’s, with one lime accent for what you act on: the call to action, the approval.
Colour
Every colour is a named token, defined once. Light mode, dark mode: 2 values of the same token. Text colours meet the WCAG 2.2 AA contrast minimum on their grounds.
| Swatch | Role | Token |
|---|---|---|
| ground | --semantic-color-bg | |
| surface | --semantic-color-surface | |
| line | --semantic-color-border | |
| line-strong | --semantic-color-border-strong | |
| ink | --semantic-color-text-primary | |
| ink-soft | --semantic-color-text-secondary | |
| accent | --semantic-color-accent-text | |
| accent-bright | --semantic-color-accent | |
| on-accent | --semantic-color-text-on-accent | |
| success | --semantic-color-success | |
| cobalt | --semantic-color-info-text | |
| error | --semantic-color-error-text | |
| focus | --semantic-color-ring |
Type
3 faces in 4 roles: display for the few lines that stand out, heading for headings, body for reading, the same body face for data.
| Role | Token | Sample |
|---|---|---|
| display | --semantic-font-family-display | Aa Bb 0123 |
| heading | --font-heading-face | Aa Bb 0123 |
| body | --semantic-font-family-sans | Aa Bb 0123 |
| data | --semantic-font-family-mono | Aa Bb 0123 |
Spacing, motion
One spacing scale. One easing curve.
Components
Every section is a separate component. The table lists each one with its job.
| Component | Job |
|---|---|
| Nav | the header: logo, the 2 buyer pages, page links, the free-score button, the mobile menu |
| ThemeToggle | switches between the light, dark schemes |
| MukamalLogo | the brand lockup, coloured by the theme |
| Footer | the closing links, what we deliver, the legal line |
| PhotoHero | a page’s photo hero: one photograph edge to edge, the page’s heading over its quiet part |
| HomeHero | the home page’s hero: you pick what you sell, over a photograph of someone shopping for it |
| Journey | the shopper’s 6 steps, each one bad and good on real shops |
| Offer | what you get, with or without a team: one stop for each deliverable |
| WorkStrip | our own work, beside one step in 2 real shops as found |
| PinnedScreen | one reviewed screen in a phone outline, a mark on each finding |
| ReviewLabel | the labels every real-site review carries: its state, its capture date |
| Shot | a picture on a sub page, in its frame, its label under it: Ours, or the real site’s |
| Cursor | the pointer on mouse or trackpad devices |
| DoorHeading | a door page’s heading: the headline, the lede, the one button |
| Deliverables | how it starts, then the 3 deliverables for a small business, one at a time, each ending on what you approve |
| AuditVignette | the Competitor review’s example: a drawn competitor page, 2 pins, each with its finding |
| Rails | a store page drawn in lines: the 3 parts you edit yourself, the rest locked |
| Cards | what a large organisation gets: the Audit, the Competitor review, the design files, one row each |
| FindingRecord | one finding drawn as the record a team receives, its failing element marked |
| HowItRuns | how it runs with your team: 5 numbered steps on one rule, Discover first |
| Answers | objections answered: the objection, then the answer under it |
| ClosingBand | the closing band: step 1, one email |
| ContactForm | the enquiry form |
| AuditScores | benchmark scores filling to their values, the critical cap included |
| OfferLadder | the free score, then the 3 deliverables, climbing into place |
| SectionHeading | a section’s caps line (where it adds a fact), title, lede |
| Sentences | sets each sentence of a heading on its own line |
| Reveal | plays an element’s entrance once it scrolls into view |
| Icon | the site’s one line-icon set |
The hero
The hero is a photograph of a shopper in warm, natural colour, the headline set beside her. The shopper’s 6 steps follow, on real shops of the kind you sell: each step’s bad shop turns into a good one as you scroll. With reduced motion on, every step shows the two side by side.