--- title: "Brand Identity Guidelines" lang: "en" author: "Mohammad Abu Mattar" canonical: https://mkabumattar.com/identity --- Volume 01 # 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. 1. [01The storyWhere the identity comes from and what it argues](#ch-01) 2. [02InspirationSeven worlds considered, one built](#ch-02) 3. [03The markConstruction, clear space, minimum size](#ch-03) 4. [04Mark misuseSix things never to do to it](#ch-04) 5. [05ColourTen tones, their meaning and their measurement](#ch-05) 6. [06Colour in useRoles, proportion and the day/night swap](#ch-06) 7. [07TypographyThree faces and the scale they sit on](#ch-07) 8. [08Graphic elementsThe plate, the route, the milepost, the stamp](#ch-08) 9. [09ComponentsHow the system builds a control](#ch-09) 10. [10VoiceHow the brand writes](#ch-10) 01 · The story ## 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 01 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. 02 Ruled, never decorated Structure is drawn with rules and blocks. No gradient, no glass, no blurred shadow anywhere in the system. 03 Read from the left margin A plate is read from its left edge down. Centred arrangements are reserved, not the default. 04 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. 02 · Inspiration ## 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. Gradient profile · the form the site borrows its structure from 03 · The mark ## One square, one colour, one red Clear space · one mark-height on every side 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 64 / 32 / 20 px · the floor Mohammad Abu Mattar Horizontal lockup On Black Iris · #CF5967 Reversed on route ink 04 · Mark misuse ## 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. 05 · Colour ## 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. #8B1E2D RGB 139 30 45 CMYK 0 78 68 45 ### 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 #D9A36A RGB 217 163 106 CMYK 0 25 51 15 ### 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 #2B2233 RGB 43 34 51 CMYK 16 33 0 80 ### 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 #EAE6DB RGB 234 230 219 CMYK 0 2 6 8 ### 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 #3C3C3C RGB 60 60 60 CMYK 0 0 0 76 ### 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 #D9C9B0 RGB 217 201 176 CMYK 0 7 19 15 ### 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 #2F5D6B RGB 47 93 107 CMYK 56 13 0 58 ### 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 #B9875E RGB 185 135 94 CMYK 0 27 49 27 ### 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 #C76B6B RGB 199 107 107 CMYK 0 46 46 22 ### 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 #6B7A4F RGB 107 122 79 CMYK 12 0 35 52 ### 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. 06 · Colour in use ## 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. Day Platforms that hold up under audit Running copy sits here, at the weight a paragraph actually uses. Primary action Accent 7.25:1 on ground Night Platforms that hold up under audit Running copy sits here, at the weight a paragraph actually uses. Primary action Accent 6.81:1 on ground 07 · Typography ## Three faces, one job each ### Archivo Display AWS platforms that hold up under audit Weights 500 · 600 · 700 · 800 · 900 Where it is used 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. Why this one A grotesque with real weight in the upper range, which is what a station name needs at plate scale. ### Public Sans Reading Multi-account AWS for fintech: 15+ accounts, 20+ production microservices. Weights 300 · 400 · 500 · 600 · 700 Where it is used Every paragraph, every description, every label a person wrote. Why this one 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 Machine SHEET 01 · PLATFORM SURVEY · SURVEYED 2026 Weights 400 · 500 · 600 · 700 Where it is used Dates, counts, categories, code, and every measurement stamped on the route. Why this one 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. 08 · Graphic elements ## The parts of a plate ### The plate `.fx-ambient-bg` Two 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-route` A 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-milepost` A 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-stamp` A solid block of route ink carrying a mono tracked label. Used for section markers and eyebrows. ### The division rule `.fx-divider` A 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-meta` Sheet number, section and survey year, under the heavy rule that opens every page. 1. 16Fine rule, px 2. 96Heavy division, px 3. 3Route weight, px 4. 0Corner radius 09 · Components ## Every control is a stamp [Reach me directly](/contact)[Read the notes](/content)[terraform](/blog)[pci-dss12](/blog)[coming soon](/coming-soon) 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. 10 · Voice ## 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. Jordanian Identity Colors · 10 tonesThe Hejaz Survey Plate · seed 10364d1aVolume 01