How we shipped Gravity's design system in three weeks.

Gravity is an AI-native advertising platform. They had product velocity, sharp design instincts, and a Series A on the horizon — but no design system. Every new surface meant re-deriving tokens and drifting further from the brand. We had three weeks.

The brief

Gravity was building the interface layer for an AI-native ad platform — campaign management, analytics, dashboards. The product had to feel as considered as the model underneath.

Their team could ship. They could not ship consistently. Every new screen meant re-picking colors, re-spacing buttons, re-deciding what a card looked like. Six months of foundation work was not on the table — they needed to be in front of investors with a polished product, not a half-built component library.

So: a real design system, fast. Code, Figma, and docs that all speak the same language — without taking the team off product.

Approach

One fixed scope, three deliverables, one sprint. We made three calls up front that shaped everything else.

1. 01
   Code and Figma in lockstep, not in sequence.A token change in Figma was a PR in the package on the same day. The library and the package never drifted because they couldn't — they shipped together.
2. 02
   A custom docs site, not Storybook.Storybook is a developer tool. A docs site is a brand surface. Gravity's docs were going to be linked in pitch decks, recruiter messages, and partner intros — they had to be branded, fast, and feel like part of the product.
3. 03
   Dark mode from day one.Bolting on dark mode at the end always means re-deciding tokens. Light and dark were modeled in the same token system from the first commit — every component was reviewed in both.

Foundations

A token system that the rest of the library could ride on. Every decision below was made once and reused everywhere.

37 components

The smallest viable surface area for a real product — inputs, navigation, feedback, overlays, display, and data viz.

The package

A TypeScript npm package with ESM/CJS dual build, full types, a theme provider, and tree-shakable imports. Drop-in installation:

npm install @trygravity/components motion

npm install @trygravity/components motion

Every component, one import:

import {
  Button,
  Card,
  Badge,
  ThemeProvider,
} from "@trygravity/components"

export default function App() {
  return (
    <ThemeProvider>
      <Card>
        <Badge variant="success">Live</Badge>
        <Button variant="primary">View campaign</Button>
      </Card>
    </ThemeProvider>
  )
}

import {
  Button,
  Card,
  Badge,
  ThemeProvider,
} from "@trygravity/components"

export default function App() {
  return (
    <ThemeProvider>
      <Card>
        <Badge variant="success">Live</Badge>
        <Button variant="primary">View campaign</Button>
      </Card>
    </ThemeProvider>
  )
}

The Figma library

Every component mirrored 1:1 in Figma — variants, variables for tokens, light/dark equivalents. Designers and engineers work from the same source of truth. A token change updates both sides.

The docs site

A custom Next.js docs site in the tradition of shadcn and Base UI. Branded, fast, searchable — and deliberately not Storybook. The docs are part of the product story, not a dev artifact behind a basic-auth wall.

• InstallationPackage install, Tailwind setup, fonts, theme.
• TokensColor, type, spacing, radius, shadow, motion.
• Spacing & sizesThe spacing grid and sizing scale.
• MotionMotion tokens, reduced motion, animation principles.
• Dark modeHow dark mode works and how to theme it.
• AccessibilityKeyboard, focus, contrast, ARIA patterns.
• ComponentsOne page per component with live examples and props.

Three weeks, day by day

• Week 1
  FoundationsToken workshop with the team. Color, typography, spacing, radius, shadow, motion locked in. Button, Input, and Card built as proof-of-concepts in code and Figma to pressure-test the tokens.
• Week 2
  BuildRemaining 34 components shipped in code and Figma. Daily async review with the Gravity team. Dark mode pass on every component. Accessibility audit — keyboard, focus, contrast, ARIA.
• Week 3
  ShipCustom docs site built and deployed. npm package published. Figma library shared with the team. 90-minute handover walkthrough covering tokens, theming, and how to extend.

The result

Gravity walked away with a production-ready design system their team ships against — a package, a Figma library, and a docs site that all speak the same language. New surfaces start from a shared foundation instead of a blank file.

The docs site became the link they sent to investors, partners, and recruits — proof, on its own URL, that the company takes craft seriously.