Loomworks Brand Guide v0.15 The Complete System 2026-04-23 DUNIN7 — Miami

The whole system — foundations, parts, and motion.

v0.14's identity and components, now with the foundations (color tokens, spacing scale) made visible, the deferred components (date-and-time, rich text) specified at a working starting point, the mobile-pattern adaptations, and the motion system documented. The pre-v0.14 principle — defer until real surfaces need these — is relaxed in v0.15; conservative choices have been made where design decisions were required, and each choice carries a Discovery-record note so it can be walked back when real surface requirements arrive.

Part one — identity

The mark in condensed form. Two-part logo system — foundry wordmark for signatures, stamp mark for compact use — with the primary lockup and the full favicon set. The detailed specification (size ladders, clear space, environmental behavior, reductions, case forms, rule-weight scaling) lives in the logo-system document.

Identity 01 Foundry wordmark — primary Signature form
LOOMWORKS EST. 2026 — DUNIN7 — MIAMI
Identity 02 Stamp mark — light and dark Compact form · identical geometry
Light mode
Dark mode
Identity 03 Horizontal lockup Stamp + wordmark together
LOOMWORKS EST. 2026 — DUNIN7 — MIAMI
Identity 04 Favicon set Six scales · the stamp alone
64
48
32
24
16
16 dk
Identity 05 Two case forms — display and prose Mark vs word
LOOMWORKS
Display logotype · UC
Loomworks
Prose reference · Title case
"Operators begin in Loomworks by setting the seed."
Prose example · not shouting

Part two — composed contexts

Components in their natural settings, working together. Each context is a surface an Operator or reader would actually encounter. Below each one, annotations note which primitives are in use and how they behave.

Context 01 Shaping — active consideration list Where an Operator spends most of their time
Pricing strategy for the Q3 launch
Three voices · six closed · two open · seed amended 15 April
Considerations
Seed history
Voices
Provenance
8 total · filtered: 8
ID Consideration Voice State Opened
c-13 Middle-tier grandfather clause. Two voices — one proposing 12 months, one lifetime. Awaiting third voice. nia.h open 18 Apr
c-12 Tier names — categorical or numeric? Testing whether tiers should refer to customer type or be numbered. Closing soon. marvin.p open 17 Apr
c-11 Annual billing discount ratio. 15% annual discount held through testing with pricing panel. nia.h promote 16 Apr
c-10 Scope expanded to include international. The seed was updated — prior version retained. leon.k amend 15 Apr
c-9 Current tier naming conventions. Starter / Pro / Business held under review. marvin.p attest 14 Apr
c-8 Enterprise pricing opacity. Known departure from public-pricing default — reasoning logged. nia.h deliberate_exception 14 Apr
c-7 Pricing-page redesign budget. Raised above team scope. leon.k escalate 13 Apr
c-6 Free trial policy. Fourteen-day trial stands against new structure. marvin.p no_change 13 Apr

Primitives in use: breadcrumbs, room-switcher, tabs, text input, select input, ghost/iron buttons (small), table with hover and row-open state, state badges (7 variants + neutral open variant), mono-styled IDs and timestamps.

Behaviors worth noting: The open badge is a distinct form — solid press-ink, no dot — because an open consideration isn't a terminal state. State dots only appear on closed considerations. The primary action ("Open consideration") uses the iron-oxide button because it's the generative action of this surface; secondary and sort actions are ghost weight. The room-switcher shows all four rooms with dots in their atmospheric colors — the same system across every surface.

Context 02 Memory — archive browse Looking back across engagements
Memory · Static · All retained
Engagements related to pricing
promote 9 considerations
Partnership tier pricing — 2604
Grandfather-clause structure at 6 months held through Q2. Useful precedent for the current grandfather-clause consideration.
closed · 22 Jan 2026 · 2 voices
attest 14 considerations
Middle-tier retention analysis — 2609
Data showed middle-tier churn driven by perceived value rather than absolute price. Relevant to tier-naming consideration.
closed · 14 Feb 2026 · 3 voices
retire 18 considerations
Tier rename — 2312
Prior tier rename caused customer confusion for roughly four months after change. Retired from active reference — documented at length in closed state.
closed · 3 Nov 2023 · 4 voices
deliberate_exception 6 considerations
Enterprise pricing opacity — 2417
Enterprise tier opacity debated and preserved with reasoning. The debate is in the record.
closed · 9 Mar 2024 · 2 voices

