Room 12 · Law practice for technology companies · Concept
Veldrin Law
Law that ships with you.
Veldrin Law, a fictional law practice for technology companies. Legal terms open as footnotes in the margin, beside the sentence that uses them.
Concept project — fictional brand. This project was created by ARTLOGIC to demonstrate a possible brand and digital experience. The organization, name, people, prices, and data shown are fictional. This is not client work and does not represent measured business results.
01 The brief
- The brand
- Veldrin Law is a fictional specialist practice serving technology companies. Its line is "Law that ships with you."
- The problem
- Law firm sites often hide behind jargon, scales and handshakes. This one had to explain itself, present practice areas and lawyers, and give a clear route to a consultation request.
02 The idea
Terms explained in the margin
- What you see
- Key terms in articles and pages are underlined with a small numeral. Selecting one opens a short plain-language note in the margin, joined to the word by a thin brass rule. On narrow screens the note opens as a sheet at the bottom.
- How it works
- Content marks terms with a token that is parsed when the page renders. Every note sits in the page straight after its paragraph, and a list of all terms closes each article.
03 Design system
- Ground Ivory#F7F3EA groundPage body and header.
- Ink Green#1E3B2F inkAll text, rules, primary buttons and the full-width green sections.
- Brass#8A6829 accentHairlines and rules. Text-safe darker and lighter brasses are used where contrast needs it.
- Muted#52584F mutedNotes, hints and captions.
- Error #8F2D1F. Invalid input border and message.
- Type
- Libre Caslon Text
Headings and quotations, regular weight. - Libre Franklin
Body text, notes, buttons and forms.
- Libre Caslon Text
- Edges
- Flat and square. 1px ink borders, brass hairlines, no shadows, glow or rounded corners. Lawyers are shown as typeset monograms on green squares.
- Motion
- The brass rule draws and the mobile sheet slides in, each briefly. Both are instant under reduced motion.
04 Process
Pre-production
Pre-production set the thesis, the editorial direction, twenty-two routes and the footnote behaviour. It also fixed that the site would promise no outcomes and claim no rankings, credentials or clients.
Build
The build followed a written plan, with the footnote device as the signature and practice areas, team, articles and consultation as the surrounding pages.
Finish review
Impeccable finish-review rounds compared the built pages with the direction contract and returned an ordered list of fixes.
Fixes
The fixes were applied and checked again, and the design system was documented from the finished build.
05 Technology and accessibility
- Stack
- Next.js 16, Tailwind CSS 4 and TypeScript, inside the studio's single application.
- Particular to this site
- Footnote tokens parsed at render
- Margin notes on wide screens, bottom sheet on narrow ones
- Print stylesheet that shows the notes
- Access
- Each term is a button with aria-expanded and aria-controls pointing to its note
- Notes use role="note" and follow their paragraph in reading order
- Escape closes the newest note and returns focus to its term
- A plain list of every term and note is available in each article
- Skip link and visible focus, including on green sections
- Reduced-motion removes the slide and the rule drawing
- Tests
- Covered by its own Playwright end-to-end spec and a unit test file for its logic.
06 Honest notes
Veldrin Law is a fictional brand and this site is a concept by Artlogic. The lawyers, articles and dates are invented, and nothing on the site is legal advice.
The consultation form is a demo. It stores nothing and says so on the page.
There are no photographs. Lawyers appear as typeset monograms, because real faces should not stand in for fictional people and stock gavels and scales are the cliche this concept avoids.
07 See it
Fictional prototype. A concept by ARTLOGIC for a fictional brand. English only.