Files
ADS3-Design-System/README.md
Richie f4fd1fc04b Rebrand to ADS 3.0 Design System and add DESIGN.md component reference
Convert from Research Synthesiser-specific project to general-purpose ADS 3.0
design system intended to be forked for downstream applications. Add DESIGN.md
following Google Labs spec as machine-readable reference for AI coding agents.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-05-22 09:59:02 +10:00

1.1 KiB

ADS 3.0 Design System

A React component library implementing the ADS 3.0 (Adaptive Design System) design language. Built with React 19, TypeScript, Tailwind CSS v4, and Storybook 10.

Getting Started

npm install
npm run storybook    # Component development at localhost:6006
npm run dev          # Vite dev server

Architecture

  • Tokens — Design tokens in src/tokens/tokens.css as a Tailwind v4 @theme block
  • Atoms — Single-purpose elements (Button, Input, Badge, etc.)
  • Molecules — Small compositions (Alert, Dialog, Card, Accordion)
  • Organisms — Page-level regions (AppShell, TabBar)

Usage as a Base

This repo is designed to be forked for specific applications. Fork it, then build your application screens and domain logic on top of the shared component set.

Tech Stack

Tool Purpose
React 19 UI framework
TypeScript (strict) Type safety
Tailwind CSS v4 Utility-first styling via CSS-first config
Storybook 10 Component development and documentation
Vite Build tooling