Press Space to flip ⇄
seedflip
Archive
Mixtapes
Go Pro
Sign in
πŸ”’slate.design
Slate
104 design seeds. One button. Zero design skills required.

Your product works. Now make it beautiful.

SeedFlip gives you curated design seeds β€” fonts, colors, shadows, the works β€” applied to a real page in one click. Export as CSS, Tailwind, shadcn/ui, or a complete DESIGN.md your AI agent actually understands. Or plug it straight into your editor with the MCP server.

β€œConsider me flipped.”

β€” @nikkimitss, Passive Studios

Flip β†’
Watch it work ↓

Works with your stack

104
CURATED SEEDS
98
PREMIUM FREE FONTS
7
EXPORT FORMATS
Aa
Real type pairings.
Google Fonts loaded live. Heading + body combos that actually work together β€” weights, spacing, and scale already dialed in. Not a font picker. A font decision.
β—‘
Complete color systems.
Background, surface, text, muted, accent, accent-soft, borders, gradients. Every seed has 10+ coordinated tokens. Not five swatches on a mood board. A system.
{ }
Ship-ready exports.
CSS Variables. Tailwind Config. shadcn/ui theme. IDE rule files. Or connect the MCP server and let your agent pull seeds directly. Seven formats. Zero guesswork.
β€œ

β€œAI gave every developer the power to build. It did not give them the power to design. The code was never the bottleneck. The design was. It still is.”

CURRENT SEED TYPOGRAPHY
Inter
Every seed pairs a heading and body font that actually belong together. Weights, spacing, and scale β€” already decided. You just flip.
LOCK & FLIP
Keep what you love. Flip the rest.
Lock any category β€” type, palette, shape, or atmosphere β€” and flip everything else. Thousands of combinations from 104 curated seeds. PRO
THE LAB
Extract the DNA.
Every way to take your seed home. CSS Variables. Tailwind Config. shadcn/ui theme. IDE rule files for Cursor, Claude, and Windsurf. Or connect the MCP server and let your agent pull seeds on demand.
THE ARCHIVE
104 seeds. All killer. No filler.
Browse every design seed in the collection. Dark, light, neon, editorial, brutalist, minimal β€” each one hand-curated with real Google Fonts and a full DESIGN.md. Your daily flip lands in your inbox every morning.
β€œ

I described the same design to Claude four different times and got four completely different results. Not one of them looked right. The problem was never my prompting. I didn’t have a design seed. I had adjectives. SeedFlip gave me the actual values. First try. Done.

J
Jamie K.
Indie Hacker
β€œ

My cofounder finally said it out loud. β€œThis looks like every other app on Product Hunt.” He was right. Same zinc palette. Same Inter font. Same everything. Pulled a SeedFlip seed into our Tailwind config and the next build looked like a different company made it.

P
Priya S.
Technical Cofounder
β€œ

I’ve shipped six projects and every single one looked like a developer made it. Because one did. Plugged the MCP server into Cursor, told it to pull something editorial and warm. Twenty minutes later I had a product I’d actually screenshot. No designer. No Figma file. Just the right inputs.

M
Marcus C.
Design Engineer

Simple pricing.

Free gets you flipping. Pro gets you shipping.

Free
$0
forever
βœ“ Unlimited flips
βœ“ 104 curated seeds
βœ“ CSS Variables export
βœ“ CLI + MCP server
βœ“ Edit mode
βœ“ Full Archive access
Start Flipping β†’
Just your email. That's it.
Pro
$19/mo
cancel anytime
Everything in Free, plus:
βœ“ Lock fonts, colors, shape & atmosphere
βœ“ DESIGN.md export
βœ“ Tailwind + shadcn/ui exports
Get Pro β†’
DESIGN.md is a complete design system document. Creative direction, exact tokens, and implementation code. Drop it in your repo and your AI builds to spec.

You're one flip away from looking like you hired a designer.

104 curated design seeds. Real fonts. Real color theory. AI-ready prompts that actually work. No Figma file. No design committee. No three-week sprint to pick a gray.

