Charcoal
--inkPrimary text, navigation and actions
NAVIFLARE / Service reference / v1
One site.
One visual language.
The established NAVIFLARE system, made explicit for designers, developers and AI agents.
Download the agent guideService documentation · Not a customer offer · No private operational data
01 / Colours
Recognisable, without the noise.
Use the existing semantic tokens. The swatches below read the site’s actual CSS variables.
Paper
--paperPage and component surfaces
Soft
--softSection separation and workspace canvas
Muted
--mutedSupporting text
Red
--redBrand emphasis and action feedback
Blue
--blueFocus and information
Green
--greenDecorative success accent
Yellow
--goldDecorative attention accent
Green and yellow are accents, not small text on white. Statuses use charcoal text on pale surfaces and always carry a written label. Verify text contrast: 4.5:1; large text and essential UI: 3:1.
02 / Typography
Satoshi. Space. A clear hierarchy.
Display / 46–88 px / 1.04
Ready for business.
Section / 34–64 px / 1.07
A clearer next step.
Body / 16–21 px / 1.55
You bring the business. We build, optimise and launch your website.
Eyebrow / 11 px / 0.12 em tracking
Your direction. Our care.
One h1 per page. Use h2 for sections and h3 for components. Display tracking is −0.05em; body text stays readable. Red emphasis uses upright type, not italics.
03 / Layout
Room for the content.
Marketing pages
Use the shared container. The offer family uses a 1400px maximum, 40px desktop gutters and compact mobile gutters. Sections use 64–120px vertical space.
Product surfaces
Dense, purposeful panels: 16px corners, 16–24px padding, thin borders. Give the main task the most space. Let mobile panels stack.
Responsive behaviour
Check 320, 390, 768, 1024 and 1440px. Keep content naturally scrollable. Nested horizontal navigation must not make the page overflow.
Use a 4px spacing scale. Pills belong to controls and labels. Use larger 24px corners for an enclosing surface. Hero text and CTA overlays occupy no more than 30% of the image.
04 / Components
Familiar actions. Clear states.
In progressYour reviewCompleted
Disclosure component · Open to inspect
Use native details and summary for expandable content. Keep controls keyboard accessible, focus visible and touch targets at least 44px. Use Lucide icons; decorative icons are hidden from assistive technology.
Navigation that stays familiar.
Websites, Services and Why Naviflare organise the site. Demo portal and Start a project remain visible actions. Desktop panels combine an introduction, links and one relevant preview; mobile uses native accordions.
Use the header on this page as the live component reference. Keep the 16px panel corners, visible focus, 44px controls and shared motion tokens. Previews load on demand in one fixed 16:9 stage. HTML scenes fit in full; Bluebird uses an approved centre crop. Quality counters are labelled illustrative targets. Read docs/navigation-system.md before changing the header.
05 / Motion
One shared rhythm.
All timing and easing live in src/motion-tokens.css. JavaScript reads them through src/motion-settings.js. Vertical actions use scrollToTarget.
Use transform and opacity. Respect reduced motion. No separate smooth scroll, literal local timings or mandatory vertical snapping. Long sections grow with their content.
06 / Agent workflow
Read first. Change with context.
- Read AGENTS.md, docs/style-system.md and docs/motion-system.md before interface edits.
- Inspect the current page on desktop and mobile. Reuse authoritative source components and tokens.
- Keep demo data explicitly labelled. Prices and allowances come from the shared support catalog.
- Run the build, style/motion contracts and artifact verification. Check changed interactions in the browser.
- Follow the registered SiteOps release procedure and independently verify Live. PageSpeed belongs only to the daily pass.
The guide documents the established visual baseline. Do not introduce a new font, palette or motion system as an incidental change. Update the guide with intentional, user-requested system changes.