tavus.io
Analyse Tavus's design system. a palette of 12 colours including #FFFDFB, #EAE5DE, and #F7F4EF and Suisse Intl and Fk Raster Grotesk Compact Blended typography. Download the ready-made Tailwind config, Figma variables, shadcn/ui theme, React theme, W3C design tokens, and CSS custom properties, and drop them into your own project in minutes. Feed them straight into Claude, Cursor, or any coding agent.
#FFFDFB#EAE5DE#F7F4EF#38F261#FFB4C5#FF6183#140206#000000#28292A#333333#484748#5E5850This is a short summary of the brand and most-used colours. The full download captures every colour extracted from the live DOM (usually 50–100 unique values), all named and tokenised across Tailwind, Figma, CSS variables and design tokens.
Suisse Intl, Fk Raster Grotesk Compact Blended, sans-serif80.093, 78.2436, 62.3103, 44, 41.2557, 35.5653- Tailwind config: drop into tailwind.config.js
- Figma variables: import directly into Figma
- shadcn theme: paste into globals.css
- React theme: Chakra / Stitches compatible
- W3C design tokens: any token tooling
- Full CSS variables
- Visual HTML preview
Preview Free
See the extracted design system before exporting the full version.
- CSS variables
- HTML visual report
- Tailwind config
- Figma variables
- shadcn theme
- React theme
- W3C design tokens
Full Export $3
Drop this design straight into your stack.
- Tailwind config
- Figma variables
- shadcn theme
- React theme
- W3C design tokens
- Everything in Preview