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

# Tilda · Design System

> Quiet editorial clarity with a coral spark

**Theme:** light · **Industry:** saas · **Source:** https://tilda.cc/ · **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._

Tilda presents its website builder through spacious editorial layouts, fine-weight typography, and playful product illustrations. A restrained monochrome palette and soft gray bands let coral CTAs and illustrated details stand out.

## North star

Let spacious white editorial layouts and light typography lead; use coral only to direct attention to key actions and details.

## Overview

The page uses white as its dominant canvas, with black text and occasional light-gray bands to create a calm, editorial rhythm. Coral is reserved for the primary free-start CTA, selected inline links, and details inside illustrations; the brighter coral gradient is subtle rather than a page-wide effect. TildaSans carries the identity: light-weight, generously sized headlines contrast with compact uppercase navigation and small, quiet body copy. The hero pairs an expansive illustrated composition with a centered text-and-action area, while later feature sections alternate text and line-art or product previews. Large gaps between content blocks keep the long page from feeling crowded, and gray feature bands provide structure without heavy dividers. Product screenshots sit within the content as examples, not as the source of the brand palette. Overall, prioritize open white space, precise alignment, thin typographic character, and selective coral emphasis.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Tilda Ink | `#000000` | `--color-tilda-ink` | brand | Primary headings, body text, navigation, outlines, and occasional dark section background. |
| Coral Action | `#fa8669` | `--color-coral-action` | accent | Primary free-start buttons and coral accent border; the clearest interactive emphasis. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and text on dark or coral surfaces. |
| Soft Feature Gray | `#efefef` | `--color-soft-feature-gray` | surface | Broad design-feature and product-category section bands. |
| Warm Coral | `#ff8c6f` | `--color-warm-coral` | accent | Brighter endpoint of the coral gradient and a restrained link accent. |
| Charcoal Panel | `#2a2a2a` | `--color-charcoal-panel` | surface | Large dark AI feature section; creates a single strong contrast break. |
| Quiet Gray | `#7f7f7f` | `--color-quiet-gray` | semantic | Muted supporting text and secondary copy. |
| Hairline Gray | `#e3e3e3` | `--color-hairline-gray` | neutral | Fine measured borders and subtle separators; use sparingly. |
| Mist Surface | `#f8f8f8` | `--color-mist-surface` | surface | Very light link or small surface background, not a dominant section color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#efefef` (Soft Feature Gray) · `--color-surface-2` → `#2a2a2a` (Charcoal Panel) · `--color-surface-3` → `#000000` (Tilda Ink) · `--color-surface-4` → `#f8f8f8` (Mist Surface) · `--color-text` → `#000000` (Tilda Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#7f7f7f` (Quiet Gray) · `--color-border` → `#fa8669` (Coral Action) · `--color-accent` → `#fa8669` (Coral Action) · `--color-accent-2` → `#ff8c6f` (Warm Coral) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#efefef` | 18.26:1 | AAA |
| `#000000` | `#2a2a2a` | 1.46:1 | fail |
| `#ffffff` | `#efefef` | 1.15:1 | fail |
| `#ffffff` | `#2a2a2a` | 14.35:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#7f7f7f` | `#ffffff` | 4:1 | AA-large |
| `#7f7f7f` | `#efefef` | 3.48:1 | AA-large |
| `#7f7f7f` | `#2a2a2a` | 3.58:1 | AA-large |
| `#7f7f7f` | `#000000` | 5.24:1 | AA |

### Gradients