Primitives in use: standard cards (four), badges with and without dots, room-variant badges (outlined), ghost and secondary buttons.

Why this reads as Memory not Shaping: the cool grey environment is the only atmospheric cue that says "you are looking back." The cards themselves are visually simpler than the consideration-list rows — no hover highlighting, no open state, no action affordances beyond the card surface itself. Memory is read-only by temperament; nothing about the layout invites editing.

Context 03 Manifestation — substrate surfacing What's available to bring into Shaping
Manifestation · Emergent · For engagement 2614
Three considerations are ready to surface
Found in Memory as relevant to your current seed. Bring any of them into Shaping to open it against the active seed.
From engagement 2604 · c-3
Partnership tier pricing used a similar grandfather-clause structure — 6 months rather than 12. The 6-month version held through Q2 with no retention drop.
From engagement 2609 · c-7
Retention data showed middle-tier churn driven by perceived value, not absolute price. Directly bears on tier-naming consideration.
surfaced by drift detection deliberate_exception
From engagement 2417 · c-4
Enterprise tier opacity debated and preserved with reasoning. If this engagement proposes making enterprise public, the reasoning for previous opacity belongs in the decision.

Primitives in use: emphasis cards (press-ink left border, vellum fill), iron card (iron-oxide left border for high-relevance surfacing), badges, secondary and iron buttons (small).

The iron card is doing real work: when Manifestation surfaces a consideration because drift detection identified it as critical, the iron-oxide border signals urgency without shouting. The iron button on that card matches — "bring this in, it matters." Regular surfaces use secondary buttons. The hierarchy is visible in the stroke color.

Context 04 Destructive action — amend seed modal The most consequential action in the product

Primitives in use: modal surface on backdrop, modal header with iron-oxide kicker, textarea input, ghost button (Cancel), iron button (Confirm).

Why the iron-oxide kicker: amend is the one state in Loomworks that inherits the brand accent because it's the most consequential action — the seed itself changes. The kicker marks this modal as doing that kind of work. Destructive or high-consequence modals use iron-oxide in the kicker and the confirm button; routine modals use press-ink kickers and primary (dark) confirm buttons.

Context 05 Transient states — toast, empty, loading The small feedback moments
Toasts — quiet confirmations
c-11 promoted — moved from playground to source. Provenance preserved.
Seed amended — prior version retained on the record.
c-7 escalated — raised to Leon. Awaiting response.
c-2 retired — removed from active reference. Record preserved.
Empty state — Shaping with no open considerations
Shaping · Dynamic
The workshop is empty.
All considerations in this engagement are closed. You can open a new one against the current seed, or browse Memory for related past work.
Loading state — dots and skeleton
Retrieving from Memory

Primitives in use: toasts with state-colored dots (three of the seven shown as examples), empty state with kicker / title / body / dual actions, loading dots (pulse animation), skeleton loading (sweep animation).

Voice notes: the empty state doesn't apologize for being empty — "The workshop is empty" is a neutral observation, not a problem to solve. Toast copy uses short declarative sentences that say what happened. Loading labels use mono caps ("Retrieving from Memory") rather than generic "Loading…" — they name the action.

Part three — reference gallery

Every primitive in its variants and states, laid out for specification. The composed contexts above show how the pieces work together; this gallery is where you look something up when you need to implement it.

