The design system generator for developers
You care about design but don't have 4 hours to tweak Tailwind colors. Foundry generates a complete design system in seconds: colors, typography, spacing, and pre-configured shadcn/ui components.
No credit card required for demo. Unlimited preview, limited export.
30s
to generate
100+
color tokens
6
export formats
0
design skills needed
Why Foundry
You're a developer, not a designer. But you still want your app to look professional. Foundry bridges that gap.
Hours tweaking colors
Done in 30 seconds
Stop endlessly adjusting hex codes. Get a harmonious palette instantly based on color theory.
Colors that clash
Always balanced
HSL-based generation ensures your primary, secondary, and accent colors work together.
Manual config files
Ready to paste
Export globals.css and tailwind.config.ts. Copy, paste, done.
Generic UI components
Pre-styled shadcn/ui
Get a complete shadcn/ui component library styled to match your brand.
No documentation
PDF design guide
Export a professional design system PDF to share with your team or clients.
Light mode only
Auto dark mode
Every design system comes with intelligently generated dark mode tokens.
Preview
A complete design system with colors, typography, spacing, and radius. Ready for shadcn and Tailwind.
Display heading
Body text with comfortable reading line-height.
const code = "monospace"
@import 'tailwindcss';
@theme inline {
--color-primary-500: #6366F1;
--color-primary-600: #4F46E5;
--color-neutral-50: #FAFAFA;
--color-neutral-100: #F4F4F5;
--color-neutral-800: #27272A;
--color-neutral-900: #18181B;
--color-success: #22C55E;
...What you get
8 palettes × 11 shades. Primary, secondary, accent, neutral, plus full semantic colors with proper WCAG contrast.
Font pairings tuned to your industry. Full type scale with line height and letter spacing, no guesswork.
A consistent 4px-based scale from 0 to 32. Ready-to-use Tailwind tokens for padding, margin, and gap.
Sharp, soft, or rounded. Each tuned to a coherent radius scale across components.
Copy-paste globals.css and tailwind.config.ts. shadcn-compatible tokens. Works in any Next.js project.
npx foundry@latest apply --token=xxx. Install your customized shadcn components in one line.
:root {
--primary-500: #0A84FF;
--primary-600: #0066D6;
--neutral-950: #1D1D1F;
--accent-500: #FF375F;
--radius: 0.625rem;
--font-sans: 'Inter', system-ui, sans-serif;
--font-heading: 'Inter Display', system-ui, sans-serif;
}Pricing
Most design tools charge $20+/month. Foundry gives you everything for less than a coffee.
Try before you buy. Full preview, no export.
Pay once, own it forever. Perfect for side projects.
For agencies and indie hackers shipping multiple projects.
Already bought One-Time? Upgrade to Monthly for just $4.00 within 7 days.
All plans include dashboard access to manage and re-export your design systems.
Trusted by developers building
Contact
Question about a plan, feedback, or a bug? Send a message and we'll get back to you.