# Bricks Next
> Opendoor's design system. Tokens, components, and voice — built for Claude Code and Cursor.

Bricks Next is the AI-first design system for Opendoor product surfaces. It consists of ~245 design tokens across a 3-tier semantic architecture (Base → System → Component), 20+ production components built on Tamagui (React Native + Web), and a Figma library synced via Code Connect.

## Getting started
- [Installation](https://design-opendoor.vercel.app/#/install): Install the @opendoor/tokens-studio npm package.
- [Figma library](https://design-opendoor.vercel.app/#/figma): How to use the Figma variables.
- [MCP server](https://design-opendoor.vercel.app/#/mcp): Connect Cursor / Claude Code to Bricks Next.
- [Bots](https://design-opendoor.vercel.app/#/bots): AI assistants for the design system.
- [Prototype with AI](https://design-opendoor.vercel.app/#/prototyping): Use Claude Desktop or Cowork to generate Bricks Next HTML mocks — add the skill, describe the screen, get a working prototype.
- [Voice & tone](https://design-opendoor.vercel.app/#/voice): Writing guidelines for Opendoor product copy.
- [Changelog](https://design-opendoor.vercel.app/#/changelog): Recent updates to Bricks Next.

## Foundations
- [Color](https://design-opendoor.vercel.app/#/color)
- [Typography](https://design-opendoor.vercel.app/#/typography)
- [Spacing](https://design-opendoor.vercel.app/#/spacing)
- [Radii](https://design-opendoor.vercel.app/#/radii)
- [Elevation](https://design-opendoor.vercel.app/#/elevation)
- [Motion](https://design-opendoor.vercel.app/#/motion)
- [Iconography](https://design-opendoor.vercel.app/#/iconography)
- [Logos & brand](https://design-opendoor.vercel.app/#/logos)

## Components
- [Button](https://design-opendoor.vercel.app/#/buttons)
- [Button group](https://design-opendoor.vercel.app/#/button-group)
- [Toggle](https://design-opendoor.vercel.app/#/toggle)
- [Form controls](https://design-opendoor.vercel.app/#/forms)
- [Text input](https://design-opendoor.vercel.app/#/text-input)
- [Textarea](https://design-opendoor.vercel.app/#/textarea)
- [Select](https://design-opendoor.vercel.app/#/select)
- [Combobox](https://design-opendoor.vercel.app/#/combobox)
- [Radio & checkbox](https://design-opendoor.vercel.app/#/radio-checkbox)
- [Switch](https://design-opendoor.vercel.app/#/switch)
- [Slider](https://design-opendoor.vercel.app/#/slider)
- [Input OTP](https://design-opendoor.vercel.app/#/input-otp)
- [Card](https://design-opendoor.vercel.app/#/cards)
- [Pill / Badge](https://design-opendoor.vercel.app/#/pills)
- [Avatar](https://design-opendoor.vercel.app/#/avatar)
- [Label & status dot](https://design-opendoor.vercel.app/#/badge-label)
- [Separator](https://design-opendoor.vercel.app/#/separator)
- [Skeleton](https://design-opendoor.vercel.app/#/skeleton)
- [Progress](https://design-opendoor.vercel.app/#/progress)
- [Spinner](https://design-opendoor.vercel.app/#/spinner)
- [Empty state](https://design-opendoor.vercel.app/#/empty)
- [Alert](https://design-opendoor.vercel.app/#/alert)
- [Dialog](https://design-opendoor.vercel.app/#/dialog)
- [Popover](https://design-opendoor.vercel.app/#/popover)
- [Tooltip](https://design-opendoor.vercel.app/#/tooltip)
- [Sheet](https://design-opendoor.vercel.app/#/sheet)
- [Toast](https://design-opendoor.vercel.app/#/toasts)
- [Toast (v2)](https://design-opendoor.vercel.app/#/toast-v2)
- [Tabs](https://design-opendoor.vercel.app/#/tabs)
- [Breadcrumb](https://design-opendoor.vercel.app/#/breadcrumb)
- [Pagination](https://design-opendoor.vercel.app/#/pagination)
- [Accordion](https://design-opendoor.vercel.app/#/accordion)
- [Dropdown menu](https://design-opendoor.vercel.app/#/dropdown)
- [Table](https://design-opendoor.vercel.app/#/table)
- [Date picker](https://design-opendoor.vercel.app/#/date-picker)
- [Loaders](https://design-opendoor.vercel.app/#/loaders)

## Voice
- [Voice & tone](https://design-opendoor.vercel.app/#/voice)

## Machine-readable data
- [tokens.json](https://design-opendoor.vercel.app/tokens.json): all ~245 design tokens with values, descriptions, Figma paths, CSS vars, JS paths.
- [llms-full.txt](https://design-opendoor.vercel.app/llms-full.txt): full concatenated content of every page.