Install & import

How to get the DayTwo Design System running locally and use its components in an app. Everything lives in one monorepo, so tokens and components are shared packages — a single source for everything.

Requirements

Node 18 or newer.
This repository, cloned locally.

Install

The system is an npm-workspaces monorepo. Install once from the repo root and every workspace — packages/tokens, packages/components, and the apps (docs, mobile, app) — is wired up:

npm install        # from the repo root — installs all workspaces
npm run dev        # start this docs site at http://localhost:3000

To run a native app on the design system (real components on iOS/Android), start an Expo app — apps/app is a ready reference:

cd apps/app && npx expo start   # scan the QR with Expo Go
# or a native dev build: npx expo run:ios / run:android

Other useful scripts:

npm run build:tokens   # emit packages/tokens/dist/tokens.json (for non-TS tools / the AI harness)
npm run typecheck      # type-check every workspace

Import & use

Wrap your app once in the ThemeProvider, then import components from @daytwo/components. Pass scheme="light" or "dark" — every component re-themes from the same tokens.

import { ThemeProvider, Button } from '@daytwo/components'

export function App() {
return (
  <ThemeProvider scheme="light">
    <Button onPress={recordSale}>Record sale</Button>
  </ThemeProvider>
)
}

Tokens first

Never hardcode a color, size, or spacing value. Import from @daytwo/tokens or read them through useTheme(). If a value you need isn't a token yet, add the token first — that is what keeps the app, this site, and the rules in agreement.

Where things live

Package	What it is
`@daytwo/tokens`	The single source of truth — color, type, spacing, radius, elevation, touch targets, motion.
`@daytwo/components`	Real React Native components built on the tokens. Run on iOS, Android, and the web.
`apps/docs`	This documentation website.
`daytwo-design-agent/`	A Claude Code plugin that turns an AI assistant into a DayTwo design reviewer/builder.

The AI design agent

The system also ships a Claude Code plugin that lets an AI assistant build, review, and clean up DayTwo screens to these rules. Install it in a Claude Code session:

/plugin install ./daytwo-design-agent

The AI design agent page covers the nine skills, example prompts, and what good output looks like.