---
version: alpha
name: Tally — illustrated form-builder landing page
description: A white, spacious SaaS landing page with black typography, blue actions and hand-drawn decoration.
colors:
  primary: "#0070D7"
  secondary: "#37352F"
  tertiary: "#EF19E9"
  neutral: "#FFFFFF"
  surface: "#FEFEFE"
  on-surface: "#000000"
  border: "#DFDFDE"
typography:
  headline-display:
    fontFamily: Inter
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -2px
  headline-lg:
    fontFamily: Inter
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.15
  headline-md:
    fontFamily: Inter
    fontSize: 26px
    fontWeight: 800
    lineHeight: 1.15
  body-lg:
    fontFamily: Inter
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.25
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  headline-mobile:
    fontFamily: Inter
    fontSize: 26px
    fontWeight: 700
    lineHeight: 1.2
rounded:
  action: 8px
spacing:
  mobile-gutter: 24px
  action-inline: 13.5px
components:
  primary-action:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.action}"
---

# Tally landing-page reference

## Overview

Observed at https://tally.so/ on September 18, 2026, at 1440px desktop and 390px mobile widths. The visual character is friendly, document-like and approachable. A centered promise and compact action lead into a large form-editor demonstration, feature modules, customer quotes, integrations, use cases, FAQ and a multi-column footer. This is an independent visual reference, not an official brand specification.

## Colors

Use a white canvas, black headings and warm dark-gray body text. Blue marks the main action. Small magenta scribbles and gray line drawings provide personality without filling the background. Neutral, text, button and border values are sampled from computed CSS; the magenta token is a visual estimate from illustration artwork. No error-state palette was observed.

## Typography

Use Inter for the interface; preserve the distinctive wordmark separately rather than approximating it with the body font. Desktop hero type is 64px/64px, weight 700, with -2px tracking. Section headings are 36px; prominent card headings are 26px. Lead paragraphs use 22px/27.5px, while detailed copy uses 16px/24px. Mobile hero type reduces to 26px and section headings to 20px. Values are sampled; token names describe roles rather than original source names.

## Layout

Center the main desktop content in a measured 976px region. Let doodles extend outside it. Keep the hero centered but align most feature copy left. Alternate full-width feature cards with paired cards and lighter text grids. Use ample space between major chapters; no complete spacing scale was inferred.

At 390px, the main content has 24px side gutters. The hero illustrations move above the headline; feature content stacks and the form demo scales down. The header retains login/signup while pricing and the desktop create button disappear. Both tested widths avoid horizontal page overflow; intermediate breakpoints were not inspected.

## Elevation & Depth

Use fine pale borders and restrained soft shadows for browser-frame demos. Keep the surrounding page flat. Shadow blur and opacity were not measured; avoid treating them as exact tokens.

## Shapes

Use softly rounded controls, including the measured 8px action radius. Round demo frames gently. Contrast clean rectangular content modules with irregular hand-drawn faces, speech bubbles and underlines.

## Components

The hero combines headline, short supporting text, one blue action and a small reassurance line. A browser-style frame makes the product tangible. Later sections reuse a heading, short paragraph and illustrated demo. Customer quotes act as quiet separators. End with another action, collapsed FAQs and grouped footer links. The product demos animate; the supplied screenshot records one state, not a complete interaction specification.

## Do's and Don'ts

- Do keep the primary action easy to distinguish from decorative magenta marks.
- Do preserve readable text and generous spacing as columns stack.
- Do use original illustration assets when adapting the style.
- Don't crowd the page with extra buttons, heavy shadows or saturated panels.
- Don't infer hover, keyboard-focus or validation states from this static reference; those were not tested.