Launch pricing · Grab your template before prices go up.Launch pricing is here.Shop templates
All themes

Website theme for Hospitality Spill the Tea Theme

A free tea website theme with violet ink, warm cream, tall serif type and hand-drawn tea illustrations. Download its design guidelines and image prompts for building with AI.

Download free theme

Free to use. No account or card needed.

See what's possible

What you receive

  • Theme · .md

    Colours, typography, spacing, layout, and motion.

  • Image prompts · .md

    Prompts to create images with a matching look and feel.

DESIGN.md

Spill the Tea Theme

Spill the Tea pairs violet ink and warm cream with Instrument Serif headings, Instrument Sans copy, Outfit controls and organic tea illustrations. Motion brings the cup, leaves, steam and raised teacups to life.

01 — Foundations

Colour palette

  • Ink

    #211EA3

    Violet text, hero frame, pills and story backgrounds.

  • Paper

    #F3F4EF

    Warm cream surfaces and light text on violet.

  • Ripple

    #6C69D8

    Tea surface rings and brewed tea accents.

  • Leaf

    #9D9BE8

    Tea leaves and lighter brewing details.

02 — Foundations

Typography

Instrument Serif 400 for fitted statements, product names and italic quotations; Instrument Sans for reading and prices; Outfit for labels and controls. Original desktop sizes are listed; samples scale to fit. The hero begins at 240px with a viewport-height cap; section headings step from 44px to 36px on phone.

Fitted heroInstrument Serif · 240px / 400 / 1

Tea worth talking about.

Section headingInstrument Serif · 44px / 400 / 1.25

Cold cans, hot gossip.

Product nameInstrument Serif · 28px / 400 / 1.2

Earl Grey

QuotationInstrument Serif · 30px / 400 / 1.35 · italic

Word gets around.

Supporting copyInstrument Sans · 20px / 500 / 1.4

Thoughtfully blended teas brewed in small batches and made to be shared.

PriceInstrument Sans · 18px / 600 / 1

$4.50

Section labelOutfit · 14px / 800 / 1

SPILL THE TEA

03 — Components

Button variants

Button examples using the theme’s palette, type, and visual direction.

Primary on dark

Shop the tea

#6C69D8 fill

Primary on light

Shop the tea

#211EA3 fill

Secondary

Learn more

A quieter supporting action.

Text link

Explore more

Underlined, with a fine arrow.

Build your own website with this theme and launch faster.

See this theme in Spill the Tea.

See what's possible

  • Spill the Tea oversized serif lettering and a hand-drawn teacup inside a rounded cream window
    View template
    Spill the Tea · Original template
  • Spill the Tea the tea studio story surrounded by illustrated violet tea rings and leaves
    About
  • Spill the Tea a steaming illustrated teacup on the violet tea ritual stage
    Tea ritual
  • Spill the Tea three violet tea tins with names, descriptions, prices and BUY buttons
    Tea shop
  • Spill the Tea an italic customer quote inside a violet puddle beside a spilled teacup
    Testimonials
  • Spill the Tea a newsletter invitation and illustrated hands raising teacups
    Newsletter & footer

How to use your theme

Make it yours.

  1. Download your theme

    Save the design file and image prompts to your computer.

  2. Use the theme

    Give your AI builder the design file and describe your website.

  3. Create your images

    Use the image prompts in your favorite AI image tool.

  4. Bring it all together

    Bring the theme, image prompts, and your images into your favorite builder.

Read the full theme guide

FAQ

Who is this theme for?

Spill the Tea Theme is designed for independent tea brands, tea studios and small food and drink businesses. Use it when you want design direction for your own page layouts, with consistent colours and typography.

What files are included?

You receive the theme guidelines and matching image prompts as downloadable text files. The guidelines cover colours, typography, spacing, layout, and motion. Use Download free theme on this page to get both files in one ZIP. No account or card is needed.

The Spill the Tea website template already includes this theme.

Can I use this theme with AI or Framer?

Yes. For vibe coding, give the guidelines to your AI website builder and describe what you want to create. In Framer or another visual editor, use the guidelines to apply the colours, fonts, and styling yourself. The theme provides design direction; a Framer Remix link comes with the matching website template. Read the theme guide.

Can I preview the theme before downloading it?

Yes. This page shows the colour palette, typography, and button styles, along with examples in See what’s possible. You can view these public previews without signing up. The full guidelines and image-prompt files are free to download from this page.

Is this theme free to use?

Yes. Download and use this theme for free, with no account, card, or checkout required. Read the Terms & Conditions for usage and redistribution terms.

Are hosting, my domain, and paid tools included?

No. Themes are a one-time purchase or a free download, as labelled. Your domain, hosting, paid AI or website-builder plans, and other services are separate. Use our website launch checklist when you are ready to publish.