ONE platform combines tokens, components, and documentation to ship pixel-perfect experiences across web, mobile, and beyond.
50+
Components shipped
100+
Teams using ONE
40%
Avg time saved
Stop fighting design inconsistency. ONE gives you the tools to ship faster and scale smarter.
Everything you need to build accessible, consistent experiences across all your products.
Semantic color, typography, spacing, and motion tokens that sync across Figma and code.
50+ pre-built, accessible components ready to compose into any experience.
Humanist type scale with responsive sizing, line-height, and tracking built in.
Predictable grid system and container queries for content-aware breakpoints.
Easing curves and timing that respect prefers-reduced-motion and feel responsive.
Keep patterns, principles, and decisions in one discoverable place.
A simple workflow that keeps design and engineering in sync.
Start with color, typography, spacing, and motion in Figma and CSS variables.
Compose tokens into reusable components with full state coverage.
Use components across products knowing they're accessible and on-brand.
Update tokens and components once, propagate everywhere automatically.
Whether you\'re shipping a startup or scaling an enterprise, ONE adapts to your needs.
Consistent dashboards, workflows, and data tables across complex applications.
Storytelling-first layouts with motion and rhythm that feels premium.
Touch-friendly components with proper hit targets and haptic feedback patterns.
See how teams are shipping faster and building better with ONE.
"ONE's design system let us ship features 3x faster without compromising accessibility."
Sarah Chen
Head of Product at StartupXYZ
"The token-first approach solved years of inconsistency across our products."
James Rodriguez
Design Director at Enterprise Co
"Finally, designers and engineers speaking the same language. No more handoff friction."
Emma Wilson
Engineering Lead at TechCorp
Everything you need to know to get started.
Most teams see value within the first sprint. Implementation ranges from 1-4 weeks depending on complexity and existing design debt.
Yes. Tokens are designed to be forked and extended. Follow the pattern with your brand colors, typography, and spacing.
Tokens are pure CSS. Components ship in React but the patterns work with any JavaScript framework or vanilla HTML.
Built-in. Tokens define light and dark variants. Components automatically respond to prefers-color-scheme.
Join teams that have cut design-to-delivery time by 40% and eliminated inconsistency across products.
No credit card required. Free tier includes all core features.
Principles that guide every layout, component, and interaction across the platform.
Tokens are the atomic currency of the system. Update them once to propagate across the product, web, and brand experiences.
--primary
Deep navy · Primary actions
--primary-foreground
Warm light foreground
--secondary
Graphite · Secondary surfaces
--accent
Leaf · Positive accent
--muted
Stone · Neutral backdrop
Display · 56px → 64px
Headline · 40px
Body · 16px · leading-7 · tracking-[0.01em]
Small · 12px · tracking-widest (use sparingly)
--radius-xs
Pills & badges
--radius-sm
Inputs & controls
--radius-md
Cards
--radius-lg
Modals & hero surfaces
--radius-full
Circular avatars
shadow-sm
Inputs & lists0 1px 2px 0 hsl(219 14% 28% / 0.15)
shadow-md
Prominent cards0 14px 32px -18px hsl(216 55% 25% / 0.32)
shadow-lg
Dialogs & overlays0 40px 80px -30px hsl(216 63% 17% / 0.45)
--ease-snappy
Buttons & chip interactions
--ease-natural
Modals & drawers
--duration-rapid
Hover & focus
--duration-base
Component transitions
--duration-slow
Page transitions
Color tokens cascade into light and dark themes. Each mode balances contrast, warmth, and visual calm.
Background
Warm stone canvas
Card
Paper surfaces
Muted
Soft graphite panels
Border
Weathered outlines
Background
Ink backdrop
Card
Graphite layers
Muted
Slate overlays
Border
Dim outlines
A typographic system rooted in humanist forms and consistent rhythm. Use the documented scale—never improvise.
56px / 3.5rem · line-height 1.1 · Hero statements
40px / 2.5rem · line-height 1.2 · Section titles
28px / 1.75rem · line-height 1.3 · Card titles
20px / 1.25rem · line-height 1.5 · Supporting copy
16px / 1rem · line-height 1.7 · Paragraphs
14px / 0.875rem · line-height 1.6 · Metadata & labels
Use `max-w-prose` for copy blocks. Avoid center-aligned paragraphs longer than two lines.
Headlines use tight leading (`leading-tight`). Body copy uses `leading-7`. Increase letter-spacing for uppercase.
Mix weight sparingly: bold for emphasis, medium for actionable labels, regular for long-form reading.
Always include smart quotes, en/em dashes, and proper apostrophes in editorial content.
Grid systems, gutters, and container rules keep experiences aligned and effortless to scan.
Content
max-w-3xl · 48px section padding
Articles, docs, knowledge
Application
max-w-5xl · 64px section padding
Dashboards & workflows
Wide
max-w-6xl · responsive gutters
Data dense screens
Fluid
full width · clamp(24px, 5vw, 80px)
Marketing & storytelling
Grid Example
Each column aligns to 72px at desktop with 24px gutters. Collapse to two columns on tablet, one on mobile.
Action hierarchy lives or dies on buttons. Use tokens, states, and spacing consistently to create confident calls to action.
Primary
One per view. Drives the core action with the --primary token to anchor attention.
Secondary
Use for supportive actions that keep users in-flow. Works best in medium density areas.
Outline
Pair with primary for complementary navigation (e.g., “View docs”). Great on dark surfaces.
Ghost
Use for contextual actions within dense layouts or tables. Hover adds a subtle surface tint.
Hover
Strengthen fill by 8% (primary) or introduce a 10% surface tint (outline/ghost) while preserving contrast.
Focus
Apply a 2px ring in `--color-primary` with 2px offset. Never rely on box-shadow alone for focus.
Active
Reduce elevation, darken fill by 12%, and compress transition timing to <80ms for instant feedback.
Disabled
Lower opacity to 55%, remove hover styles, and ensure tooltips or helper text clarify next steps.
Components combine tokens, layout, and interaction rules. Build new experiences by composing, not reinventing.
Atomic → Pattern → Experience
Compose experiences from documented atoms. Never duplicate markup when a primitive exists.
Statefulness Baked In
Every component ships with hover, focus, active, loading, and disabled states out of the box.
Content-Aware Layouts
Components adapt to variable content through flexible spacing, min/max widths, and responsive typography.
Buttons
Card anatomy
Every interaction respects purpose, speed, and inclusivity. Design emotionally confident interfaces that everyone can use.
Visible Focus
Focus states use a 2px outline with primary color and 2px offset. Never remove focus for aesthetics.
Purposeful Motion
Pair animations with motion tokens and respect `prefers-reduced-motion`. Motion should communicate spatial change.
Immediate Feedback
Hover within 80ms, active within 40ms, and show result states or loaders within 200ms.
Contrast AA+
Maintain 4.5:1 contrast for body text and 3:1 for large headings. Validate all token combinations.
Readable Typography
Limit line length to 60–70 characters, set body copy to leading-7, and avoid center-aligned paragraphs over 3 lines.
Motion Preferences
Wrap transitions in `motion-safe` classes and provide alternatives like color or elevation for motion-reduced users.
Design and engineering stay in lockstep through shared tooling, documentation, and QA rituals.
Step 1
Tokens as Source of Truth
Update Tailwind config and CSS variables first. UI code must consume tokens—not hard coded values.
Step 2
Composable Primitives
Extend components via props and slots. If structure diverges, create a new primitive and document it here.
Step 3
Design QA Loop
Pair every UI change with screenshots, contrast checks, and accessibility notes before merging.
:root {
--color-primary: 216 55% 25%;
--color-primary-foreground: 36 8% 96%;
--color-surface: 36 8% 88%;
--color-accent: 105 22% 25%;
--space-2: 0.5rem;
--space-4: 1rem;
--radius-md: 12px;
--shadow-md: 0 14px 32px -18px hsl(216 55% 25% / 0.32);
--ease-snappy: cubic-bezier(0.4, 0, 0.2, 1);
}
Tokens sync to Tailwind via `theme.extend`. Run `pnpm lint && pnpm test` before release.
Ship with intention. Every commit should strengthen clarity, trust, and velocity. When in doubt, return to the tokens, principles, and checklists above—or propose updates so the system evolves together.