Components

51 components.
One vocabulary.

Every entry names the surfaces it is valid on, the tokens it consumes, and the one rule that must not be broken. Rendered from design-system/components.json, the same file the terminal and Claude read.

Primitives

6 components

Accent span

Signal-yellow emphasis on a phrase inside a headline. Flips to a yellow highlight block on light bands.

webdeck
We are not a reseller.

Marks the single most important phrase in a headline. One per headline.

Anatomy
<h2 class="h-lg">We are <span class="sig">not</span> a reseller.</h2>
Variants
  • on dark Yellow text on ink.
  • on light Automatically becomes ink text on a yellow block — yellow text is unreadable on white.
Tokens consumed
--signal--ink
Rules
  • Use it once per headline.
  • Accent a whole clause.
  • Use yellow for body text anywhere, on any surface.
Rule Yellow marks one phrase. If two things are emphasised, nothing is.
deck.css · .sig

Eyebrow

The mono uppercase label that opens a section, with a small signal square in front of it.

webdeckdocument
Colocation

Every section starts with an eyebrow. It names the territory so the headline does not have to.

Anatomy
<div class="eyebrow"><span class="mark"></span>Colocation</div>
Variants
  • default Signal square + label. The standard opener.
  • glyph Deck only. A 14px line icon replaces the square: <span class="eyebrow"><svg class="eglyph">…</svg>Label</span>
Tokens consumed
--font-mono--signal--mid--slate
Rules
  • Keep it to one or two words.
  • Put exactly one eyebrow at the top of a section.
  • Write a sentence in an eyebrow.
  • Repeat the headline in the eyebrow.
Rule Open every section with an eyebrow. Never skip straight to a headline.
public/assets/shared.css · .eyebrow

Headings

Three display sizes at weight 600 with tight negative tracking. Fluid between mobile and desktop.

webdeckdocument
Sovereign compute
What we run
Rack and stack

h-xl for a cover or page hero, h-lg for a section headline, h-md for a card or slide sub-head.

Anatomy
<h1 class="h-xl">Sovereign compute,<br/><span class="sig">built in Kenya</span></h1>
<h2 class="h-lg">What we run</h2>
<h3 class="h-md">Rack and stack</h3>
Variants
  • h-xl clamp(38px, 6.2vw, 78px) — one per page.
  • h-lg clamp(28px, 3.6vw, 50px) — section headline.
  • h-md clamp(22px, 2.4vw, 32px) — card sub-head.
Tokens consumed
--font-display--paper--ink--signal
Rules
  • Break a long headline manually with <br/> so the line breaks read well.
  • Wrap at most one phrase in .sig or .accent for emphasis.
  • Use more than one h-xl on a page.
  • Set a headline in mono.
  • Let a headline run past two lines on desktop.
Rule One h-xl per page or deck. Everything below it steps down. Never skip a level for visual effect.
deck.css · .h-xl / .h-lg / .h-md

Lede

The standfirst paragraph under a headline. Larger than body, capped at 60 characters per line.

webdeckdocument

Geothermal power, Kenyan jurisdiction, and hardware you can walk up to.

One lede per section, directly under the headline. It states the claim the section will support.

Anatomy
<p class="lede">Geothermal power, Kenyan jurisdiction, and hardware you can walk up to.</p>
Tokens consumed
--light--charcoal
Rules
  • Keep it to one or two sentences.
  • Hold the measure at 60ch.
  • Stack two ledes.
  • Let it run to a full paragraph.
Rule A lede is one or two sentences. If it needs three, it is body copy.
deck.css · .lede

Mono label

Uppercase mono meta text for specs, figures, captions, and table headers.

webdeckdocumentemail
18 MW · Phase 1

Use for anything that is data rather than prose: a figure caption, a column header, a status, a coordinate.

Anatomy
<span class="mono">18 MW · Phase 1</span>
Tokens consumed
--font-mono--slate
Rules
  • Use it for numbers, units, and status.
  • Set a paragraph in mono.
  • Use mono for a headline.
Rule Mono is for data and labels. Prose is always Space Grotesk.
public/assets/shared.css · .mono

Section head

The standard eyebrow + headline + lede block that opens a section.

webdeck

The default opener for every band. Keeps vertical rhythm identical across pages and decks.

