Covered
Bound Sep 3Done. Nothing on this stage is still open.
-
Certificates Nothing left. Every certificate this production needs already went out.
The surfaces under design/app/ compose from this sheet. Foundations, the marketing components, and the rationale stay in design/system.html and docs/DESIGN.md. This sheet links design/tokens.css and design/app/app.css directly, so what renders here is the same CSS the screens ship.
The site’s glass pill, shortened to 56px, carrying the production being viewed and one way out instead of marketing links. Content scrolls under it. Below 620px the production name drops and the actions stay.
On every working page. It says who stands behind the paper and the one thing Mula will not do.
The chrome that makes three screens read as one sitting: where you are, and a way back to the last answer.
Unchanged from the site sheet, rendered here on application CSS so a drift shows up.
The application’s one persistent surface (D-047), defined in app.css section 4c. The production, the plan expanded to its four stages with a ring and an info mark on each, what she owes, what is in her file grouped by stage, and the two account rows at the foot. Every working screen composes it verbatim and marks its own row with aria-current. No screen restyles it and no screen changes a count in it, because a count that reads 4 here and 5 on the next screen is the end of her trust in the whole product. Below 900px it collapses into the header’s menu button and opens as a sheet over a scrim.
The info mark opens a one-sentence explanation in place, under the row. It is a button, it opens on a press and closes on Escape, and nothing about it animates, because it is as likely to be reached by keyboard as by pointer.
Shared furniture for every plan screen, defined once in app.css section 4b. A screen composes these and does not restyle them.
Section 4d of app.css. Four things every screen owes a producer, plus the one thing no screen may put in her way. They are shared rather than per screen because a producer who meets "nothing yet" twice should meet the same shape twice.
One sentence and one action. The sentence says what will fill this, in her own terms, and never reports that the list is empty, which she can already see. It sits on the page ground inside a dashed edge rather than in a card, because a card wrapped around nothing reads as a thing that failed to load. .emptystate.sm is the version for a group inside a screen that is otherwise full, and it drops the heading because the group heading above it already said what the group is.
The first thing that lands here is your policy, the day it’s bound. Everything you sign after that lands here as it’s signed.
Add something to your fileNothing in this group yet. Your permit lands here once the city issues it.
Three answers in a fixed order: what happened, whose fault it is, and what happens now and when. Whose fault is not optional. A producer who cannot tell whether she broke it or Mula broke it picks up the phone, and that call is the cost of leaving it out. Coral sits on the state word alone; a red panel is how a form tells someone off, and six of those on one screen is a product shouting. data-state="mula" is for the ones that are on us, and it changes the state word’s colour and nothing else, because owning a mistake quietly reads as owning it.
Not your fault, and not really anyone’s. It’s a scan of a scan, and the text on it isn’t text.
Somebody at Mula reads it by hand within the hour. You’ll hear either way, and nothing else on your file waits on it.
Mula’s. The wording came from the agreement you gave us and Mula read it short.
The corrected certificate goes out within the hour, to the same people. The fee is not charged again.
Event, production, time, and the way in. The whole row is the link so there is nothing to aim at, and the time is mono and tabular so a column of them lines up down the right edge and the day reads as a shape. A clock item carries a coral dot and sits above the feed; an unread one carries a teal dot. Below 520px the time drops under the event rather than squeezing it.
Promoted out of the delivery screen in M4, so the city’s three business days and the distributor’s thirty read as the same kind of fact. It arrived as screen 24's own component: the distributor’s thirty-day clock, once the schedule has arrived. A quiet filled band, not a coral warning, because the date on its own is not "at stake" wording. Its second job is the honest one: naming which items on the match below it cannot close before the film has even shot, so they read as not-yet rather than as overdue. The rest of the screen composes .docdrop (== intake-documents ==), .seg (base), and .filegroup / .filerow (== file ==) unchanged.
Notices sit above the work and never inside it, which is the one rule the reference is emphatic about. It closes on a press and nothing about it animates, because a notice that slides away pulls a second look at the thing she just decided to stop looking at.
Your second contact slot is empty. Whoever fills it gets the certificates on the days you’re on set. Add a second contact
The wordmark alone, centered above the auth shell. Not a link: auth pages carry the wordmark and nothing else to press outside the card.
The card explains itself: nothing is charged, and what the next screen asks. A quiet second column earns its place here because the promise is new. Stacks under 760px.
Nothing is charged here. You’ll see the whole number before you commit to anything.
Already have a file? Sign in
The next screen asks about the shoot: the budget, the days, the locations, who’s getting paid.
Then you see what it costs, all in, with Mula’s fee on its own line.
One card, one action, a way back if the password is gone. The password label shares a row with the reset link.
The eleven-question overview shown before the first question, so a producer sees this is a short sitting, not the ninety-field application underneath it. Plain numbers, not checkmarks: nothing on the list is answered yet.
A stepper either side of the number, 44px targets either way, with one line underneath that says what the counts add up to.
31 on set, all of them paid.
The site’s own segmented picker, reused. What changes is the line underneath: picking an answer here changes what the number looks like later, so the consequence shows up while the producer is still deciding.
The insured name has to match the LLC exactly or the certificate bounces (M4). Checked as the producer types, using the field-error pattern already on the site sheet, with aria-live="polite" on the error so it is heard, not just seen. Mint when it matches, the same way a placed line reads elsewhere. Two states of the same field, side by side.
Off by a word. Next stays disabled.
Matches your file.
Next unlocks.
The drop. Three states: waiting for the file, reading it, done. The file name is mono; everything Mula tells the producer about what it read is set in the body face, because the point of the screen is that she never reads the clause herself.
On the live page both documents load already read, since that is the moment the screen shows. The empty and reading states are here because the component supports the whole sequence; a producer arriving fresh sees empty, then reading, then this.
The .excerpt component holds the clause exactly as it reads, in mono, wrapped so it never forces a scrollbar. Beside it, .certline is new: short label, plain-language line, no mono, because this is Mula talking, not the lease.
One flag, one problem. The bold phrase is the only coral on this screen, and it is the status word the brief allows.
Say what would have cost her, then the flag states it plainly.
The shared .total row carries the number a producer is meant to believe: the ink rule, the display face, bold. .total.quiet is the same row shape built down instead of up, for a second figure that is context rather than a competing offer: a hairline instead of the ink rule, mono at body weight instead of display, ink-2 throughout. No bar, no badge, no color. It just reads quieter.
The one field on the placing screen. This is the first charge, so it takes the card rather than showing one already on file, and says plainly that it is kept for the next film. Still one field, still not a checkout.
One sentence that closes the phase, plus a link to the real document. No table of contents, no preview of the document itself, and never nested inside another card.
$10,690 went to your card ending 0117. The policy documents are already in your file.
Open the policy documentsThe .checks list with a clock instead of a check mark, since nothing in it is done yet. Used for the honest, dated steps left after binding.
The whole row is one link, built from furniture this page did not invent: the shared .ring in the same states the rail uses, and the shared .pill-status for the one date that matters. Two shapes shown, because the plan’s own ruling is that a production only shows the stages its destination calls for: Low Tide runs all four, a smaller one shoot might run only two.
A plain text link, not a button. This screen’s loudest thing stays the film that needs her, not the one that does not exist yet.
The one thing at the top of the plan, so a producer knows her next move without reading four stage cards. A hairline above and below, not a banner: the shared .pill-status carries the date, one sentence carries the task, a second accounts for the rest of the queue without listing it, and a plain link goes to the queue itself.
Confirm your 9 location days. The city needs three business days once Mula files, and your shoot starts September 14.
Three more things are on your list, and two agreements are still out for signature.
See everything on your listNew component. Name, a status pill with a date, a ring for how far the stage has gone, its phases as rows, one full-width action. Three states shown, since a card that is done and a card that is locked have to look different from each other and from a card in flight, without any of the three taking a background colour to say so: the ring’s fill or lock, the pill’s own word, and the phase copy carry it instead. The middle card is Low Tide’s real Covered stage (nine of twelve, so the ring is part filled, never a full check); the other two are illustrative, since no stage in Low Tide’s plan is fully done yet.
Done. Nothing on this stage is still open.
The package is bound. Two things underneath it are still open.
Waiting on the schedule, so nothing below it can start yet.
A locked card’s name drops to the quieter ink-2 weight, the one place this component reaches past the ring and the pill to say it is inert.
A stage is phases; a phase is a numbered column with its own heading and count. The number is identity (a producer can say "phase two"), not a progress ring, so it stays the same digit whether the phase just started or just finished. Three sit side by side once there is room, divided by a hairline; below that width they stack full width in the same order, each keeping its own numbered heading.
4 of 4 done
4 of 5 done
A vertical line joins every mark, so a column reads as one thread of work rather than a stack of unrelated rows. Each step card carries what it is, its counterparty when it has one, and its state and date together in the shared status pill. A finished step drops its mark and title into ink-2; open and locked steps keep full ink, so what still needs a look reads heavier than what is already handled, without a color doing that work. Nothing here is at stake, so coral never appears; the only color is mint, on the word a status pill already says.
The moment a finished phase closes: one sentence, written like a person telling the producer it’s handled, and a link to the real document. It sits under the timeline it belongs to, indented to the same column as the step text, never boxed as a card of its own.
Your production package is bound, and everything that came out of it is already sitting in your file.
Open the policyA phase detail page’s own header line, composed from the shared status pill plus two plain facts: when it last moved and how much of it is done. No new pill state, no new ring; the status pill’s own rule (always carry a date) is why "Needs you" never appears without one.
The reason this screen exists (reference point 4): a quiet panel next to the tasks, in the page’s own paragraph color, explaining why the paper exists and what it costs to get wrong. No border, no icon, nothing nested inside it. .stepgrid is the two-column frame it sits in, tasks at minmax(0,1fr) and the panel fixed at 320px, collapsing to one column under 760px with the panel in normal reading order right after the tasks rather than above them or behind a disclosure, since this phase is short enough that neither problem (buried, or pushing the tasks down) actually happens.
Full copy, all four paragraphs, is on the live page (step.html); this demo is trimmed to show the frame, not repeat the whole panel here.
The task queue’s five states, always visible, with the honest counts from the plan (12 of 34 steps done). Tabs, not a filter and not five sections stacked on one page: a producer checking this between setups needs to land on one list. The queue opens on To do, never Locked or Completed.
Below 620px the row scrolls sideways rather than wrapping, the same pattern the rail already uses at that width.
Most To do rows are just the task and a button. The one with a real date (the soonest thing due in the plan) also carries the shared .pill-status inside the row’s body, so the date sits with the task instead of competing with it elsewhere on the page.
The file still groups by the four stages, in stage order, but each group is named for what is in it rather than for the stage above it (D-051), with the sidebar’s own count beside it. A row never claims a date it does not have: an "In the file" or "Out for signature" row earns a plain date underneath; a row still waiting on someone else just says what it is waiting on. A finished row’s name drops to ink-2, the same quieting convention the stage screen already uses for a done step, so what still needs a look reads heavier than what is already handled. A row becomes a plain link, same layout, when there is somewhere real for it to go.
On "Add to the file": the producer’s own paperwork, ready to send. A row starts as a name, one sentence of what it is for, and a secondary "Send it" button, never a primary one, since a page can carry several. Pressing it swaps the button for the status the row would carry once it went out.
The whole row is one link, the same grammar .prodrow and .stepcard already use: counterparty, the wording it carries, the time it went out, its state. A correction never subtracts from the issued count (BRIEF-M2's ruling): the Vernon warehouse’s certificate was issued at 9:12 a.m. and stays counted as issued, its row simply carrying a second, honest state on top. Below 700px the row stacks so nothing scrolls sideways to be read.
The document itself, built from components rather than a picture: a label header and a plain field list, mono on the values, the same way every product mock in the system sets a document’s own figures and names.
The exact line a counterparty asked for, then its plain meaning, so a legal phrase is never printed and left to speak for itself. A line added after the certificate first went out carries the shared status pill rather than its own colour, so coral still only ever labels a state.
Primary and non-contributory.
Their own policy does not pay first. Yours does.
The management company’s parent entity, named as well.Added 2:40 p.m.
The property manager read the first certificate and asked for one more name. This is that name.
A quiet aside, the section’s own paper-3 fill and card radius, nothing nested inside it, the same grammar .steppanel set. One primary action and one secondary, never two primaries in view.
A radio row for requesting a certificate, built on the same card language .certrow and .ctpyrow already ship: who, what they want, the lead time, the state their last certificate is in. Screen 19 lists all seven; the one that has not gone out yet, the Elysian Park bungalow, starts checked. The input itself is visually hidden and the label carries the click target and the focus ring, so the row works the same for a mouse, a keyboard, and a screen reader. Below 700px it stacks, the same breakpoint the family already uses.
The preview beside the picker, one .certline list per counterparty (screen 19 keeps all seven in the page and shows only the one that is checked), the same term-then-meaning shape == intake-documents == set for the document read. A requestable counterparty (nothing issued yet) ends in one primary button; an already-issued one ends in a plain link back to its row instead, so the view never carries two calls to act on the same certificate.
Five days, once the agreement’s signed. It’s out for signature since Sep 2.
The one thing that changes on a corrected certificate, screen 21's whole point made visible: the exact wording the counterparty had, next to the exact wording it gets. Two columns once there is room; a stack below 620px, because a before-and-after is a value like any other and it never scrolls sideways to be read.
The owner, the property-management company
The owner, the property-management company, and the management company’s parent entity
The gap named in the plan: a counterparty, what they want, the lead time they need before your shoot day, and their certificate’s own state, together in one row. It borrows .certrow's card, border and hover so the two lists of counterparties in the product (this one and Certificates) read as one family, but trades its two-column meta for a labelled lead-time stat, since the lead time is the fact this screen exists to surface. Below 700px it stacks, the same breakpoint .certrow uses.
A counterparty without a certificate yet (the city, the union) links to Request a certificate instead of the party page: there is nothing to open behind it yet.
.partyrow-who is the piece both lists on this screen share: a name, and the one line under it that says what they want or what they carry. Her own people reuse it without the row being a link, since nothing in this prototype sits behind a role and a count yet.
Work for hire, all paid
An appearance release each, not counted yet
Screen 25's whole reason to exist: the insured name compared, live, against the certificates already issued. Composes .certdetpanel's quiet paper-3 frame and .certline's own k/v rows rather than a new panel and a new list. The mark and the headline follow the company field as she types; the stake sentence underneath is constant, because the cost of getting this wrong does not change just because it currently matches.
Matches all 4 certificates already issued.
This is the only place that name is set. Change it and every certificate Mula issues next carries the change, including these four.
Does not match your 4 issued certificates.
Full copy, all four certificate rows plus the stake sentence, is on the live page (settings.html); this demo is trimmed to show both states, not repeat the whole panel twice.
One toggle idiom for the product: a switch is a button with aria-pressed, the same convention the destination picker already sets, not a checkbox input. Colour swaps instantly with the attribute; only the knob’s position and the switch’s own press move, and only on transform.
.permitwhatif, screen 26. A native <details> around .failblock unchanged, for a screen that is mostly a plan she can hold and should not open with a card about the plan going wrong. It closes on load, needs no script, and opens and closes with no motion, which is the same rule the dismissible banner follows.
The city’s requirement, whether or not it is reasonable. Say it came back because the certificate carried blanket wording instead of scheduled, the one difference its form does not allow.
Mula refiles with the fix the same day the city responds, but the three business days start over from the refiling, not from Tuesday.
.compdoc, screen 27. A single narrow reading column for a screen built to answer one question and then hand off to the money and the routing, rather than a task list or a grid. .comp-branch is new: the one-line other branch (a production that pays nobody), set apart from the main answer by a hairline rather than a card, since it is a footnote to the answer and not a competing one. .comp-cta pairs the screen’s one primary button with the plain link back to step.html for the step’s own tasks.
Through your payroll service, not a policy Mula places directly.
A production that pays nobody skips this step entirely. The city takes an exemption statement with the permit application instead.
Screen 28 composes .filerow (== file ==) unchanged for all twelve cues, but the two that don’t clear the destination carry no data-state="done" of their own: the ten that already clear it dim to --ink-2 the way a finished row always does, while the two that need her stay at full weight, because they are the reason the screen exists and dimming them would read as settled.
The same .iq-list numbered rows intake already uses for a short, concrete sequence, reused here for a decision instead of a question. No button sits under it: none of the three costs a figure that exists yet, so a screen that put a price on one would be inventing it.
Screens 29 and 30 compose .filegroup / .filerow (== file ==) unchanged. A report row puts what it’s for in .filerow-note and its price inside its own .pill-status, the same place a state word already lives; .filerow-when carries the date it comes back rather than a date it was signed, since a report that hasn’t been ordered yet has no signing date to show.
.filegroup .filerows + p, screen 30's read of what the attorney receives: the list .filerow already renders, closed by the plain sentence the screen is built to prove, "The lawyer already had everything." .filerow never anticipated a paragraph after its own list, so the gap is set here rather than forced into a rule nothing else needs. .reportact is the pair both screens end an explanation on: one .btn-primary beside one plain .link, so the screen’s single primary action never has to compete with a second button for the word "primary."
The lawyer already had everything.
Screen 31 shows the distributor’s own fourteen items in the distributor’s own order, never regrouped by state the way delivery.html groups the same fourteen. .binderrow-num is the only new mark: a small mono index in front of .filerow (== file ==), unchanged otherwise, paired with the shared .mono utility for the font. A row still composes .pill-status for its state, done or not.
The count and the honest sentence sit above the list in a plain .emptystate, because four of fourteen is close enough to nothing that the screen has to earn its keep the way an empty state does: one line on what has to be true, one on what it becomes, one action back to the working list on delivery.html.
Screen 32, the way-in shell with no sidebar (D-050). What carries to a producer’s next film reuses .taskrow for the answers still good and .failblock for the one that isn’t, in the same list, so "settled" and "not settled" look here the way they look everywhere else in the product. .carrylist is the one new rule: the gap between the two.
Nobody’s. It rolled over between films and nobody caught it until now.
Answer it again before the number below is final.
The rest of the screen composes .field, .iq-count and .seg unchanged from == intake ==, and .lines / .total unchanged from == intake-number ==: four lines instead of eight, proof the number branches by D-047 item 8.
Screen 33's one new mark: .rescue-can, a short list of what Mula can still do quickly. Everything else on the screen composes .lines, .pill-status and .failblock as they already stand.
Name, a mono dollar figure, and a state, in the same three columns whether the state is "Paid" or "Not charged." The corrected certificate below is the point of the component: it sits in the same list as the lines that did cost her, so the $0.00 reads as arithmetic rather than as a separate apology. Its state is the one pill-status in the list, mint and checked, because it is the fact this screen most needs seen. .total closes the list the same way it closes the number on intake-number.html.
empty.html and failure.html are the states sheets themselves, in this sheet’s own shape: every empty state and every failure block the product shows, each labelled with its screen and the moment it appears, composing .emptystate and .failblock from the section above unchanged. No new component is added here, because none was needed.