Astro 7 + React 19

Design beautiful websites with perfect Lighthouse scores.

ONE is a source-available starter template — clone it and your first build already scores 100, with tokens, motion, and payments wired together, no separate integration pass.

Get started free →See the design system

Live — not a mockup2026-07-09

Perf

A11y

Best

SEO

Desktop, this exact page. 86 on throttled Slow 4G.

Six tokens. Light and dark. Done.

Every component on this page derives from six editable tokens. Pick one below and the whole site responds — both modes, live.

Tokens

The 6 editable tokens

Click any swatch to recolor live. Picks apply to the whole site and persist — the same engine behind the nav's preset swatches. Everything else on this page — borders, focus rings, destructive/success, on-* label colors — derives from these 6 automatically; see the invariants and derived tokens below.

Surface tokens (background · foreground · font) flip with mode — picks apply to thedark mode you're viewing. Brand tokens apply to both.

backgroundL1 surface — cards, sidebar, popovers
#1a1a1a
foregroundL2 surface — card body, inputs, code
#212121
Aa
fontBody text — derives border · muted · faint
#ffffff
primaryMain CTA — also focus ring (both modes)
#1d3a66
secondarySupporting actions (both modes)
#3d4451
tertiaryAccent · success-tinted (both modes)
#324e32

Invariants —destructivesuccessgoldwhiteblack+ derived: on-{primary,secondary,tertiary,destructive,success} · border · muted · page

14 presets

Pick a theme. The whole site repaints.

Every card below is a real, clickable preset — click one and this entire page (not just this section) switches live, the same engine behind the nav swatches.

Build your own theme →

Motion system

Six primitives. One mental model.

Reveal, Stagger, Parallax, ScrollScene, Spring, and the tokens that keep them all feeling like the same product — each one interactive, right here.

RevealwhileInView

Fade + translate on viewport entry. Fires once via viewport: once.

sm · fasty: 12px · 0.32s

md · basey: 24px · 0.48s

lg · slowy: 48px · 0.72s

<Reveal client:visible dist="md" speed="base" delay={0.1}>
  <HeroHeadline />
</Reveal>

StaggerstaggerChildren

One parent — all children stagger via staggerChildren.

1Signal arrives

2Path selected

3Handler executes

4Result marks the path

5Highway hardens

6Loop closes

<Stagger client:visible stagger={0.08}>
  {items.map(i => <Card key={i} />)}
</Stagger>

ParallaxuseScroll

Far 4×

Mid 2×

Near 1×

Move cursor over canvas

Near · 1×

x +0.00
y +0.00

<Parallax client:visible speed={60} direction="up">
  <BackgroundGrid />
</Parallax>

ScrollScenescrubbed

Sticky pin exposes progress 0→1 as a MotionValue to all children.

Signal entersactive

Route resolves

Handler fires

Loop closes

progress0%

<ScrollScene client:visible height="250vh">
  {(p) => <Scene progress={p} />}
</ScrollScene>

Springphysics

Pick a spring config then hit Shoot.

k=380 · d=32

// ease.spring — the ONE system default
{ type: 'spring', stiffness: 380, damping: 32, mass: 0.8 }

Tokensdesign

Four numbers that make everything feel like the same product.

out[0.22, 1, 0.36, 1]

inout[0.65, 0, 0.35, 1]

springk=380 d=32

Duration

fast

320ms

base

480ms

slow

720ms

See the full motion system →

One card, five layouts

A card for every surface

Feature, stat, profile, and pricing — all from a single composable component. Hairline borders, the icon-chip treatment, colour as a sparing accent. Switch a theme in the nav and watch every card respond.

Design tokens

Six tokens every component inherits — primary, secondary, tertiary, background, foreground, font. Change one value, the whole system responds.

Motion library

Reveal, Parallax, ScrollScene, and Stagger — built on Motion with shared ease + duration tokens. Reduced-motion safe by default.

AI chat

Drop a chat widget onto any page with plugin-chat. Agent personality defined in markdown. Zero backend code, zero bundle cost.

4,217

sites deployed+12%

3.2d

avg to first deploy−0.8d

94%

active after 6 months+6%

< 80 KB

JS bundle (gzipped)

Sarah MercerHead of Growth, Acme

Took a wireframe to production in three days. Now ships every client site on ONE.

James LinFounder, BuildFast

The token system survived a full client rebrand — six values, no hunting hex codes.

Maya KovačCTO, NorthStack

Added an AI agent to a client site in an afternoon. Cut support tickets by 40%.

Starter

For solo builders shipping their first site.

$0forever

Free forever template
Full design system
Motion library
Community support

Pro

For agencies running client work at scale.

$29/mo

Everything in Starter
AI chat + tracking plugins
Hosted admin console
Priority support
Unlimited workspaces

Enterprise

For teams with custom infrastructure needs.