Anatomy
<div class="shead">
  <div class="eyebrow"><span class="mark"></span>Traction</div>
  <h2 class="h-lg">Three signed orders</h2>
  <p class="lede">Committed revenue before the first rack lands.</p>
</div>
Tokens consumed
--section-y--px
Rules
  • Use it in this order: eyebrow, headline, lede.
  • Invent a new section opener.
Rule Use .shead for every section opener. Do not hand-roll the spacing.
deck.css · .shead

Action

3 components

Dual CTA

A primary and a ghost button on one row, with consistent gap and wrap behaviour.

webdeck
Talk to us → See pricing →

The end of a section or a deck closing slide, where there is a main action and one alternative.

Anatomy
<div class="dual-cta">
  <a href="/contact.html" class="cta">Talk to us <span class="arrow">→</span></a>
  <a href="/pricing.html" class="cta-ghost">See pricing <span class="arrow">→</span></a>
</div>
Tokens consumed
--signal--line-2
Rules
  • Put the primary first.
  • Add a third button.
Rule Maximum two actions in a dual-cta: one primary, one ghost.
public/assets/shared.css · .dual-cta

Ghost button

Outlined low-emphasis action. Border and text go yellow on hover.

webdeck
Read the docs ↗

Secondary paths: read the docs, see the spec, download the PDF.

Anatomy
<a href="/docs.html" class="cta-ghost">Read the docs <span class="arrow">↗</span></a>
Tokens consumed
--line-2--paper--signal
Rules
  • Use ↗ for links that leave the page and → for links that continue it.
  • Fill a ghost button.
  • Use more than two side by side.
Rule Secondary actions are always .cta-ghost. Never a second yellow button.
public/assets/shared.css · .cta-ghost

Primary button

Signal-yellow filled action with an arrow. The single most important action in a view.

webdeck
Talk to us →

One per view. Form submits, the main conversion, the deck's closing action.

Anatomy
<a href="/contact.html" class="cta">Talk to us <span class="arrow">→</span></a>
Variants
  • default Yellow fill, ink text, 2px radius.
  • hover Lifts 1px and gains a yellow glow. Never changes colour.
Tokens consumed
--signal--ink--radius-control--easing
Rules
  • Write a label that names the action: 'Book a walkthrough', not 'Click here'.
  • Pair it with a ghost button when there is a secondary path.
  • Put two primary buttons in one view.
  • Use it for navigation between marketing pages.
Rule Exactly one .cta per view. Everything else is .cta-ghost.
public/assets/shared.css · .cta

Surfaces

7 components

Callout

A note with a yellow left border, for context, caveats, or a condition.

documentweb

Caveats and conditions that would otherwise clutter the body copy.

Anatomy
<div class="callout">
  <p>Pricing assumes a 24-month term. Shorter terms are quoted separately.</p>
</div>
Tokens consumed
--signal--hair--muted
Rules
  • Keep it to two sentences.
  • Use a callout for the main argument.
Rule Callouts hold caveats, never the primary claim.
navon-brand-doc/assets/style.css · .callout

Card

A hairline-bordered panel holding an icon, a title, and a short body. The workhorse grid unit.

webdeck
Sovereign by default

Data stays in Kenyan jurisdiction.

Geothermal power

Steam from Hell's Gate, not diesel.

Hardware you can visit

Walk the row. Read the serial.

Two to four abreast for reasons, features, drivers, or revenue streams.

Anatomy
<div class="cards" data-cols="3">
  <article class="card">
    <svg class="cglyph">…</svg>
    <h3 class="h-md">Sovereign by default</h3>
    <p>Data stays in Kenyan jurisdiction.</p>
  </article>
</div>
Variants
  • cols 2 / 3 / 4 Set with data-cols. Four only for short items.
  • with metric Adds a mono figure under the body.
Tokens consumed
--line--line-2--ink-2--signal--card--on-card
Rules
  • Keep every card in a grid the same length.
  • Lead each card with one line icon.
  • Mix two-line and six-line cards in one grid.
  • Add a drop shadow.
  • Paint it with --paper. That token inverts on a light band and gives you a black card with black text.
Rule Cards in a grid must be visually balanced. Trim the long one rather than padding the short one. A card background is always --card and its text --on-card, never --paper or --ink.
deck.css · .card

Numbered feature

Large numbered blocks stepping down a page — 01 through 05 — each with a headline and body.

web

A sequence that has to be read in order: how it works, phases, or the stack.