- `linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0))`
- `linear-gradient(330.48deg, rgb(250, 134, 105) 0%, rgb(255, 140, 111) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| TildaSans | `--font-body` | webfont | 300, 400, 600, 700, 500 | Page-wide display, headings, body, navigation, links, and labels. | Inter |

- **TildaSans:** Use light weights for large headings and body; navigation is bold uppercase with tracked labels, while most copy stays lowercase and open.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 78px | 300 | 1.17 | 0 | — | TildaSans | Large, light-weight hero or statement headlines. |
| h1 | 72px | 300 | 1.56 | 0 | — | TildaSans | Primary page headline and top-level messaging. |
| h2 | 60px | 300 | 1.23 | 0 | — | TildaSans | Major feature-section titles. |
| h3 | 48px | 300 | 1.23 | 0 | — | TildaSans | Feature and category headings. |
| h4 | 46px | 600 | 1.13 | 0 | — | TildaSans | Emphasized subsection or card headings. |
| body | 16px | 300 | 1.55 | 0 | — | TildaSans | Light-weight explanatory paragraphs. |
| caption | 14px | 400 | normal | 0.179em | uppercase | TildaSans | Small uppercase eyebrow labels with wide tracking. |
| nav | 13px | 700 | normal | 0.038em | uppercase | TildaSans | Compact bold uppercase header navigation. |
| link | 26px | 300 | 1.45 | 0 | — | TildaSans | Prominent lightweight links and feature links. |
| eyebrow | 14px | 400 | normal | 0.179em | uppercase | TildaSans | Small uppercase section preheadings. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 5, 8, 9, 10, 11, 13, 14, 15, 20, 26, 30, 34, 40, 44, 45 px.
- Section rhythm 90px · element gap 8px · card padding — · max content width 1200px.

Use a centered content frame capped at the measured 1200px maximum, while letting hero artwork and selected dark or gray bands feel broad. The hero is a two-column composition with illustration on the left and copy with paired actions on the right. Subsequent feature stories alternate image and text alignment, then settle into full-width feature bands and centered showcases. Preserve the measured 90px section rhythm and comfortable density; align text deliberately, with centered statement sections and left-aligned product explanations.

## Shape & elevation

- Radius: button `50%` · card `6px` · link `9999px` · xs `4px` · pill `9999px`
- Shadow `lg` (card): `rgba(0, 11, 48, 0.2) 0px 15px 30px -10px`
- Shadow `md` (card): `rgba(63, 18, 79, 0.3) 0px 20px 20px -10px`
- Motion: standard transition `0.2s ease-in-out` on interactive elements.

The page is predominantly flat: broad white and gray bands, thin outlines, and cleanly framed mockups do most of the work. Avoid adding ambient shadows to ordinary content cards. Layer illustrations and screenshots where needed for the hero or product demonstrations, keeping their edges and overlap visually restrained.

## Imagery

Use fine black line-art illustrations and playful character scenes for the product story, with coral details that echo the main CTA. Product screenshots and website mockups appear as demonstrations within feature sections, generally framed cleanly rather than styled as dramatic photography. Include video as a contained showcase. Keep imagery crisp, mostly monochrome, and surrounded by generous white or gray space; colors inside mockups are illustrative, not core brand colors.

## Components

### Primary CTA

Solid #fa8669 button with white TildaSans text; use for free-start actions and repeat it at key conversion points.

### Header navigation

Compact, bold, uppercase black TildaSans links across the top; sign-up is an outlined black button.

### Hero split

Large illustrative field beside a clear headline, short supporting copy, and paired outlined and coral actions.

### Alternating feature row

Use a product illustration or preview beside left-aligned heading and explanatory copy; alternate sides as the story progresses.

### Dark AI showcase

A #2a2a2a band with centered light text, an interface preview, and a coral action.

### Feature carousel

Light-gray feature area with laptop-style preview, side arrows, and small pagination dots.

### Feature cards

Compact preview cards on white, with concise descriptions and restrained #fa8669 details.

### Measured component styles

- **Primary button** (“Create a website for free”): background #fa8669 · text #ffffff · radius 0px · padding 14.6px 70px · 500 22px TildaSans
- **Secondary button** (“SIGN UP”): transparent background · text #000000 · border 1px solid #000000 · radius 0px · padding 6.9px 20px · 700 13px TildaSans · uppercase
- **Link** (“Tilda CRM Manage leads from your website”): background #f8f8f8 · text #ff8562 · radius 4px · padding 0px · 400 16px Times New Roman
- **Card**: background #000000 · text #000000 · radius 0px · padding 0px · 400 16px Times New Roman
- **Navigation item** (“PRICING”): transparent background · text #000000 · radius 0px · padding 0px · 700 13px TildaSans · uppercase

## Do

- Keep the main canvas white and uncluttered.
- Use TildaSans or a close neutral sans-serif substitute.
- Set large headings in a light weight.
- Reserve coral for primary actions and select accents.
- Alternate feature copy and visual alignment.
- Use gray bands to group related feature content.

## Don't

- Do not turn the page into a dark theme.
- Do not use coral as a dominant background across sections.
- Do not add unmeasured radii or spacing values.
- Do not overdecorate screenshots with shadows.
- Do not use heavy display typography throughout.
- Do not mistake colorful mockup content for brand palette.

## Agent prompt

Build a new Tilda-style page with an editorial, spacious SaaS feel. Use Gallery White (#ffffff) as the primary canvas, Tilda Ink (#000000) for typography and outlines, and Soft Feature Gray (#efefef) for occasional full-width content bands. Make Coral Action (#fa8669) the selective CTA color, with Warm Coral (#ff8c6f) only as a subtle accent. Use a clean sans-serif close to TildaSans, light-weight large headings, compact uppercase bold navigation, and quiet supporting copy. Organize the page around an illustrated hero, alternating feature rows, and one focused dark showcase in Charcoal Panel (#2a2a2a). Keep generous measured section spacing, clear alignment, thin borders, and clean product previews. Let whitespace and restrained contrast—not decoration—establish hierarchy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-column hero: illustrated product scene on the left, headline and actions on the right. | Primary and secondary actions, Language selector | Line-art illustration, Coral primary button, Outlined secondary button, Top navigation |
| 2 | other | Single centered statement with an eyebrow, headline, and compact paragraph. | Brand orientation, Scannable introduction | Uppercase eyebrow, Light-weight centered heading |
| 3 | feature-split | Product explanation and interface illustration arranged as a single feature row. | Feature discovery | Left-aligned copy, Product illustration |
| 4 | feature-split | Alternating feature row with description opposite a block-library illustration. | Feature discovery | Line-art blocks, Alternating image position |
| 5 | feature-split | Feature copy beside a line-art editor illustration. | Professional feature discovery | Editor illustration, Inline accent link |
| 6 | feature-split | Copy and AI interface illustration alternate sides within the feature sequence. | Feature discovery | Line-art interface, Coral inline accent |
| 7 | video | Single contained video showcase centered in a white section. | Watch product demo | Embedded video, Player controls |
| 8 | cta | Centered short caption above a coral CTA. | Conversion prompt | Centered copy, Solid coral button |
| 9 | product-showcase | Full-width charcoal band with centered text, interface preview, and action. | Learn more, AI capability showcase | Dark section, Centered product screenshot, Coral button |
| 10 | other | Left-aligned section title introducing a broad light-gray feature area. | Section orientation | Large heading, Gray band |
| 11 | feature-split | Heading followed by two-column explanatory copy on light gray. | Feature explanation | Typographic hierarchy, Two-column text |
| 12 | gallery | Centered laptop preview within a carousel-style showcase. | Browse examples, Carousel navigation | Laptop mockup, Side arrows, Pagination dots |
| 13 | feature-split | Feature heading and description in a light-gray section. | Feature explanation | Left-aligned heading, Supporting copy |
| 14 | gallery | Laptop-framed visual example in a second carousel showcase. | Browse examples, Carousel navigation | Image gallery preview, Side arrows, Pagination dots |
| 15 | other | Minimal white transition area with a short page label. | Content transition | Open whitespace, Small text label |
| 16 | feature-split | Copy on one side and a landing-page preview on the other within gray. | Landing page discovery, Learn more | Website mockup, Coral example content |
| 17 | feature-split | Alternating product feature row with copy and store preview. | E-commerce feature discovery, Learn more | Store mockup, Product grid preview |
| 18 | cta | Centered heading and short action introducing additional features. | Continue exploring | Centered heading, Inline action |
| 19 | feature-grid | Three-column card carousel with previews, names, and brief descriptions. | Browse features, Carousel navigation | Product preview cards, Circular arrow controls |

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