Build guide · Concept 1 of 3

How this site was built

This page documents the technologies, design decisions, workflows, and deployment process behind the “Enterprise” concept for TillScale AI — so anyone can understand, reproduce, or extend it.

The concept

Of the three TillScale concepts, this one targets mid-market and enterprise buyers: CROs, COOs, and founders who are skeptical of agency hype and answer to CFOs. Every design decision follows from that audience:

Light, editorial, Swiss-precision layout — signals rigor and calm competence rather than novelty.
Numbers everywhere — animated counters, case-study stat tables, tabular numerals. The pitch is “pipeline as engineering,” so the site itself reads like an instrument panel.
One accent color (electric blue #2E5BFF) used only for meaning: data, links, outcomes. Restraint is the luxury signal here.
Copy voice: quantitative, confident, slightly dry. “Audited numbers,” “measurable output,” “the dashboard and the bank account agree.”

Technology stack

Layer	Choice	Why
Markup	Hand-written semantic HTML5	Full control of document structure, landmarks, and a11y. No framework overhead for a marketing page.
Styling	Vanilla CSS with custom properties	Design tokens (`--paper`, `--ink`, `--accent`…) keep the system consistent; zero build step.
Interaction	Vanilla JS (~100 lines)	IntersectionObserver reveals, animated counters, cursor-tracked card spotlight. No dependencies.
Typography	Google Fonts: Inter Tight, Inter, IBM Plex Mono	Grotesque display + humanist body + mono for data labels — the classic “technical credibility” trio.
Graphics	Hand-authored inline SVG	The hero system diagram is pure SVG animated with CSS keyframes — crisp at any density, ~3 KB.
Hosting	Netlify (static deploy)	Instant global CDN, HTTPS by default, deployed via `netlify deploy --prod`.

Total JavaScript shipped: one file, no libraries. Lighthouse-friendly by construction: no layout shift (all reveals are transform/opacity), fonts loaded with display=swap, SVG instead of images.

Design system

Color

#FAFAF7 paper

#0B1220 ink

#5A6472 muted

#2E5BFF accent

#EBF0FF accent soft

#E4E2D9 hairline

A warm off-white (not pure white) with a slightly warm hairline gray keeps the page from feeling clinical, while the near-black navy ink and a single saturated blue provide contrast that passes WCAG AA throughout.

Typography

Inter Tight 650 for display — tight tracking (−0.03em) at large sizes gives the compressed, confident headline feel.
Inter 450 for body — 17px/1.6 for comfortable long-form reading.
IBM Plex Mono for eyebrows, phase labels, and metric captions — the “instrumentation” voice.
font-variant-numeric: tabular-nums on all statistics so animated counters don’t jitter horizontally.

Layout & spacing

1180px max container, 96px background grid in the hero echoing the “engineered” metaphor.
Sections at 110px vertical rhythm (76px on mobile); hairline dividers instead of heavy boxes.
Case studies use an asymmetric 1.5fr/1fr split: narrative left, audited stat table right.

Motion design

Scroll reveals: single IntersectionObserver; elements translate 26px and fade over 0.8s with an expo-out curve. Stagger via delay utility classes (.d1–.d4).
Hero diagram: dashed SVG paths animate stroke-dashoffset for continuous flow; three “packets” travel the paths on offset keyframe timelines; the engine block pulses. All CSS, no JS.
Counters: requestAnimationFrame with quartic ease-out, triggered at 50% visibility, formatted with locale separators.
Card spotlight: service cards track the pointer with CSS custom properties feeding a radial-gradient — a premium micro-interaction for ~10 lines of JS.
Reduced motion: a prefers-reduced-motion media query disables every animation and the JS checks it before running counters or spotlight tracking.

Accessibility checklist

Semantic landmarks (header, main, footer, labeled nav), one h1, ordered heading levels.
Skip-to-content link, visible :focus-visible outlines, ARIA-correct mobile menu toggle.
The decorative hero SVG is aria-hidden with a text figcaption alternative.
Color contrast ≥ 4.5:1 for all body text on both light and dark sections.

Conversion strategy

One goal per page: book a discovery call. The CTA appears in the nav, hero, and a dedicated closing section — never competing with itself.
Risk-reversal copy: “ROI model included · No obligation,” and a concrete list of what the prospect leaves the call with.
Objection handling in order: problem (why old outbound fails) → mechanism (the system) → proof (cases with numbers) → process (six weeks) → social proof → ask.

Workflow

Positioning first: audience, voice, and single conversion goal defined before any pixels.
Design tokens: palette, type scale, spacing rhythm set up as CSS custom properties.
Structure: semantic HTML for all nine sections, mobile-first content order.
Styling + motion: layout, then micro-interactions, then reveal choreography.
Three iteration passes: (1) hierarchy/spacing audit at desktop + mobile widths, (2) motion-quality and accessibility pass (reduced-motion, focus order, contrast), (3) copy tightening and conversion audit (CTA repetition, risk reversal, scannability).

Deployment

# From the site directory
netlify deploy --prod --dir=.

# The site is fully static: no build command, no environment
# variables, no server. Netlify serves index.html and
# guide/index.html (this page) from its global CDN.

← Back to the site