Santiago de Paula
Law doesn't sell enthusiasm. It sells trust.
A proposal for the first digital presence of a public procurement law firm, made on my own initiative as a prospecting piece. The direction is restraint with finish: near-black, an editorial serif, 1px rules and a single bronze accent. It is dark because the brand's only asset is a white logo drawn for dark grounds. The content carries the weight: the sanction ladder of article 156 and direct questions, with a source for every figure.
- Art direction, identity and front-end
- Website · Identity · Concept
Context
What was live
- An "under construction" page live since 2021 (five years before this piece)
- A free template, with Bootstrap's stock palette and no relation to the sector
- No brand colour found in the audit
- A single brand asset: the white, monochrome logo
Challenge
The firm's website wasn't a website.
It was a "Please wait! Site under construction" page with a 2021 footer, on the stock palette of a Bootstrap template. There was no site to redesign: the job was to propose the firm's first digital presence.
Research
- Public procurement figures from Brazil's national procurement portal (PNCP), 2025 report.
- Deadlines and sanctions in articles 156, 164, 165 and 166 of Law 14.133/2021.
- The rules on legal advertising in Ruling 205/2021 of the Brazilian Bar Association.
- An audit of the old site: the "under construction" page, the template palette and no brand colour at all.
Decisions
The bar's rules as the argument
- Law has advertising rules: Ruling 205/2021 of the Brazilian Bar Association forbids client solicitation, promises of results and testimonials.
- The page respects every line and says so out loud: a neutral CTA, no offer, and the ruling cited on the page itself.
- The usual proof of a commercial site stays out: testimonials, case counts, success rates.
- The restriction becomes the sales argument: it shows whoever made it understands the sector, not just design.
A source for every figure
- Authority in law isn't built with adjectives; it's built with citations anyone can check.
- The figures come from the 2025 PNCP data and articles 156, 164, 165 and 166 of Law 14.133/2021, and a table records the source of each one.
- No years of experience, no stock photography, no fabricated bar number, and no names that no public source provided.
- No figure is an estimate, a loose rounding or a market statistic without an origin.
A mobile layout with its own architecture
- Stacked, the desktop turns into a corridor on a narrow screen.
- The section order changes, explanatory blocks collapse into one-tap rows, the questions become an accordion and the menu becomes a full-screen panel.
- On touch, the custom cursor, the parallax and the inertia stay out: they only come in with a mouse.
- All of it comes from the same HTML, without a single duplicated line of content.
No build step, no library
- A prototype has to open on any machine, straight from the file, with no server.
- Plain HTML, CSS and JavaScript: 2.6 KB of JavaScript in the long version; the second version fits in a single file, with the logo embedded.
- The typefaces come from Google: with no network, the page falls back to Georgia and Segoe UI.
- Open straight from the file, and stay intact even offline.
Demonstration
The opening: an editorial serif, and bronze on a single word. 
Every figure carries its source: PNCP, 2025 report. 
The sanction ladder of article 156. The rule grows at every step. 
Mobile has its own architecture: it is not the desktop stacked. 
Each practice area with its article of law in the margin. 
Deadlines as the spine: different acts, the same deadline, each with its article.
An unsolicited prospecting concept. This is not the official website of Santiago de Paula Advogados.
Interactions
- Three animations, and only three: a mask reveal, image parallax on hover and a magnetic underline.
- A custom cursor and inertial scrolling; with reduced motion, all of it goes and the system cursor returns.
Implementation
- Two versions: a long commercial page, built to answer objections as the reader scrolls, and a quiet-luxury one in eight blocks.
- Visual QA with Playwright, across six screen widths.
What was built
- A proposed identity: palette and typography, built around the existing logo
- A homepage in two versions that don't replace each other
- A concept presentation PDF
- A QA report across six screen widths
- A table sourcing every figure quoted
Technology
- Cormorant Garamond
- Manrope
- HTML
- CSS
- JavaScript
- Playwright
Outcome
An unsolicited concept, made as a prospecting piece and shown here under a concept label. It is not the firm's official website.
2
versions of the homepage: a long commercial page and a quiet-luxury one
8
blocks in the quiet-luxury version, one argument each
2.6 KB
of JavaScript in the long version, with no library at all
0
AI-generated images
Learnings
- A sector's restriction is not a design obstacle: stated out loud, it shows whoever made the page understands the sector.
- With no case counts or testimonials to show, a citation anyone can check does the job of proof.
- Mobile is not the desktop stacked: the same page asks for another order, other gestures and fewer effects.
