Skip to content
Library

Tilda. Paper sketchbook with coral crayon.

  • SaaS
  • Light theme
  • 9 colors
  • 3 typefaces

Tilda operates on a near-monochrome canvas with a single vivid coral accent doing all the emotional work. The aesthetic is editorial-illustration-meets-builder-tool: flat, hand-drawn line art fills the left side of heroes, generous whitespace breathes around light-weight headlines, and one orange-coral button is the only spot of color in an otherwise achromatic interface. Typography carries the personality — TildaSans at weight 300 whispers across 60-78px hero headlines, while the coral accent is rationed for primary actions, illustration fills, and icon highlights. Components are confident and pill-shaped: 100px radius buttons, flat surfaces with no shadows, thin black borders instead of elevation. The system should feel like a design magazine that accidentally became a product page.

Screenshot of Tilda
Captured from tilda.cc on October 11, 2026

Tilda design system

Tilda

Brand1

  • Orange supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color

Neutrals8

  • Primary text, button strokes, dark mode contrast pairs, icon outlines

  • Dark surface blocks, footer regions, inverted section backgrounds

  • Supporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color

  • Secondary dark surface, hover states on dark backgrounds

  • Muted helper text, placeholder text, disabled icon outlines

  • Button hover backgrounds, disabled controls, subtle surface tints

  • Light supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color

  • Page canvas, card elevation, button text on dark fills, content surface

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Ink Black on Coral Signal

8.68 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictPasses AAA 7

More DESIGN.md files. Same web, different personalities.