Flip β†’
SEED
Slate
VIBE
Intelligent tools quiet power
BEST FOR
AI-powered productivity tools with minimal chromedeveloper IDE companion panels and settingssearch and command interfaces with keyboard navigationemail client dark-mode interfaces
01Inter at medium 500 weight creates subtle confident hierarchy
02neutral dark gray avoids any color bias in the background
03standard blue accent is calm and universally understood
04border ring at 50% is more important than shadow on dark bg
0510px radius feels current without being trendy
Skip if:β€’ your brand needs bold visual personality. Inter at medium 500 weight on neutral gray is maximum restraintβ€’ your product targets creative professionals. the quiet dark aesthetic deliberately suppresses visual energyβ€’ you need warm consumer-friendly onboarding. the neutral deep float shadows feel purely functional not inviting
104 design seeds. One button. Zero design skills required.

Your product works. Now make it beautiful.

SeedFlip gives you curated design systems β€” fonts, colors, shadows, the works β€” applied to a real page in one click. Export as CSS, Tailwind, or a complete DESIGN.md your agent actually understands.

β€œConsider me flipped.”

β€” @nikkimitss, Passive Studios

Flip β†’
Watch it work ↓

Works with your stack

104
CURATED SEEDS
98
PREMIUM FREE FONTS
7
EXPORT FORMATS
Aa
Real type pairings.
Google Fonts loaded live. Heading + body combos that actually work together β€” weights, spacing, and scale already dialed in. Not a font picker. A font decision.
β—‘
Complete color systems.
Background, surface, text, muted, accent, accent-soft, borders, gradients. Every seed has 10+ coordinated tokens. Not five swatches on a mood board. A system.
{ }
Ship-ready exports.
CSS Variables. Tailwind Config. Or a complete DESIGN.md that tells Cursor exactly what to build. Paste it. Watch it materialize. Take all the credit.
β€œ

β€œEvery AI app has the same auth flow, the same Stripe checkout, and the same shadcn components. Design is the last unfair advantage you haven't used yet.”

CURRENT SEED TYPOGRAPHY
Inter
Every seed pairs a heading and body font that actually belong together. Weights, spacing, and scale β€” already decided. You just flip.
LOCK & FLIP
Keep what you love. Flip the rest.
Lock any category β€” type, palette, shape, or atmosphere β€” and flip everything else. Thousands of combinations from 104 curated seeds. PRO
THE LAB
Extract the DNA.
Three ways to take your seed home. CSS Variables for purists. Tailwind Config for the utility-class faithful. Or DESIGN.md. A complete design system document your AI agent can follow from the first component. Paste it into Cursor. Watch a styled site materialize.
THE ARCHIVE
104 seeds. All killer. No filler.
Browse every design system in the collection. Dark, light, neon, editorial, brutalist, minimal β€” each one hand-curated with real Google Fonts and a full DESIGN.md. Your daily flip lands in your inbox every morning.
β€œ

I was mass-prompting Claude at 4am trying to describe the β€œvibe” I wanted. Turns out the vibe was 17 CSS variables I didn’t know existed.

J
Jamie K.
Indie Hacker
β€œ

Sent a SeedFlip export to my cofounder. His response was β€œwhy does our app look like a real company now.” We launched that week.

P
Priya S.
Technical Cofounder
β€œ

Tried the β€œmake my app look like Super Unicorn X, Y, Z” prompts. Didn’t work. This did. Wish I found it 12 projects ago.

M
Marcus C.
Design Engineer

Simple pricing.

Free gets you flipping. Pro gets you shipping.

Free
$0
forever
βœ“ Unlimited flips
βœ“ 104 curated seeds
βœ“ CSS Variables export
βœ“ Full Archive access
Start Flipping β†’
Pro
$19/mo
cancel anytime
Everything in Free, plus:
βœ“ Lock fonts, colors, shape & atmosphere
βœ“ DESIGN.md export
βœ“ Tailwind + shadcn/ui exports
Get Pro β†’

You're one flip away from looking like you hired a designer.

104 curated design seeds. Real fonts. Real color theory. AI-ready prompts that actually work. No Figma file. No design committee. No three-week sprint to pick a gray.

Flip β†’

Slate is the tool that gets out of your way. Neutral dark gray. Inter at medium weight. Standard blue accent. Nothing in this seed is trying to impress you. Everything in it is trying to work.

That sounds boring. It's the opposite of boring. It's what happens when every design decision is made for the person using the tool instead of the person showing it to investors. The neutral background has no color bias.

The medium-weight type creates a subtle hierarchy that feels confident, not loud. The blue accent is calm and universally understood.

If you're building SaaS, dev tools, AI products, or productivity apps, Slate is the seed for products that people use eight hours a day. It confirms what serious builders already suspect: the best interfaces are the ones you forget you're looking at.