Buttons
Weights — four types
Primary for default commits · Iron for high-consequence actions (amend, confirm destructive) · Secondary for alternate paths · Ghost for dismissals and tertiary actions
Sizes — small, default, large
Small for table rows and toolbars · Default for primary surfaces · Large only for hero CTAs
States — default, hover, disabled
Primary button hover shifts to iron-oxide — the brand accent warms on interaction · Disabled at 40% opacity
Inputs
Text, select, textarea
A single sentence framing what the engagement is about.
States — default, focus, error
The seed cannot be empty.
Checkbox and radio
Badges
State badges — the seven terminal states
attest promote no_change amend deliberate_exception retire escalate
Neutral and special badges
neutral open 13 considerations room variant outlined
Open badge (solid press-ink) distinguishes open considerations from closed/terminal ones · Room variant (outlined) for card labels where a solid fill would compete with the card's own ground
Cards
Standard, emphasis, iron
Standard card
Default card weight. White-adjacent ground, thin rule border. Used for most information surfaces — past engagement summaries, voice lists, provenance items.
Default weight
Emphasis card
Press-ink left border plus vellum ground. Used when the card is a callout, a pull-quote, or a deliberately raised piece of content.
Use sparingly
Iron card
Iron-oxide left border. Reserved for items that require Operator attention — drift-detected surfacings in Manifestation, escalations, deliberate exceptions that need review. Not for routine high-importance; iron-oxide is a limited resource.
Attention required
Tables
Consideration table — the canonical Loomworks table form
ID Consideration Voice State
c-12 A consideration in the open row state — solid background, raised from the rest. marvin.p open
c-11 A default row — subtle hover, state badge in closed form. nia.h promote
c-10 Another default row — dashed bottom border separates rows without boxing them in. leon.k amend
Navigation
Tabs — section switching within a surface
Considerations
Seed history
Voices
Provenance
Breadcrumbs — where you are in the hierarchy
Room switcher — the four rooms as a persistent control
Appears in the top bar of every surface — the operator always knows which room they're in and can switch with one click
Modals
Standard modal — for confirmations and destructive actions
Standard (press-ink) kicker for routine confirmations · Iron-oxide kicker reserved for high-consequence actions like amend-seed or retire
Toasts
State-dotted toast — quiet confirmations
c-11 promoted — moved from playground to source.
Seed amended — prior version retained.
c-3 attested — record stands verified.
c-7 escalated — raised to Leon.
Press-ink ground with cartridge text · State dot matches the terminal state being confirmed · Four-second default display · Dismissible
Empty states
No-data empty — voice and action, no apology
Considerations
No considerations yet.
The seed is set but no considerations have been opened. Open the first one to begin the work.
Memory · filtered
Nothing found.
No past engagements match this filter. Try broadening the search or clearing filters to browse everything.
Loading
Dots — for operation in progress
Retrieving from Memory
Surfacing relevance
Rendering engagement
Skeleton — for content shape known in advance
Skeleton used when the shape of the content is known (a card, a list item, a paragraph) · Dots used when the operation is more open-ended

Part four — color system

The tokens behind everything in parts one through three. Grouped by role: press and ink (the foreground), accent (the one hot color), paper (the grounds), rules (the dividers), environments (the four rooms), terminal states (the seven outcomes). Each swatch shows token name, hex, role, and usage.