Anatomy
<div class="numbered">
  <div class="numbered-item">
    <span class="n">01</span>
    <h3 class="h-md">Scope the workload</h3>
    <p>…</p>
  </div>
</div>
Tokens consumed
--line--signal--ink
Rules
  • Number sequentially from 01.
  • Use more than five steps.
Rule Numbered items stay dark even inside a light band. That is deliberate.
public/assets/shared.css · .numbered-item

Password gate

The full-screen unlock surface in front of a confidential deck. Content is not sent to the browser until the password is correct.

deck

Any deck containing pricing, investor material, or a named customer.

Anatomy
<div class="gate">
  <div class="gate-card">
    <img class="gate-mark" src="…" alt="Navon">
    <h1>Confidential</h1>
    <form class="gate-form">…</form>
  </div>
</div>
Tokens consumed
--ink-2--signal--line-2
Rules
  • Send the URL and the password through different channels.
  • Store only the hash — run npm run deck:hash.
  • Commit a plaintext password.
  • Gate a deck client-side only.
Rule Any deck with pricing or a named customer is gated. The default is locked.
src/styles/deck.css · .gate

Section band

The horizontal band that every section sits in. Three tones: dark, ink, and light.

webdeck
.section Dark. The default.
.section--light Light. Flips every ramp colour by cascade.
.section--ink Deeper. For a bookend.

The unit of page structure. Alternate tones down the page — this is the standing tonal rhythm rule.

Anatomy
<section class="section">…</section>
<section class="section section--light">…</section>
<section class="section section--ink">…</section>
Variants
  • default (dark) Background --ink, text --paper.
  • section--ink Deeper --ink-2. Use for a bookend or a full-bleed moment.
  • section--light Background --vlight, text --ink. Flips the wordmark and every ramp colour by cascade.
Tokens consumed
--ink--ink-2--vlight--section-y--px--card--on-card
Rules
  • Alternate dark and light down every page and deck.
  • Check hardcoded-colour SVGs and always-dark cards when you add a light band.
  • Give panels inside a band --card and --on-card, so they follow the band instead of fighting it.
  • Stack two bands of the same tone.
  • Run more than two dark bands before a light one.
  • Use a ramp token (--paper, --light, --mid, --slate) as a background inside a light band. They invert.
Rule STANDING RULE: alternate dark and light bands. A continuous slab of black reads as machine-generated and is a review failure.
public/assets/shared.css · .section--light

Spec card

Large hardware showcase card: number, visual, description, spec list, and tags.

web

Hardware and server pages, where a product needs a full technical readout.

Anatomy
<article class="spec-card">
  <div class="spec-card-num">01</div>
  <div class="spec-card-visual">…</div>
  <div class="spec-card-body">
    <p class="spec-card-desc">…</p>
    <ul class="spec-card-specs">…</ul>
    <div class="spec-card-tags"><span class="spec-tag">H200</span></div>
  </div>
</article>
Tokens consumed
--line--signal--slate
Rules
  • Give every spec card the same number of spec rows.
  • Use it for anything that is not hardware.
Rule Spec cards are for physical products only. Use a plain card for concepts.
public/assets/shared.css · .spec-card

Statement band

A single bold positioning line filling a band, optionally with supporting pillars underneath.

webdeckdocument
Position

We are not a reseller. We own the rack.

The one sentence you want a reader to leave with. Once or twice per deck at most.

Anatomy
<div class="statement">
  <div class="eyebrow"><span class="mark"></span>Position</div>
  <p class="h-lg">We are not a reseller. We own the rack.</p>
</div>
Tokens consumed
--signal--paper--ink
Rules
  • Keep it to one sentence.
  • Use more than two statement bands in one document.
Rule A statement band carries one sentence. If it needs a second, it is a section.
deck.css · .statement

Data display

6 components

Comparison matrix

Capability table comparing Navon against alternatives, with one column lifted out of the grid.

webdeck
HyperscalerNavon
Data residencyRegion onlyKenyan jurisdiction
Physical accessNoneEscorted, on request

The moat slide, the deployment matrix, any 'why us' argument that is really a table.

Anatomy
<table class="cmp">
  <tr class="cmp-head"><th></th><th>Hyperscaler</th><th class="best">Navon</th></tr>
  <tr class="cmp-row"><td>Data residency</td><td class="no">Region only</td><td class="yes">Kenyan jurisdiction</td></tr>
