Brand Identity Guidelines
Mohammad Abu Mattar · The Hejaz Survey Plate
The complete visual system for mkabumattar.com: where it came from, what each colour means, how the mark is built, which typefaces carry it, and the rules that keep it consistent everywhere it appears.
A working document, not a portfolio about working
The Hejaz Railway was surveyed and built through Amman, Qatrana and Ma'an at the start of the twentieth century. The plates that recorded it are bilingual engineering documents: station tables, gradient profiles, mileposts, everything ruled and stamped and nothing decorated. They were drawn to be used, not admired, and they are still legible a century later.
That is the register a platform engineer works in. A station table is a service inventory. A gradient profile is a metrics chart. A milepost is a version marker. The identity takes the plate literally: the site is a working engineering document, and the numbers on it are the argument.
It refuses one arrangement in particular. The category ships a near-black portfolio with a single neon accent, monospace everywhere and a fake terminal prompt in the hero. Shipping that would make an engineer who actually runs multi-account AWS under PCI-DSS look exactly like one who has only read about it.
Four principles
Measurements before adjectives
A number a reader can check beats a sentence claiming competence. Every figure on the site is derived from the content, never typed by hand.
Ruled, never decorated
Structure is drawn with rules and blocks. No gradient, no glass, no blurred shadow anywhere in the system.
Read from the left margin
A plate is read from its left edge down. Centred arrangements are reserved, not the default.
Mono means machine
If a person wrote it, it is set in the reading face. If the system generated it, it is mono and uppercase.
Where the plate came from
Seven worlds were derived from Jordan and from regulated engineering before anything was drawn, each one a system that could carry the whole site rather than a mood to borrow from. The survey plate was the fourth. It won on two things: it is specifically Jordanian, and its grammar maps onto the content without being forced.
One square, one colour, one red
- Clear space
- 1 mark-height on every side
- Nothing enters the exclusion zone: no text, no rule, no other mark.
- Minimum size
- 20 px on screen, 8 mm in print
- Below this the counters in the mark close up and it reads as a blob.
- Colour, day
- Keffiyeh Red #8B1E2D
- Measured 7.25:1 on plate stock.
- Colour, night
- #CF5967
- The same hue lightened. The literal #8B1E2D measures 1.68:1 on Black Iris and all but disappears.
- Construction
- 300 x 300 unit square
- The mark is drawn on a single square grid and never redrawn by hand at other sizes.
Sizes and reversals
Six things never to do to it
Never recolour it. Only the two brand reds. Not the accent, not a collection hue, not black.
Never stretch it. Scale both axes together. The 300 x 300 grid is fixed.
Never rotate it. It sits square to the plate, like everything else in the system.
Never add effects. No shadow, no glow, no bevel, no gradient fill.
Never box it. No rounded container, no circle badge, no keyline frame.
Never crowd it. Respect the clear space, including against the viewport edge.
Ten tones, and what each one means
The source is Jordanian Identity Colors, ten tones drawn from Jordan's landscape, culture and heritage. Nothing was added and nothing was dropped. The meanings below are the palette's own; the roles beside them were decided by measuring every tone against both grounds.
Keffiyeh Red
أحمر الشماغThe bold red of the traditional Jordanian keffiyeh (shemagh), a symbol of heritage and identity.
In the system: Route ink. Marks position, action and the one primary control on a page.
- Role
- Accent
- Mode
- Day
- On plate
- 7.25:1
- On iris
- 1.68:1
Wadi Rum Sand
رمال وادي رمThe warm golden-tan of the dunes in Wadi Rum, Jordan's iconic desert landscape.
In the system: Route ink after dark. Takes over because Keffiyeh Red disappears on the Black Iris ground.
- Role
- Accent
- Mode
- Night
- On plate
- 1.79:1
- On iris
- 6.81:1
Black Iris
السوسنة السوداءA deep, dark plum named after Jordan's national flower, the black iris.
In the system: Headings and keylines by day; the whole ground by night.
- Role
- Structure
- Mode
- Both
- On plate
- 12.21:1
- On iris
- 1.00:1
Salt White
ملح الأردنAn off-white drawn from the crystallized salt formations along the shores of the Dead Sea.
In the system: The plate stock by day; headings by night.
- Role
- Structure
- Mode
- Both
- On plate
- 1.00:1
- On iris
- 12.21:1
Basalt Black
بازلت الحرةA deep charcoal-grey inspired by the volcanic basalt rock of Jordan's Harrat desert.
In the system: Running copy on plate stock.
- Role
- Text
- Mode
- Day
- On plate
- 8.85:1
- On iris
- 1.38:1
Amman Stone
حجر عمان القديمThe pale beige of the limestone used throughout old Amman's historic buildings and staircases.
In the system: Running copy on Black Iris.
- Role
- Text
- Mode
- Night
- On plate
- 1.30:1
- On iris
- 9.38:1
Dead Sea Blue
أزرق البحر الميتA deep teal-blue drawn from the mineral-rich waters of the Dead Sea.
In the system: Secondary data series, links, the survey line on charts.
- Role
- Second ink
- Mode
- Day
- On plate
- 5.81:1
- On iris
- 2.10:1
Desert Camel
لون الهجنA warm tan taken from the coat of the desert camel, a lasting symbol of Bedouin life.
In the system: The same job after dark.
- Role
- Second ink
- Mode
- Night
- On plate
- 2.52:1
- On iris
- 4.85:1
Petra Rose
وردي البتراءThe soft rose-pink of Petra's sandstone cliffs, home to the ancient Nabataean city.
In the system: A third data series. Large text and graphics only.
- Role
- Third ink
- Mode
- Night
- On plate
- 2.93:1
- On iris
- 4.16:1
Olive Green
زيتون أردنيA muted green representing Jordan's olive groves, a staple of the local landscape and economy.
In the system: A third data series, and the status green. Graphics only, never body copy.
- Role
- Third ink
- Mode
- Day
- On plate
- 3.72:1
- On iris
- 3.28:1
Ratios are WCAG 2.1, computed from the source file rather than typed. Highlighted figures clear 4.5:1 and can carry body text on that ground.
Proportion, and why the accent swaps
Proportion
Most of any page is paper. The accent is the smallest field on the sheet, because it marks position and action, and a colour used everywhere marks nothing.
- Plate stock 64%The ground. Most of any page is paper.
- Ink 22%Headings, keylines, structure.
- Body 9%Running copy.
- Route ink 5%The accent. Spent sparingly or it stops marking anything.
The day/night swap
Keffiyeh Red measures 1.68:1 on Black Iris and Wadi Rum Sand measures 1.79:1 on Salt White. Neither survives the other ground, so the accent changes colour between themes instead of changing brightness. The mark is the one exception: it stays red in both, on its own token pair.
Platforms that hold up under audit
Running copy sits here, at the weight a paragraph actually uses.
Primary actionAccent 7.25:1 on ground
Platforms that hold up under audit
Running copy sits here, at the weight a paragraph actually uses.
Primary actionAccent 6.81:1 on ground
Three faces, one job each
Archivo
DisplayAWS platforms that hold up under audit
500 · 600 · 700 · 800 · 900
Station headings, milepost numerals, the wordmark. Set at 800 and 900 with negative tracking so a long heading stays one block instead of drifting apart.
A grotesque with real weight in the upper range, which is what a station name needs at plate scale.
Public Sans
ReadingMulti-account AWS for fintech: 15+ accounts, 20+ production microservices.
300 · 400 · 500 · 600 · 700
Every paragraph, every description, every label a person wrote.
The typeface of a public-works documentation standard, which is exactly the register a survey plate belongs to. It holds up across nine content collections without asking to be noticed.
JetBrains Mono
MachineSHEET 01 · PLATFORM SURVEY · SURVEYED 2026
400 · 500 · 600 · 700
Dates, counts, categories, code, and every measurement stamped on the route.
Tabular figures that stay in column, and a clear separation between what a person wrote and what the system generated.
The scale
| Step | Size | Face | Tracking |
|---|---|---|---|
| H1 | 2.99 rem | Archivo 900 | -0.03 em |
| H2 | 2.49 rem | Archivo 900 | -0.03 em |
| H3 | 2.07 rem | Archivo 800 | -0.02 em |
| H4 | 1.73 rem | Archivo 800 | -0.005 em |
| Body | 1.00 rem | Public Sans 400 | 0 |
| Label | 0.69 rem | JetBrains Mono 500 | 0.16 em |
Retired: IBM Plex Sans. Carried both display and reading before, and is gone from the build entirely. A good face and the wrong one here: it is what every technical site reaches for, so it cannot carry an identity trying not to look like every technical site.
The parts of a plate
The plate
.fx-ambient-bgTwo rule grids at once, a 16px fine rule and a 96px heavy division, masked away below the fold so the surveyed area is ruled and the margin stays clean paper.
The route
.plate-routeA 3px line of route ink running the full measure, with measurements stamped where they were taken. It draws itself left to right on entry.
The milepost
.plate-milepostA tick on the route, a numeral at plate scale, and a mono label. Ticks divide; the first post opens the line and carries no keyline.
The stamp
.plate-stampA solid block of route ink carrying a mono tracked label. Used for section markers and eyebrows.
The division rule
.fx-dividerA full-measure hairline with a short heavy stub of route ink at the left margin. Replaces the soft separator that faded out at both ends.
The sheet strip
.plate-metaSheet number, section and survey year, under the heavy rule that opens every page.
- 16Fine rule, px
- 96Heavy division, px
- 3Route weight, px
- 0Corner radius
Every control is a stamp
- Primary action
- .btn-cta
- One per page, never two in a row. Filled route ink, mono tracked label, a 3px offset shadow that collapses on press as the block travels to meet it.
- Secondary action
- .btn-ghost
- Keyline at rest, full colour swap to route ink on hover. No lift, no glow.
- Navigational chip
- .chip-link
- Keyline, mono uppercase, a tabular count. The active one takes route ink and loses its hover state, because you are already there.
- Corner radius
- .--radius-*
- Zero at every step. A rounded control anywhere on the site is evidence of a private copy that needs deleting.
- Elevation
- .--shadow-*
- Hard offsets, never blur. Depth is a block standing off paper, not a soft glow under it.
How the brand writes
- State the measurement. "96% security posture" rather than "strong security practices".
- Name the actor. "The compiler validates queries", not "queries are validated".
- No adjective doing a number's job. Cut "robust", "seamless", "cutting-edge". If it cannot be checked, it is not a claim.
- Sentence case in headings. Title Case reads as marketing. The plate labels things, it does not advertise them.
- Admit the open items. A page that lists what is unfinished is more credible than one that implies nothing is.