User interface and experience design for the new Instituto Pro Bono website, in 11 pages.
Instituto Pro Bono mobilizes volunteer lawyers, law firms and legal departments to offer free, high-quality legal support in Brazil, for more than two decades.
The site has to serve different audiences: people who want to volunteer, people looking for legal support, people who want to donate and civil society organizations.
Theorema designed the site’s user interface (UI) and user experience (UX): the structure of each page, the paths between them and the visual system. The 11 pages were delivered in HTML, as the basis for rebuilding in WordPress.
The previous site organized content well but felt flat: a simple hero, direct imagery, clean cards. The institute brought two reference screens, Civil Society and Individuals, which it had created itself at a much higher level of finish.
Rather than treating them as two pages to copy, I read them as a system and cataloged what repeated: duotone photography, cards floating over the hero, overlapping circular shapes in outline and fill, paper texture, pill labels, custom icons on each card, highlighted number blocks and decorative arcs. Eleven kinds of graphic element, a dual typography (editorial serif with a sans) and a short palette of blues and teal.
That changed the nature of the work. The most expensive part, inventing a visual language, was already done. What remained was extracting the rules and applying them to the other nine pages without the result turning into a stamp. So the path was to design one full page first, Get involved, to fix the rules, and only then spread them.
Each one answers a question visitors arrive with.
The site serves volunteers, law firms, organizations, partners and donors, and each arrives with a different goal. So the header always carries two buttons, Be a volunteer and Support, and the page gathers five profiles, each with one sentence and the right action button. Nobody needs to understand how the institute is organized to find their way.
People seeking legal support want to know what happens after they ask. The page explains it in five steps, from presenting the request to following up on the project, to remove uncertainty before the first contact.
Instead of a generic form, contact starts with a question: what is the reason. There are five options, and the last leads to the FAQ. Triage begins on the page itself, and each person goes to the right flow.
The photos belong to the institute and come from different sources and colors. A blue and teal duotone applied with CSS makes distinct photos feel like one set and lets an image be replaced without redoing the treatment. In the heroes, the title sits on the dark part of the photo, and contrast was measured on the final image.
The graphic signature is the ring. It echoes the two overlapping circles of the institute’s symbol and appears in the corners of the pages, at different sizes and positions. Fraunces for headings and DM Sans for text complete the recipe: duotone, ring and serif. Variation comes from the opening color, as in the references: blue on the Home, petrol green on Criminal Justice, teal on Contact.
The brand teal is the institute’s strongest color and the one most used on buttons. White on it reaches 2.64:1 contrast, below the 4.5:1 minimum. So text on teal is always the dark green, and teal gained three variants by function: one for text on light backgrounds, one for dark backgrounds and one for strokes and icons.
Headings over photography were simulated with the image, the duotone and the wash applied, and contrast was measured point by point. The worst point on the site came out at 5.08:1. The mobile menu traps focus, closes with Esc and locks scrolling, and animations respect the reduced-motion preference.
#11B1B0#096765#5ADAD7#0C8583#0A8181#164171#0D5488#E1F3F5#052B2C#0E1B2AA responsive site, with the visual system documented in CSS variables. The pages: Home, About, What we do, Projects, Support for CSOs, Criminal Justice, Amicus Pro Bono, Knowledge, News, Get involved and Contact.
Theorema work for Instituto Pro Bono, in UI and UX. Development and production publishing are not part of the scope credited to Theorema. The screens on this page are captures of the delivered site; texts and photographs belong to the institute.