Source：krogerus.com ↗ Checked 2026.10.19
Editor's note
What this site does
A Helsinki law firm that sums itself up in one plain sentence and puts its latest matters, with practice area and date, right under the first screen.
Conversion
Notes
What you see
The first screen is a photograph looking down a spiral staircase, with two lines of type: "Leading the way in complex matters" and, much larger, "Business law in a straightforward way". The header lists Expertise, People, Careers, References, Events, Insights and About, and ends with a solid black "Contact" button.
Directly below come three recent matters, each labelled with its practice area and a date from the past fortnight. Then nineteen practice areas as cards with a short description each, insights (including a note that the firm is ranked Tier 1 in IFLR1000), careers, an introduction to the people, an event and insight subscription form, and the Helsinki address with phone and email.
What to take from it
A professional firm can say what it does and how in one sentence without jargon. "Business law, straightforwardly" tells a reader the scope and the attitude at once.
Dated matters near the top show that the firm is busy now, which a static list of services cannot. Listing every practice area lets a prospective client start from their own problem rather than from the firm's structure.
Typography
Typefaces
| Element | Desktop size / weight | Desktop line height | Mobile size / weight |
|---|---|---|---|
| h1 | 88px / 300 | 1.00 | 48px / 300 |
| h2 | 40px / 300 | 1.15 | 32px / 300 |
| h3 | 24px / 300 | 1.40 | 24px / 300 |
| Body (p) | 18px / 300 | 1.60 | 16px / 300 |
| Button | 16px / 300 | 1.60 | 14px / 300 |
Measured values (desktop 1440px, mobile 375px, 2026.10.19). The most frequent setting for each element is shown. Sites that use h1 for a logo or small label will show a small h1.
Download
Download the wireframe
This structure, as a wireframe you can edit in Figma
The page structure above, rebuilt from DevNJ's wireframe parts. It contains none of the original site's copy, images or code.
Using it in Figma
- Download the SVG.
- Drag and drop the file onto a Figma canvas.
- It opens with one layer group per section — start by reordering sections or replacing the copy.
Text comes in as text layers (set in Noto Sans JP).
Screenshots are shown at reduced size as quotations supporting the commentary. All rights in the design, copy and images belong to Krogerus and their respective owners. The wireframes are not copies of the original site; they rebuild its structure from DevNJ's parts. Owners or designers who would like this entry removed or corrected can contact us; we respond within two business days. Featured on: Httpster
