One system.
Four surfaces.
The website, decks, printed documents, and email are the same design system in four media. Core owns the semantic roles. Each surface supplies the values for its medium. Nothing hardcodes a hex.
Principles
Six rules. Every component, page, deck, and document answers to them. When a review flags something, it is almost always one of these.
Every colour, type, and spacing decision starts from a named variable. If you are typing a hex, you are working outside the system.
Dark and light sections alternate down every page, deck, and document. A continuous slab of black reads as machine-generated. Never stack two bands of the same tone.
The yellow marks one thing at a time: a call to action, a dot, a rule, a number chip, a hover. It is never a background wash and never body text.
White space is structure. Hierarchy replaces density. If a section carries two arguments, it is two sections.
Visuals and language speak to African business leaders first. Lead with faces and landscape on customer-facing surfaces. Technical diagrams have to earn their place.
Borders, rules, and grid gaps carry the layout. Drop shadows and filled colour panels are not part of this system.
--paper, --light, --mid and --slate are a foreground ramp, not fixed colours. Inside .section--light and body.theme-light they flip, so --paper resolves to near-black and stays legible as text. That makes them wrong as a background: `background: var(--paper)` paints a black panel on a light band, with black text on it. A panel, chip or tile uses --card for its background and --on-card for its text, and comes out right on every band.
Getting started
Pick the surface you are building for. Nothing at Navon starts from a blank file. Each of these begins from an existing artifact.
Website
Default mode is dark.
public/assets/shared.css
Deck
A deck has no site nav or footer. It supplies its own fixed nav, scroll-spy, and progress hairline.
public/<deck>/assets/deck.css (standalone) · src/styles/deck.css (in-site)
Document / PDF
Print inverts the default. The tonal rhythm on paper comes from hairlines and white space, not from bands.
.claude/skills/navon-brand-doc/assets/style.css
Email cannot use CSS custom properties reliably. Inline the resolved hex values from the primitives above.
newsletters/dispatch-01-investor.html
The contract
Three JSON files in /design-system. This page, the
terminal, and Claude all read them. Because there is one source, the docs, the
code, and the agent cannot drift apart.
design-system/tokens.json Principles, colour and type primitives, the 16 required semantic roles, and how each surface supplies them. design-system/components.json 51 components across 11 categories. Each names its surfaces, its tokens, its do and don't rules, and the one rule an agent must not break. design-system/templates.json The 6 starting points, with the structure and rules for each. scripts/ds.mjs The reader. Lists, searches, prints, and verifies that every surface still defines the required roles. .claude/skills/navon-design/ The agent contract. Claude loads this before generating any Navon artifact.
Core owns the roles. A surface owns the values. A surface may add extension
tokens, like --maxw on decks or
--hair in print, but it may never drop a required
role. That is what lets a card built for the website survive being lifted into
a deck.
Working with Claude
The point of writing the system down as data is that Claude can follow it. Ask for the artifact in plain English and the design comes along with it.
Say what you need, not how it should look
"Make a colocation deck for Equity Bank covering power, cross-connects, and pricing." The skill picks the template, applies the bands, and uses the real component vocabulary.
Every artifact gets the same review
Bands alternate. One primary action. Figures match the source of truth. No em dashes. No placeholder text. Claude runs this check before handing anything back.
Voice
The site speaks to African business leaders: tech-savvy, optimistic, direct. Think Cloudflare blog, not corporate B2B brochure. Not investor DD memo.
Plain, human English. Short declarative sentences.
No em dashes. Use a full stop or a comma.
No rhetorical pairs, no 'not just X but Y', no sentence fragments used for drama.
No hype adjectives. State the fact and let it carry.
Cover and section titles are noun phrases, not sentences.
Never write 'sited' as a verb.
Never ship a raw 'null', 'TBD', or 'Lorem' placeholder.
White-label framing: name the offering, not the manufacturer behind it.
Default for all product and market pages. Navon is a Kenyan company. Use "Kenya" unless the statement genuinely spans multiple borders.
Hell's Gate SEZ, geothermal power, the physical facility. Name it on About and Futures pages. It is a specific, earned claim.
Customer base, talent pipeline, regional cloud reach. Use only when a claim truly spans the Kenya, Uganda, and Tanzania corridor.
Headline aspiration statements only. Never as a market claim until the footprint earns it. Overclaiming erodes local credibility.
"Others talk, we build."
We are technologists who deliver for end users, not a vision deck.
Full systems, not just data centres.
Infrastructure is one component. We build the whole stack: energy, compute, cloud, security, ecosystem.
AI-native agility.
Build, test, evaluate, iterate, adapt. Speed is our differentiator over legacy DC operators.
The Deep Tech Park.
Energy, data, compute, network, and talent. All five brought together in one place.
Cultural anchor
The geography behind the brand. Every design decision should trace back to a real place.
The physical location of Navon's data centre. Geothermal steam, not diesel.
East Africa's technology corridor. Photography and illustration foreground this landscape: escarpment, acacia, red laterite road.
Nairobi's tech ecosystem. The buyers, the talent, the ambition. Navon is local infrastructure for a local market, not a Western import.
Customer-facing pages lead with Kenyan and East African faces and landscape. Diagrams earn their place on technical pages only.