Color 01 Press & ink Foreground — text, strokes, borders
--press-ink
#1A1814
Press-ink
Body text, strokes, primary buttons. The deepest ink; near-black with a warm cast.
--type-metal
#4A4843
Type-metal
Prose body, secondary text, de-emphasized labels. One step back from press-ink.
--ink-faint
#8A847A
Ink-faint
Captions, metadata, mono uppercase labels. Present but unobtrusive.
--brass
#A89B7E
Brass
Decorative separators, middle-dot dividers, occasional accents in mono runs.
Color 02 Accent Iron-oxide — held back, used sparingly
--iron-oxide
#B55537
Iron-oxide
The brand accent. Reserved for moments of consequence — amend, the stamp-mark accent square, block-label tags. Never for general UI.
--iron-oxide-hot
#9A4A30
Iron-oxide-hot
Darker iron-oxide. Used for hover states on iron-oxide surfaces and for the escalate terminal state where the accent needs to read as more intense.
Color 03 Paper Grounds — the surfaces the system sits on
--cartridge
#F2EDE0
Cartridge
Default body background. The warm paper ground that the entire system sits on. Also fills the stamp-mark interior.
--bleached
#FFFCF5
Bleached
Cards, panels, mastheads, input backgrounds. A slightly cooler, brighter paper — where the content actually lives, raised above cartridge.
--vellum
#E8E1CE
Vellum
Set-aside blocks, gallery introductions, archival surfaces. The warmer, calmer paper; used where content is bracketed off from the main flow.
Color 04 Rules Dividers — present but structural
--rule
#E0DACC
Rule
Card borders, panel edges, top/bottom dividers between major content blocks. The standard structural line.
--rule-soft
#EDE7D7
Rule-soft
Internal dividers inside a card, section separators within a panel. One step quieter than rule.
Color 05 Environments — the four rooms Atmosphere, not content — room tints
--env-memory
#E4E6E8
Memory — cool grey
Looking back. Read-only by temperament. Archive browse, retained engagements.
--env-manifestation
#DCE3DB
Manifestation — muted green
Surfacing what exists. The place where current state is shown to the Operator.
--env-shaping
#E6D4C5
Shaping — warm ochre
Active work happening now. The heat-of-work tint; closest in temperature to iron-oxide.
--env-rendering
#E6DCCA
Rendering — cream
The place where artifacts come out. Slightly warmer than cartridge, slightly cooler than shaping.
Color 06 Terminal states — the seven outcomes Attest · promote · no-change · amend · deliberate-exception · retire · escalate
--state-attest
#6B7B6E
Attest — muted sage
Witnessed and confirmed. The quiet acknowledgment state.
--state-promote
#7A8B6E
Promote — olive
Raised to canonical. Moves from playground to formal record.
--state-no-change
#8C8C82
No-change — warm neutral
Considered, concluded nothing needed to change. A real outcome, not absence.
--state-amend
#B55537
Amend — iron-oxide
The seed itself is changing. The one state that inherits the brand accent because it is the most consequential action.
--state-deliberate-exception
#C97D52
Deliberate-exception — warm terracotta
Debated, preserved with reasoning. The exception that is meant to be there.
--state-retire
#6B6358
Retire — dust
Closed, no longer active. Held in record but not in reference.
--state-escalate
#A04A2E
Escalate — intense iron
Needs attention beyond this engagement. The most heated of the state colors.

What this section is — and isn't

Specimen, not decision. Every color in this part was defined in the CSS at the top of v0.13 and used throughout v0.14; this section just makes them visible. No new color choices were introduced in v0.15.

One conventional token set. The palette is organized by role, not by hue family. There is no "gray scale," no "red family," no "100/200/300 steps." A designer used to framework-style token systems (Material, Radix) will find this minimal and opinionated — that's deliberate.

Part five — spacing scale

Eleven spacing tokens, from a quarter-rem hairline gap up to a five-rem full-block separator. Each shown at actual size so the bar is the space, not a representation of it.

--s-1 0.25rem · 4px Icon-to-label gap inside a badge; hairline breathing room.
--s-2 0.5rem · 8px Inline item gaps; stacked caption-above-title; compact flex-row gaps.
--s-3 0.75rem · 12px Button row gaps; grid-cell gaps; form-input to label gap.
--s-4 1rem · 16px Default "unit" of space. Card inner padding on the short edge; paragraph-to-paragraph in prose.
--s-5 1.25rem · 20px Lockup gaps (stamp + wordmark); paragraph-to-heading in prose.
--s-6 1.5rem · 24px Card-to-card separation; panel inner padding; group-header margin.
--s-8 2rem · 32px Section-block inner padding; standard column-gap; before/after a pull-quote.
--s-10 2.5rem · 40px Major content-block separation; between a composed context and its annotation.
--s-12 3rem · 48px Section-end spacing; large masthead bottom margin.
--s-16 4rem · 64px Section-start padding (above h2.section-h); large set-piece separation.
--s-20 5rem · 80px Full-block separators between chapters of a long document. Rare — reserved for the deliberate breath between parts.

Why gaps in the scale — no s-7, s-9, s-11, s-13, s-14, s-15, s-17, s-18, s-19

Intentional. A complete 1-through-20 scale invites precision that isn't real. The scale skips the values that don't have a distinct use from their neighbors. If a designer finds themselves wanting --s-7, the decision is between --s-6 and --s-8, not between the three.

This was established in v0.13 and carries forward unchanged; no spacing decisions were introduced in v0.15. This section just makes the scale visible.

Part six — date, time, and rich text

Two component families the prior work deferred — now given conservative starting specifications. Each carries a Discovery-record note pointing at the design decisions made and the easier paths to walk them back.