</table>
Variants
  • cell kinds yes · no · part · best · lvl — these set the mark and colour.
Tokens consumed
--signal--line--slate
Rules
  • Lift the Navon column with highlightCol.
  • State the competitor position fairly.
  • Straw-man a competitor.
  • Leave a cell blank — use 'part' or a dash.
Rule Comparison claims must be defensible. If you cannot source the competitor's position, drop the row.
deck.css · .cmp

Layer stack

The vertical integrated stack, one row per layer, each with a number, icon, title, and tag.

webdeck

Showing Navon as a full stack: Foundation, Compute, Intelligence, Utility, with security across.

Anatomy
<div class="sys-stack">
  <div class="sys">
    <span class="lnum">03</span>
    <svg class="lglyph">…</svg>
    <h3 class="h-md">Connectivity</h3>
    <p>ISP nodes, peering, redundant transit.</p>
    <span class="mono">Live</span>
  </div>
</div>
Tokens consumed
--line--signal--slate
Rules
  • Keep layer names identical to products.json.
  • Reorder or rename layers in a single deck.
Rule Layer names and order come from products.json. Never improvise them per deck.
deck.css · .sys-stack

Partner strip

A row of partner logos on white tiles with generous breathing room.

webdeck

Ecosystem and credibility bands.

Anatomy
<div class="partners-strip">
  <div class="logo-plate"><img src="…" alt="Partner name"></div>
</div>
Tokens consumed
--logo-plate--line
Rules
  • Put every logo on a white plate.
  • Give each logo the same optical weight.
  • Crop a partner logo.
  • Recolour a partner logo.
  • Show a logo you do not have permission to use.
Rule Never crop or recolour a partner mark. White plate, full clear space, permission confirmed.
public/assets/shared.css · .partners-strip

Savings table

Self-contained dark table comparing reserved against on-demand pricing, with a disclaimer row.

web

Cloud pricing and reservation pages.

Anatomy
<div class="savings-table">
  <div class="savings-row"><span class="savings-cell">…</span></div>
  <p class="savings-disclaimer">Indicative. Final pricing on a signed order.</p>
</div>
Tokens consumed
--ink-2--signal--line-2
Rules
  • Always carry the disclaimer row.
  • Publish a price without the disclaimer.
Rule Any pricing table ships with its disclaimer. No exceptions.
public/assets/shared.css · .savings-table

Stat row

Two to four large figures with mono labels underneath, on one row.

webdeckdocument
$1.87M
Committed ARR
18 MW
Phase 1 capacity
3
Signed orders

The proof band. Committed revenue, capacity, headcount, timelines.

Anatomy
<div class="stats">
  <div><span class="value sig">$1.87M</span><span class="mono">Committed ARR</span></div>
  <div><span class="value">18 MW</span><span class="mono">Phase 1 capacity</span></div>
</div>
Tokens consumed
--signal--font-mono--slate
Rules
  • Signal exactly one figure in the row.
  • Include the unit in the value.
  • Put five or more figures on a row.
  • Round a real figure to make it prettier.
Rule Figures must match the source of truth. Never invent or round a number to fit the layout.
deck.css · .stats

Timeline

Phases over time, each with a period, phase name, title, and body. The current phase is marked.

webdeckdocument

Roadmaps, build phases, rollout plans.

Anatomy
<div class="tl">
  <div class="tl-item now">
    <span class="mono">Q3 2026</span>
    <h3 class="h-md">Phase 1 · Naivasha</h3>
    <p>First racks energised.</p>
  </div>
</div>
Tokens consumed
--signal--line--slate
Rules
  • Mark exactly one phase as current.
  • Show a date you cannot commit to.
Rule Mark one phase as 'now'. Dates must match the current plan, not an older deck.
deck.css · .tl

Media

4 components

Image

Responsive WebP through astro:assets, with widths and sizes matched to how wide the image actually renders.

web

Every raster image on the site. Images in public/ ship unoptimised and are a build review failure.

Anatomy
---
import { Image } from 'astro:assets';
import photo from '../assets/site/rack.jpg';
---
<Image src={photo} alt="Rack row under commissioning" widths={[640,1024,1600]} sizes="100vw" loading="lazy" />
Variants
  • full-bleed sizes="100vw"
  • two-up sizes="(max-width: 760px) 100vw, 50vw"
  • four-up sizes="(max-width: 760px) 50vw, 25vw"