Custom

Everything in Pro
Dedicated support
SLA + uptime guarantees
Custom plugins
On-prem deployment

Component

Carousel

A content carousel on native CSS scroll-snap — smooth, touch-native, and reduced-motion safe. Drag, click the arrows, tap a dot, or use the arrow keys.

Testimonials

We went from wireframe to production in three days. The carousel alone replaced a paid component library. Clients ask what stack we used — we tell them ONE.

Sarah MehtaHead of Growth · Acme Agency

The design tokens survive a client rebrand. Change six values and every surface — carousels included — recolors. No hunting hex codes across forty files.

James LinFounder · BuildFast Studio

It feels like Linear and reads like Stripe. Hairline borders, real whitespace, motion that respects reduced-motion. The polish is the product.

Maya KhannaCTO · NorthStack

Native scroll-snap means it just works on touch — no JS animation jank, no dependency. My phone scrolls it as smoothly as my trackpad does.

Diego AlvarezDesign Engineer · Loom-ish

Feature cards

Tokens

Design system

Six tokens every component inherits. Change one value in one.config.ts and the whole carousel recolors with it.

Motion

Reduced-motion safe

Smooth scroll-snap by default, instant jumps when the visitor asks for less motion. Accessibility is the floor, not a flag.

Chat-ready

Pair any slide with plugin-chat. Agent personality lives in markdown, the widget loads with zero bundle cost.

Payments

Accept in 60s

x402 flows, quote/claim, multi-chain crypto via plugin-backend. Wire a paywall into a slide without a Stripe account.

Auth

Passkey sign-in

Passkey + better-auth ships free. Social providers and magic links are one config line away.

Component

Tabs that glide

A sliding indicator tracks the active tab. Full keyboard support, ARIA roles, and a crossfade that yields to reduced-motion. Zero React.

One mental model

Every surface in the template derives from six editable tokens. Pick a color, and the whole system — cards, inputs, focus rings, these tabs — recalibrates in one motion. No theme files to chase.

Six tokens, three depth levels
Auto dark-mode flip, WCAG AA
Hairline borders, generous space

Composable by default

Components are plain Astro with a scoped script where interaction demands it — no runtime to boot, no provider to wrap. Reach for a React island only when state genuinely lives on the client.

import Tabs from '@/components/blocks/Tabs.astro'

Accessible, not optional

The tablist ships the full ARIA contract: roving tabindex, arrow-key navigation, Home / End jumps, and a focus ring that only appears for keyboards. The crossfade honors prefers-reduced-motion.

role=tablist / tab / tabpanel
aria-selected · aria-controls
Keyboard-first, screen-reader sound

In their words

Pull-quotes, three ways

ONE is the first starter where the design system actually survives contact with a real client. We stopped rebuilding the same week-one scaffolding and started shipping on day one.

Priya N.Principal Engineer, Loom Studio

Change a brand colour and every component updates. Add a plugin and the feature wires itself. It feels less like a template and more like a head start.

Daniel R.Lead Designer, Figma-adjacent

The design tokens survived a full client rebrand. Six values, done — no hunting hex codes across forty files.

James L.Founder, BuildFast

We added an AI agent to a client site in an afternoon. It handles first-response support and hands off cleanly.

Maya K.CTO, NorthStack

Wireframe to production in three days. The chat plugin alone replaced a $400/mo tool stack.

Sarah M.Head of Growth, Acme

Payments, first-class

Two rails. Zero custody.

Every clone ships a working payment stack. Crypto links are live the moment you clone; the card rail is a real Stripe scaffold that goes live with your key.

Crypto — live today

Signed payment links across Sui, Ethereum, Solana, and Bitcoin. Every link is Ed25519-signed server-side and verified before it renders — no custody, no chargebacks. Settlement is the transaction itself.

Card — bring your own key

Real Stripe Elements, fully wired: /api/pay/create-intent mints PaymentIntents and /api/pay/webhook verifies signatures — both fail-closed until you add two env vars. Then this exact form is live on your account.

Wallet — self-hosted

Run one wallet keygen and your keys never leave your machine. The/wallet page reads live on-chain balances over public RPC — no backend required. Payment links settle straight to it.

Card · your Stripe key

And a card form you'd want to fill in.

Real Stripe Elements dressed as a card — tilts to your cursor, guides you field to field, and settles straight to your own Stripe account. It goes live the moment you add two env vars; until then it's an honest preview.

✓ PCI stays with Stripe — we never see a digit
✓ Fail-closed without your keys
✓ Cards, wallets, and Link out of the box

See the full payments page →

Clone it. Ship it. Score 100.

Free forever. No card required. Your first perfect Lighthouse run is one command away.

npm create one-app@latest my-site

View on GitHub →See the design system

Source-available · Free forever · No card required · Every claim on this page is live