Nothing starts
from blank.
Six starting points covering every artifact Navon produces. Each one names where to copy from, the order its sections go in, and the rules that apply to that medium.
Page composition
Reusable structural patterns that every page draws from. Consistency here is what makes the site feel like a system, not a collection of pages.
Dark / light rhythm
Page background is determined by audience and content type — not by preference. This is a structural rule, not a toggle.
Technical content
Background: --ink. Diagram-led where diagrams add real value. Used for: Products, Quantum Security, Platform.
Customer-facing content
Background: --paper / --vlight. Photography-led, editorial feel. Used for: Home, About, Who We Serve, Hell's Gate detail, Futures.
Diagrams earn their place. On customer-facing pages, replace diagrams with photography and faces. Reserve fin.ai-style orthographic illustrations for product detail and technical pages only.
Starting points
Read from design-system/templates.json. Ask Claude
for any of these by name and it will follow the same structure.
Site page
webA new marketing or product page on navon.africa.
Copy the closest existing page in src/pages/ and its stylesheet in src/styles/. Never start from a blank file.
- Site layout wrapper with title and description
- page-hero: eyebrow, page-title, page-lede, optional tech glyph
- Dark section: the claim
- section--light: the evidence
- Dark section: the detail
- section--light: proof, partners, or stats
- Dual CTA
- URLs are foo.html, not /foo/ — format is 'file' and trailingSlash is 'never'.
- Page CSS goes in src/styles/<page>.css and is imported at the top of the page so it gets bundled.
- If you edit shared.css or shared.js, bump the ?v=N query string in BaseHead.astro or browsers serve a stale copy.
- Alternate dark and light bands the whole way down.
Standalone deck
deckAn external overview or deep-dive deck published at its own URL, with a print-to-PDF path.
Copy public/cloud-overview/ to public/<name>/ and edit index.html. assets/deck.css is the shared deck system — do not fork it.
- Fixed nav with section links and a print action
- Cover: full-bleed photograph and headline
- Alternating bands: stats, cards, layers, comparison, timeline
- Proof strip with real photography
- Statement band
- Close: why Navon and contact
- Never stack two bands of the same tone.
- Content that describes the offering comes from products.json, and changes land through a reviewed PR.
- Generate the PDF with scripts/make-overview-pdfs.sh — do not export by hand.
Gated customer deck
deckA password-protected deck for one named customer or partner.
Copy src/data/decks/_template.js to src/data/decks/<slug>.js, hash the password with npm run deck:hash, then register it in src/data/decks/index.js.
- Cover slide with a Rift Valley photograph
- Your custom slides, in order
- About Navon tail: mission, full stack, team
- Branded close slide
- Password gate in front of all of it
- You fill in data only. The design is inherited — never write per-deck CSS.
- Never commit the plaintext password. Send the URL and the password through different channels.
- A deck not listed in index.js stays locked. That is the safe default.
Branded document
documentA policy, framework, proposal, scope, or bios document as a print-ready A4 PDF.
Invoke the navon-brand-doc skill. Write a body HTML fragment from the component vocabulary, then render it.
- Cover (always page 1)
- Numbered sections inside a single .body wrapper
- Sub-labels, bullet lists, callouts, statements
- Tables: standard, key-value, or definition
- Bio cards, one per page, if the document has people
- White background only. No dark bands, no filled colour panels.
- Yellow is an accent: number chips, tick markers, short rules. Nothing more.
- Read the rendered PDF back before delivering and check page breaks and portrait clipping.
- Print geometry: A4, margins 18mm 16mm 20mm, base 10.4pt, line-height 1.52. A fixed mono classification footer repeats on every page.
- No motion. If the design calls for an animation, the document is the wrong surface.
Email dispatch
emailAn investor or stakeholder newsletter.
Copy newsletters/dispatch-01-investor.html and replace the content.
- Header with the wordmark on ink
- Eyebrow and issue number
- Headline and standfirst
- Two to four numbered items, each with a hairline rule
- Signal-yellow call to action
- Footer with the unsubscribe link
- Table-based layout, 600px max width, inline styles only. CSS custom properties do not work in email.
- Inline the resolved hex values from tokens.json.
- Set width, height, and alt on every image. Assets live in public/assets/email/ and are referenced absolutely.
- Send through Resend. Segments are General and Waitlist.
One-pager
documentA single-page summary for a data room or a first meeting.
Invoke navon-brand-doc with a one-page body: cover block collapsed into a header, then three or four numbered sections.
- Wordmark and classification badge
- Title and one-sentence subtitle
- Signal rule
- Three or four short numbered sections
- A stat row
- Contact footer
- It has to fit on one page. If it does not, cut content, do not shrink the type.
- Every figure must match the source of truth.
- Print geometry: A4, margins 18mm 16mm 20mm, base 10.4pt, line-height 1.52. A fixed mono classification footer repeats on every page.
- No motion. If the design calls for an animation, the document is the wrong surface.
"Make a colocation deep-dive deck for Equity Bank covering power, cross-connects,
and pricing." The navon-design skill picks the
template, applies the band rhythm, and uses the component vocabulary. You review
the content, not the design.