{"slug":"marquee","name":"Marquee — Dark SaaS Landing Page","version":"1.4.2","category":"saas landing","priceCents":1900,"description":"A dark-first Tailwind React SaaS landing page template for subscription reconciliation and finance operations. Seven routes ship a whole marketing site for Recur: the ticker-rail home, product tour, searchable integrations catalog with a read-only Stripe sample, pricing, customers, validated signup and the living styleguide. The integrations route separates provider availability, sample authorization, sync freshness, mapping completeness and close publication, with exact source objects and a visible frontend-only boundary. Local search, billing arithmetic, validation and focus recovery work in React without implying OAuth, persistence or data movement. Ships three self-hosted variable typefaces, 66 semantic tokens per mode, computed AA pairs, generated poster grain, 30 reusable components and a light variant designed as blush paper rather than an inversion. A framework-free HTML template edition carries the same seven routes as compiled documents, with local fonts and vanilla JavaScript in place of a React runtime.","summary":"For subscription and finance ops products: a dark-first Tailwind React SaaS landing page template with pricing, integrations and a validated signup. 7 routes.","tags":["tailwind react saas landing page template","saas landing page","dark saas landing","pricing page tailwind","nextjs saas marketing site","subscription analytics demo"],"accent_mode":"second-hue","palette":{"bg":"#191115","surface":"#241b20","accent":"#e366a5","text":"#eee7eb","line":"#382c33"},"darkMode":true,"pages":[{"path":"/","title":"Recur — subscription analytics","sections":["site-header","hero","ticker-rail","sources-band","metrics-grid","reconcile","proof","cta","site-footer"]},{"path":"/product","title":"Product — wire, match, close","sections":["site-header","product-tour","ticker-rail","cta","site-footer"]},{"path":"/integrations","title":"Integrations: sources reconciled","sections":["site-header","integration-catalog","connection-detail","source-request","site-footer"]},{"path":"/pricing","title":"Pricing — one meter, MRR tracked","sections":["site-header","pricing-plans","faq","site-footer"]},{"path":"/customers","title":"Customers — closes with names on them","sections":["site-header","case-study","ticker-rail","customer-wall","site-footer"]},{"path":"/signup","title":"Start free — the first match","sections":["site-header","signup-panel","site-footer"]},{"path":"/components","title":"Components","sections":["site-header","hero","ticker-rail","sources-band","integration-catalog","connection-detail","metrics-grid","reconcile","proof","product-tour","pricing-plans","faq","case-study","customer-wall","signup-panel","source-request","cta","site-footer"]}],"components":[{"name":"site-header","file":"src/components/site-header.tsx","renders":"Sticky nav: the Recur wordmark, four links, the mode toggle and an outlined signup action that leaves the hero the only fill in the fold; below md a JS-free details disclosure menu"},{"name":"hero","file":"src/components/hero.tsx","renders":"Centered manuscript hero (archetype A3) over the reconciliation surface: proportional-figure MRR at display size, twelve months of token bars, the sample wire feed and the match verdict strip; the ground carries the poster grain — a grayscale luminance mask tinted by the --texture-ink token, fading out before the surface"},{"name":"ticker-rail","file":"src/components/ticker-rail.tsx","renders":"The signature: a full-bleed hairline-bounded strip of timestamped mono events drifting on a 90s CSS loop — feed='wire' | 'match' | 'wins', a persistent Pause switch in the feed cell plus pause on hover and focus, static under reduced motion"},{"name":"sources-band","file":"src/components/sources-band.tsx","renders":"Eight available source fixtures from the canonical spine on a hairline grid, plus a route to inspect sample access and mapping evidence"},{"name":"integration-catalog","file":"src/components/integration-catalog.tsx","renders":"Local-only source search and category filters over eight available and one explicitly planned provider, including sample-authorized, partial, long-label and recoverable no-result states"},{"name":"connection-detail","file":"src/components/connection-detail.tsx","renders":"Expanded Stripe sample with separate authorization and sync health, absolute UTC provenance, ordered reconciliation stages, exact field mappings, read-only objects, illustrative Recur permissions and a frontend-only setup checklist"},{"name":"metrics-grid","file":"src/components/metrics-grid.tsx","renders":"Six metric cards, each led by a figure the fixture spine computes (closing MRR, net revenue retention and revenue churn from the close statement, records matched from the run, the forecast) in tabular numerals; the delta card carries the reconciliation chip"},{"name":"reconcile","file":"src/components/reconcile.tsx","renders":"Wire, match, close as a drawn flow figure (lanes computed from the match run, the flagged lane breaking off in gold) over a ruled three-step list, beside a match-run table with one gold-flagged row — 7/5 asymmetric at lg"},{"name":"proof","file":"src/components/proof.tsx","renders":"Named outcome quotes: a display-size lead quote spanning two rows and two supporting quotes, each beside the figure it claims"},{"name":"product-tour","file":"src/components/product-tour.tsx","renders":"Three product surfaces in alternating 7/5 splits (the wire feed, the match run, the close statement), ending in the full-band Δ $0.00 moment; takes an optional page lead carrying the h1"},{"name":"pricing-plans","file":"src/components/pricing-plans.tsx","renders":"Client island: a billing-period switch doing the monthly/annual arithmetic over three plans on one meter (MRR tracked), with risk reversal stated at the price"},{"name":"faq","file":"src/components/faq.tsx","renders":"Six pricing objections as native details disclosures on a 5/7 split; the +/− glyph swap is instant and shape-based"},{"name":"case-study","file":"src/components/case-study.tsx","renders":"One customer close told in full at prose measure with a by-the-numbers rail and a signed pull quote; takes an optional page lead carrying the h1"},{"name":"customer-wall","file":"src/components/customer-wall.tsx","renders":"The go-live wall: the five companies the wins rail announces, their outcomes, and a closing action cell"},{"name":"signup-panel","file":"src/components/signup-panel.tsx","renders":"Client island: the signup form with validation on submit and as fields are fixed, focus moved to the first invalid field, a designed success state, and the what-happens-next rail"},{"name":"source-request","file":"src/components/source-request.tsx","renders":"Ask for a source: the destination the integrations no-result state never had. Three controls on ui/form with an optional note, a refusal that can reach the summary rather than always landing on one control, and a receipt that answers with a queue position instead of a promise"},{"name":"cta","file":"src/components/cta.tsx","renders":"The closing band: one primary action with cost, risk and effort answered in four checked lines beneath it"},{"name":"site-footer","file":"src/components/site-footer.tsx","renders":"Brand block, three link columns and the legal row; every href resolves to a page or anchor the theme ships"},{"name":"ui/button","file":"src/components/ui/button.tsx","renders":"Anchor or button in primary/secondary/ghost at three sizes, riding the token state ramp with optical icon-side padding and a visible focus outline, plus disabled and pending states that swap the whole variant rather than fading it — pending carries aria-busy on the independent info family"},{"name":"ui/badge","file":"src/components/ui/badge.tsx","renders":"Mono chip in neutral or flag (gold) tone, plus the uppercase Eyebrow label"},{"name":"ui/container","file":"src/components/ui/container.tsx","renders":"The content column at three declared widths: 6xl marketing, 7xl wide, 3xl prose"},{"name":"ui/delta","file":"src/components/ui/delta.tsx","renders":"The reconciliation verdict chip: settled (quiet) or flag (gold), tabular figures, text always carried"},{"name":"ui/field","file":"src/components/ui/field.tsx","renders":"The shell around Input, Textarea and Select: a mono label, the optional marker written out in the text face, the read-only sentence, and one message line that carries the error, the receipt or the description on a single id — drawn for all three controls in rest, invalid, valid, read-only and disabled, with the critical edge and the focus ring kept as separate roles"},{"name":"ui/integration-card","file":"src/components/ui/integration-card.tsx","renders":"Provider contribution card with available, planned, sample-authorized and partial states; planned cards expose no dead action"},{"name":"ui/sync-health","file":"src/components/ui/sync-health.tsx","renders":"Sample sync status with healthy, delayed, partial and failed variants, absolute UTC freshness, record counts, icon and text cues"},{"name":"ui/field-mapping-table","file":"src/components/ui/field-mapping-table.tsx","renders":"Horizontally contained semantic source-to-concept table with mapped, needs-mapping and ignored rows, including long source paths"},{"name":"ui/connection-checklist","file":"src/components/ui/connection-checklist.tsx","renders":"Connection requirements in complete, blocked and frontend-only states with text and shape beyond color"},{"name":"ui/logo","file":"src/components/ui/logo.tsx","renders":"The Recur mark: two arcs closing a circuit, every stroke currentColor — the one hand-drawn SVG in the theme"},{"name":"ui/mode-toggle","file":"src/components/ui/mode-toggle.tsx","renders":"Client island: the navbar light/dark switch carrying aria-pressed, writing to localStorage and setting the mode class on the nearest .tt-marquee wrapper or documentElement"},{"name":"ui/section-heading","file":"src/components/ui/section-heading.tsx","renders":"Eyebrow, display h2 and one-sentence lede, left or centered"},{"name":"ui/type","file":"src/components/ui/type.ts","renders":"The type vocabulary: the only place a font size is named, pairing every rung of the 1.333 ladder with its leading and optical tracking"},{"name":"ui/accordion-disclosure","file":"src/components/ui/accordion-disclosure.tsx","renders":"One skeleton drawn twice: the FAQ question sitting on a full-width rule under a printed plus that becomes a minus, and the header's 40px square control with a plate growing out of it. Native details in both, so the answers ship inside the page with no script — and Escape from inside an answer now closes that row and puts focus back on the question"},{"name":"ui/form","file":"src/components/ui/form.tsx","renders":"The submit flow the sections stopped writing: the browser's own constraint gate re-worded per field, one refusal sent straight to its control and several to the summary, every typed value left where it was, a fieldset that goes disabled and aria-busy together, and a receipt that exists before focus is moved onto it"},{"name":"ui/form-error-summary","file":"src/components/ui/form-error-summary.tsx","renders":"The critical tone box a refused submit lands on, built from the same soft ground, hairline edge and glyph the theme gives every other status: one ordered row per failed answer, each reading as that field's own sentence and linking to the control it names"}],"tokens":{"--background":"#fbf3f7","--foreground":"#20141b","--card":"#fef8fb","--card-foreground":"#20141b","--primary":"#ab1c70","--primary-foreground":"#fbf5f7","--primary-hover":"#94055e","--primary-active":"#770a4c","--secondary":"#efe2e9","--secondary-foreground":"#372931","--muted":"#f3eaef","--muted-foreground":"#605058","--accent":"#815c0a","--accent-foreground":"#fbf8f2","--border":"#dbd1d6","--ring":"#ab1c70","--shadow-color":"#392831","--surface-tint":"#f6e6ed","--field":"#fffafc","--field-border":"#8c727f","--control-border":"#8c727f","--selection":"#ead2df","--selection-foreground":"#20141b","--selection-border":"#765063","--info":"#295b74","--info-soft":"#dcecf3","--info-border":"#5b8294","--positive":"#245c3e","--positive-soft":"#dcefe4","--positive-border":"#56816a","--warning":"#76520a","--warning-soft":"#f5e7c7","--warning-border":"#9d7a2d","--critical":"#8a2b3e","--critical-soft":"#f6dde3","--critical-border":"#ad6170","--texture-ink":"#20141b1f","--radius":"0.875rem","--radius-inner":"0.625rem","--weight-display":"700","--duration-ticker":"90s","--icon-stroke":"1.75","--text-caption":"0.75rem","--leading-caption":"1.4","--text-small":"0.875rem","--leading-small":"1.45","--text-body":"1rem","--leading-body":"1.55","--text-lead":"1.125rem","--leading-lead":"1.6","--text-d1":"1.5rem","--leading-d1":"1.25","--text-d2":"2rem","--leading-d2":"1.2","--text-d3":"clamp(2rem, 1.724rem + 1.178vw, 2.667rem)","--leading-d3":"1.12","--text-d4":"clamp(2.5rem, 2.063rem + 1.865vw, 3.556rem)","--leading-d4":"1.05","--tracking-d1":"-0.01em","--tracking-d2":"-0.01em","--tracking-d3":"-0.02em","--tracking-d4":"-0.03em","--tracking-label":"0.08em","--font-display":"var(--font-marquee-display), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif","--font-text":"var(--font-marquee-text), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif","--font-sans":"var(--font-text)","--font-mono":"var(--font-marquee-mono), ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace"},"tokensDark":{"--background":"#191115","--foreground":"#eee7eb","--card":"#241b20","--card-foreground":"#eee7eb","--primary":"#e366a5","--primary-foreground":"#12050b","--primary-hover":"#f878b8","--primary-active":"#f897c6","--secondary":"#2e2329","--secondary-foreground":"#d7ced3","--muted":"#22191e","--muted-foreground":"#b3a2ab","--accent":"#e1b850","--accent-foreground":"#150e02","--border":"#382c33","--ring":"#e366a5","--shadow-color":"#070204","--surface-tint":"#2e1c25","--field":"#171014","--field-border":"#8f7380","--control-border":"#8f7380","--selection":"#38262f","--selection-foreground":"#eee7eb","--selection-border":"#a97b90","--info":"#9bcfe4","--info-soft":"#1b2d35","--info-border":"#5a91a8","--positive":"#9fd9b7","--positive-soft":"#1c3026","--positive-border":"#5c9a78","--warning":"#f0cf83","--warning-soft":"#332714","--warning-border":"#a9842c","--critical":"#ff9cae","--critical-soft":"#38191f","--critical-border":"#b75569","--texture-ink":"#eee7eb2e","--radius":"0.875rem","--radius-inner":"0.625rem","--weight-display":"600","--duration-ticker":"90s","--icon-stroke":"1.75","--text-caption":"0.75rem","--leading-caption":"1.4","--text-small":"0.875rem","--leading-small":"1.45","--text-body":"1rem","--leading-body":"1.55","--text-lead":"1.125rem","--leading-lead":"1.6","--text-d1":"1.5rem","--leading-d1":"1.25","--text-d2":"2rem","--leading-d2":"1.2","--text-d3":"clamp(2rem, 1.724rem + 1.178vw, 2.667rem)","--leading-d3":"1.12","--text-d4":"clamp(2.5rem, 2.063rem + 1.865vw, 3.556rem)","--leading-d4":"1.05","--tracking-d1":"-0.01em","--tracking-d2":"-0.01em","--tracking-d3":"-0.02em","--tracking-d4":"-0.03em","--tracking-label":"0.08em","--font-display":"var(--font-marquee-display), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif","--font-text":"var(--font-marquee-text), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif","--font-sans":"var(--font-text)","--font-mono":"var(--font-marquee-mono), ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace"},"compatibility":{"next":">=15","react":">=19","tailwind":">=4"},"dependencies":["lucide-react"],"editions":{"react":{"source":"src","runtime":"react"},"html":{"source":"html/src","output":"html/dist","engine":"nunjucks","runtime":"vanilla","buildRequired":false}},"ui_library":{"version":"1.5.2","files":["html/src/js/_tt/accordion-disclosure.js","html/src/js/_tt/field-ids.js","html/src/js/_tt/field.js","html/src/js/_tt/form-error-summary.js","html/src/js/_tt/form.js","html/src/js/_tt/mode.js","html/src/js/_tt/pending.js","src/components/ui/_tt/accordion-disclosure.axes.ts","src/components/ui/_tt/accordion-disclosure.fixtures.ts","src/components/ui/_tt/accordion-disclosure.tsx","src/components/ui/_tt/capture.ts","src/components/ui/_tt/field-ids.ts","src/components/ui/_tt/field.axes.ts","src/components/ui/_tt/field.capture.ts","src/components/ui/_tt/field.fixtures.ts","src/components/ui/_tt/field.tsx","src/components/ui/_tt/form-error-summary.axes.ts","src/components/ui/_tt/form-error-summary.fixtures.ts","src/components/ui/_tt/form-error-summary.tsx","src/components/ui/_tt/form.axes.ts","src/components/ui/_tt/form.fixtures.ts","src/components/ui/_tt/form.part.tsx","src/components/ui/_tt/form.ts","src/components/ui/_tt/ids.ts","src/components/ui/_tt/recipe.ts"]},"license":"standard","design":{"typefaces":{"display":"Bricolage Grotesque","text":"Schibsted Grotesk","mono":"Spline Sans Mono"},"typeRatio":1.333,"undertone":"345° wine — every neutral within ±12°, chroma floors cleared; one noted 8-bit deviation on light --card","heroArchetype":"A3","signature":"The ticker rail: a full-bleed, hairline-bounded strip of timestamped mono events drifting edge to edge between sections — a different evidence feed on each of three routes (the wire, the match log, the go-lives).","sanctionedDeviation":"The rail's text moves — motion-pass bans animating text under reading; bought with caption-size mono only, the whole ambient budget, a 90s drift, a persistent labelled Pause switch reachable by keyboard and touch (plus pause on hover and focus), and a static row under prefers-reduced-motion.","motionPersonality":"one moving part — the marquee drift is the only continuous motion; 150ms micro feedback, 240ms disclosures, no entrances, no scroll effects","surface_kind":"marketing","built_against":"2026-08-24","levers":{"theme":"near-dark","density":"airy","accent_mode":"duotone","motion":"tactile","borders":"hairline","radius":"generous","texture":"grain","shadow":"none"},"icons":{"set":"lucide","stroke":1.75,"ladder":["size-4","size-5","size-8"],"contexts":{"nav":"none","panel_header":"none","fact_row":"none","feature_grid":"none"}},"disclosure":{"helper_line":"one-clause","sentence":"hint","paragraph":"details","parallel_views":"tabs","secondary_object":"drawer"},"cta":{"header":"quiet","hero":"filled","repeats":["fold","end"],"mobile":"inline"},"colour_budget":{"brand_max_pct":null,"concentration_pct":70,"regions":[]},"strict":["icons"]}}