---
version: alpha
name: "Podcast network template by 8B"
description: "A bright, friendly podcast network site with orange, yellow and lavender tiles on white and big rounded corners. Free HTML template by 8B, MIT."
colors:
  primary: "#ff6b1f"
  secondary: "#cdbbf8"
  tertiary: "#f9e38c"
  neutral: "#f1f0f3"
  surface: "#ffffff"
  on-surface: "#1e1c22"
  ink: "#1e1c22"
  caption: "#646069"
  violet-line: "#a98af2"
  violet-text: "#6a45d6"
typography:
  headline-display:
    fontFamily: Funnel Display
    fontSize: 88px
    fontWeight: 400
    lineHeight: 1.02
    letterSpacing: -0.025em
  headline-lg:
    fontFamily: Funnel Display
    fontSize: 68px
    fontWeight: 400
    lineHeight: 1.02
    letterSpacing: -0.025em
  headline-md:
    fontFamily: Funnel Display
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.015em
  wordmark:
    fontFamily: Funnel Display
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.03em
  body-lg:
    fontFamily: Google Sans
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
  body-md:
    fontFamily: Google Sans
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.55
  title-md:
    fontFamily: Google Sans
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.005em
  body-sm:
    fontFamily: Google Sans
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.45
  button:
    fontFamily: Google Sans
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.2
  badge:
    fontFamily: Google Sans
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.01em
rounded:
  md: 18px
  lg: 28px
  xl: 44px
  full: 999px
spacing:
  gutter: 56px
  section: 160px
  button-gap: 12px
  tile-gap: 16px
  author-gap: 36px
  nav-padding: 14px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: 6px 24px 6px 6px
    height: 52px
  button-dark:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.surface}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: 6px 24px 6px 6px
    height: 52px
  button-pill-grey:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: 0 22px
    height: 48px
  button-join:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: 0 26px
    height: 48px
  tile-yellow:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
  tile-lavender:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
  search-field:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.full}"
    height: 44px
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.badge}"
    rounded: "{rounded.full}"
    height: 30px
---

## Overview

Gabble is a podcast network front door: a catalogue of shows, a paid shelf, a free studio for authors and a run of live nights, all on one page. The idea is a friendly, loud-but-soft look. Big soft-cornered tiles in orange, yellow and lavender sit on a white ground, and white sections alternate with full colour fields. It is for a network, collective or audio magazine that wants to feel warm and a little playful, not corporate. The demo names, prices and addresses are invented. The mood is a bright poster wall with people on it.

## Colors

Colour comes in flat fields, one hue per coloured section, never gradients. Orange leads, yellow and lavender support, ink anchors.

