---
title: "Tally Forms design system"
variant: extended
source: https://tally.so/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/tally-so)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Tally Forms · Design System

> A bright canvas for expressive, easy-to-build forms

**Theme:** light · **Industry:** saas · **Source:** https://tally.so/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A spacious SaaS homepage pairs a clean white canvas and dark, compact typography with vivid magenta marks and informal hand-drawn illustrations. Product previews, feature cards, social proof and repeated creation prompts turn a long page into a friendly guided tour of the form builder.

## North star

Keep the page as a calm white product canvas, using blue for action and hand-drawn magenta accents to make interface previews feel approachable.

## Overview

Tally’s visual strategy uses an almost uninterrupted white canvas to keep attention on the message and the form previews. Dark, near-black headings create a strong reading hierarchy, while restrained gray text and hairline borders keep supporting content quiet. Blue is reserved for the primary create-form actions and occasional in-product links; vivid purple-to-pink accents appear in selected heading marks, icons, and playful illustration details rather than as broad section fills. Inter is used throughout, with bold display and section headings balanced by readable, regular-weight body copy. The layout moves through centered hero content into a long, centered sequence of product demonstrations, feature cards, testimonials, integrations, and closing calls to action. Hand-drawn monochrome doodles add personality around otherwise tidy interface mockups. Generous whitespace separates the varied content blocks, while subtle borders and restrained shadows give product previews just enough depth.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas and the background for navigation, content bands, and most product previews. |
| Warm Ink | `#37352f` | `--color-warm-ink` | neutral | Primary measured text and link color across headings, body copy, and interface content. |
| Soft Divider | `#ececeb` | `--color-soft-divider` | neutral | Hairline borders around form previews and cards; separates surfaces without strong contrast. |
| Action Blue | `#0070d7` | `--color-action-blue` | brand | Primary create-form buttons and occasional linked text in the page and product examples. |
| Quiet Graphite | `#5f5e5a` | `--color-quiet-graphite` | neutral | Muted explanatory copy and secondary descriptions. |
| Violet Spark | `#8a46ff` | `--color-violet-spark` | accent | One endpoint of the heading gradient and a small accent in icons and illustrations. |
| Electric Petal | `#f81ce0` | `--color-electric-petal` | accent | Gradient endpoint, hand-drawn marks, feature icons, and occasional preview-card highlight. |
| Muted Stone | `#777672` | `--color-muted-stone` | neutral | Secondary navigation labels and quieter supporting text. |
| Pure Black | `#000000` | `--color-pure-black` | semantic | Selected headings and the black Browse templates button; also appears in rendered interface content. |
| Deep Taupe | `#45433e` | `--color-deep-taupe` | neutral | Sparse secondary text detail; not a defining page-wide brand color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#37352f` (Warm Ink) · `--color-text-muted` → `#5f5e5a` (Quiet Graphite) · `--color-text-subtle` → `#777672` (Muted Stone) · `--color-border` → `#ececeb` (Soft Divider) · `--color-accent` → `#0070d7` (Action Blue) · `--color-accent-2` → `#8a46ff` (Violet Spark) · `--color-accent-3` → `#f81ce0` (Electric Petal) · `--color-on-accent` → `#37352f` (Warm Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#37352f` | `#ffffff` | 12.26:1 | AAA |
| `#5f5e5a` | `#ffffff` | 6.49:1 | AA |
| `#777672` | `#ffffff` | 4.55:1 | AA |
| `#0070d7` | `#ffffff` | 4.88:1 | AA |

### Gradients

