Castify

Free
From castify-free.webflow.ioPublished Aug 18, 2026

Dark-mode podcast platform, warm plum-black canvas, hot-pink gradient CTAs, editorial Poppins headlines over Inter body.

Castify preview 1
Castify preview 2
Castify preview 3
Castify preview 4
Castify preview 5
Castify preview 6
Castify preview 7

Overview

Castify is a podcast-platform template built on a warm plum-black canvas (#220B13) punctuated by a hot-pink gradient — the sole interaction driver. The visual mood is premium audio editorial: immersive dark sections alternate with airy white gallery sections, warm lifestyle photography of podcast studios, and a scrolling category marquee. Poppins carries every headline and label with geometric confidence; Inter handles body text with workhorse neutrality. The pink accent is used sparingly — eyebrows, stat labels, and CTAs — so it never loses signal. The overall feeling is modern, media-savvy, and intimate, like a late-night radio studio with the lights dimmed.

Colors

Typography

h1

familyPoppins
size40px
weight600
leading44px

h2

familyPoppins
size38px
weight600
leading53.2px

h3

familyPoppins
size26px
weight600
leading36.4px

stat

familyPoppins
size32px
weight600
leading44.8px

body-lg

familyInter
size18px
weight400
leading27.9px

body-md

familyInter
size16px
weight400
leading26px

button

familyInter
size16px
weight500

eyebrow

familyPoppins
size18px
weight600
leading18px
tracking2px

badge

familyInter
size14px
weight400

Spacing

Rounded & Borders

Shadows & Elevation

The system avoids heavy drop shadows. Instead, depth comes from:

  1. Glassmorphic overlays — testimonial cards use rgba(255,255,255,0.05) fill with a 10% white border, creating a frosted-glass effect on dark.
  2. Z-layered imagery — hero and about-show sections overlap images at different scales and positions rather than using shadow elevation.
  3. Border outlines — secondary and tertiary buttons rely on 1px borders (white on dark, dark on light) instead of fills for low-emphasis actions.

No box-shadow tokens are defined; if needed in implementation, use a subtle 0 4px 24px rgba(0,0,0,0.08) on light sections only.

Components

button primary

button primary hover

button secondary

button tertiary

card testimonial

input field

badge category

Do's & Don'ts

  • Do use the pink accent ({colors.tertiary}) only for eyebrows, stat labels, and primary CTAs. It earns its impact through restraint.
  • Do alternate dark and light sections to create the immersive rhythm that defines the Castify feel.
  • Do apply the 218-degree gradient to primary buttons, not a flat pink fill.
  • Don't introduce shadows on dark sections — use glassmorphic overlays (rgba(255,255,255,0.05) + border) for depth.
  • Don't use Poppins for body text — it's reserved for headlines, stats, and uppercase eyebrows. Inter handles all running text.
  • Don't round image corners beyond 4px — the system's geometric crop aesthetic depends on near-square images.
  • Don't nest component variants. button-primary-hover is a sibling key, not a child of button-primary.
like btn

Join the New Era of Web Creators

Get instant access to our 3100+ premium components to level up your business. Build faster and better, get started today!
Build Website Fast
Designer
Developer
Footer Logo

Level Up Your Workflow and Boost Results With Pagifye

Our Brand

Reestify LogoFlowfye Logo
grid
glowing effect

© 2026 Pagifye. All rights reserved.