polyxd

Studio · free for one workspace

Set up your design system once. Use it everywhere.

Bring in your tokens, check them, design with them, ship them.

Try StudioSee how it works

  • Import
  • Check
  • Design
  • Export
The Continue button, measured: its padding, corner radius, label type, background, border and shadow, each pointing to the token it uses. BUTTON · PRIMARY · 1.5× Continue 28 button.padding.x 10 button.padding.y radius.control 10 Aatype.label 16/24 · 600 action.primary #2F5BEA border.strong 1 shadow.raised

The problem

One button, built four ways.

  • Design file Continue
    #2F5BEA
    10
    24
    Inter 600
  • CSS Continue
    #2F5BEA#2F5BE9
    106
    2434
    Inter 600
  • iOS Continue
    #2F5BEA#3F6EF5
    1018
    24
    Inter 600SF 500
  • Android ContinueCONTINUE
    #2F5BEA#2448C0
    104
    noneshadow
    Inter 600CAPS

Colour, corners, padding, type. All drifted.

01 · Import

Every token, every tier.

  • npm
  • Tarball
  • Tokens Studio
  • W3C DTCG
  • CSS variables
  • 12 templates
  • 150
  • 32
  • 28
  • 12
  • 8
  • 6
  • 8
  • 3 modes
  • 41 aliases
  • 2 broken references

02 · Check

Every token earns a role.

  • 43Colour
  • 22Size, space
  • 8Type
  • 5Numbers
  • 2Shadow
  • 7Motion

03 · Tune

Change a token. Everything follows.

One-slider Rebrand is for the Mono and Blank templates. Every other system is tuned token by token.

04 · Design

Design the screens that matter.

  1. Form
  2. Choice · Who to
  3. Amount
  4. Text · Reference
  5. Summary
  6. Button · Continue

05 · Export

Out as code, for every platform.

  • CSS
    --pxd-color-action-primary-background: #C32273;
--pxd-radius-control: 999px;
--pxd-space-inset-default: 20px;
  • Swift
    static let actionPrimary = Color(0xC32273)
static let radiusControl = 999.0
static let spaceInset = 20.0
  • Compose
    val ActionPrimary = Color(0xFFC32273)
val LabelDefault = TextStyle(
  fontSize = 16.sp, fontWeight = W600)
  • W3C DTCG
    "primary": { "$type": "color",
  "$value": "{brand.600}" }
  • Tailwind
    colors: { "action-primary":
  "var(--pxd-color-action-primary-background)" }
  • Style Dictionary
    "radius": { "control":
  { "value": "999px" } }

npx polyxd studio push · from CI, each release a new version

06 · Deliver

In the product, by key.

GET /api/w/acme/screens/send
Authorization: Bearer ••••
→ 200 · version 12
  • DSDesign system
  • DEDesigner
  • PMProduct
  • ENEngineer
  • VIViewer

What you get.

  • Every tierPrimitive, semantic, component. Every type.
  • 87 rolesThe contract every screen reads.
  • 0 failingNothing publishes while contrast fails.
  • 6 formatsCSS, DTCG, Tailwind, Style Dictionary, Swift, Compose.
  • By keyProducts fetch published screens.
  • FreeFor one workspace. Open source to run yourself.

13 design systems you already know

12 templates to start from

Bring your design system home.

Try Studio, freeRun it yourself

Coming next, not shipped: reviews, releases, insights. Roadmap