Firstory DESIGN.md

Design System Inspiration of Firstory

Overview

Visual Theme & Atmosphere

Firstory is Taiwan's leading podcast-hosting SaaS, and its marketing surface reads like a warm, creator-friendly studio rather than an enterprise audio tool. The canvas is a warm off-white (#fbfaf9) — paper-toned, not clinical white — with pure-white cards (#ffffff) floating on top and a single saturated raspberry-pink (#fb355e) carrying every call to action. Text sits in a deep blue-black ink (#0d131c) with a slate muted tone (#4f5661) for secondary copy, giving the page calm editorial contrast against the energetic pink.

The typographic pairing defines the personality: Poppins Bold (700) owns every headline — a geometric, rounded sans that lands friendly and contemporary at the 72px hero size with tight -1.8px tracking — while Open Sans carries all body, navigation, and button text at 16px/400 and 14px/500. The geometric roundness of Poppins echoes the pill-and-rounded geometry of the components, so display type and UI chrome feel cut from the same cloth. Headlines in Traditional Chinese ("用 Podcast 開啟你的媒體事業") render with the same bold weight and tight rhythm, keeping the bilingual zh-TW/EN site visually unified.

Depth is almost entirely flat: live inspection found no rendered drop shadows on the nav, hero, cards, or buttons. Separation comes from the warm-canvas-versus-white-card contrast, 10%-ink hairline rings around cards, a cool grey tint (#edf0f6) and pink tints (#ffe6e7, plus a translucent #fb355e at low alpha) for feature illustration zones, and the #e0e3e8 hairline. The system is built on a modern shadcn/Tailwind stack — colors are authored in oklch and radii step through 10px, 12px, and 16px — which gives the whole site the crisp, current feel of a 2020s developer-grade SaaS wearing a creator-warm palette.

Key Characteristics:

• Poppins Bold (700) for all display type — geometric, rounded, friendly authority
• Open Sans 400/500 for body and UI — neutral, highly legible workhorse
• One action color: raspberry-pink #fb355e for CTAs, active states, and the featured plan
• Warm off-white canvas (#fbfaf9) with pure-white cards (#ffffff) — paper-like, not sterile
• Flat depth: hairline rings and surface tints instead of drop shadows
• Pill geometry for toggles and badges; 10–16px rounding for buttons, cards, and nav
• Tight negative tracking on headlines (-1.8px at 72px, -0.9px at 36px)
• Pink tint family (#ffe6e7 surface, #962339 deep text) for announcement and savings accents
• Green #00c950 reserved for checkmark/success semantics in pricing tables

Primary tasks

• Upload from a phone and be on Spotify the same day
• Earn income from member subscriptions and listener donations
• Check a show's analytics dashboard week by week
• Compare pricing plans and pick the recommended one
• Buy podcast ads across a curated network of creators

Brand Narrative

Firstory was founded in Taipei in 2018 by three co-founders who started the company straight out of university — 于子軒 (Stanley Yu, CEO), 翁子皓 (CTO), and 劉德政 (COO) (covered by INSIDE and Meet/Business Next startup media). The product began life as "Firstory Studio", a voice-based social app, before the team pivoted in 2019 into podcast hosting just as the Taiwanese podcast wave took off — a 180-degree turn that local tech media chronicled as one of Taiwan's defining creator-economy pivots. In October 2020 Firstory closed a seed round led by KKBOX, Taiwan's audio-streaming incumbent, aligning the scrappy hosting startup with the island's biggest sound platform.

The thesis stayed constant through the pivot: shorten the distance between making sound and being heard. Firstory built one-click distribution to every major podcast directory, then layered on the business stack — analytics, cross-promotion, the Flink smart-link, listener donations, member subscriptions, and an advertiser marketplace — and most recently AI tooling ("AI 工作室", AI content extraction) that turns episodes into shareable assets. The current homepage states the mission plainly: podcasting is a media business, and Firstory's job is to hand creators the whole toolkit, from hosting to monetization.

What Firstory refuses, visible in the design: enterprise-audio coldness, dashboard-grey utilitarianism, and gatekeeping complexity. What it embraces: a warm paper-like canvas, one optimistic pink, friendly geometric type, and copy that keeps telling an independent creator the same thing — you can start today, and it can become a business.

Principles

1. Creator outcomes over platform features. Every surface frames capability as creator benefit ("透過訂閱打造穩定收入"). UI implication: lead cards and sections with the benefit line; feature names stay short and human.
2. Lower the barrier, always. From "3 步輕鬆開始" to free-tier CTAs, the system removes friction. UI implication: primary actions are always visible, always one per viewport, and always phrased as free starts.
3. One pink, one meaning. #fb355e means "act" — CTA, active toggle, recommended plan. UI implication: never use the action pink decoratively; emphasis elsewhere uses tints and borders.
4. Warm and flat. The paper-toned canvas and shadowless cards keep the tool approachable. UI implication: separate with surface value shifts and hairlines; reach for color, not elevation.
5. Bilingual by default. zh-TW and EN are peer locales sharing one visual system. UI implication: type scale and components must hold up identically for CJK and Latin text.

Personas

Personas below are fictional archetypes informed by publicly observable Firstory user segments (independent Taiwanese podcasters, growing shows monetizing via subscriptions, advertisers), not individual people.

林佳穎, 27, 台北. An office worker starting her first interview podcast on weekends. Picked Firstory because she could upload from her phone and be on Spotify and Apple Podcasts the same day. Reads the blog's beginner guides; the "免費開始" button is why she didn't postpone the first episode.

陳威廷, 34, 台中. Runs a finance commentary show with six-figure monthly plays. Uses member subscriptions and listener donations as core income, watches the analytics dashboard weekly, and upgraded to a paid plan for the advertiser marketplace. Wants the business tools without losing the indie feel.

Sophie Chang, 41, 新加坡. Marketing lead at a regional consumer brand buying podcast ads across Chinese-language shows. Enters through the "廣告主專區" surface; values transparent reach numbers and the curated network of creators in one place.

Colors

Primary

• Firstory Pink (#fb355e): The single action color — hero CTA, featured plan border, active billing toggle, Recommend badge, link accents on pricing. A raspberry-pink that reads creative and energetic rather than corporate.
• On-Primary (#fafafa): Near-white text on pink buttons and badges.
• Ink (#0d131c): Primary text color for headlines, body, and nav — a deep blue-black that stays soft against the warm canvas.

Surface & Neutral

• Canvas (#fbfaf9): The warm off-white page background — the system's defining surface.
• Card White (#ffffff): Solution cards, pricing plan cards, and content containers.
• Cool Surface (#edf0f6): Cool grey-blue tint for feature illustration zones and comparison-table stripes.
• Beige (#f6efe5): Warm beige for the inactive half of the billing toggle — a tactile, paper-like neutral.
• Hairline (#e0e3e8): Default border color for dividers and rings.

Pink Tint Family

• Pink Tint (#ffe6e7): Announcement pill background, Save-percentage badge background, and decorative tinted zones (often at 80% alpha).
• Pink Deep (#962339): Dark berry text on pink-tinted badges — the accessible companion to #ffe6e7.

Text Hierarchy & Semantic

• Ink (#0d131c): Headlines, primary copy, nav items.
• Ink Soft (#242a34): Inactive toggle label text.
• Muted Slate (#4f5661): Secondary body copy, footer links, captions.
• Success Green (#00c950): Feature checkmarks and positive indicators in pricing/compare tables.

Typography

Font Family

• Display: Poppins (with Poppins Fallback) — all h1/h2/h3 headlines, plan prices, FAQ items. Bold (700) at display sizes, SemiBold (600) at card-title sizes.
• Body: Open Sans (with Open Sans Fallback) — document default for body copy, nav, buttons, footer.

Hierarchy

Principles

• Poppins persuades, Open Sans informs: the geometric display face carries every emotional beat; the neutral body face carries every explanation. They never swap roles.
• Tracking tightens with size: -1.8px at 72px, -1.2px at 48px, -0.9px at 36px, -0.75px at 30px; normal at 20px and below.
• Solid 1.0 line-height on display: hero and page titles set line-height equal to font size — dense, poster-like blocks.
• Prices are display type: plan prices ($0 / $84 / $180) render in Poppins 36px/700, treated as headlines rather than data.
• Bilingual parity: zh-TW and EN copy share identical sizes, weights, and tracking — the system is locale-agnostic.

Layout

Spacing System

• Base unit: 4px
• Scale: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 64px
• Notable: solution cards use a generous 32px internal padding; nav items use compact 8px 16px; section rhythm runs at 64px+

Grid & Container

• Centered single-column hero with the 72px Poppins headline and one pink CTA as the anchor
• Solution cards in a 3-up grid of equal white cards (193px tall) on the warm canvas
• Pricing plans in a 4-up column grid; the recommended plan is slightly larger (2px pink border + badge)
• Feature sections alternate text and product-screenshot illustration zones on tinted surfaces
• Full-width sitemap footer in four columns

Whitespace Philosophy

• Warm air, not empty space: the off-white #fbfaf9 canvas makes generous spacing feel cozy rather than stark.
• Flat segmentation: zones separate by surface tint (#edf0f6 cool, #ffe6e7 pink) and hairline rings — never by elevation.
• One CTA per viewport: each scroll position presents a single pink action; everything else stays ink-on-paper.

Border Radius Scale

• Small (10px): nav ghost items
• Medium (12px): plan CTAs, compact buttons
• Large (16px): cards, hero CTA, announcement pill — the workhorse
• Full (9999px): billing toggle, badges

Responsive Behavior

Breakpoints

Touch Targets

• Buttons at 36–40px height with generous horizontal padding
• FAQ accordion triggers at a comfortable 64px height
• Billing toggle segments at 36px with 20px horizontal padding

Collapsing Strategy

• Hero: 72px Poppins headline scales down on mobile, weight 700 and tight tracking maintained
• Solution card grid: 3-up → 2-up → single column
• Pricing: 4 plan columns stack vertically; the featured plan keeps its 2px pink border and badge
• Footer: four columns stack into accordion-like groups

Image Behavior

• Product screenshots sit inside tinted illustration zones with 16px rounding and no shadow
• Player and waveform illustrations reuse the pink family at reduced alpha
• Cards maintain 16px radius across breakpoints

Elevation & Depth

Shadow Philosophy: Firstory is a flat system. Live inspection found box-shadows declared only as fully transparent Tailwind ring placeholders — nothing visibly elevated on nav, hero, cards, or buttons. Hierarchy is communicated through the warm-canvas-versus-white-card value shift, tinted zones, hairline rings, and — for the single most important object on the pricing page — a 2px pink border. When the system wants attention, it reaches for the pink #fb355e, never for depth. This keeps the creator-facing product feeling light, fast, and contemporary.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.none: none

Motion & Easing

Durations:

Easings:

Motion rules: Motion stays quiet and functional, matching the flat aesthetic — the billing toggle slides its pink pill between segments at motion-standard / ease-standard; FAQ accordions expand without bounce; cards fade up subtly on scroll. No spring or overshoot — the product's promise is steadiness for creators' businesses. Under prefers-reduced-motion: reduce, transitions collapse to instant and scroll reveals render immediately. (Motion tokens are illustrative, derived from the observed Tailwind/shadcn stack defaults and the system's flat character.)

Components

Buttons

Primary CTA

• Background: #fb355e
• Text: #fafafa
• Radius: 16px
• Padding: 0px 32px
• Height: 40px
• Font: 16px / 500 / Open Sans
• Use: Hero and banner CTAs ("Get started today", "Get Started for Free", "立即開始")

Plan CTA (Featured)

• Background: #fb355e
• Text: #fafafa
• Radius: 12px
• Padding: 0px 10px
• Height: 36px
• Font: 14px / 500 / Open Sans
• Use: CTA on the recommended pricing plan ("14-Day Free Trial", "免費試用 14 天")

Plan CTA (Quiet)

• Background: #fbfaf9
• Text: #0d131c
• Radius: 12px
• Padding: 0px 10px
• Height: 36px
• Font: 14px / 500 / Open Sans
• Use: CTA on non-featured plans ("Start Free", "免費開始")

Nav Item (Ghost)

• Background: transparent
• Text: #0d131c
• Radius: 10px
• Padding: 8px 16px
• Height: 36px
• Font: 14px / 500 / Open Sans
• Use: Top-nav menu items and links ("Features", "Pricing", "Blog")

Tabs

Billing Toggle (Segmented)

• Background: #f6efe5 (inactive segment)
• Text: #242a34 (inactive segment)
• Active: bg #fb355e + text #fafafa
• Radius: 9999px (full pill)
• Padding: 8px 20px
• Height: 36px
• Font: 14px / 500 / Open Sans
• Use: Monthly / Yearly billing period toggle on pricing

Cards & Containers

Solution Card

• Background: #ffffff
• Text: #0d131c
• Radius: 16px
• Padding: 32px
• Use: Solution / feature cards on the warm canvas ("AI Studio", "Data Analytics"), 10%-ink hairline ring, no shadow

Pricing Plan Card

• Background: #ffffff
• Radius: 16px
• Padding: 24px 0px
• Use: Standard pricing plan column

Pricing Plan Card (Featured)

• Background: #ffffff
• Border: 2px solid #fb355e
• Radius: 16px
• Padding: 24px 0px
• Use: Recommended plan, paired with the pink Recommend badge

Badges

Save Badge

• Background: #ffe6e7
• Text: #962339
• Radius: 9999px (full)
• Padding: 2px 8px
• Font: 12px / 600 / Open Sans
• Use: "Save 22%" pill attached to the Yearly toggle

Recommend Badge

• Background: #fb355e
• Text: #fafafa
• Radius: 9999px (full)
• Padding: 4px 16px
• Font: 12px / 600 / Open Sans
• Use: "Recommend" pill on the featured plan card

Announcement Pill

• Background: #ffe6e7 (80% alpha)
• Text: #0d131c
• Border: 1px solid #ffe6e7
• Radius: 16px
• Height: 38px
• Font: 16px / 400 / Open Sans
• Use: Hero announcement banner ("First Wave in Asia-Pacific! …")

Navigation

• Background: transparent over #fbfaf9 canvas
• Items: ghost buttons, 14px Open Sans weight 500, #0d131c text, 10px radius
• Height: 36px items in a slim top bar
• Use: Horizontal top nav (Features / Monetize / Compare / Pricing / Blog / For Advertisers) with language switcher

FAQ Accordion

• Background: transparent
• Text: #0d131c
• Padding: 20px 24px
• Height: 64px (collapsed trigger)
• Font: 16px / 500 / Poppins
• Use: FAQ section triggers ("How do I get started with Firstory?")

Footer

• Headings: #0d131c, 14px Open Sans weight 600 ("Product", "Resources", "Legal")
• Links: #4f5661, 14px Open Sans weight 400
• Use: Four-column sitemap footer with social links

---

Verified: 2026-06-10 Tier 1 sources: https://firstory.me/en (homepage, live computed-style inspect); https://firstory.me/en/pricing (pricing surface, live computed-style inspect); https://firstory.me/zh (zh-TW homepage, live copy capture); https://firstory.blog (Firstory official blog — brand-owned); https://github.com/Firstory (official GitHub org — brand-owned) Tier 2 sources: none available (getdesign.md/firstory → "No designs found"; styles.refero.design ?q=firstory search returns no Firstory listing) Conflicts unresolved: none

States

Do's and Don'ts

Do

• Use Poppins Bold (700) for every headline and plan price — it is the brand's display voice
• Use Open Sans 400/500 for body, nav, and button labels
• Reserve raspberry-pink (#fb355e) for actions, active states, and the featured plan only
• Set the page on warm off-white (#fbfaf9) with pure-white (#ffffff) cards
• Separate zones with surface tints (#edf0f6, #ffe6e7) and hairline rings, not shadows
• Use full-pill geometry for toggles and badges, 12–16px rounding for buttons and cards
• Track headlines tight (-1.8px at 72px) with 1.0 line-height
• Pair pink-tinted surfaces (#ffe6e7) with the deep berry text (#962339) for badges

Don't

• Use drop shadows for elevation — the system is flat by design
• Introduce a second saturated accent — pink is the only action color
• Set headlines in Open Sans or body copy in Poppins — the two faces never swap roles
• Use pure black for text — ink is #0d131c
• Put pink text on pink tint — tinted surfaces take #962339 deep berry text
• Use sharp corners on interactive elements — nothing renders below 10px radius
• Shout with multiple CTAs per viewport — one pink action at a time
• Use green (#00c950) for anything other than checkmark/success semantics

Voice & Tone

Firstory's voice is encouraging, practical, and creator-first — a knowledgeable studio partner who treats podcasting as a real media business, not a hobby. The hero line "用 Podcast 開啟你的媒體事業" ("Start Your Media Business with Podcasting") sets the register: ambitious on the creator's behalf, concrete about the path. Copy stays plain and benefit-led; feature names are friendly and capability-shaped ("AI 工作室", "會員訂閱", "節目推廣"), and every CTA lowers the barrier ("免費開始", "免費試用 14 天").

Voice samples (verbatim from live site):

• "用 Podcast 開啟你的媒體事業" — zh-TW hero headline (business-framed ambition). (verified live 2026-06-10)
• "Start Your Media Business with Podcasting" — EN hero headline. (verified live 2026-06-10)
• "準備好開始你的 Podcast 之旅了嗎？" — pre-footer CTA banner (journey framing). (verified live 2026-06-10)
• "從核心功能到強大的進階特色" — feature section heading. (verified live 2026-06-10)

Forbidden register: hype superlatives, technical audio-engineering jargon left unexplained, pressure tactics ("limited time!"), and talking down to beginners — the brand assumes every listener can become a media business.

Agent Prompt Guide

Quick Color Reference

• Primary CTA / active: Firstory Pink (#fb355e)
• CTA text: Near-White (#fafafa)
• Page background: Warm Canvas (#fbfaf9)
• Card background: Pure White (#ffffff)
• Headline / body text: Ink (#0d131c)
• Secondary text: Muted Slate (#4f5661)
• Cool tint zone: #edf0f6
• Pink tint zone / badge bg: #ffe6e7
• Badge text on pink tint: Deep Berry (#962339)
• Toggle inactive: Beige (#f6efe5) with #242a34 text
• Hairline: #e0e3e8
• Success check: #00c950

Example Component Prompts

• "Create a hero on a warm off-white #fbfaf9 background. Headline at 72px Poppins weight 700, line-height 1.0, letter-spacing -1.8px, color #0d131c. Above it an announcement pill: #ffe6e7 background at 80% alpha, 1px solid #ffe6e7 border, 16px radius, 16px Open Sans #0d131c text. One CTA: #fb355e background, #fafafa text, 16px radius, 40px tall, 0 32px padding, 16px Open Sans weight 500."
• "Design a solution card: white #ffffff background, 16px radius, 32px padding, no shadow, subtle 10% ink hairline ring. Title 18px Poppins weight 600, #0d131c. Body 16px Open Sans weight 400, #4f5661."
• "Build a pricing section on #fbfaf9. Billing toggle: full-pill segmented control, inactive #f6efe5 with #242a34 text, active #fb355e with #fafafa text, 8px 20px padding; attach a 'Save 22%' pill (#ffe6e7 bg, #962339 text, 12px weight 600, 2px 8px padding). Plan cards: white, 16px radius; featured plan gets a 2px solid #fb355e border and a 'Recommend' pill (#fb355e bg, #fafafa text). Prices in 36px Poppins weight 700, #0d131c."
• "Create a top nav over #fbfaf9: ghost items at 14px Open Sans weight 500, #0d131c text, 10px radius, 8px 16px padding; pink #fb355e CTA right-aligned."

Iteration Guide

1. Poppins 700 for every headline; Open Sans 400/500 for everything else
2. Pink #fb355e is the single action color — never spread it to decoration
3. No shadows — separate with the #fbfaf9 vs #ffffff value shift, tints, and hairlines
4. Radius ladder: 10px nav, 12px compact buttons, 16px cards/CTAs, pill toggles/badges
5. Text is #0d131c ink and #4f5661 muted — never pure black
6. Tight negative tracking and 1.0 line-height on display type
7. Pink tint #ffe6e7 always pairs with #962339 deep berry text
8. Featured emphasis = 2px pink border, not shadow or scale

---

Governance

Known Gaps

• Contrast, button-primary. Text #fafafa on #fb355e measures 3.49:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, button-plan. Text #fafafa on #fb355e measures 3.49:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, badge-recommend. Text #fafafa on #fb355e measures 3.49:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.