Display · Bricolage Grotesque
Aa
Sites that bring business to light
Headlines, navigation, numerals. Variable weights 200–800.
Webliten · Lucknow
Colophon
Built by hand,
measured in public.
Most agency sites tell you they care about craft. This page shows the working: the stack, the type, the palette and the numbers. Nothing here is a stock template.
Small on purpose.
- Framework
- Astro 7, static output. Every route is pre-rendered HTML — no server, no hydration.
- Styling
- Tailwind 4 for the reset, then one hand-written design system in CSS custom properties. No component library, no utility soup in the markup.
- Behaviour
- Vanilla TypeScript, one small script per widget. No React, Vue or Svelte runtime is shipped.
- Typefaces
- Bricolage Grotesque (display), Instrument Sans (body) and Instrument Serif (a single italic accent), self-hosted through Fontsource.
- SEO
- Unique titles and descriptions, canonicals, breadcrumbs, one H1 per page, JSON-LD, XML sitemap and robots.txt.
- Analytics
- GA4 and Search Console are wired behind placeholders, so nothing loads until a real measurement ID is set.
Three voices,
one accent.
A geometric display face, a quiet body face, and a serif italic used exactly once per heading — never as decoration.
Body · Instrument Sans
Aa
Clear sentences, fixed quotes, no hourly mystery.
17px body at 1.65 line-height, measured to a 48-character line.
Accent · Instrument Serif
Aa
light
Italic only. One word per heading, in bronze on paper.
Navy, paper,
one amber.
Six colours in total. Amber is split into two roles — a bronze for text on paper, the bright brand amber for fills — so contrast survives in both themes. Select a swatch to copy its hex.
A grid you
can see.
Twelve columns, a 1160px measure and a 4px baseline unit. Turn the grid on to see the scaffolding under this page.
12 columns · 24px gutters · 1160px max
Measured,
not claimed.
Lighthouse mobile on the production build, October 2026. Scores move with hardware and network, so we re-run them after every change rather than framing a screenshot.
- Performance
- 98Lighthouse, mobile
- Accessibility
- 100Lighthouse, mobile
- Best practices
- 100Lighthouse, mobile
- SEO
- 100Lighthouse, mobile
- Largest contentful paint
- 1.8sSimulated slow 4G
- Total blocking time
- 0msNo long tasks on load
- Cumulative layout shift
- 0.000No layout movement
Measured in your browser, on this visit
- HTML document
- —
- Requests
- —
- DOM nodes
- —
- Load event
- —
Faster than
a mouse.
The site is fully usable without a pointer. These three shortcuts work on every page.
- CtrlK Search every page and action
- T Switch between paper and ink
- L Turn the hero light on, on the homepage
What we did
not ship.
- No carousel. Content that matters is visible without waiting for a slide.
- No chat widget. A WhatsApp button is faster and does not sell your visit to a third party.
- No cookie banner. No tracking cookie is set, so there is nothing to ask permission for.
- No stock photography. Concept work is drawn in code and labelled as concept.
- No invented numbers. No client counts, review scores or “results” until they exist.
Lucknow → anywhere
Want a site built like this?
The same stack, the same care with type and speed — for your business, with a free sample homepage first.
No deposit. No obligation. No sales call unless you ask for one.