Colophon
A marketing site for a finance tool should be as careful as the numbers it talks about. Here is what it is built with, and what it promises not to do.
Built with
- Next.js and React
- App Router, every page rendered statically at build time.
- TypeScript
- Strict mode, with noUncheckedIndexedAccess.
- CSS Modules and tokens
- One small module per component; colour, type, spacing and motion all come from a single tokens file. No CSS framework.
- Keystatic
- The blog, the questions and the testimonials are files in the repository, edited locally and published by committing.
- Lenis
- Smooth scrolling, only on devices with a mouse and never when you prefer reduced motion.
Set in
- Aileron
- For everything: text, labels, figures and table heads. Public domain (CC0), by Sora Sagano.
- Self-hosted
- It is served from this site as subset WOFF2 files, so the pages need nothing from a font service.
Motion
- No animation library
- Every effect is markup and CSS. One small script reads a few data attributes and writes a scroll progress number that CSS turns into movement.
- 3D cards
- Cards turn a few degrees toward a mouse while their layers lift apart. The pointer code is fetched only when a mouse first touches one, so a phone never downloads it, and it does nothing under reduced motion.
- Loops that rest
- The slow animations inside the product pictures play only while their block is on screen, and the page never has more than a dozen running at once.
- Reduced motion
- A designed state, not a switch: Lenis and the page transition are off, split text is plain text, reveals become short fades, pinned scenes lay out in order.
- Progressive
- Nothing is hidden until a script runs, so the site reads the same with JavaScript off.
What it does not do
- No cookies, no tracking
- There is no analytics and no consent banner, because there is nothing to consent to.
- No third parties
- Fonts, images and scripts all come from this origin. The tests fail if a page requests anything else.
- No invented proof
- No made-up testimonials, customer logos, ratings or user counts. Anything not built yet says Soon.
Checked, not assumed
- Accessibility
- WCAG 2.2 AA. axe runs on every page and every open menu with zero violations allowed; colour pairs are checked against the tokens.
- Browsers
- Playwright runs the suite on Chromium, Firefox and WebKit, at desktop and phone sizes.
- Speed
- Lighthouse CI on every push, mobile preset: the build fails below 85 for performance and below 95 for accessibility, best practices and SEO. Core Web Vitals are measured in a throttled phone-sized Chromium.
Where the ideas came from
- Studied, not copied
- The page structure follows a public marketing-site template, and the navigation, transitions and typography take their craft from a studio site. No assets, code or copy were reused.
- Velora UI
- The perspective floor grid, the travelling border beam, the depth-layered 3D card and the rotating headline word take their idea and their numbers from Velora UI by Colorlib, MIT licensed. Each is rebuilt here in CSS and a small script; no code is shared. Velora UI © Colorlib, MIT License.
- React Bits
- The dot field, the sheen across a word, the light that circles a button, the numbered stepper, the grain over a surface and the ring of light that follows the pointer on a card take their idea from React Bits (reactbits.dev). Each is rebuilt here in CSS with no script and no dependency; no code is shared.
- The product screens
- Drawn again in HTML and CSS from the apps’ own design tokens, with demo data. They are not screenshots and show no customer data.