01Open source

Design with
full visibility.

tracable is the open-source design and prototyping tool that exposes structure and logic, so teams can build better products.

Sandbox · no signup · kept for 7 days

License
OSS · NC
Hosting
Self or us
Price
Free
tracable · Brand Kit v1.001
02Inspectability

See every
decision.

tracable makes the structure behind your product explicit, so you can design, understand, and ship with confidence. Every component, every token, every connection — visible.

  • Every layer is named
  • Every value is a token
  • Every change is traceable
System · Connections02
03Systems

Build systems,
not screens.

Create reusable components, manage variables, and keep everything in sync across your product. One source of truth — for design and for code.

Components
Versioned, typed
Variables
Tokens you can ship
Frames
Composed, not painted
States
Default, hover, active
Componentsv1.0
Preview · Button
PrimarySecondary
color-bg#FFFFFF
color-fg#6D5DF6
radius8px
space-x16px
System · Components03
Brand in Action · Digital04
05Principles

Structure
+
Expression.

Hold the tension between system and surface. If one dominates, the work fails.

  • 01

    Clarity

    Nothing hidden. Every layer, token, and decision visible.

  • 02

    Structure

    Systems over screens. Components are the source of truth.

  • 03

    Precision

    Every pixel has a reason. Every value has a name.

  • 04

    Openness

    No black boxes. Source on GitHub. Self-host or use ours.

06Graphic language

Paths, nodes, layers, fragments.

Four primitives. Every visual in tracable is built from them — never decoration for its own sake.

  • Paths

    Vector lines with anchor points. They show how things connect.

  • Nodes

    Connection points. Where decisions meet.

  • Layers

    Offset duplicates. Versions, hierarchy, state.

  • Fragments

    Cropped UI. The system grounded in real product.

See every decision.

Open the editor or read the source. Both are free.

Brand · Principles05