Page builder

Add, reorder, and edit blocks. The React on the canvas is generated from the same tree.

Add component

Northwind

Ship a consistent interface

A compact design system for product teams that need shared language, not another style guide that nobody opens.

Tokens

Uses the same tokens as the rest of the system.

Components

Uses the same tokens as the rest of the system.

Patterns

Uses the same tokens as the rest of the system.

Ready to assemble a page?

Add, reorder and tune blocks. The generated React stays in sync.

UI Foundry · Design system playground

Generated React

<Page>
  <Navbar
    title="Northwind"
    cta="Sign in"
  />
  <Hero
    heading="Ship a consistent interface"
    sub="A compact design system for product teams that need shared language, not another style guide that nobody opens."
    cta="Browse components"
  />
  <CardGrid
    one="Tokens"
    two="Components"
    three="Patterns"
  />
  <Cta
    heading="Ready to assemble a page?"
    sub="Add, reorder and tune blocks. The generated React stays in sync."
    cta="Copy page code"
  />
  <Footer
    note="UI Foundry · Design system playground"
  />
</Page>

Loading…