Rules
  • Import from src/assets so the build optimises it.
  • Use loading="eager" and fetchpriority="high" on the LCP image only.
  • Write a concrete alt describing what is in the frame.
  • Point a raw <img> at a JPEG in public/.
  • Ship a decorative image without alt="" aria-hidden="true".
Rule Raster images come from src/assets through <Image>. public/ is only for video, favicons, og-image, and shared.css/js.
CLAUDE.md · Media

Proof strip

One wide or two to three photographs with mono captions, evidencing a claim made above.

deck

After a claim that needs physical evidence: the site, the team, the hardware.

Anatomy
<div class="photoband">
  <figure><img src="…" alt="…"><figcaption class="mono">Hell's Gate SEZ · Naivasha</figcaption></figure>
</div>
Tokens consumed
--line--slate
Rules
  • Use real photographs.
  • Caption what and where.
  • Ship the dashed placeholder to a customer.
  • Use stock photography of somewhere that is not Kenya.
Rule Proof strips need real Navon photography. A placeholder in a customer-facing deck is a blocker.
src/styles/deck.css · .proof

Technical glyph

Hand-drawn line-art SVG using the hairline ramp, animated on reveal with .draw.

webdeck

Hero illustrations on technical pages, where a photograph would say less than a diagram.

Anatomy
<svg class="hero-glyph tech draw" viewBox="0 0 460 380" aria-hidden="true">
  <g class="hair"><line x1="60" y1="80" x2="400" y2="80"/></g>
  <circle cx="400" cy="80" r="4" class="signal"/>
</svg>
Tokens consumed
--line--signal--slate
Rules
  • Use the .hair and .signal classes so the glyph adapts to light bands.
  • Hardcode a stroke colour — it will break on a light band.
Rule Technical SVGs use class-based colours, never hardcoded hex, or they break the tonal rhythm.
public/assets/shared.css · .tech

Video feature

A video block with a mandatory WebP poster that autoplays muted when scrolled into view.

web

Site walkthroughs and phone-shot vertical clips. Never a bare <video> element.

Anatomy
<VideoFeature
  title="Inside the Naivasha build"
  description="…"
  src="/assets/video/build.mp4"
  poster="/assets/video/build-poster.webp"
  align="left"
/>
Rules
  • Always pass a poster — the component preloads nothing, so the poster is what people see.
  • Export H.264, 720×1280 portrait, 600–800 kbps, 25 fps.
  • Ship 1080p — the frame renders around 330px wide.
  • Use a bare <video> tag.
Rule Every video goes through VideoFeature and every VideoFeature has a poster. A missing poster is a black box.
src/components/VideoFeature.astro

Forms

2 components

Form field

Labelled input on a translucent surface with a hairline border that goes signal on focus.

web

Every form field on the site: waitlist, scoping, feedback, recommend.

Anatomy
<label class="field">
  <span class="mono">Work email</span>
  <input type="email" name="email" required>
</label>
Tokens consumed
--line-2--signal--paper--slate
Rules
  • Label every field in mono uppercase.
  • Mark required fields honestly.
  • Use placeholder text as the label.
  • Ask for a field you will not act on.
Rule Never use a placeholder as a label. Every input has a visible mono label.
src/styles/waitlist-form.css

Form submission

The delivery contract for a submitted form: every Navon form posts to Slack #submissions.

web

Any new form, anywhere. This is a standing rule, not a per-form decision.

Anatomy
// Pages Functions: functions/api/_slack.js
// Apps Script: read the webhook from Script Properties, never inline it
Rules
  • Route through functions/api/_slack.js for Pages Functions.
  • Read the webhook from Script Properties in Apps Script.
  • Confirm submission to the user on screen.
  • Commit a webhook URL.
  • Ship a form that only writes to a sheet.
Rule STANDING RULE: every form we build posts to Slack #submissions. Wire it before shipping.
functions/api/_slack.js

Document

8 components

Bio card

One person per page: portrait, name, role, hairline rule, and body.

document

Team and leadership documents.

Anatomy
<section class="bio">
  <img class="portrait" src="img:team/romi.jpg" alt="">
  <p class="bio-name">Romi …</p>
  <p class="bio-role">Chief Executive Officer</p>
  <div class="bio-rule"></div>
  <div class="bio-body">…</div>
