Design systems for AI agents.
Pick a complete design system for your website or app (colors, fonts, type scale, corner radius, and spacing, in light and dark) and give it to Codex or Claude Code in one step: as a DESIGN.md file, a shadcn theme, or a single prompt.
24 design systems
- PaperWebCalm, editorial and readable, like a well-set book page.Headings in Source Serif 4
- SwissWebBlack, white and one signal red on a strict grid.Headings in Archivo
- LedgerWebA dense, dark interface for numbers, with a terminal-amber accent.Headings in IBM Plex Sans
- MonoWebPlain white pages, Geist type and one cobalt blue, built for docs and dev tools.Headings in Geist
- AtelierWebIvory, ink and a refined serif, like a fashion house lookbook.Headings in Cormorant Garamond
- NoirWebBlack, bone white and a huge serif. The work is the only color.Headings in Instrument Serif
- HarborWebNavy, white space and steady structure for serious B2B products.Headings in Plus Jakarta Sans
- NordicWebMuted blues, soft greys and quiet confidence for productivity tools.Headings in Manrope
- ClinicWebCalm teal, clear type and plain language for health websites.Headings in Source Sans 3
- TerraWebMoss, linen and clay for brands that work close to the land.Headings in DM Serif Display
- ChalkWebBright, rounded and encouraging, like a good classroom.Headings in Nunito
- PopWebThick black outlines, hard shadows and lemon yellow. Loud on purpose.Headings in Unbounded
- StrideAppBig condensed numbers and an energetic orange for movement apps.Headings in Barlow Condensed
- PantryAppWarm, friendly and appetizing, for food and ordering apps.Headings in Bricolage Grotesque
- CalmAppSoft sage, a gentle serif and room to breathe.Headings in Newsreader
- WalletAppClear balances, calm green and numbers you can trust.Headings in Manrope
- FocusAppA white page, one blue and nothing else between you and the task.Headings in Instrument Sans
- ChatterAppRound bubbles, a friendly teal and conversations front and center.Headings in Plus Jakarta Sans
- VoyageAppFull-bleed photos, ocean blue and a serif that feels like a postcard.Headings in DM Serif Display
- BoutiqueAppEdge-to-edge photos, a Bodoni serif and black on white, like a shop window.Headings in Bodoni Moda
- QuestAppStreaks, XP and chunky buttons that make practice feel like a game.Headings in Nunito
- CareAppOne clear task per screen, for patients who just want to get it done.Headings in Source Sans 3
- VinylAppCover art first, a hot pink play button and a dark room to listen in.Headings in Syne
- HearthAppWarm amber light on a dark, quiet home screen.Headings in Outfit
What’s in each design system
- Colors for light and dark mode, named by role the way shadcn and Tailwind name them: background, primary, muted, border, ring, and five chart colors. Every text color passes WCAG contrast on its background.
- Fonts and a type scale, from Google Fonts, with sizes, line heights, and letter spacing from display to small print.
- Corner radius, spacing, and shadows, plus a grid for websites, or touch targets, tab bar, and screen padding for mobile apps.
- Rules for using it: what it’s for, which components to build, and what to avoid, so the agent makes choices the system would make.
Three ways to use one
- Copy the prompt into Codex or Claude Code. It points the agent at the system’s plain-text DESIGN.md, which it saves in your project and follows for every screen.
- Download the DESIGN.md and put it in your project’s root yourself. See what DESIGN.md is and how to use it.
- Install the shadcn theme with one command, or paste the
globals.cssinto a Tailwind v4 project.
All 24 systems are also on GitHub, with their DESIGN.md files and shadcn themes: ummydev/design-md.
Web and app systems
Web systems are built for landing pages, marketing sites, documentation, and dashboards. App systems are built for phone screens: bigger touch targets, a bottom tab bar, and type sizes that read well on iOS and Android. Every system has its own look, picked to avoid the patterns that make AI-made interfaces look the same, such as purple gradients and glassmorphism.
Frequently asked questions
Are these design systems free?
Yes. You can copy, download, and use every design system in your own projects for free.
Do they work with AI tools other than Codex and Claude Code?
Yes. DESIGN.md is plain Markdown, so any agent that reads files in your project can follow it, and the shadcn theme works in any shadcn or Tailwind project.
Can I change a design system?
Yes. Edit the DESIGN.md or the CSS variables, or ask your agent to adjust them, for example to swap the main color for your brand color.