Date 01 Timestamp display — provenance Mono precision · relative prose
Created 2026-04-19T14:22:08Z 4 days ago
Amended 2026-04-21T09:47:33Z 2 days ago · by Operator
Last considered 2026-04-23T11:10:52Z just now

"This engagement was created in Loomworks on 19 April 2026, last amended on 21 April, and has eleven considerations open."

Two time forms — mono precise, prose written

Mono precision form (2026-04-19T14:22:08Z): ISO-8601 UTC in IBM Plex Mono. Used in provenance displays, log views, metadata strips, export formats — anywhere the exact moment matters and the reader is expected to be technically fluent.

Prose written form ("19 April 2026"): day-first European ordering in IBM Plex Serif italic. Used inside sentences, in narrative descriptions, in the Operator's reading surfaces. Follows the two-case-form pattern: the precise form is the mark, the prose form is the word.

Relative form ("4 days ago"): IBM Plex Serif italic, paired with the absolute time. The relative is always secondary to the absolute — never shown alone, because it loses meaning as soon as the page sits for a day.

Considered and set aside: US-ordered dates (4/19/2026) — ambiguous in an international product; slash-ordered ISO (2026/04/19) — reads as a filepath, not a date; "today/yesterday/tomorrow" relative anchors — brittle across timezones.

Walk-back risk: low. Both forms are conventional. The only way the Operator may want to change this is toward a single house-style (e.g., mono everywhere, or prose everywhere) — but the two-form approach has room for both preferences.

Date 02 Inline calendar — date picker Week starts Monday · today outlined · selected filled
April 2026
Mon Tue Wed Thu Fri Sat Sun 30 31 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 1 2 3
Date 03 Date range — for memory browse Start and end visually bracketed · range filled
April 2026
Mon Tue Wed Thu Fri Sat Sun 30 31 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 1 2 3

Calendar decisions — conservative choices

Week starts Monday. ISO week convention and what almost every professional calendar tool has converged on. Sunday-first is a US consumer-app convention, not suited to an Operator-facing engagement-memory tool.

Today is outlined, not filled. Today and selected are different states — today is reference, selected is action. Filled-today conflates the two; outlined-today keeps them separable.

Other months are muted, not hidden. Seeing the boundary-dates of adjacent months is useful orientation; hiding them mid-row creates an uneven grid. Muted-but-visible is the compromise.

