Skip to content
ANISH
SINGH.
0%
Back to Refinery
designDS

Design Systems Library.

Stop generating the same generic AI interface. Pick a design system. Paste the prompt. Ship something that looks intentional.

Reel coming soon

Design Systems Library

What this fixes
  • Every AI-generated UI looks the same
  • No visual consistency across pages
  • Generic rounded corners and purple gradients
  • Can't describe what you want to an AI

How to use this

Pick a design system below. Click "Copy Design Prompt". Paste it at the start of your Claude Code session or add it to your CLAUDE.md. Every component Claude generates will follow that system — buttons, cards, colours, spacing, typography. One paste. Consistent output.

The library

Browse the design systems below. Each one includes a full prompt you can copy directly into any AI coding tool.

The library

Minimal Editorial

Warm, quiet, typographically rich — a magazine that happens to be a website.

Sharp
#FAF8F5
#F2EDE7
#1A1A1A
#B8543F
#8A8580
#E5E0DA
Display: Playfair DisplayBody: Inter
Radius: 0pxSpacing: 8px base, 64–120px section padding

Modern SaaS

Clean, confident, conversion-focused — built to ship and sell.

8px
#FFFFFF
#F8F9FC
#0F172A
#6366F1
#64748B
#E2E8F0
Display: InterBody: Inter
Radius: 8pxSpacing: 8px base, 48–96px section padding

Swiss Design

Strict, rational, grid-obsessed — information design as art.

Sharp
#FFFFFF
#F5F5F5
#000000
#E63946
#6B6B6B
#DDDDDD
Display: InterBody: Inter
Radius: 0pxSpacing: 8px base, strict 8-column grid

Neo Brutalist

Loud, raw, unapologetic — breaks every "clean UI" rule on purpose.

Sharp
#FFFFFF
#FFE962
#000000
#FF5C5C
#3B82F6
#000000
Display: Times New RomanBody: system-ui
Radius: 0pxSpacing: 16px base, deliberately uneven

Luxury

Dark, quiet, expensive — every element breathes.

Sharp
#0C0C0C
#161616
#E8E4DD
#C9A96E
#6B6560
#2A2825
Display: Cormorant GaramondBody: Montserrat
Radius: 0pxSpacing: 8px base, 96–160px section padding

Y2K Revival

Glossy, gradient-soaked, playful — digital maximalism with millennial nostalgia.

16px
#F0E6FF
#FFFFFF
#2D1B69
#FF69B4
#00D4FF
#D8C4FF
Display: Space GroteskBody: Inter
Radius: 16pxSpacing: 8px base, 48–80px section padding

Clean Enterprise

Professional, data-dense, accessible — the dashboard that the CFO trusts.

4px
#FAFBFC
#FFFFFF
#1F2937
#2563EB
#6B7280
#E5E7EB
Display: IBM Plex SansBody: IBM Plex Sans
Radius: 4pxSpacing: 4px base, compact 32–64px section padding

Soft Minimal

Quiet, warm, calming — design that does not compete with the content.

12px
#FAFAF8
#FFFFFF
#374151
#8B9CF7
#9CA3AF
#F3F0EB
Display: DM SansBody: DM Sans
Radius: 12pxSpacing: 8px base, 64–96px section padding

Developer Tool

Dark, dense, terminal-native — the UI a developer builds when they only have the weekend.

4px
#0D1117
#161B22
#C9D1D9
#39D353
#8B949E
#30363D
Display: InterCode: JetBrains Mono
Radius: 4pxSpacing: 4px base, compact 24–48px section padding

Premium Dark

Near-black canvas, one bold accent, sharp edges, editorial authority — built to impress.

Sharp
#0A0A0A
#141414
#F0EDE8
#C8F135
#999999
#222222
Display: Space GroteskBody: Inter
Radius: 0pxSpacing: 8px base, 64–128px section padding
Next up

Want more resources?

Follow me on Instagram. New reels every week with a keyword in the caption.

Browse all resources