# Tally homepage design spec (free) - Site: tally.so - Captured: 2 Oct 2026, at 1440x900 desktop and 390x844 phone widths - Independent analysis by iter0. Not affiliated with, endorsed by or sponsored by Tally. - Licence: free to use as a pattern guide for your own site. It describes layout, proportion, type scale and colour roles. Do not copy Tally's name, logo, wording, imagery or artwork. - Contents: 1. Hero, 2. Navigation, 3. Signature component. - Build your own site from this spec: https://iter0.com/build --- # Hero — centered headline with hand-drawn framing Evidence provenance: Based on the supplied desktop and 390px screenshots, below-fold screenshot, and computed-style measurements. The reference’s visible wording and brand identity are not design requirements. CRAFT ARCHETYPE: illustration-led ## The big idea Create a centered opening on a white canvas, with hand-drawn illustrations framing the desktop content and a compact illustration grouping above the text on mobile. Keep the headline, supporting copy, and primary action clearly separated. A product-preview image is visible below the desktop hero action and in the supplied mobile screenshot; its internal content should be replaced with original, appropriate material. ## Layers At 1,440px viewport width, the main content box is 1,024px wide, beginning at x=208; its measured heading begins at x=233, y=188 and is 973×64px. The supporting paragraph begins at x=420, y=284 and is 600×55px. The primary action is 180×36px at x=630, y=403. Desktop decorative images extend beyond the viewport edges: measured boxes include 301×1,160px at x=−48 and 490×1,160px at x=998. The product-preview image is visible beginning around y=376 in the desktop screenshot. At scrollY=900, the trust statement and following content heading are visible; preserve that progression and the substantial vertical spacing. ## Type The desktop heading is 64px/64px, weight 700, with −2px letter spacing. Supporting copy is 22px/27.5px at weight 500. The primary-action label is 15px, weight 600; the reassurance line below it is 13px. Use a sans-serif close to the measured Inter stack and keep the heading as the dominant type element. ## Colour Use a white background, black heading, and warm dark-gray body text (measured RGB(55, 53, 47)). The measured primary-action background is RGB(0, 112, 215), with white label text. Hand-drawn marks include dark strokes and pink accents in the supplied screenshots; reproduce the general contrast, not the exact drawings. ## States and motion The supplied rules show the primary action darkening to RGB(0, 91, 181) on hover and receiving a 4px translucent blue focus outline. The screenshots and supplied hero rules do not establish animation behavior; leave it unspecified. ## Phone at 390px The header is 60px high. The illustration box above the heading measures 342×112px at x=24, y=124. The heading is 342×62px at x=24, y=271, set at 26px/31.2px. Supporting copy is 342×60px at x=24, y=350, set at 16px/20px. The 180×36px primary action is at x=105, y=442. The supplied mobile screenshot also shows a product preview below the action, beginning around y=542; do not infer its behavior or crop from the computed object-fit value alone. ## Do NOT copy or add Do not reproduce the reference’s exact headline, logo, hand-drawn art, product-preview content, or customer marks. Do not invent animation, copy, or interaction behavior. ## Checks you can run At 1,440px, check the 1,024px main box, 64px heading, 180×36px action, and centered text hierarchy. At 390px, check the 60px header, 342×112px illustration box, 26px heading, and 180×36px action. Confirm the supplied focus treatment is visible and artwork does not obstruct the text or action. --- # Navigation — compact utility row Evidence provenance: Based on the supplied 1,440px desktop and 390px mobile screenshots and measured header, link, and image boxes with computed styles. CRAFT ARCHETYPE: type-led ## The big idea Use a single, white navigation row with a left-aligned logo image and a compact group of right-aligned links. On desktop, a filled action ends the group. Keep this utility strip visually secondary to the page content. ## Layers The header spans the 1,440px desktop viewport and measures 60px high, with 20px padding. The logo image box measures 70×28px at x=20, y=16. Desktop text links have 28px-high boxes; the measured group begins around x=1,092. The final filled action measures 100×28px at x=1,320 and has a 6px leading margin. The header uses flex layout. At 390px, the header remains 60px high; the logo remains 70×28px at x=20, y=16, and two account links occupy boxes at x=235 (61×28px) and x=299 (71×28px). The mobile capture does not show the desktop pricing link or filled action. ## Type Use a sans-serif close to the measured Inter stack. Desktop and mobile navigation labels are 14px/14px at weight 600. The visible label color is RGB(119, 118, 114); the filled action’s label is white. Keep labels on one line. ## Colour The measured header background is white (RGB(255, 255, 255)). Unfilled links have transparent backgrounds. The desktop filled action uses RGB(0, 112, 215), with a measured 7px corner radius. Link elements use warm dark gray RGB(55, 53, 47) as their computed base color. ## States and motion The supplied rules give ordinary links a 4px translucent blue focus outline; hover adds a subtle black overlay and changes label color to RGB(69, 67, 62). The filled action darkens to RGB(0, 91, 181) on hover. The recorded transition is 0.1s ease-in-out. Do not infer dropdowns or other behavior from these rules. ## Do NOT copy or add Do not reproduce the exact logo, brand name, navigation labels, or action wording. Do not add a hamburger, sticky behavior, divider, or extra navigation item; none is established by the supplied evidence. ## Checks you can run At 1,440px, check the 60px header, 20px padding, 70×28px logo box, 14px labels, and 100×28px filled action. At 390px, check the 70×28px logo and the two visible link boxes at x=235 and x=299. Confirm the measured focus and hover styles without adding unsupported interaction behavior. --- # Below-fold proof — centered trust row and follow-up section Evidence provenance: Based on the supplied below-fold screenshot at scrollY=900 and measured boxes and styles. The desktop screenshot visibly shows a trust statement, five image marks, a separate badge, and the beginning of a following content section. CRAFT ARCHETYPE: illustration-led ## The big idea Place a centered trust statement above a single row of image marks, followed by a separate badge and a spacious transition into the next content section. This is a social-proof sequence, not a feature grid, pricing table, or testimonial carousel. ## Layers In the 1,440px desktop capture, the trust statement begins at x=232, y=396 and measures 976×17px. Five image marks appear below it, with measured widths from 83px to 146px and heights from 28px to 40px; preserve their differing proportions rather than putting them into identical tiles. A separate badge image measures 250×54px at x=595, y=511; its enclosing link measures 250×57px. The next section heading begins at x=232, y=760 and measures 781×41px. Its paragraph begins at y=818 and measures 781×55px. Keep the generous gap between the badge and that heading. ## Type The trust statement is 15px/17.25px at weight 500, in RGB(55, 53, 47). The following section heading is 36px/41.4px, weight 700, in black. Its supporting paragraph is 22px/27.5px at weight 500. The supplied evidence does not require reproducing any of the reference’s wording. ## Colour The visible page background is white. The trust statement uses warm dark gray; the next heading is black. The supplied screenshot shows a dark badge, but no computed badge colors are provided. Sample an original asset rather than assuming exact surface values. Avoid adding colored card backgrounds to the mark row. ## States and motion No hover, focus, or motion behavior for this group is established by the supplied styles. Treat those states as unknown; do not invent a carousel. ## Do NOT copy or add Do not copy the reference’s customer names, logos, badge artwork or wording, numeric claims, or following-section copy. Use only assets and claims that are authorized and substantiated. Do not describe the row as testimonials or pricing. ## Checks you can run Check for five image marks in the supplied desktop row, widths within the measured 83–146px range, and the centered 250×57px badge link. Verify the 15px trust statement, 36px following heading, and measured vertical separation. Do not add unsupported endorsements or claims.