Range-end matches selected color; range-interior uses vellum. The two endpoints are interactive (draggable); the interior is informational (shows what's in the range). Same visual language as other brand surfaces — press-ink for action, vellum for reference.

Considered and set aside: an always-visible year navigator (adds chrome the Operator rarely uses); month-switcher as a drop-down (heavier than arrows for monthly browsing); multi-month side-by-side display (overkill at the current scale — reserved for a possible v0.16 if the Operator actually needs it).

Walk-back risk: medium. Week-start is locale-dependent in a way that may matter to some Operators; the current single-month display may feel constrained for range selection across months. If a real Operator surface shows these limits biting, the structure supports both changes without breaking the aesthetic.

Text 01 Rich-text editor — considered prose Conservative toolbar · no embeds · no color

The Q3 pricing grandfather clause

The grandfather clause was originally set at six months, which held through Q2 without exception. The question now is whether it should extend to twelve months for enterprise tier given the contract-review cadence.

Grandfather policy is a retention tool, not a feature. Length should follow what it's buying us in renewals, not what feels fair in isolation.

Three considerations worth attention before deciding:

  • Retention data for accounts that used the six-month clause
  • Consistency with the tier-pricing grandfather precedent from 2024
  • How extension would interact with the renewal_review_cadence field

What's in the toolbar — and what isn't

What's in: bold, italic, two heading levels (H2 and H3), bulleted list, numbered list, blockquote, inline code, hyperlink. The vocabulary of considered prose.

What's not in: font size, color highlights, text alignment controls, font family changes, strikethrough, underline, tables, images, video embeds, emoji picker, mentions. Each of these was explicitly considered and set aside.

Why minimal. Loomworks is a thinking-and-remembering environment. The rich-text editor serves Operators writing considered prose — seeds, considerations, amendments — not rich-media documents. Every tool added to the bar is a decision the Operator has to make every time they write; a minimal toolbar keeps attention on the words.

Underline is absent specifically. Underline reads as hyperlink on the web; having an unlinked underline format invites confusion. Italic and bold cover emphasis; underline adds nothing here.

Considered and set aside: a Markdown-source-only editor (too engineer-facing — Operators should not see syntax); a Notion-style "/" block insert menu (adds a command layer that breaks the writing flow for a conservative toolbar); Strikethrough (edits aren't struck-through in Loomworks — amendments get their own record with full provenance, so strike-through would misrepresent what happened).

Walk-back risk: high. This is the most opinionated set of choices in v0.15. The "considered prose" framing may prove wrong — real Operator surfaces may need tables, images, or a richer block vocabulary. If that happens, v0.16 should reconsider the toolbar as a whole rather than adding tools one by one, because ad-hoc additions tend to muddy the underlying premise.

Part seven — mobile patterns

Three transformations beyond basic responsive behavior: tables become card stacks, navigation becomes a drawer, modals become bottom sheets. Plus a tap-target scale. Shown side-by-side desktop / mobile so the transformation is visible.

Mobile 01 Table → card stack Same data · columnar on desktop, stacked on mobile
Engagement Status Last considered Voices
Pricing Q3 grandfather clause amend 21 Apr 2026 3
Tier rename consideration retire 3 Nov 2023 4
Middle-tier retention analysis attest 14 Feb 2026 3
Desktop — table
Pricing Q3 grandfather clause
Statusamend
Last considered21 Apr 2026
Voices3
Tier rename consideration
Statusretire
Last considered3 Nov 2023
Voices4
Middle-tier retention analysis
Statusattest
Last considered14 Feb 2026
Voices3
Mobile — card stack
Mobile 02 Horizontal nav → drawer Desktop room-switcher becomes vertical drawer
Desktop — horizontal tabs
Memory
Shaping
Manifestation
Rendering
Mobile — drawer (slides from left)
Mobile 03 Modal → bottom sheet Center-anchored modal becomes bottom-anchored sheet
Amend seed
Refine the pricing engagement's founding premise?
The seed changes. A new version is retained; the previous version stays on the record.
Desktop — centered modal
Amend seed
Refine the pricing engagement's founding premise?
The seed changes. A new version is retained; the previous version stays on the record.
Mobile — bottom sheet
Mobile 04 Tap-target scale 44px floor · 52px default · 60px for primary actions
Minimum 44 px · floor
Comfortable 52 px · default
Primary action 60 px · amend / escalate

Mobile design decisions

Table → card stack is the default. Trying to shrink a table horizontally produces unreadable mush. Transforming into a card stack preserves the data's structure while reformatting for portrait reading. The first field (engagement title) is promoted to a header; the remaining columns become key-value pairs.

Nav → drawer, not bottom tab bar. iOS convention would be a bottom tab bar for the four rooms; the drawer choice is deliberate. The rooms are not peer destinations the Operator switches between frequently — they are environmental contexts. Putting them in a drawer keeps the chrome quiet when the Operator is working, and surfaces the room-switch as a deliberate move rather than a thumb-flick.

Bottom sheet for high-consequence confirms. Centered modals on mobile are reachable only with thumb-stretch and feel disproportionate on tall screens. Bottom sheets are thumb-zone-native and allow the body of the surface to stay visible above them, maintaining context. Amend is the canonical high-consequence action and gets a bottom sheet.

44px is the floor, not the target. 44px is Apple's stated minimum; 52px is comfortable for the Operator-is-not-hurried temperament of Loomworks; 60px marks the amend/escalate actions that must be deliberate. The iron-oxide button at 60px is a moment of consequence — its physical size matches its semantic weight.

Walk-back risk: low for the table→card and bottom-sheet patterns (these are conventional); medium for the nav drawer (a tab bar is the iOS default and Operators on iOS may expect it). If real Operator testing shows drawer friction, v0.16 can revisit.

Part eight — motion system

Duration tokens, ease curves, and the patterns that use them. Motion in Loomworks is patient — the brand is unhurried by temperament, and the motion system supports that: nothing snaps, nothing bounces, nothing demands attention. Transitions confirm that the system has registered an action, without making that confirmation the point.

Motion 01 Duration scale Three tokens · fast, normal, slow
--duration-fast 150 ms Micro-interactions — hover, focus, tooltip in/out. Fast enough that the UI feels responsive, slow enough that it isn't a flash.
--duration-normal 250 ms Default for state changes — tab switch, accordion expand, button press confirmation. The workhorse duration.
--duration-slow 400 ms Set-piece transitions — modal open/close, bottom-sheet slide, room switch. Long enough to be seen deliberately; short enough that it does not feel ceremonial.
Motion 02 Ease curves Three curves · out, in-out, in
--ease-out cubic-bezier(0.22, 1, 0.36, 1) Default. Moves fast at first, settles at the end. Used for most entrances and state changes — feels natural, never jumpy.
--ease-in-out cubic-bezier(0.65, 0, 0.35, 1) Smooth on both ends. Used for bi-directional motion — drawer slide, accordion expand, anything where the return journey needs to read as mirror-symmetric.
--ease-in cubic-bezier(0.4, 0, 1, 1) Slow at first, fast at the end. Used only for exits — the element gathers momentum and leaves. Not the default; ease-out covers most exit cases too.
Fast · 150ms
Normal · 250ms
Slow · 400ms
Motion 03 Patterns — what uses what Duration × ease assignments by surface
Pattern Duration Ease Property
Hover — button, row, card fast · 150ms ease-out background, border, color
Focus ring — input, button fast · 150ms ease-out box-shadow, border
Tab / accordion switch normal · 250ms ease-in-out opacity, transform
Toast enter normal · 250ms ease-out transform, opacity
Toast exit normal · 250ms ease-in transform, opacity
Modal open slow · 400ms ease-out transform, opacity, backdrop
Modal close normal · 250ms ease-in transform, opacity, backdrop
Bottom-sheet slide up slow · 400ms ease-out transform
Drawer slide in slow · 400ms ease-in-out transform
Room switch — background slow · 400ms ease-in-out background-color
Loading pulse 1.5s cycle ease-in-out opacity
Skeleton sweep 1.8s cycle linear background-position
Motion 04 Principles — what motion does, and doesn't do Three yes, four no
Motion does

Confirm. An action registered — a button press, a state change. The motion says heard you.

Orient. Where did that element come from, where did it go. The motion shows the geometry of the transition, so the Operator doesn't have to reconstruct it.

Set pace. The motion timing tells the Operator what kind of moment this is — a micro-interaction (fast), a state change (normal), a set-piece transition (slow).

Motion does not

Perform. No bounces, no springs, no elastic overshoots. Loomworks is a patient environment; performative motion breaks the voice.

Decorate. No ambient motion, no idle animations, no "this element is interactive" pulses that run without cause.

Stack. Two motions rarely happen at once. A click that triggers a modal does not also trigger a hover-exit on the button plus a ripple plus a toast — pick one.

Override prefers-reduced-motion. When the operating system requests reduced motion, durations collapse to zero and transitions become instant state-changes. No workarounds, no "essential" exceptions.

Motion decisions — inherited and extended

Inherited from v0.13: the --ease-out curve cubic-bezier(0.22, 1, 0.36, 1), the fast/normal duration pair (150ms / 250ms), and the two utility animations (loading pulse, skeleton sweep). v0.15 extends these — does not replace them.

New in v0.15: a slow duration (400ms) for set-piece transitions, two additional ease curves (ease-in-out for bi-directional motion, ease-in for exits), and a full pattern table assigning duration/ease/property to each motion surface.

Considered and set aside: spring physics (too performative — doesn't suit the considered temperament); choreographed multi-element transitions (too showy for an Operator tool); motion-on-scroll effects (distract from content, add no information); anticipation/follow-through beyond basic ease curves (again too performative); shared-element transitions between surfaces (real technical complexity with unclear Operator payoff at this stage).

Walk-back risk: low for duration and ease tokens (conventional). Medium for the motion-principles list — the motion does not perform stance is opinionated, and Operators coming from more expressive product backgrounds may find it austere. The stance is defensible but not the only possible one.