</section>
Tokens consumed
--hair--signal--charcoal
Rules
  • Give each bio its own page — the CSS handles the break.
  • Composite the soft mask when extracting a headshot from a PDF, or it will clip.
  • Stack two bios on one page.
Rule One bio per page. Check the portrait is not clipped before delivering.
navon-brand-doc/reference/COMPONENTS.md · 8

Body wrapper

The single wrapper holding everything after the cover. Drives page geometry and the repeating footer.

document

Every branded document. The cover sits outside it; all numbered sections sit inside.

Anatomy
<section class="cover"> … </section>
<div class="body">
  <section class="section"> … </section>
</div>
Tokens consumed
--hair--muted
Rules
  • Put exactly one .body in a document, directly after the cover.
  • Wrap the cover inside .body.
  • Open a second .body for an appendix.
Rule Cover outside, everything else inside one .body. Page breaks and the footer depend on it.
navon-brand-doc/reference/COMPONENTS.md · 10

Bullet list

An unordered list with signal-yellow tick markers instead of dots.

document

Enumerating requirements, inclusions, or criteria inside a printed section.

Anatomy
<ul class="ticks">
  <li>Dual power feed to every rack.</li>
  <li>Escorted physical access on request.</li>
</ul>
Tokens consumed
--signal--ink
Rules
  • Keep every item to one line where possible.
  • Use parallel grammar across items.
  • Nest a second level.
  • Use a bullet list where a table would be clearer.
Rule The tick is the only yellow element in a list. Never colour the text.
navon-brand-doc/reference/COMPONENTS.md · 4

Document cover

Page one of every branded PDF: wordmark, classification badge, kicker, title, subtitle, signal rule, and a metadata grid or roster.

document

Always the first page. Never skipped, never merged into the body.

Anatomy
<section class="cover">
  <div class="cover-top">
    <img class="wordmark" src="__WORDMARK__" alt="Navon">
    <span class="badge">Confidential · Investor Use Only</span>
  </div>
  <div class="cover-mid">
    <p class="doc-kicker">Navon Africa Limited</p>
    <h1 class="title">Colocation Deep Dive</h1>
    <p class="subtitle">What a rack at Naivasha includes and what it costs.</p>
    <div class="rule-signal"></div>
    <div class="cover-meta">
      <div><p class="k">Version</p><p class="v">2.0</p></div>
    </div>
  </div>
  <div class="cover-foot">Prepared for a named recipient.</div>
</section>
Tokens consumed
--ink--signal--hair
Rules
  • Title is a noun phrase.
  • Set the classification badge honestly.
  • Put a dark panel on the cover.
  • Skip the version and date.
Rule Cover is always page 1. White background. Title is a noun phrase, not a sentence.
navon-brand-doc/reference/COMPONENTS.md · 1

Document table

Three table forms for print: standard, key-value, and definition. All hairline-ruled, no fills.

document

Specs, pricing, terms, and definitions inside a PDF.

Anatomy
<table class="std">
  <thead><tr><th>Item</th><th>Qty</th></tr></thead>
  <tbody><tr><td>H200 node</td><td>4</td></tr></tbody>
</table>
Variants
  • standard Column headers, ruled rows.
  • key-value Two columns, label left.
  • definition Term and definition pairs.
Tokens consumed
--hair--hair-strong--ink
Rules
  • Right-align numbers.
  • Keep a table on one page where possible.
  • Fill header rows with colour.
  • Use zebra striping.
Rule Print tables are hairline-ruled. No fills, no striping, no colour headers.
navon-brand-doc/reference/COMPONENTS.md · 7

Numbered section

A yellow number chip followed by a section heading. Numbered sequentially through the document.

document

The unit of structure in every branded PDF.

Anatomy
<section class="section">
  <div class="section-head"><span class="n">1</span><h2>Scope</h2></div>
  <p>Body paragraph.</p>
</section>
Tokens consumed
--signal--ink--hair
Rules
  • Number from 1 with no gaps.
  • Restart numbering mid-document.
Rule Number sections sequentially. The chip is the only filled yellow element on the page.
navon-brand-doc/reference/COMPONENTS.md · 2

Roster

An index of people or items on the cover, in place of the metadata grid.

document

People documents and index documents, where the cover should show what is inside.

