Design System

The Modern Institution
of Kemet.

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

Obsidian#0A0E0C · page ground
Basalt#10160F · section surface
Basalt II#18201A · panels
Basalt III#212B24 · elevation
Papyrus#F1EDE2 · light ground
Papyrus II#E9E3D3 · light panels
Champagne#C2A468 · hairlines only
Deep Gold#96784A · gold on light
Sage#74836F · tertiary

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

Colossal
Fraunces 340 · opsz 144
clamp 64→152px

Kemet

Display
Fraunces 340
clamp 46→96px · lh 1.02

Elite teams,
quietly excellent.

Title
Fraunces 340
clamp 34→60px · lh 1.08

Operations, treated as a craft.

Heading
Fraunces 340
clamp 24→32px

Executive assistance without friction.

Eyebrow
Hanken 600 · 11.5px
tracking 0.34em

People · Process · Performance

Lead
Hanken 400 · 18→21px

We build remote teams that ambitious companies trust with their customers, their pipeline, and their operations.

Body
Hanken 400 · 17px · lh 1.72

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.

Numeral
Fraunces 320 · 72→140px
statistics only

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

Book a Consultation Book a Consultation Explore the services

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

Operations specialist at a dark workstation
GRADED — saturation 82% · contrast +4 · ink gradient veil anchors type
Pyramids of Giza at dusk
HERITAGE — flat veil for editorial imagery; Kemet appears as texture, not theme

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

GestureSpecWhere
Line reveal0.7–1.1s · cubic-bezier(.16,1,.3,1) · 28px rise, staggered 120msHeadlines, blocks entering viewport
Counter1.6s · quartic ease-out · tabular numeralsStatistics
Underline draw0.7s · scaleX from 28%Text links
Photo settle1.4s · scale 1.06 → 1Hero and feature imagery
Parallax≤ 8% travelFull-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.