Launch faster. Scale smarter.

Your product deserves a design system that grows with you

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

Why teams choose ONE

Stop fighting design inconsistency. ONE gives you the tools to ship faster and scale smarter.

Ship 3x faster

Reusable components and tokens eliminate design decisions. Focus on what matters.

Scale consistently

One source of truth propagates across all products. Update tokens once, everywhere changes.

Stay accessible

WCAG AA+ by default. Contrast, focus states, and motion preferences built into every component.

Powerful features built in

Everything you need to build accessible, consistent experiences across all your products.

Design Tokens

Semantic color, typography, spacing, and motion tokens that sync across Figma and code.

Component Library

50+ pre-built, accessible components ready to compose into any experience.

Typography System

Humanist type scale with responsive sizing, line-height, and tracking built in.

Responsive Layouts

Predictable grid system and container queries for content-aware breakpoints.

Motion & Interaction

Easing curves and timing that respect prefers-reduced-motion and feel responsive.

Living Documentation

Keep patterns, principles, and decisions in one discoverable place.

How it works

A simple workflow that keeps design and engineering in sync.

Step 01

Define tokens

Start with color, typography, spacing, and motion in Figma and CSS variables.

Step 02

Build components

Compose tokens into reusable components with full state coverage.

Step 03

Ship confidently

Use components across products knowing they're accessible and on-brand.

Step 04

Evolve together

Update tokens and components once, propagate everywhere automatically.

Built for every use case

Whether you\'re shipping a startup or scaling an enterprise, ONE adapts to your needs.

SaaS Platforms

Consistent dashboards, workflows, and data tables across complex applications.

Marketing Sites

Storytelling-first layouts with motion and rhythm that feels premium.

Mobile Apps

Touch-friendly components with proper hit targets and haptic feedback patterns.

Loved by teams everywhere

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

Frequently asked questions

Everything you need to know to get started.

How long does it take to implement?

Most teams see value within the first sprint. Implementation ranges from 1-4 weeks depending on complexity and existing design debt.

Can I customize the tokens?

Yes. Tokens are designed to be forked and extended. Follow the pattern with your brand colors, typography, and spacing.

Is this framework-agnostic?

Tokens are pure CSS. Components ship in React but the patterns work with any JavaScript framework or vanilla HTML.

What about dark mode?

Built-in. Tokens define light and dark variants. Components automatically respond to prefers-color-scheme.

Ready to ship better products?

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.

DNA

Principles that guide every layout, component, and interaction across the platform.

Clarity

Structure before decoration

Layouts start with measured whitespace, bold hierarchy, and predictable grid alignment.

Velocity

Decide once, reuse everywhere

Reusable tokens, components, and documentation make shipping fast without sacrificing polish.

Inclusive

Comfort for every user

Accessibility, contrast, and motion preferences are first-class constraints—not afterthoughts.

Design Tokens

Tokens are the atomic currency of the system. Update them once to propagate across the product, web, and brand experiences.

Color

HSL

Semantic tokens define Slate, Graphite, Leaf, Pine, and Stone—matching the poster and propagating across modes.

--primary

Deep navy · Primary actions

216 55% 25%

--primary-foreground

Warm light foreground

36 8% 96%

--secondary

Graphite · Secondary surfaces

219 14% 28%

--accent

Leaf · Positive accent

105 22% 25%

--muted

Stone · Neutral backdrop

36 8% 88%

Typography

Rem Scale

Inter pairs with fluid sizes using clamp for responsive scaling. Lock headlines into the defined hierarchy.

Display · 56px → 64px

Headline · 40px

Body · 16px · leading-7 · tracking-[0.01em]

Small · 12px · tracking-widest (use sparingly)

Spacing

4px Grid

Scale is rooted in 4px increments. Combine tokens to create rhythm and intentional whitespace.

space-2

8px · 0.5rem · Dense clusters

space-3

12px · 0.75rem · Component gaps

space-4

16px · 1rem · Default padding

space-6

24px · 1.5rem · Card gutters

space-8

32px · 2rem · Section rhythm

space-12

48px · 3rem · Hero whitespace

Radius

Shape

Radii communicate intent. Smaller radius for utility, larger for immersive storytelling.

--radius-xs

Pills & badges

4px

--radius-sm

Inputs & controls

6px

--radius-md

Cards

12px

--radius-lg

Modals & hero surfaces

24px

--radius-full

Circular avatars

9999px

Elevation

Depth

Elevation pairs drop shadows with subtle borders to reinforce spatial hierarchy.

shadow-sm

Inputs & lists

0 1px 2px 0 hsl(219 14% 28% / 0.15)

