Tally homepage, decoded: hand-drawn art and one button
A centred white hero with hand-drawn illustrations framing it, one blue action, and a proof strip where each logo keeps its own proportions.
4 min read
In this note
What this is, and what it is not
This is iter0's independent analysis of the Tally homepage as we captured it on 2 Oct 2026, at a 1440px desktop width and a 390px phone width. It is not affiliated with, endorsed by or written with Tally. Everything below comes from a design spec we already hold for the page: its measurements, its layout and what the capture did and did not show. There are no screenshots, logos or marketing copy from Tally here, and a live site can change at any time.
The big idea of the hero
A centred opening on a white canvas, within a 1024px content box. A 64px bold heading, a 22px support paragraph and a single 180px by 36px action sit between hand-drawn illustrations that run off both sides (the boxes are 301px and 490px wide and 1160px tall). A product preview appears below the action. A 13px reassurance line sits under the button.
The navigation choice
A plain white row, 60px high, with the logo (70px by 28px) at the left and a compact group of text links at the right, ending in a 100px by 28px filled action. Labels are 14px at weight 600 in warm grey (RGB 119,118,114). The strip is meant to stay secondary to the page content.
The signature component
The signature is a social-proof sequence: a centred 15px trust statement, five marks in one row of widths between 83px and 146px and heights between 28px and 40px, a separate 250px by 54px badge, then a generous gap before the next heading at 36px. The spec says to preserve the differing proportions of the marks rather than forcing identical tiles.
Type and colour decisions
An Inter-like sans. Heading 64px at weight 700 with -2px tracking; support copy 22px at weight 500; the action label 15px at weight 600. Colour is white, black headings, warm dark grey body text RGB(55,53,47), and a single blue RGB(0,112,215) for the action. The hand-drawn illustrations use dark strokes and pink accents.
What changes on a phone
At 390px the header stays 60px. A 342px by 112px group of illustrations sits above the heading, which becomes 26px with 31px line height. The support is 16px, the action stays 180px by 36px, and the product preview begins near y=542. The pricing link and filled action from desktop are not shown.
What the capture does not tell us
The preview's behaviour and crop cannot be inferred from its object-fit value alone, as the spec itself says, and nothing about hover or menu behaviour is established.
What to steal (the pattern, not the look)
One headline, one sentence, one button, and let hand-drawn art supply the personality. When you show customer logos, keep their natural proportions rather than squeezing them into identical boxes.
Get the free Tally design spec
We keep a longer craft spec for this page: hero, navigation and signature component, with the measured sizes, a list of what not to copy and checks you can run. It is free to download as a Markdown file, and you can use it as a pattern guide for your own site. It describes layout and proportion, so use your own name, wording and imagery. If you want a site built around the same pattern, give the spec to iter0 and it will build you an original page from it.
Put the brief into practice
A launch page should make the buyer, promise, proof, and next action obvious. iter0 uses this same standard when it turns a brief or reference site into a builder-ready page.
Start your launch build