Tidal Design System

A shadcn-style component library and design token system — Lilac brand, Söhne type, light + dark modes — sourced from Figma.

What is Tidal?

Tidal is the single source of truth for how Tidal products look and feel. It ships three layers:

  • Design tokens — exported from Figma in DTCG format and compiled to CSS variables, a Tailwind preset, and a JSON snapshot.
  • React components — accessible, composable, and wired to the tokens.
  • This docs site — browsable by humans, ingestible by AI agents.

For humans

  1. Install the packages: pnpm add @tidal-ds/react @tidal-ds/tokens
  2. Import the tokens CSS once in your app: import "@tidal-ds/tokens/css"
  3. Point Tailwind at the preset (see Installation).
  4. Browse the Components and Tokens sections. Each example has a copy button.

For agents

If you're an LLM or agent, prefer these endpoints over scraping HTML:

  • /llms.txtManifest of pages with one-line descriptions.
  • /llms-full.txtEvery doc page + DESIGN.md + FIGMA_SYNC.md concatenated.
  • /design.mdRules for writing code against this system (token taxonomy, forbidden patterns, component checklist).
  • /figma-sync.mdWorkflow for syncing Figma changes into the repo.

Every page also has a Copy page button that yields the same markdown a human can paste into your context.

Source of truth

  • Figma: Tidal Design System
  • Tokens export (DTCG): /design-tokens/
  • Component source: packages/react/src/components/