shadow-md

Prominent cards

0 14px 32px -18px hsl(216 55% 25% / 0.32)

shadow-lg

Dialogs & overlays

0 40px 80px -30px hsl(216 63% 17% / 0.45)

Motion

Easing

Motion reinforces meaning. Keep transitions under 320ms and ease with intention.

--ease-snappy

Buttons & chip interactions

cubic-bezier(0.4, 0, 0.2, 1)

--ease-natural

Modals & drawers

cubic-bezier(0.16, 1, 0.3, 1)

--duration-rapid

Hover & focus

120ms

--duration-base

Component transitions

200ms

--duration-slow

Page transitions

320ms

Color Modes

Color tokens cascade into light and dark themes. Each mode balances contrast, warmth, and visual calm.

Light surfaces

Bright, optimistic, with generous contrast. Ideal for marketing, operations, and default product views.

Background

Warm stone canvas

36 8% 88%

Card

Paper surfaces

0 0% 100%

Muted

Soft graphite panels

219 14% 92%

Border

Weathered outlines

219 14% 70%

Dark surfaces

Low-glare, high-contrast surfaces with accent highlights. Perfect for dashboards and nighttime contexts.

Background

Ink backdrop

0 0% 13%

Card

Graphite layers

219 14% 20%

Muted

Slate overlays

216 63% 17%

Border

Dim outlines

216 40% 32%

Typography Architecture

A typographic system rooted in humanist forms and consistent rhythm. Use the documented scale—never improvise.

Type scale

Each tier pairs size, line-height, tracking, and usage. Apply the token that matches the message weight.

Display text-5xl md:text-6xl

56px / 3.5rem · line-height 1.1 · Hero statements

Headline text-4xl

40px / 2.5rem · line-height 1.2 · Section titles

Title text-2xl

28px / 1.75rem · line-height 1.3 · Card titles

Subtitle text-xl

20px / 1.25rem · line-height 1.5 · Supporting copy

Body text-base leading-7

16px / 1rem · line-height 1.7 · Paragraphs

Caption text-sm

14px / 0.875rem · line-height 1.6 · Metadata & labels

Best practices

Typography communicates voice. These guardrails keep it legible, deliberate, and premium.

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.

Layout & Spacing

Grid systems, gutters, and container rules keep experiences aligned and effortless to scan.

Spacing rhythm

Combine spacing tokens deliberately: inside components use 2–6; between sections use 8–12.

space-2

8px · 0.5rem

space-3

12px · 0.75rem

space-4

16px · 1rem

space-6

24px · 1.5rem

space-8

32px · 2rem

space-12

48px · 3rem

Container rules

Choose the container that matches the story density. Always align to the 12-column grid.

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.

Buttons

Action hierarchy lives or dies on buttons. Use tokens, states, and spacing consistently to create confident calls to action.

Variants

Choose the variant that matches intent. Primary stands alone; others support workflows and contextual actions.

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.

States & best practices

States communicate feedback. Maintain consistent timing, contrast, and accessibility across every interaction.

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.

Document spacing, icon placement, and loading patterns in both Figma and code. Buttons should never appear without a defined state diagram.

Pair icon buttons with tooltips and keep hit area ≥44px.
Default spacing: 16px horizontal, 12px vertical inside button; stack buttons with 16px gap.
Never place two primary buttons side by side—use secondary or outline for supporting actions.
Primary CTA uses inverse fill: white background, primary text, and primary ring for focus.

Component Language

Components combine tokens, layout, and interaction rules. Build new experiences by composing, not reinventing.

Design principles

Consistent experiences emerge when every component honors the same playbook.

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.

Living examples

Ship with defaults: size, density, icon placement, and states. Extend via props, not overrides.

Buttons

Card anatomy

Status Overview

Snapshot of platform health, updated in real-time.

Active creators 128

Pending mandates 12

Interaction & Accessibility

Every interaction respects purpose, speed, and inclusivity. Design emotionally confident interfaces that everyone can use.

Interaction rules

Micro-interactions reinforce trust. Follow these guardrails before shipping.

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.

Accessibility checklist

Ship quality by making inclusion non-negotiable. Validate every screen before release.

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.

Document contrast and focus results in PR descriptions. Accessibility is a release-blocker.

Implementation Playbook

Design and engineering stay in lockstep through shared tooling, documentation, and QA rituals.

Workflow

Keep tokens and components in sync across codebases, packages, and design files.

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.

Token snippet

Reference implementation in `src/styles/tokens.css`. Update here and regenerate types.

: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.

Design governs the ONE experience.

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.