An AI-native design tool that ships React and Tailwind code. Fits AI design SaaS, design-to-code tools, dev-handoff platforms, and design-system landing page designs.
Design tokens
14 colors · 10 type stylesNear-black (#242424) primary on an off-white (#f5f5f5) canvas, set in Inter throughout. The highlights below are read from the Subframe DESIGN.md in the Pass bundle, which carries all 14 color tokens, 10 type styles and the full component rules.
Colors
- Primarynear-black
#242424 - Canvasoff-white
#f5f5f5 - Surfacepure white
#ffffff - Inknear-black
#171717
Type
- InterDisplayweights 500, 600, 700, 64 to 96px
- InterBodyweights 500, 600, 700, 16 to 18px
- Fragment MonoMonoweight 400, 18px
Radius
- sm 6px
- md 16px
- lg 24px
- full 9999px
Spacing
- xxs 4px
- xs 8px
- sm 12px
- md 16px
- lg 24px
- xl 32px
- xxl 48px
- section 96px
- hero 128px
Components
- Primary button
button-primaryPrimary buttons fill with near-black (#242424) and carry pure white (#ffffff) text, set in Inter 14px at weight 500, with 16px corners and 0px 20px padding.
- Card
pricing-cardCards sit on pure white (#ffffff), with 24px corners and 48px padding.
- Navigation
nav-barThe top navigation runs on off-white (#f5f5f5) with near-black (#171717) links, set in Inter 14px at weight 500.
Three ways to ship a Subframe-style UI.
Use in your AI builder, no-code tool, or CMS
Paste the DESIGN.md in and ask the tool to restyle your existing site to match this design, or start a brand new one from scratch with the same visual language.
Not affiliated with Subframe. All trademarks belong to their respective owners.