Anatomy
<div class="roster">
  <div><span class="nm">Romi</span><span class="rl">Chief Executive Officer</span></div>
  <div><span class="nm">Karan</span><span class="rl">Chief Product and Technology Officer</span></div>
</div>
Variants
  • cover-meta The alternative. Version, date, owner. Use one or the other, never both.
Tokens consumed
--hair--charcoal--ink
Rules
  • Order it the same way the body is ordered.
  • Use a roster and a metadata grid on the same cover.
Rule A cover carries either a metadata grid or a roster. Never both.
navon-brand-doc/reference/COMPONENTS.md · 9

Sub-label

A mono uppercase label inside a section, below the numbered heading.

document

Splitting a long section into named parts without spending another section number.

Anatomy
<p class="sub-label">Identification and verification</p>
Tokens consumed
--font-mono--muted
Rules
  • Keep it to three or four words.
  • Use it as a substitute for a numbered section.
  • Stack two in a row.
Rule Sub-labels divide a section. If a part needs its own number, it is a section.
navon-brand-doc/reference/COMPONENTS.md · 3

Deck

3 components

Close slide

The branded bookend: why Navon, plus contact links.

deck

The last slide of every deck, before nothing else.

Anatomy
{ type: 'close', headline: 'Why Navon', contact: { email: '[email protected]' } }
Tokens consumed
--ink-2--signal
Rules
  • Always close on it.
  • End a deck on a data slide.
Rule Never end a deck on a table. Close on the bookend.
CUSTOM-DECKS.md

Deck cover

Full-bleed photograph, headline, and an optional figure box. The first slide of every deck.

deck

Slide one. Sets the band rhythm for everything after it.

Anatomy
{ type: 'cover', photo: 'horizon', headline: 'Sovereign compute for Kenya', figure: { value: '18 MW', label: 'Phase 1' } }
Tokens consumed
--ink--signal--paper
Rules
  • Use a real Rift Valley photograph.
  • Keep the headline to one line where possible.
  • Open on a dark band with no image.
Rule Every deck opens on a cover and closes on the branded close slide.
CUSTOM-DECKS.md

Deck slide blocks

The nine data-driven slide types. You supply data; the design is inherited.

deck

Building a customer or partner deck. Set type, id, and variant, then fill the fields.

Anatomy
slides: [
  { type: 'stats',      variant: 'dark',  eyebrow: 'Traction', stats: [ … ] },
  { type: 'cards',      variant: 'light', cols: 3, items: [ … ] },
  { type: 'comparison', variant: 'dark',  highlightCol: 2, rows: [ … ] },
]
Variants
  • stats Big-number band.
  • cards 1–4 reason or feature cards.
  • pillars 3-up value statements.
  • comparison Capability matrix.
  • layers The integrated stack.
  • timeline Phases over time.
  • proof Photo strip.
  • statement Bold positioning line.
  • richtext Freeform copy plus chips.
Tokens consumed
--ink--ink-2--vlight--signal
Rules
  • Alternate variant between dark, ink, and light down the deck.
  • Register the deck in src/data/decks/index.js or it stays locked.
  • Write custom CSS in a deck data file.
  • Stack two slides with the same variant.
Rule Decks are data, not design. Fill the block fields; never add per-deck CSS.
CUSTOM-DECKS.md

Motion

5 components

Hover lift

The primary button rising 1px and gaining a yellow glow on hover. The only element in the system that moves on hover.

web

Automatic on .cta. Nothing else should adopt it.

Anatomy
.cta:hover { transform: translateY(-1px); box-shadow: 0 8px 32px rgba(231,255,0,0.28); }
Tokens consumed
--signal--duration-press--easing
Rules
  • Let .cta carry it and leave everything else to colour and border changes.
  • Lift cards, rows, or ghost buttons.
  • Increase the distance past 1px.
Rule Only the primary button moves on hover. Everything else changes colour or border only.
public/assets/shared.css · .cta:hover

Line draw

Line-art SVG drawing itself in over 2.2 seconds, with optional per-group delays.

web

A technical diagram on first view. It shows the reader how the diagram is constructed.

Anatomy
<svg class="tech draw" viewBox="0 0 460 380" aria-hidden="true">
  <g class="hair"><line x1="60" y1="80" x2="400" y2="80"/></g>
  <g class="signal d2"><line x1="380" y1="80" x2="400" y2="80"/></g>
