Tokens
Design system
Six tokens every component inherits. Change one value in one.config.ts and the whole carousel recolors with it.
Component library
Beautiful blocks,
wired to your brand
Every component below is built on the same six design tokens as the rest
of the template — change one value in one.config.ts and they
all re-skin. Accessible, responsive, dark-mode ready, zero config.
Block Button.astro
Five variants — primary, secondary, tertiary, ghost, destructive — across three sizes. Icon slots, loading and disabled states, and an href prop that renders a real anchor instead of a button.
Design system
Buttons
One primitive, five variants, three sizes. Hairline borders, token-driven colour, and crisp keyboard focus — every state accounted for.
Small Medium Large
Primary
Secondary
Tertiary
Ghost
Destructive
Full width
Block Card.astro
One composable primitive, five layouts: feature (icon + link), stat (oversized number + trend), profile (avatar + socials), pricing (tier + feature list + CTA), and a bare default — switched with a single variant prop.
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 Mercer Head of Growth, Acme
Took a wireframe to production in three days. Now ships every client site on ONE.
James Lin Founder, 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.
$0 forever
- 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
Block Carousel.astro
A native CSS scroll-snap carousel — no JS animation loop. Feed it items or slot children directly; perView and peek control how much of the next slide shows. Arrows, dots, and arrow-key navigation wired in.
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
Feature cards
Block Tabs.astro
Accessible tabs with a gliding active-tab indicator — pure Astro plus one scoped script, zero React. Panels are named slots (panel-<id>); full keyboard support (arrow keys, Home/End) baked in.
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'Fast on arrival
The page is HTML first. Islands defer until they enter the viewport, and unused primitives tree-shake to nothing. First paint stays lean, so the template scores well before you write a line.
0 React for tabs
100 Lighthouse target
AA Contrast floor
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
Block Quote.astro
Pull-quotes in three variants — featured (large, centered), inline (accent bar), and compact (grid card) — each with an optional 1–5 star rating and an avatar-initials fallback.
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.
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.
The design tokens survived a full client rebrand. Six values, done — no hunting hex codes across forty files.
We added an AI agent to a client site in an afternoon. It handles first-response support and hands off cleanly.
Wireframe to production in three days. The chat plugin alone replaced a $400/mo tool stack.
Block ContactForm.astro
A complete contact form built from one reusable field shape — label, hairline border, helper text, per-field error and valid states — with inline validation on blur and a simulated (offline) submit.
Get in touch
Let's talk
One reusable field shape — hairline borders, token-driven colour, crisp focus rings, and forgiving inline validation. Every state is accounted for, and the whole thing flips with dark mode.
Or just stay in the loop
Product notes and the occasional release. No spam.
Block Breadcrumbs.astro
An accessible breadcrumb trail — chevron or slash separators, an optional home icon, and a maxItems prop that collapses deep trails into an accessible '…' menu.
Navigation
A breadcrumb trail, three ways
Block Footer.astro
The site's full marketing footer — brand column, socials, four link columns, newsletter signup, and a legal bottom bar — shown here with zero props. The real one closes this page below.