Coral Signal
#fa8669Orange supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Tilda
tilda.cc
Website preview
The design language
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.
Color palette
brand
neutral
Ink Black
#000000Primary text, button strokes, dark mode contrast pairs, icon outlines
Carbon
#222222Supporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color
Graphite Deep
#171717Dark surface blocks, footer regions, inverted section backgrounds
Plum Ink
#2a2a2aSecondary dark surface, hover states on dark backgrounds
Smoke
#7f7f7fMuted helper text, placeholder text, disabled icon outlines
Silver
#ccccccButton hover backgrounds, disabled controls, subtle surface tints
Bone
#efefefLight supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color
Paper White
#ffffffPage canvas, card elevation, button text on dark fills, content surface
Typography
Type scale
Minor Third (1.2) · 16px basetext-78
78px · 300 · 1.17The quick brown fox jumps
display
72px · 300 · 1.17 · 0.063px trackingThe quick brown fox jumps
text-60
60px · 300 · 1.23The quick brown fox jumps
heading-lg
48px · 300 · 1.23The quick brown fox jumps
text-46
46px · 300 · 1.13The quick brown fox jumps
text-44
44px · 300 · 1.23The quick brown fox jumps
text-42
42px · 300 · 1.23The quick brown fox jumps
text-36
36px · 400 · 1.23The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Times
- Weights
- 400
- Sizes
- 16px
- Line height
- 1.2
Times — detected in extracted data but not described by AI
Additional typeface
TildaSans
- Weights
- 100, 300, 400, 500, 600, 700
- Sizes
- 13, 14, 15, 16, 18, 19, 20, 22, 24, 26, 28, 34, 36, 42, 44, 46, 48, 60, 72, 78
- Line height
- 1.13-2.00
- Letter spacing
- 0.0380em, 0.0630em, 0.0710em, 0.1790em
- Fallback
- Inter, Manrope, or DM Sans
Primary brand typeface for all interface text — display headlines at 60-78px use weight 300 (whisper-weight creates editorial calm), section headings at 34-48px use weight 400, body sits at 16-20px weight 400, micro-labels and nav use weight 500-600. The wide weight range (100-700) and tracking ladder allow the same family to serve everything from super-light hero whispers to crisp button labels.
Additional typeface
Arial
- Weights
- 100, 300, 400, 500
- Sizes
- 11, 13, 14
- Line height
- 1.20, 2.00
- Fallback
- system-ui
System fallback for small UI metadata, icon labels, and micro-text where TildaSans might not load
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 96-120px
- Card padding
- 32-48px
- Element gap
- 16-24px
Border radius
tags
100pxcards
0pximages
0pxinputs
100pxbuttons
100pxSpacing scale
2px3px5px7px8px9px10px11px12px13px14px15px16px19px20px22px25px26px27px28px30px32px34px40px41px44px45px50px57px59px60px66px70px75px80px90px100px105px111px113px120px135px152px160px165px170px200px238px239pxGuidelines
Do
- Use 100px border-radius on all buttons, tags, badges, and language selectors — pill shape is the signature component geometry
- Use TildaSans weight 300 for all headlines 48px and above; let the large size and light weight carry the editorial calm
- Use #fa8669 sparingly — reserve for primary CTAs, illustration accents, and key icons; never for body text or borders
- Default to #ffffff canvas; use #efefef only for distinct card surfaces or section breaks
- Use 1px solid #efefef or #000000 borders for component separation instead of box-shadows
- Keep illustrations flat with 1.5-2px black line work and selective coral fills — no gradients, no dimension
- Maintain 96-120px section gaps to preserve the breathing, magazine-like vertical rhythm
Don’t
- Don't add box-shadows to any component — flat surfaces and hairline borders are the elevation language
- Don't use #fa8669 for non-CTA elements: no coral borders, no coral body text, no coral card backgrounds
- Don't set border-radius below 100px on buttons or tags — sharp or moderately rounded buttons break the pill system
- Don't use weight 600+ for headlines — the whisper-weight contrast at 300-400 is the typographic signature
- Don't introduce additional accent colors; the monochrome + coral binary is the entire palette
- Don't apply heavy backgrounds to body sections — keep the dominant experience white/achromatic
- Don't use gradient fills on illustrations or backgrounds — flat color is mandatory
Components
Coral Primary Button
The single most important interactive element — the only chromatic button in the systemFilled pill button, #fa8669 background, #ffffff text, 100px border-radius, 14-16px vertical padding, 28-32px horizontal padding, TildaSans weight 500-600 at 14-16px. Used for 'Create a website for free' and all primary conversion actions.
Ghost Outline Button
Secondary action paired with the coral CTATransparent or #ffffff background, 1px #000000 border, #000000 text, 100px radius, 14px 28px padding, TildaSans weight 500 at 14-16px. Pairs alongside the coral CTA as the lower-commitment option ('Overview').
Inverted Dark Button
Account/auth actions in navigationSolid #000000 or #222222 background, #ffffff text, 100px radius, 10px 20px padding, TildaSans weight 500 at 14px. Used for 'Sign Up' and 'Log In' in the top nav to contrast against ghost/primary buttons.
Top Navigation Bar
Persistent site navigationWhite background, #ffffff, 1px #efefef or transparent bottom border, horizontally aligned with brand wordmark left and nav links right. Nav links in TildaSans 14px weight 500, #000000. Height ~60px, max-width 1200px centered with 24-32px horizontal padding.
Hero Split Section
Above-the-fold introductionTwo-column layout at 1200px max-width: left column holds flat illustration (black line art with coral fills), right column holds TildaSans 48-60px weight 300 headline, 16-18px weight 400 subtext in #222222, and CTA pair. Section gap 96-120px from nav and from next section.
Centered Editorial Section
Narrative content between featuresCentered stack within 1200px max-width: eyebrow label in TildaSans 13px weight 500 with 0.071em tracking, 48-60px weight 300 headline, 18-20px body paragraph in #222222 at max-width ~600px. No background change — pure white.
Feature Card
Product feature presentationFlat #ffffff or #efefef surface, no border, no shadow, 32-48px padding. Contains illustration left and copy right. Corner radius is 0 — cards are sharp-edged to contrast with pill buttons. Often uses a thin black rule beneath.
Brand Illustration Block
Atmospheric visual identityFull-height illustration on white or #efefef background. Black line art at 1.5-2px stroke weight, with selective coral (#fa8669) fills on key objects (hearts, characters' clothing, icons). No gradients, no shadows — pure flat graphic style.
Pill Badge / Tag
Category labels, section eyebrows, metadata100px radius, 4px 12px padding, TildaSans 13px weight 500 with 0.071em tracking. Background #efefef with #000000 text, or #000000 with #ffffff text. All-caps or sentence case.
Hairline Divider
Section separation without visual weight1px #efefef or #cccccc horizontal line spanning the content width. Used instead of background color changes to separate sections while maintaining the all-white feel.
Footer Region
Site footer with links and legal#ffffff or #171717 background, TildaSans 14-16px weight 400 text. Links at weight 500, #000000 or #ffffff depending on background. 96px top padding, generous link spacing via 20-24px row gap.
Language Selector
Locale picker, bottom-right floatingFixed-position pill in bottom-right, 100px radius, white background with 1px #efefef border, TildaSans 13px weight 500. Globe icon + language code.
Surfaces & elevation
Level 0
Paper White
#ffffffPage canvas, content backdrop
Level 1
Bone
#efefefCard surface, secondary section backgrounds, ghost button fill
Level 2
Silver
#ccccccHover state, disabled surface
Level -1
Carbon
#222222Inverted section, dark surface block
No shadows. The design system uses flat surfaces distinguished only by background color (white vs #efefef vs #cccccc) and 1px hairline borders. Elevation is communicated through spatial separation and surface tone, not shadow. This is a deliberate editorial choice — shadows would feel too 'SaaS dashboard' and undermine the magazine-like, hand-drawn aesthetic.
Layout & imagery
Layout
Max-width 1200px centered container with 24-32px horizontal padding. Hero follows a split pattern: 50/50 illustration-left + text-right, with the coral CTA and ghost button stacked horizontally. Subsequent sections alternate between centered editorial stacks (eyebrow → headline → paragraph) and split feature blocks (illustration-left, text-right). Sections are separated by 96-120px vertical gaps on a continuous white canvas. No alternating dark/light bands — the page stays achromatic throughout, with #efefef reserved for card surfaces and #171717 only in the footer. Navigation is a minimal top bar: brand left, links right, no mega-menu.
Imagery
Hand-drawn flat illustrations dominate the visual language: black line art at 1.5-2px stroke weight with selective coral (#fa8669) fills on focal elements (hearts, character clothing, key objects). The illustration style is editorial and slightly whimsical — characters with simplified proportions, floating UI elements, dotted halftone textures. Illustrations are always contained, never full-bleed, and sit on the left side of hero/feature splits. No photography. No 3D renders. No gradients. The visual hierarchy relies on the contrast between the minimal coral-and-white UI and the busier illustrated moments.
Design notes
Agent Guide
**Quick Color Reference** - text: #000000 - background: #ffffff - card surface: #efefef - border: #efefef / #000000 - accent: #fa8669 - primary action: no distinct CTA color **Example Component Prompts** No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color. 2. Create a feature card: #efefef background, 0px border-radius, 40px padding. TildaSans 24px weight 400 heading in #000000, body at 16px weight 400 in #222222. No shadow, no border. Flat coral (#fa8669) icon accent at 32px. 3. Create a pill badge/tag: #efefef background, 100px radius, 6px 14px padding, TildaSans 13px weight 500 with 0.071em letter-spacing, #000000 text, all-caps. 4. Create a navigation bar: #ffffff background, 1200px max-width, 60px height. Brand wordmark left in TildaSans 16px weight 600. Nav links right in TildaSans 14px weight 500, #000000, 24px gap. Inverted dark button ('Sign Up') at far right: #000000 fill, #ffffff text, 100px radius, 10px 20px padding. 5. Create a centered editorial section: #ffffff background, max-width 600px for text block. Eyebrow at 13px TildaSans weight 500 with 0.071em tracking, #000000, all-caps. Headline at 48px TildaSans weight 300, #000000. Body at 18px TildaSans weight 400, #222222, 1.5 line-height.
Similar brands
Webflow
Same no-code builder category, similar split-hero layout with illustration left + text right, pill-shaped CTAs, and light-weight display headlines
Squarespace
Editorial typography-first approach with extra-large light-weight headlines on white canvas, single accent color rationed for CTAs
Framer
Near-monochrome interface with one bold accent color, large display type, and illustration-driven hero sections
Notion
Flat surfaces, no shadows, hairline dividers as the primary separation mechanism, generous whitespace
Figma
Pill-shaped buttons with high border-radius, flat card surfaces, editorial weight contrast between display and body text
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
