Design System
Egypt built the first great back office in history — scribes, granaries, the logistics of the pyramids. Kemetrix inherits five thousand years of operational discipline and applies it to modern business. Every decision in this system flows from that idea: engraved heritage, Swiss editorial restraint, and photography as the hero.
Principles: gold is a hairline, never a fill · nothing is centered by default · no icon-card grids · every section is a chapter · motion is cinematic, never flashy.
01 · Color
The obsidian ground carries a green cast pulled from the logo ink — warmer and more organic than pure black. Champagne gold appears only as 1px rules, eyebrows, italic emphasis and key numerals. It never fills a surface larger than a button.
02 · Typography
Kemet
Elite teams,
quietly excellent.
Operations, treated as a craft.
Executive assistance without friction.
People · Process · Performance
We build remote teams that ambitious companies trust with their customers, their pipeline, and their operations.
Kemetrix Global recruits from the top layer of Egypt's professional talent — highly skilled, proactive, and fluent in the language of your customers. Each engagement is led by a dedicated operations director who owns quality end to end.
98%
Fraunces is tuned sharp — SOFT 0, WONK 0, optical size 144 — so it reads as an institutional Didone, not a quaint display face. Italic + gold is the single permitted flourish, used at most once per headline. Hanken Grotesk carries all interface and body text.
03 · Actions
One bordered button, one solid, one drawn-underline text link. The underline rests at 28% and draws to full on hover — a quiet gesture instead of a color swap. Arrows are drawn strokes, never emoji or icon-font glyphs.
04 · Photography
Photography is the hero. Low-key editorial only: operations floors, boardrooms, Cairo at dusk, macro hieroglyphs. Every image sits in a .photo frame that grades it into the ink/gold world, so mixed sources read as one commission.
05 · Grid
Twelve columns, fluid gutters, page margins clamp(22px → 104px). Compositions are asymmetric by default — headlines typically occupy columns 1–7, supporting copy 8–12 or offset below the baseline. Section rhythm: clamp(96px → 200px).
06 · Motion
| Gesture | Spec | Where |
|---|---|---|
| Line reveal | 0.7–1.1s · cubic-bezier(.16,1,.3,1) · 28px rise, staggered 120ms | Headlines, blocks entering viewport |
| Counter | 1.6s · quartic ease-out · tabular numerals | Statistics |
| Underline draw | 0.7s · scaleX from 28% | Text links |
| Photo settle | 1.4s · scale 1.06 → 1 | Hero and feature imagery |
| Parallax | ≤ 8% travel | Full-bleed photography only |
Everything honors prefers-reduced-motion. Nothing bounces, nothing spins, nothing floats. The site should feel like a film that respects its audience.