- **Primary, orange (#ff6b1f):** the opening field that fills the first screen, the main buttons, show replies in the chat, the author count circle and the footer loop.
- **Secondary, lavender (#cdbbf8):** the letters section ground, the player card and lavender tiles; also light text on the ink sections.
- **Tertiary, yellow (#f9e38c):** the studio ground, yellow tiles, live date blocks and the first step's fill.
- **Neutral (#f1f0f3):** a pale grey for the FAQ ground, the search field and the Log in pill.
- **Surface (#ffffff):** the page ground, listener chat bubbles, date rows, and text on ink.
- **Ink (#1e1c22):** text on the light grounds, the shows, live and footer grounds, dark buttons. Never pure black.
- **Caption (#646069):** secondary text, leads, captions, the search placeholder.
- **Violet line (#a98af2):** the submission loop line, the step rings and the phone rail, and the voice note marks.
- **Violet text (#6a45d6):** the show name under each author.

Text on orange is ink, not white.

## Typography

Two families only. **Funnel Display** (weights 400 to 500) is the voice: section headings, the logo, the footer wordmark, large menu links, transcript quotes and step titles. It is set regular, with negative tracking that tightens as the size grows (-0.025em on the headings, -0.035em on the footer wordmark). **Google Sans** (400 and 500) does the work: body, buttons, badges, labels and card titles. Labels are sentence case, never uppercase. The opening heading scales with the viewport from 40px to 88px; the section heading runs from 36px to 68px, and the contact heading grows to 128px. Keep headings in sentence case and at regular weight. The logo and the footer wordmark are the only 500-weight display lines; the wordmark is sized to fill the width from its character count.

## Layout

Sections are full-width bands with a side gutter of `clamp(16px, 3.75vw, 56px)` and vertical padding of `clamp(88px, 11vw, 160px)`. The opening is an orange two-column field (heading block left, the three paid series rows right) that fills the first screen below the top bar. The episode section pairs a sticky player card with a transcript. Shows are tall tiles in one horizontal row. Authors are round faces in a centred wrapped grid, 1180px wide at most, under a 920px centred heading. The studio is a 12-column grid with 16px gaps. Text measures are capped between 17em and 40em. Below 900px the columns stack, padding tightens and the top bar drops the search, the author pill and Log in; the full-screen menu overlay opens from a menu button at every width.

## Elevation & Depth

There are no shadows. Depth comes from colour fields stacked with rounded corners where one band meets the next, from overlapping tiles, and from "echo" copies: translucent duplicates of a tile in its own colour that trail behind it while it moves and on button hover. The sticky top bar sits on a plain white ground.

## Shapes

Corners are generous. Big bands and the footer top use 44px, tiles and photos 28px, small photos such as the series thumbnails 18px, chat bubbles 26px. Buttons, badges, the search field and the nav pills are fully round (999px), and faces, icon discs and button discs are circles. Drawn shapes are round-capped loop lines: white on the opening, violet through the submission steps, orange in the footer. Photos are cropped to the tile's shape, never framed.

## Components

- **button-primary:** orange pill with a white 40px disc holding an arrow at the left; the label follows. The dark variant swaps the pill to ink and the disc to orange.
- **button-pill-grey:** the quiet pill for Log in; **button-join** is a plain orange pill.
- **tile-yellow and tile-lavender:** the rounded surfaces for cards and facts; grey and orange versions exist in the same shape.
- **search-field:** a round grey field with a search icon inside at the left.
- **badge:** a small white pill, 13px text.
- **Text link:** a medium-weight label with an orange 26px disc and a 2px underline that grows on hover.

## Motion

The page loads GSAP, ScrollTrigger and SplitText, plus Lenis for smooth scrolling (lerp 0.1). The one idea is trailing colour: tiles move and leave coloured copies behind them.

- **Navigation:** the bar slides up after a short downward scroll and returns on scroll up.
- **Opening:** on load a white loop draws itself in about 1.8 seconds while the series block and rows fade in one after another.
- **Episode:** scrubbed to scroll, transcript words go from faint to full ink while an orange waveform fills left to right.
- **Shows:** the section pins and the row of tiles travels sideways; tiles drag colour copies in proportion to scroll speed.
- **Authors:** faces start as one fanned stack and slide to their grid places, then names fade in.
- **Studio and live:** headings rise line by line; fact tiles and date rows slide in from the left with colour trails.
- **Submit:** a disc rides the looped line and each step fills as it arrives.
- **Letters:** the section pins and chat bubbles pop in, alternating sides.
- **Contact:** bands slide in from alternating sides.

With reduced motion, the entrance and scroll animations and smooth scrolling are switched off and the page reads in full; the top bar's hide on scroll still works.

## Do's and Don'ts

- Do give each section one flat ground, white or a full colour field, and round the corners where fields meet.
- Do keep Funnel Display for headings and Google Sans for everything else.
- Do use ink text on orange, yellow and lavender.
- Don't add shadows, gradients or glass blur.
- Don't use square corners on tiles, buttons or photos.
- Don't uppercase labels or bold the headings.
- Don't add new fill colours: orange, yellow, lavender and white are the only tile colours.
- Do keep trailing copies in the tile's own colour and keep the arrow disc on primary buttons.
- Don't claim audio playback: the waveform is decoration, so link or embed a real player.