</svg>
Variants
  • d2 / d3 / d4 Stagger groups by 0.3s so the diagram builds in reading order.
Tokens consumed
--duration-draw--signal--mid
Rules
  • Build in the order a reader would follow the diagram.
  • Pair it with .tech so the strokes adapt to light bands.
  • Draw a diagram that carries a figure the reader needs immediately.
  • Use it more than once per page.
Rule One drawn diagram per page, and never one holding a number the reader is looking for.
public/assets/shared.css · .draw

Scroll reveal

Fade and rise on entering the viewport, staggered with delay classes.

webdeck

Headlines, cards, and stats. Used sparingly so it reads as pacing rather than decoration.

Anatomy
<h1 class="page-title reveal">…</h1>
<p class="page-lede reveal d1">…</p>
Variants
  • d1 / d2 / d3 Stagger delays.
Tokens consumed
--easing--duration-reveal
Rules
  • Stagger at most three elements in a group.
  • Reveal every element on a page.
  • Animate anything that carries a number a reader is scanning for.
Rule Motion clarifies state. If it is decorative, remove it.
public/assets/shared.css · .reveal

Scroll-aware nav

The fixed nav darkening once scrolled and sliding away on downward scroll, driven by shared.js.

webdeck

Automatic on every page through the Site layout. Decks have their own equivalent plus a progress hairline.

Anatomy
<!-- shared.js toggles these -->
.nav.is-scrolled { background: rgba(7,8,10,0.78); }
.nav.is-hidden   { transform: translateY(-100%); }
Variants
  • is-scrolled Darkens and strengthens the bottom hairline.
  • is-hidden Slides up on downward scroll, returns on upward.
Tokens consumed
--duration-page--easing--ink-2--line-2
Rules
  • Leave it to shared.js.
  • Re-implement scroll handling per page.
  • Hide the nav on a page with no scroll depth.
Rule Nav motion is handled globally. Never add per-page scroll listeners for it.
public/assets/shared.css · .nav.is-scrolled

Signal pulse

The one looping animation: a signal dot expanding and fading on a two-second cycle.

web

Marking a live node on a map or diagram. One per view.

Anatomy
<circle cx="380" cy="200" r="7" class="signal pulse" opacity="0.4"/>
Tokens consumed
--duration-pulse--signal
Rules
  • Use exactly one per view.
  • Keep the reduced-motion fallback, which holds it static at 0.3 opacity.
  • Pulse more than one node.
  • Pulse anything that is not genuinely live.
Rule The only looping animation in the system. One per view, and it must mean something is live.
public/assets/shared.css · .pulse

Utilities

2 components

Icon

The 22-glyph line set: 24×24, 1.5 stroke, currentColor, no fill.

webdeck

Card glyphs, layer glyphs, eyebrow glyphs. Icons inherit the surrounding colour.

Anatomy
<Icon name="server" />
<!-- spark doc flag alert target clock layers shield coins pin trend gem
     check bolt users server cloud lock code cpu leaf globe -->
Tokens consumed
--signal--light
Rules
  • Add new glyphs to the P map in Icon.astro, drawn to match the existing idiom.
  • Source new shapes from Heroicons or Tabler and restroke them.
  • Import a duotone or soft-filled icon set.
  • Fill an icon.
  • Mix two icon styles in one view.
Rule One icon system. 24×24, 1.5 stroke, currentColor. Duotone sets are rejected — they break the single-accent rule.
src/components/Icon.astro

Wordmark

Theme-aware Navon wordmark. Off-white on dark, black on light, switched by cascade.

webdeckdocumentemail
NAVON.
NAVON.

The nav, the deck header, the document cover, the email header.

Anatomy
<a class="wordmark" href="/">
  <Image class="wm-img wm-dark" src={wordmarkWhite} alt="Navon" />
  <Image class="wm-img wm-light" src={wordmarkBlack} alt="Navon" />
</a>
Tokens consumed
--paper--ink
Rules
  • Ship both variants and let the cascade choose.
  • Keep clear space equal to the cap height.
  • Recolour the wordmark.
  • Put the off-white wordmark on a light band.
  • Stretch or rotate it.
Rule Always ship both wordmark variants. body.theme-light and .section--light flip them automatically.
src/components/Nav.astro
Navon Design System
Signal · v2.2.0 · 2026-10-02 · Naivasha, Kenya
00°42′S 36°26′E
← Back to site