Source：distillatigroup.com ↗ Checked 2026.10.26
Editor's note
What this site does
An Italian maker of spirits, liqueurs and syrups for the hospitality trade that says who it sells to in its first headline and lists each product line by flavours and uses.
Conversion
Notes
What you see
After an age check, the page opens on a paper-textured off-white background, a large logo marked “A Family Company” and “Est. 1965”, a photo of bottles and the headline “Professional distillates, liqueurs and syrups for the horeca industry — made in Italy since 1965”. The text below names the customers: bartenders, distributors, hotel chains and restaurants.
The product lines follow, each with a count and its uses: Dreamy fruit preparations (over 40 flavours), Il Doge syrups (over 90), dessert sauces, powders, non-alcoholic and alcoholic ranges. The menu and footer carry “Call us” and “Catalogs”; the catalogues page holds a general catalogue, two product-line catalogues and an enquiry form. The footer gives the address, phone, email and VAT number.
What to take from it
A B2B maker should say who the product is for before anything else. One headline here tells a buyer this is a trade supplier, not a consumer brand.
Listing each line by number of flavours and by use (cocktails, coffee, milkshakes, ice cream) helps buyers compare. Putting the catalogues and the enquiry form on one page turns a download into a conversation.
Typography
Typefaces
| Element | Desktop size / weight | Desktop line height | Mobile size / weight |
|---|---|---|---|
| h1 | 33px / 400 | 1.00 | 30px / 400 |
| h2 | 32px / 400 | 1.00 | 32px / 400 |
| Body (p) | 15px / 400 | 1.50 | 15px / 400 |
Measured values (desktop 1440px, mobile 375px, 2026.10.26). 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 Distillati Group 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: Awwwards — Honorable Mention
