1. Foundations

    The decisions that give the system its character and limits.

    Colour ↗

    From the actual implementation / contract

    cotton
    Page ground
    ink
    Text, rules, primary button
    teal
    See · the UX Ops lead · the Academy · articles · holding together
  2. Tokens

    Named roles for colour, type, space and motion. Change the source once.

    Component tokens ↗

    From the actual implementation / contract

    1. color.palette.greige.900Base primitive
    2. color.text.default → --inkSemantic role · light mode
    3. --identity-sticker-inkComponent alias
  3. Atoms

    Small reusable elements with their own states, rules and accessibility.

    Button ↗

    From the actual implementation / contract

    Inspect Button
  4. Molecules

    Elements working together for one focused task.

    Call to action pair ↗

    From the actual implementation / contract

    Primary action Alternative
  5. Organisms

    A complete section of interface, composed from smaller elements.

    Header ↗

    From the actual implementation / contract

    View the rendered specimen

    Static specimen. Inspect the contract for its interaction requirements.

  6. Templates

    Layout and content slots that establish a repeatable page structure.

    Hero ↗

    From the actual implementation / contract

    View the rendered specimen

    Static specimen. Inspect the contract for its interaction requirements.

    The next level of your design system.

    Loom turns the system you have, or the one you are missing, into clear, governed decisions that your teams and your AI tools follow. Your product keeps its look. Your people stay in control, with expert help and agents doing the routine work.

    Book a conversation Start with a free health check
    jobsTitle
    The owner-approved line above the jobs band (See it. Shape it. Govern it. Run it.).
    title · required
    The headline (owner-approved).
    lede · required
    The promise.
    actions · required
    The CtaPair.
    live
    The Drift hero panel.
    jobs · required
    The four jobs band.
  7. Pages

    Templates composed with real content and a checked sequence.

    Landing page ↗

    From the actual implementation / contract

    1. herorequired
    2. problem-sectionoptional
    3. lead-sectionoptional
    4. flow-sectionoptional
    5. job-sectionoptional · repeatable
    6. proof-sectionoptional · repeatable
    7. roles-sectionoptional
    8. founder-sectionoptional
    9. roadmap-stripoptional
    10. cta-sectionrequired

Smaller elements compose into larger structures. Dependencies can skip levels: a template can use a button directly. These are composition levels, separate from organisation and brand inheritance.

Actual composition dependencies

A separate model: the operating sequence

The source field guide also describes five stages of work. These describe how a decision becomes action; they are separate from component composition and brand inheritance.

  1. SignalObserve a specific need or discrepancy.
  2. PatternIdentify what recurs across those observations.
  3. DecisionRecord the chosen response and its reason.
  4. RuleDefine the constraint that future work follows.
  5. ActionApply the decision and check the outcome.