Create a premium dark mode landing page for a software product. Precise and expensive, like a top-tier fintech or developer tool, through restraint rather than effects.
Brief
Subject: Ledger — real-time cash visibility for finance teams at mid-size companiesWrite specific copy: what it does and for whom, real feature names, integration names, prices, quotes with roles. Show the actual product with plausible dataPrecise and expensive through restraint: the product screens carry the page, the chrome around them stays quietDesign Tokens
Use these exact values. Where the spec is silent, stay consistent with them.
colors:
accent: "#7dd3fc"
accentHover: "color-mix(in srgb, #7dd3fc 70%, #ffffff)"
background: "#09090b"
border: "color-mix(in srgb, #fafafa 6%, transparent)"
borderMid: "color-mix(in srgb, #fafafa 8%, transparent)"
borderStrong: "color-mix(in srgb, #fafafa 10%, transparent)"
footer: "color-mix(in srgb, #09090b 65%, #000)"
muted: "color-mix(in srgb, #fafafa 64%, #09090b)"
mutedLow: "color-mix(in srgb, #fafafa 56%, #09090b)"
negative: "#f0a3a3"
onAccent: "color-mix(in srgb, #7dd3fc 12%, #000)"
surface: "#18181d"
surface1: "color-mix(in srgb, #18181d 17%, #09090b)"
surface2: "color-mix(in srgb, #18181d 33%, #09090b)"
surface3: "color-mix(in srgb, #18181d 50%, #09090b)"
surface4: "color-mix(in srgb, #18181d 67%, #09090b)"
surface5: "color-mix(in srgb, #18181d 83%, #09090b)"
text: "#fafafa"
effects:
heroGlow: "behind the product window, centred, width min(1000px, 110%), 70% of its height from 8% down: radial-gradient(ellipse, accent at 16%, accent at 5% at 40%, transparent 70%), blur 40px"
fonts:
body:
fallback: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
family: Geist
weights: [400, 500]
display:
fallback: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
family: Geist
weights: [600]
mono:
fallback: "ui-monospace, SFMono-Regular, Menlo, monospace"
family: Geist Mono
weights: [400, 500]
layout:
breakpoints:
mobile: 600px
nav: 860px
window: 980px
container: 1200px including the gutters
gutter: "24px, 16px under 600px"
motion:
durations:
colour: 160ms
windowIn: 1000ms after a 150ms delay
easings:
all: "cubic-bezier(0.2, 0.7, 0.2, 1)"
radii:
control: 8px
panel: 10px
tag: 4px
window: 14px
shadows:
highlight: "inset 0 1px 0 0 the text colour at 6%"
window: the highlight plus 0 30px 80px -30px rgb(0 0 0 / 0.8)
spacing:
featureRows: "72px column gap, 120px between rows"
hero: "96px top, 48px bottom"
section: "120px top and bottom, 80px under 700px; section heads max 640px, 64px above their content"
type:
body:
font: body
lineHeight: 1.6
size: "16px; lead clamp(17px, 2vw, 19px)"
tracking: 0
weight: 400
caption:
font: body
lineHeight: 1.45
size: 13px
tracking: 0
weight: 400
display:
font: display
lineHeight: 1.04
size: "clamp(38px, 6vw, 64px)"
tracking: -0.035em
weight: 600
headline:
font: display
lineHeight: 1.15
size: "clamp(30px, 4vw, 44px)"
tracking: -0.03em
weight: 600
title:
font: display
lineHeight: 1.2
size: "clamp(24px, 3vw, 30px)"
tracking: -0.025em
weight: 600
Style Rules
Hierarchy comes from the neutral steps: page on the background, panels on steps 3–4, inner chrome on steps 1–2, selected items on steps 5–6Every raised panel: 1px border (6–10% of the text colour) and the top highlight; no drop shadows except the product windowThe accent is a signal under 5% of the page: primary buttons, focus rings, positive figures, live dots, chart lines, the recommended borderHeadings in the primary text colour at weight 600 with negative tracking; body copy in the muted colour; secondary details in muted-lowNumbers are tabular everywhere; ids, axis labels and currency codes use the mono fontColour transitions only, 160ms; nothing moves on hoverLeft-aligned, generous section padding with 1px rules between sectionsPage Layout
container 1200px incl. gutters, everything left-aligned
◆ Name Product Integrations Customers Pricing Docs Sign in [Get started] ← sticky nav
Headline, one sentence (≤ 760px) ← hero
Subtext (≤ 620px)
[Get started] [Book a demo] ✓ trial ✓ setup ✓ SOC 2
░░░░░░░░░░ accent glow ░░░░░░░░░░
┌ ● ● ● Org / Cash position ··························· ● synced 2m ago (ME) ┐
│ org ▾ │ Consolidated cash $48,312,904.17 [7D|30D|90D|YTD] │
│ ▣ Cash │ +$6.2M vs 30 days ago │
│ Forecast│ [KPI] [KPI] [KPI] [KPI] │
│ Rules │ [ line chart ·························· ] │
│ entities │ [ bank │ account │ USD │ balance │ change ] × 5 │
└───────────┴──────────────────────────────────────────────────────────────────┘
Trusted by WORD WORD WORD WORD WORD WORD
───────────────────────────────────────────────────────────────────────────────
Section head ← features
Copy · list [ crop: accounts by entity ]
[ crop: 13-week forecast, policy line ] Copy · list
Copy · list [ crop: alert rules ]
───────────────────────────────────────────────────────────────────────────────
Section head / Banks: [ 6-column wordmark grid ] / ERP: [ grid ] / Payroll: [ grid ] ← integrations
[ 34px result / quote / person ] [ 34px result / quote / person ] ← testimonials
Section head ································· [Monthly|Yearly] Save 20% ← pricing
[ Starter ] [ Growth · accent border ] [ Enterprise ]
▓ footer colour: brand · 4 columns / © · ● status · legal ← footer
Sections
Navbar — Sticky, 60px tall, the background at 82% with a 12px backdrop blur and a 1px bottom border; logo, links 32px after it, actions pushed rightContent:Five links: Product, Integrations, Customers, Pricing, DocsComponents:Logo: a 22px mark and the product name, 16px weight 600Links: 14px muted, padding 6px 10px, 6px radius; hover turns them primary on surface 3Actions: a ghost 'Sign in' and a 40px primary 'Get started'Mobile: Under 860px the links and Sign in go behind a 40px menu button; the menu opens below as full-width rows split by 1px rulesHero — 96px top, 48px bottom. Left-aligned copy capped at 760px: headline (display), subtext 22px below (max 620px), buttons 32px below, note 18px below. The product window spans the container 64px below with the hero glow behind; the customer row 40px under itContent:Headline: one sentence, 8–12 words, naming the single number or answer the product givesSubtext: one sentence on what it connects and who it is forButtons: 'Get started' and 'Book a 20-min demo'Note: trial terms, setup time, a security certificationThen a 'Trusted by' row of six customer wordmarksComponents:Buttons: primary (accent fill, on-accent text, 46px, 8px radius, hover lighter) and secondary (surface 5 fill, 1px strong border, top highlight)Note row: three short facts, each with a 14px check icon, in muted-low captionProduct window (window radius, surface 2, 1px strong border, window shadow): a 44px app bar on surface 3 with three grey dots, the breadcrumb (org / page), a live dot with 'synced 2m ago' and an avatar; a 208px sidebar on surface 1 with an org switcher, nav (active item on surface 5 with the highlight) and entity balances; the main area with the headline figure (40px, cents in muted-low), a change line in the accent, a 7D/30D/90D/YTD segmented control, four KPI panels, a line chart panel and an accounts tableAccounts table: bank chip and name, account, a mono currency tag, balance right-aligned, change in the accent or the negative colour; 1px row rulesMobile: Under 980px the window hides its sidebar and KPIs go two by two; under 520px the app bar hides the breadcrumb and avatar; the table scrolls sidewaysMotion: The window rises from translateY(28px) scale(0.985) and fades in over 1000ms, 150ms after loadFeature Showcase — Under a 1px rule, section padding. Section head (max 640px, 64px below). Three rows of copy and crop, 1fr / 1.25fr with a 72px gap, 120px apart; the middle row puts the crop on the leftContent:Section head: one headline on who it's built for and one sentence on what it does every morningThree features named after real capabilities, each with concrete numbersComponents:Copy: a title-size heading, one paragraph, and a list of three points with a 16px icon and a bold lead phraseUI crop: surface 3, 1px border, window radius, top highlight, 18px padding, a header row with a title and a muted statusCrop 1: accounts grouped by entity, each row with name, institution, balance and a sync dot (accent when fresh)Crop 2: a 13-week forecast as bars (actuals lighter than forecast), a dashed policy-minimum line in the negative colour with a mono label, a tooltip on the low week, and a drivers list belowCrop 3: alert rules, each with a title, trigger time, a sentence with the threshold in bold and tags for the actions taken (done ones ticked in the accent)Mobile: Under 900px each row stacks with the copy first, 36px gap, rows 88px apartIntegration Grid — Section head, then the three category grids 40px apart, the facts row 28px belowContent:Headline on connecting to existing systems and a sentence on read-only access and setup timeThree categories (banks, ERP and accounting, payroll and spend) with 6–12 real-sounding names eachA facts row: extra coverage, chat alerts, APIComponents:Category heading: caption size, muted-low, with the count right-alignedGrid: 6 columns of 84px cells on surface 1, split by 1px lines inside a 1px-bordered panel; each cell a centred wordmark; hover lifts the cell to surface 4 and the text to primaryMobile: 3 columns under 900px, 2 under 480px with 72px cellsTestimonials — Section head, then two equal cards with a 20px gapContent:Two customers with names, roles and companies; each result is a number with its unitComponents:Quote card: surface 3, 1px border, window radius, top highlight, 36px padding; a result row (34px figure and a muted label) above a 1px rule, the quote in 18px primary, then a person row with a 40px avatar, name and roleMobile: One column under 860px; padding 28px 22pxPricing — Section head on the left and the toggle on the right, aligned to the bottom, 48px above three equal plans with a 20px gapContent:A headline on how it's priced and a sentence on who countsThree plans with real prices; the top one 'from'A footnote with a linkComponents:Toggle: a segmented control on surface 2 (Monthly / Yearly), the pressed one on surface 6 with the highlight, and 'Save 20% yearly' beside it in muted-lowPlan: surface 3, 1px border, window radius, 32px 28px padding; name (17px, 600), a two-line audience, the price at 44px weight 600 tabular with its unit, a billing note, a full-width button, a feature list under a 1px ruleRecommended plan: surface 4 with a 1px accent border and a faint accent ring, a mono 'Recommended' label, the primary button; the others use the secondary buttonStates:Switching the toggle updates every price and billing note in placeMobile: One column under 960px, max 520px wideFooter — The footer colour under a 1px rule, 72px top and 32px bottom: brand 1.6fr and four columns with a 40px gap; the bottom row 64px below under a 1px ruleContent:Brand with one sentenceFour link columns: Product, Company, Resources, LegalBottom row: © year, a status line with an accent dot, and legal linksMobile: Brand on its own row, then two columns under 860pxImagery & Icons
No photos or illustrations: the product window and the three feature crops are HTML/CSS with inline SVG chartsIcons: 14–16px inline SVG strokes, 1.5px, in the muted-low colourIntegration and customer names are typeset wordmarks in one light grey, varying weight, case and tracking to suggest each brand; no logosAvatars and bank chips: initials on the card colour with a 1px strong borderImplementation Notes
The pricing toggle and the mobile menu are the only scripts; prices live in data attributesDon'ts
No heavy or coloured shadows, glows on cards, or gradients on surfaces; the hero glow is the only gradientNo uppercase mono eyebrow labels above section headingsNo accent on headings, icons, large fills or decorative linesNo marketing illustrations, stock photos or 3D renders: the product UI is the imageryNo call-to-action band or sections beyond those listedNo fonts, colours, radii or shadows outside the design tokens and rules aboveNo sections, features or effects that this spec doesn't listNo placeholder copy (lorem ipsum, "Elevate your workflow"): every word comes from the subjectNo pill-shaped eyebrow labels above headings and no gradient text, unless this spec asks for themNo grid of identical icon cards: vary size and emphasis by importanceQuality Floor
Mobile-first and responsive from 360px to 1440px and wider, with no horizontal scrollingText contrast meets WCAG 2.1 AA: 4.5:1 for body text, 3:1 for large textSemantic landmarks (header, nav, main, section, footer), one h1, descriptive alt textEvery interactive element has hover, visible focus and active states and works from the keyboardHonour prefers-reduced-motion: keep opacity fades, drop movementTech Stack
Framework: HTML/CSS/JS — Deliver one self-contained index.html: styles in a <style> block, scripts in a <script type="module"> block, no build step.Styling: Vanilla CSS — Plain CSS. Declare every design token as a custom property on :root (--color-accent, --font-display, --radius-card…) and use only those properties for colours, fonts, radii, shadows and timing.Language: JavaScript — JavaScript as ES modules; no TypeScript.UI library: None — No component library: build every component from the design tokens.Motion: CSS only — CSS transitions and keyframes only, with durations and easings from the design tokens.Icons: Inline SVG — Inline SVG icons drawn for this style, with one stroke width and corner treatment across the page.Acceptance Checklist
Every surface is one of the five neutral steps, the card colour or the footer colour; none is a fixed hexRaised panels have a 1px border and the top highlight; only the product window casts a drop shadowThe accent covers under 5% of the page: primary buttons, focus rings, positive figures, the live dot, chart lines and the recommended plan's borderHeadings use the primary text colour; body text uses the muted colour and passes 4.5:1All figures are tabular; ids, axes and currencies use the mono fontThe hero product window sits within the first 1440×900 viewport with a balance, four KPIs, a chart and an accounts tableFeature rows alternate the side of their UI crop and each crop shows different real dataThe monthly/yearly toggle really switches every price and billing noteNo uppercase eyebrow labels above headings anywhereUnder reduced motion the window entrance is skipped and colour transitions remain
