N° 0021TemplatePro

Ledger Swiss

A full finance site on a strict twelve column grid. A bronze arch rises from liquid metal and bristles near your pointer.

Source files, Studio plan

44 KB of text that builds one HTML file. Paste it into Claude Code, Cursor or v0 to rebuild this page.

Open full page Live. Scroll inside the preview to play it.

Loading the layer

LooksShowing PaperEach look changes the colours of the live preview and goes into the prompt you copy.

Make it yoursYour brand, copy and colours go into the prompt you copy. Colours change the preview live.

Brand nameCompanyPlaceEyebrowHeadlineHeadline strongSubheadSubhead moreButtonLinkCustomerReg lineBackground#EEEBE4Color ink#161513Accent#C4381CColor metal#C08A58Display font

Brand remix is a Pro feature at launch. It is open in the preview.

Overview

A whole site for Halvane, an invented accounts and payment approvals platform for groups of companies, set on a strict twelve column grid: a bronze arch of liquid metal rises from a puddle and bristles into spikes near the pointer, three sample figures roll once into place, a sonar sweep pings four working security controls, a red thread sews through five onboarding steps, and a fee table, questions and an application close the page.

Signature momentThe hero at rest: the headline in light and medium Chivo on paper, the bronze arch and its bead standing in a charcoal plate on the right six columns, spikes bristling on its left shoulder.

A bronze arch
A raymarched arch of radius 0.6 on a 1.84 long line, one 0.19 tube with a 0.24 bead, smooth unioned with five flowing droplets in a Worker. It rises from a puddle in about 1.8 s, bristles into hexagonal spikes within 0.44 units of the pointer and slumps into a pool as the hero scrolls away.
A grid you can see
Twelve columns (four on phones) with 14 to 24 px gutters and hairline guides at 7 per cent ink behind every section. Sections are numbered by a lone light numeral of up to 8.6rem in the margin column, set in Chivo 300, 400 and 500 only.
Figures that roll once
Three figures labelled "Sample figures, not live." Each digit rolls one or two full turns to its value over 0.9 to 1.5 s when a third of the band is on screen, 0.12 s between figures, and never runs again.
Sonar over real controls
A grid plane pitched 34 degrees with a sweep turning once in 6 s. When the needle crosses a control, three rings spread 0.18 s apart and the card lights; two person approval, device keys, the audit log export and the allow list all work from the keyboard.
Onboarding on one thread
Five steps from a 15 minute application to a first payment in under 10 seconds, pinned for 72svh each. A Catmull-Rom thread follows the scroll at 10.2 per second, and each node flares for 0.42 s as the thread reaches it.
Fees on the grid
Three plans at €49, €290 and €890 a month with eight fee rows aligned to the plan columns. One colour system walks muted, accent and ping text to 4.6:1 in all nine looks, five of them light.

Build details

Kind: Template
Plan: Pro
Tone: Light, Dark
Industries: Fintech, SaaS
Technique: Fluid, WebGL 3D, Shaders, SVG
Built with: Lenis 1.3.27, plain HTML, CSS and one ES module
Looks: 9
Weight: 115 KB, layer files only
Mobile performance: 100
Accessibility: 100
Fidelity Score: In review
Licence: Commercial, including client work. No redistribution. Read it
Version: 1, updated 3 November 2026
Released: 3 November 2026

Parameters, 16 of them, all live through DUSKLAYER.set()

Control	Key	Range	Default
Accent (buttons, the sample figures note, the current step)	`accent`	color	#C4381C
Page tone (under 0.2 luminance the page is dark)	`page`	color	#EEEBE4
Ink (walked to 7:1 on the page if it falls short)	`ink`	color	#161513
Plate, the studio the bronze stands in	`plate`	color	#2A2622
Metal tint (bronze by default)	`metalTint`	color	#C08A58
Metal roughness (0.02 mirror to 0.45 satin)	`roughness`	0.02 to 0.45	0.14
Spike height near the pointer	`spikeHeight`	0.05 to 0.4	0.2
Sweep speed (1 is one turn in 6 s)	`sweepSpeed`	0.3 to 2.5	1
Ping colour (sweep, rings, lit controls)	`pingColor`	color	#C4381C
Thread colour (onboarding)	`threadColor`	color	#C4381C
Flare when the thread reaches a step	`flare`	0 to 1	0.7
Grid columns visible	`gridLines`	boolean	True
Corner radius (px)	`radius`	0 to 8	0
Section spacing	`spacing`	0.8 to 1.3	1
Grain in the plate and the sonar ground	`grain`	0 to 0.12	0
Seed (droplets, the thread path)	`seed`	1 to 99	7

Something wrong with this layer? Report a problem and we fix it in the next version.

The prompt

One text file, 44 KB, 10 sections. Every number the page uses is in it, so another model can rebuild the layer without seeing this one.

Role
Output contract
Design tokens
Layout
Scene
Presets
Motion
Responsive and performance
Acceptance checklist
Customize

How to use it

Pick a look. The look you choose above is written into the prompt’s parameter block.
Copy the prompt. Paste it into Claude Code, Cursor or v0 as the first message of a new session.
Make it yours. Change the brand name, copy, colours and fonts first; every placeholder is marked. Keep the structure.
Check it. The prompt ends with an acceptance checklist. Run through it before you ship.

Read the opening of the prompt

# Ledger Swiss: build prompt

## Role

Build the homepage of {{BRAND_NAME}}, an invented platform that gives each company in a group its own euro account, moves money between them and releases payments only under two person rules (groups of 2 to 60 companies in the EU and EEA), as one self contained `index.html` that passes for a real, regulated fintech's site set like Swiss print on a strict twelve column grid. It joins three of our published layers: Ferro Mark (raymarched liquid metal, here an arch cast in {{COLOR_METAL}} bronze, with ferrofluid spikes near the pointer), Sonar Field (a grid plane whose sweep pings four working security controls) and Thread Process (one thread sewn through five onboarding steps). Around them: column guides, numbered sections, sample figures, fees, questions, a form.

## Output contract

- One `index.html`: a `<style>`, a head `<script>` (colour maths, first paint variables), the presets JSON, one `<script type="module">` closing the body. No images, frameworks, Three.js, GSAP or bundler; requests only to Google Fonts and jsDelivr.
- Import map `{"imports":{"lenis":"https://cdn.jsdelivr.net/npm/lenis@1.3.27/dist/lenis.mjs"}}`; after the hero boots (not under capture or reduced motion) `new Lenis({ lerp: 0.1, smoothWheel: true, autoRaf: false })`, driven by `lenis.raf(now)`.
- Fonts: `https://fonts.googleapis.com/css2?family=Chivo:wght@300;400;500&display=swap`, `media="print" onload="this.media='all'"`, a `<noscript>` copy, preconnects. One family, {{FONT_DISPLAY}}, tabular figures by default. Fallback `'Chivo Fallback'`, one face per weight from `local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo')`: size-adjust 105.5, 105.9, 106.3 per cent, ascent-override 89.1, 88.7, 88.4, descent-override 23.7, 23.6, 23.5, line-gap-override 0.

- Presets: `<script type="application/json" id="dusklayer-presets">/*PRESETS*/[…]/*/PRESETS*/</script>`; params: the default look, then `?preset=001` to `008`, then `?seed=n`.

[42,081 more characters. Copy the prompt to get all of it.]