- `linear-gradient(to right, rgb(138, 70, 255) 0%, rgb(248, 28, 224) 50%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 500, 400, 700, 600, 800 | All measured page typography, including display headings, navigation, body copy, links, and interface labels. | Inter |

- **Inter:** Use bold, tightly tracked display headlines, clear weight contrast, and sentence case; keep body text regular and readable.

### Type scale — Perfect Fourth (ratio ≈ 1.32, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 700 | 1 | -0.031em | — | Inter | Large centered hero headline and other prominent campaign-style statements. |
| h1 | 36px | 700 | 1.15 | 0 | — | Inter | Primary section headings and major page titles. |
| h2 | 30px | 700 | 1.15 | 0 | — | Inter | Secondary section headings introducing product capabilities. |
| h3 | 26px | 800 | 1.15 | 0 | — | Inter | Feature-card and subfeature headings, often strongly emphasized. |
| h4 | 22px | 500 | 1.25 | 0 | — | Inter | Smaller supporting headings and preview-panel titles. |
| body | 16px | 400 | 1.5 | 0 | — | Inter | Main explanatory copy, product descriptions, and testimonial text. |
| caption | 13px | 400 | 1.15 | 0 | — | Inter | Compact helper notes, interface labels, and attribution details. |
| nav | 14px | 600 | 1 | 0 | — | Inter | Header navigation links and compact menu items. |
| link | 16px | 600 | 1.5 | 0 | — | Inter | Inline links and emphasized navigational text. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 10, 14, 16, 24, 32, 64, 192 px.
- Section rhythm 64px · element gap 8px · card padding — · max content width 976px.

A long, single-column homepage centers its primary content in a measured 976px maximum-width container. The hero uses centered alignment and generous breathing room, then the page alternates between full-width-feeling product demonstrations and compact multi-column feature cards. Section spacing follows a comfortable, consistent rhythm; card groups introduce denser information without crowding. Doodles occasionally extend around the main content, while text and interface examples remain aligned to the central page structure.

## Shape & elevation

- Radius: button `8px` · card `10px` · media `50%` · nav `7px` · link `5px` · xs `7px` · sm `8px` · md `10px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, rgba(61, 59, 53, 0.16) 0px 0px 0px 1px, rgba(61, 59, 53, 0.08) 0px 3px 9px 0px, rgba(61, 59, 53, 0.08) 0px 2px 5px 0px`
- Shadow `md-2` (card): `rgba(0, 0, 0, 0.09) 0px 3px 12px 0px`
- Shadow `hairline` (card): `rgb(248, 28, 229) 0px 0px 0px 2px, rgba(248, 28, 229, 0.36) 0px 0px 0px 4px`
- Shadow `sm` (other): `rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, rgba(61, 59, 53, 0.16) 0px 0px 0px 1px, rgba(61, 59, 53, 0.08) 0px 2px 5px 0px`
- Motion: standard transition `0.1s ease-in-out` on interactive elements.

Most sections sit flat on white, with fine gray borders defining cards and browser-like previews. Product panels use restrained, soft shadows to distinguish them from the canvas without creating heavy depth. Rounded card corners are visible, and selected preview cards may use a vivid magenta outline or focus ring as a localized highlight.

## Imagery

Hand-drawn black-line doodles, often with small magenta strokes, frame the hero and feature sections. Large product mockups show form-builder interfaces and completed forms, presented as clean browser-like panels. Small customer logos, portraits, and award artwork appear as supporting proof. Imagery is illustrative and product-led rather than photographic; keep drawings airy and let interface previews remain legible.

## Components

### Top navigation

Compact brand mark at the left, with right-aligned Pricing, Log in, Sign up, and a blue Create form button.

### Hero and primary action

Centered, bold headline with a small pink hand-drawn underline, brief supporting copy, blue creation CTA, and a small reassurance note.

### Form preview

Large browser-like panel with a subtle border and shadow, showing realistic form content as the main product demonstration.

### Feature cards

A mix of broad showcase panels and smaller modular cards, with restrained borders, concise copy, and magenta feature icons.

### Testimonial

Centered customer quote with muted attribution and a small portrait, separated from adjacent feature sections by whitespace.

### Repeated CTA

Blue Create a free form button reappears after product explanations and near the closing conversion section.

### Measured component styles

- **Primary button** (“Create a free form”): background #0070d7 · text #37352f · radius 8px · padding 0px 13.5px · 400 15px Inter
- **Secondary button** (“Browse templates”): background #000000 · text #37352f · radius 8px · padding 0px 13.5px · 400 15px Inter
- **Link** (“Notion”): transparent background · text #37352f · radius 0px · padding 0px · 600 16px Inter
- **Card** (“Unlimited forms and submissions for free”): background #fefefe · text #37352f · radius 10px · padding 0px · 400 16px Inter · shadow rgb(248, 28, 229) 0px 0px 0px 2px, rgba(248, 28, 229, 0.36) 0px 0px 0px 4px
- **Navigation item** (“Pricing”): transparent background · text #37352f · radius 7px · padding 0px 9.8px · 400 14px Inter

## Do

- Keep the canvas predominantly white.
- Use Warm Ink for strong, readable headings.
- Reserve Action Blue for primary conversion actions.
- Add Electric Petal and Violet Spark as small expressive accents.
- Show realistic form interfaces inside clean, softly elevated panels.
- Separate long-page sections with generous whitespace.
- Use hand-drawn line art to soften product-led layouts.

## Don't

- Do not turn the page into a dark theme.
- Do not spread the accent gradient across large backgrounds.
- Do not use heavy shadows or thick card borders.
- Do not let illustrations obscure interface previews or copy.
- Do not crowd the centered content with dense layouts.
- Do not use multiple competing primary-action colors.

## Agent prompt

Build a new SaaS page in Tally’s friendly, minimal visual style. Use Gallery White (#ffffff) as the dominant canvas, Warm Ink (#37352f) for key text, Quiet Graphite (#5f5e5a) for supporting copy, and Soft Divider (#ececeb) for subtle panel boundaries. Make primary actions Action Blue (#0070d7); use Violet Spark (#8a46ff) and Electric Petal (#f81ce0) sparingly for small doodles, icons, and expressive marks. Set all typography in Inter, with bold, crisp headings and comfortable body text. Center content in a measured 976px maximum-width column, then vary product showcases and modular feature cards. Use browser-like form previews, restrained shadows, light borders, and generous whitespace. Add occasional monochrome hand-drawn illustrations, never letting them compete with product content.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | Long, centered single-column page with a centered hero followed by product showcases, feature grids, testimonials, integrations, and closing CTAs. | Persistent top navigation, Repeated form-creation CTA, Product demonstrations, Customer proof | White canvas, Blue primary buttons, Softly bordered preview cards, Magenta hand-drawn accents |

## Source CSS custom properties (selected)

```css
--tally-builder-font: 'Inter','Inter Fallback';
--tally-builder-text: #37352F;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/tally-so