Skip to content

Design System

Voicely Style Guide & Component Library

A living design showcase of Voicely typography scale, color tokens, interactive controls, audio badges, and editorial cards.

01. Color Tokens

Curated Palette & Semantic Tones

  • canvas

    Page background
  • surface

    Card background
  • tint

    Lime-tinted wash
  • tint-2

    Section band tint
  • ink

    Primary text & dark UI
  • muted

    Subtle metadata
  • accent-fill

    Signature lime brand
  • tone-1

    Peach coral warm
  • tone-2

    Ochre yellow tone
  • tone-3

    Sky blue soft tone
  • line

    Borders & dividers
  • night / paper

    night

    Contrast badge / tile

02. Typography Scale

Headlines, Proportions & Editorial Rhythm

Display Hero · text-display

Real Conversations. Remarkable Stories.

Section Headline · text-headline

The Small Details That Make an Audio Show Feel Professional

Card Title · text-title

Episode 12: Crafting Intimate Interviews Without Losing Direction

Lead Paragraph · text-lg

Voicely is crafted for thoughtful listeners and podcast creators. With carefully balanced contrast ratios, tactile micro-animations, and continuous audio playback, long-form discussions remain engaging and comfortable across any device.

Standard Body Copy · text-base

Every interview is presented alongside comprehensive timestamps, resource links, and full transcripts. Content hierarchy respects reading rhythm while audio controls stay immediately within reach.

03. Buttons & Actions

Interactive Controls & Buttons

04. Badges & Equalizers

Status Chips & Audio Indicators

On Air Now

Audio Episode Video Podcast #story #episode 48 min Host Guest

05. Quotes & Callouts

Editorial Highlights & Notices

"The greatest conversations happen when you give someone the space to surprise themselves with their own answers."

Voicely Editorial Team
Creator Note

Audio Quality Standard

All show stems are mastered to -16 LUFS standards for optimal clarity across headphone listening, studio monitors, and car audio systems.

Verified Broadcast Spec

06. Live Component Preview

Episode & Archive Cards

Where Podcasting Goes From Here
Creator Practice
11 min read

Story

What It Means to Be a Good Host

A practical Voicely guide to what it means to be a good host, with ideas for hosts, interviewers, and independent creators.

Alex Morgan

Designing Media That Respects Attention
Interview Craft
11 min read

Story

Creating a Strong Ending for Every Episode

A practical Voicely guide to creating a strong ending for every episode, with ideas for hosts, interviewers, and independent creators.

Nina Patel

Newsletter

New conversations, delivered the moment they go live

Episodes, guest notes and studio stories from Voicely. Free to join, easy to leave.

No spam. Unsubscribe in one click.