Skip to content

CasesLaw firmConcept build

Tagus & Co.

A six-person Lisbon law firm whose site writes the scope letter it promises while you scroll: the steps in order, a timeline drawn to scale, a redacted fee and a signature.

What we build for law firms, and what it costs.

Sector
Law firm, cross-border, Lisbon
Signature
The scope letter · the measured rule
Conversion
Case enquiries: the visitor's own scope letter, matter and urgency
01

The brief

Tagus & Co. is six people on Rua do Alecrim: five lawyers and an intake lead, acting for people whose business or life crosses a border into Portugal. Founders opening a subsidiary, SaaS companies facing a customer's GDPR questionnaire, buyers who have found a flat in Alfama, families relocating on a deadline.

Their clients are not Portuguese, and that is the whole problem. They cannot read the room or tell whether the silence after an email means the work is happening. What they are paying for is the ability to know where the matter stands on a Tuesday.

Every firm in Lisbon says it is rigorous. None shows what the work costs, how long it takes or what happens next.

02

The idea

Everything this firm sells is one document: the scope letter. It names the matter, lists what the client must provide, sets out the steps in order, admits what the firm does not control, draws the timeline and states the fee, signed before any work is paid for. So the page writes one in front of you.

Ivory holds the page and is broken twice: at the top, the firm's letterhead over a photograph of its chambers at dusk, and a navy panel at the bottom where it signs off. Between them the page is paper on a desk. Gold is the only accent and it is always a line: the rule under the letterhead, the ruling of each clause, the bars of a timeline, the stroke of a signature.

Erode sets the headlines, figures and italic wordmark; Inter carries the body. Both keep tabular figures, so numbers line up as on a register page.

03

The signature move

The letter writes itself. On a desktop it sits on a sticky stage for three screens of scroll, and the scroll drives the pen: each clause's gold rule draws over a printed grey one, the sheet climbs so the clause in hand reads whole, and the left column swaps in its number at 230 pixels. The words are never scrubbed. When a clause's turn comes its SplitText lines are written left to right on a short timed ease and stay written, so a reader who stops, or scrolls back, never sees a line cut mid-word.

§5 is the payoff: a rule from 0 to 35 working days, seven bars in their real positions, solid gold for the firm's time, hatched bronze for time spent waiting on the registry or the bank, and whiskers to the slow end, carried through every step a slow registry delays. The quote bracket, 24 to 35 days, is computed from those bars, and a test holds the schedule to its dependencies. §6 redacts the fee under a navy bar. Then Catarina Vale's signature draws in one stroke and, only once it is finished, the stamp lands.

The same sheet lays out the rest of the page. Four practice letters sit in a stack that deals the chosen one to the front. The register is an extract on the firm's paper, one sentence with its figures set inside it at display size on gold rules: 614 matters since 2017, 1,120 filings and contracts, 212 property due diligences. The 2025 bars print their fractions, 36 of 39, 14 of 18 and 25 of 39: 96 matters across five lawyers. The earlier build's bars summed to half of nine years' work; a test now does the division.

The firm's promise is a document, so the page writes one in front of you, clause by clause, and signs it.

04

Why it converts

A cross-border client arrives asking whether they will know what is happening. This page answers with the artefact itself, before it asks for anything.

The enquiry is the visitor's own letter, TG-0615, the matter after the firm's 614th, with its blanks as the form. Name and address go in the address block; choosing the matter prints the three documents the firm will ask for right under it; choosing the urgency books the first call beside the same-day reply the hero promises. A rule under the visitor's words fills to the twenty characters the form needs, and Send sits directly under them.

Every button reaches that form, and "Start a property letter" arrives with the matter already chosen. Focus follows the scroll, so the next Tab lands on the first blank. The page closes the way the firm closes a letter: "Yours faithfully," the signature at display size, the office stamp, and a P.S. with the button.

05

How it is built

The markup ships every final state. With reduced motion there is no stage and no Lenis, and the page is the finished document beside a sticky clause index; without JavaScript it is the same. The hero's first three seconds are CSS keyframes on the server-painted page, so the headline never waits for hydration, and nothing already on screen at hydration is hidden to be animated again.

The stage is held by CSS sticky, because a GSAP pin flips to fixed and back and Chrome scores that as layout shift. Its sheet narrows at each laptop width and stops clear of the Concept badge. On a phone the letter is a static document whose clauses rule and wipe in once, with the longer lists behind a "Show all" button.

Contrast is a colour, never an opacity: gold-family text steps down to bronze on paper and deeper on the desk. The hero photograph runs edge to edge with no scrim, no tint and no blur: the promise sits on the dark wall and door in its left half, the column is capped short of the windows, and the crop keeps it there at every landscape width, measured against the pixels behind each line at 6.3:1 or better. Phones and tall screens get the photograph as a band with the promise on navy beneath. Three more photographs carry a section each: the sealed letter beside the specimen, the meeting room above the people, and the building at blue hour under the last page. Nine photographs from the earlier build were retired, two of them showing people who are not on the staff.

Tagus & Co. is a fictional firm, invented so we could build the site it would need. The company is not real. The build is: every clause, every rule, every line of code.

Let’s make your digital work compound.

Choose a time on Gabriel’s calendar. We’ll go through where you are today, what’s slowing growth, and what’s worth doing first, whether or not we work together.

Gabriel Espinheira

Gabriel Espinheira

Senior software engineer · English or Portuguese

A focused 30 minutes, not a sales pitch.