astro.build
Analyse Astro's design system. a palette of 12 colours including #D83333, #4AF2C8, and #54B9FF and ui-sans-serif and Inter 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.
Colour palette
#D83333#4AF2C8#54B9FF#F2F6FA#3178C6#E5E7EB#060913#2C2C2C#343841#858B98#BFC1C9#FFFFFFThis 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.
Typography
Font:
ui-sans-serif, Inter, ui-monospaceBase size: 200
Scale:
200, 48, 36, 30, 20, 18What's included
- 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
Downloads
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
Recent extractions
15 hours ago, Indore
Also popular