12 files · Free
DESIGN.md for your coding agent
A DESIGN.md holds a design system in one file: the exact colours, type, spacing and corners, and the rules for using them. Put one at your project's root and point Claude Code, Cursor, v0 or Lovable to it, so what it builds keeps the look.
From the templates
- CiketoTemplateLogistics and shipping company website: a warm light grey page, white cards, black type, dark photo covers and a single Orange accent.Inter · 11 colours · 12 text styles
- FinditTemplateReal estate website: a white page, pale grey cards, black type and black pill buttons, with Yellow only for stars and markers.Manrope · 13 colours · 15 text styles
- KalmeTemplateCalm, minimal digital marketing agency website: a light grey page, square white cards, black type and black pill buttons, with one small red accent dot.Inter · 9 colours · 14 text styles
- Marai NeesuTemplatePersonal portfolio website: a light grey page, faint grey cards, near-black type and pill buttons, with an orange Accent for hovers.Manrope · 7 colours · 16 text styles
- NitipTemplateDigital marketing agency website: a light grey page, black type, black pill buttons and square cards, with no colour accent in the design.Inter · 11 colours · 14 text styles
- SemonoTemplateCorporate and business consulting website: a light grey page, white cards, black type and a single Lime accent.Inter · 12 colours · 13 text styles
- TitenTemplateConstruction and architecture firm website: a warm cream page, square black type and buttons, and a single burnt-orange Accent.Plus Jakarta Sans · 16 colours · 12 text styles
- TustelTemplatePortfolio website for photographers and creative designers: a warm light grey page, black type, square boxes and an Orange accent that appears on hover.Inter · 9 colours · 13 text styles
The page blocks’ sample themes
- DefaultBlocks theme · light and darkDefault, a sample theme of Framebrick Blocks: shadcn/ui neutral, Geist, 0.625rem radius — how every block ships.Geist · 18 colours · 9 text styles
- EditorialBlocks theme · light and darkEditorial, a sample theme of Framebrick Blocks: warm paper, brick red, serif headings, roomy spacing and small radius.Newsreader · Geist · 18 colours · 9 text styles
- MonoBlocks theme · light and darkMono, a sample theme of Framebrick Blocks: cool grays, electric blue, monospaced headings, square corners and dense spacing.Geist Mono · Geist · 18 colours · 9 text styles
- SoftBlocks theme · light and darkSoft, a sample theme of Framebrick Blocks: lavender tints, violet, rounded grotesque headings and large radius.Bricolage Grotesque · Geist · 18 colours · 9 text styles
Agents can fetch a template’s file themselves with the Framebrick MCP server (get_design_md), or read the raw file at /templates/<slug>/design.md. How to use DESIGN.md.
Be the first to know
Get new templates and components first
One short email when we release a template or a free component. No spam — unsubscribe anytime.
We use your email only for Framebrick updates. Privacy policy