The DNA.
Why Slate works. Every decision, unpacked.
TYPOGRAPHY
Inter
Weight: 500
?
Β·Spacing: -0.01em
?
Β·Inter

Inter at medium weight for headings. Not bold. Medium. That's the intentional choice. It creates a subtle hierarchy that feels intelligent and effortless. This is the aesthetic where the interface disappears so the content can appear.

Regular weight for body text. The difference between medium and regular is slight. That's the point. You don't need typographic fireworks when the interface serves the work. The hierarchy exists. It just doesn't announce itself.

PALETTE
background#111111
surface#191919
text#E5E5E5
muted#909090
accent#3B82F6
border#2E2E2E
?
Chart
?
Status
?
text / bg15.0:1 AA
?
accent / bg5.1:1 AA
?

Neutral dark gray. No warm undertones. No cool tints. Pure neutral. This background works with everything you put on it because it has no opinion of its own.

Standard blue accent. Clean, trustworthy, universally understood. On this dark neutral background, it reads as calm and focused. Not exciting. Focused. Soft white text. Mid-gray muted text. Subtle dark borders. Every color is a shade of gray except the one thing that needs to stand out. That's systematic thinking.

SHAPE
6px
10px
14px
?
Modern and balanced radius that feels current without being trendy. The shapes won't look dated in two years. They don't look cutting-edge now. That's the sweet spot for tools people use daily. Form follows function. Nothing more.
ATMOSPHERE
sm
?
md
?
Neutral deep float
?
Shadows paired with a border ring. On this dark background, the border ring is more important than the shadow itself. Depth comes from the combination of subtle surface color shifts and border visibility. Clean. Layered. Functional. No personality in the depth. Personality is for the product, not the container.
Rip This.
Export Slate as code, tokens, or a DESIGN.md for your AI agent.
/* Typography */
--font-heading: 'Inter', sans-serif;
--font-body: 'Inter', sans-serif;
--font-heading-weight: 500;
--letter-spacing: -0.01em;
/* Palette */
--color-bg: #111111;
--color-surface: #191919;
--color-text: #E5E5E5;
--color-text-muted: #909090;
--color-accent: #3B82F6;
--color-accent-soft: rgba(59,130,246,0.1);
--color-border: #2E2E2E;
/* Shape */
--radius: 10px;
--radius-sm: 6px;
--radius-xl: 14px;
/* Depth */
--shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 0 1px rgba(46,46,46,0.5);
--shadow-sm: 0 2px 8px rgba(0,0,0,0.3);

Drop your email to rip the full DNA.

Tailwind, shadcn/ui & DESIGN.md are Pro exports. Get Pro β†’
Share This.
Send Slate to your team or post it to X.
X PREVIEW
Y
You@youΒ·just now
Vibe coded my app in days. Designed it in seconds. Flip. Rip. Ship. seedflip.co/seed/slate
Inter
ABCDEFGHIJKLM
abcdefghijklm
0123456789 !@#
Body: Inter
✦ seedflip.co
#111111
#191919
#3B82F6
Aa
radius: 10px Β· Neutral deep float
seedflip.co
3
12
47
1.2K
IG PREVIEW
Typography
Inter
Intelligent tools quiet power
in Inter 13pt
500 / -0.01em
Colors
Accent
#3B82F6
Surface
#191919
Text
#E5E5E5
Border
#2E2E2E
Shape & Atmosphere
Heading component
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor.
Action button
Slate
Inter + Inter
seedflip.co
Typography
Inter
Intelligent tools quiet power
in Inter 13pt
500 / -0.01em
Colors
Accent
#3B82F6
Surface
#191919
Text
#E5E5E5
Border
#2E2E2E
Shape & Atmosphere
Heading component
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor.
Action button
Slate
Inter + Inter
seedflip.co
Typography
Inter
Intelligent tools quiet power
in Inter 13pt
500 / -0.01em
Colors
Accent
#3B82F6
Surface
#191919
Text
#E5E5E5
Border
#2E2E2E
Shape & Atmosphere
Heading component
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor.
Action button
Slate
Inter + Inter
seedflip.co
LINK
SIMILAR SEEDS
Abyss
Premium darkness
Inter + Inter
Remedy
Care in every pixel
Inter + Inter
Midnight
Financial data under glass
Inter + Inter
Command
The launcher. Dark, fast, surgical.
Inter + Inter
KEEP READING
CSS Variables Color System→CSS Variables vs Tailwind Config vs shadcn Theme→Linear Design System→