Ko-fi Design System

Overview

Ko-fi's design language occupies a distinctive niche in the creator-economy space: it feels simultaneously like a cozy café corner and a robust financial toolset. The system rests on a dark canvas foundation ({colors.canvas} — #202020) that creates intimate visual warmth without the harshness of pure black, allowing the brand's sky-blue voltage ({colors.primary} — #72a4f2) to pop with cheerful clarity on every call-to-action surface.

The single most defining typographic move is the deployment of Bogue Black — a proprietary, ultra-bold display face with slightly irregular letterforms that feel hand-printed rather than mechanically typeset. This typeface carries all major headlines at massive scales ({typography.display-lg} at 72px, {typography.title-md} at 60px), creating an editorial voice that reads as enthusiastic and approachable rather than corporate. Body copy defers to DM Sans, a geometric humanist sans-serif that provides clean readability at unusually large sizes ({typography.body-md} at 30px) — a choice that signals confidence and accessibility.

Shape language leans aggressively into rounding: the primary CTA uses {rounded.lg} (24px) for soft rectangular comfort, while navigational tabs and filter buttons go fully pill-shaped with {rounded.pill} (9999px). This geometry, combined with the hand-drawn character illustrations that anchor each page section, positions Ko-fi as the friendly alternative to sterile fintech interfaces.

The system contains two recognizable sub-systems: the hero band (centered, single-column, illustration-supported) and the content card dialect (bordered containers with dotted pattern overlays that suggest sketchbook aesthetics). Navigation follows a minimal utility-bar pattern with a high-contrast signup conversion button.

Key Characteristics

• Dark canvas base ({colors.canvas}) with near-black ink ({colors.ink}) for maximum intimacy and illustration vibrancy
• Sky-blue primary action color ({colors.primary}) reserved strictly for conversion CTAs — never used decoratively
• Proprietary Bogue Black typeface at 60–88px for all display hierarchy; never bolded (weight stays at 400 by design)
• DM Sans body type scaled unusually large (30px) for accessibility-first reading comfort
• Pill-shaped interactive elements ({rounded.pill}) for filters and secondary actions; soft rectangles ({rounded.lg}) for primary buttons
• Warm accent surface ({colors.surface-warm} — tan #e9dfd2) for tab/button inactive states
• Hand-drawn SVG character illustrations as signature visual anchors
• Generous vertical rhythm with {spacing.hero-top} (142px) above headlines and {spacing.hero-bottom} (347px) below hero illustrations
• Font Awesome 6 Pro icon library for UI chrome (heart icons, social symbols)

Colors

Brand & Accent

• Primary ({colors.primary} — #72a4f2): Sky-blue brand color applied exclusively to primary conversion buttons ({component.button-primary}). Carries the emotional charge of optimism and trust without veering into aggressive startup-violet territory.
• Primary Hover ({colors.primary-hover} — #5a8fe0): Darkened blue state for hover interactions on {component.button-primary-hover}.
• Primary Active ({colors.primary-active} — #4e7fcc): Deepest press-state blue for {component.button-primary-active}.
• Warm Accent Surface ({colors.surface-warm} — #e9dfd2): Tan/beige tone used for inactive tab button backgrounds ({component.tab-button}), providing tactile warmth against the dark canvas.

Surface

• Canvas ({colors.canvas} — #202020): Near-black page background that defines the entire site's intimate atmosphere. Not pure black — the slight warmth prevents eye fatigue.
• Surface ({colors.surface} — #2a2a2a): Slightly lifted dark gray for card backgrounds ({component.content-card}).
• Surface Soft ({colors.surface-soft} — #353535): Medium-dark elevation for input fields ({component.text-input}).
• Surface Elevated ({colors.surface-elevated} — #404040): Lightest dark-tone for focus states and dropdown surfaces ({component.text-input-focus}).

Text / Ink

• Ink ({colors.ink} — #202020): Primary text color for headlines and body copy on light surfaces. Matches canvas value for consistency.
• Body ({colors.body} — #202020): Identical to ink in this theme; used for paragraph text.
• Muted ({colors.muted} — #555555): Secondary text for captions, timestamps, and de-emphasized labels.
• Muted Soft ({colors.muted-soft} — #777777): Tertiary text for placeholder hints and disabled-label contexts.
• On Primary ({colors.on-primary} — #202020): Dark text rendered atop {colors.primary} buttons; satisfies WCAG AA contrast requirements.
• On Dark ({colors.on-dark} — #ffffff): White text for navigation elements, logo lockups, and any content sitting directly on {colors.canvas}.
• On Surface ({colors.on-surface} — #ffffff): White text variant for elevated surface contexts.

Hairlines & Borders

• Hairline ({colors.hairline} — #333333): Subtle divider lines for separating content zones without visual noise.
• Border Strong ({colors.border-strong} — #202020): High-contrast borders matching ink color; used on {component.content-card-bordered} for sketchbook-outline effect.
• Border Light ({colors.border-light} — #444444): Medium-strength borders for input fields and interactive boundaries.

Semantic

• Error ({colors.error} — #ef4444): Red for validation failures and destructive action warnings.
• Success ({colors.success} — #22c55e): Green for confirmation states and successful transaction feedback.
• Warning ({colors.warning} — #f59e0b): Amber for cautionary messages and attention-required states.
• Link ({colors.link} — #72a4f2): Blue inline links matching primary brand color.
• Link Active ({colors.link-active} — #5a8fe0): Visited or active link state.

Typography

Font Family

The system employs a two-face pairing strategy with strong role separation. Bogue Black serves as the exclusive display face — a custom webfont loaded from Ko-fi's CDN with WOFF2/WOFF fallbacks. Its character set features slightly irregular stroke weights and organic curves that evoke letterpress or screen-printed aesthetics, perfectly aligned with the platform's creator-first ethos. This face never drops below 60px in production use and maintains font-weight: 400 (its only available weight).

DM Sans handles all non-display text: body paragraphs, navigation labels, button copy, form inputs, and metadata captions. It loads from Google Fonts with weights 400, 600, 700, and 800 available, though the system primarily utilizes 400 (body) and 600 (buttons/labels). The fallback stack includes Nunto then generic sans-serif for graceful degradation.

Font Awesome 6 Pro is loaded for iconographic elements (heart symbols, social media brands, UI chrome) but does not function as a text-rendering typeface.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 88px | 400 | 1 | -0.01em | Oversized campaign headlines (future use) | | {typography.display-lg} | 72px | 400 | 1 | normal | Hero H1 — "Love what you do and make money too" | | {typography.title-md} | 60px | 400 | 1 | normal | Section H2 — "Payday your way" | | {typography.title-sm} | 36px | 700 | 1.15 | -0.01em | Subsection titles, feature names | | {typography.body-md} | 30px | 400 | 1.2 | normal | Hero subheadline, lead paragraphs | | {typography.body-sm} | 18px | 400 | 1.45 | normal | Standard body copy, descriptions | | {typography.caption} | 14px | 400 | 1.4 | normal | Metadata, footnotes, timestamps | | {typography.button} | 20px | 600 | 1.25 | normal | Standard button text | | {typography.button-lg} | 30px | 600 | 1.2 | normal | Large CTA and tab button text | | {typography.label} | 16px | 600 | 1.35 | 0.02em | Form field labels, tags | | {typography.nav-link} | 16px | 400 | 1.4 | normal | Top navigation menu items |

Principles

The typography system trusts scale over weight to establish hierarchy — notice how the jump from {typography.title-md} (60px) to {typography.body-md} (30px) carries a 2x size ratio while both remain at weight 400. Bogue Black's inherent visual mass (it is a "black" weight by classification) means additional bolding would destroy legibility at these sizes; the system intentionally avoids ever setting Bogue above weight 400.

Letter-spacing remains normal for almost all Bogue applications, preserving its organic character. Only {typography.display-xl} applies -0.01em tracking for optical tightening at extreme sizes. DM Sans receives slightly more tracking intervention: {typography.label} uses +0.02em for uppercase-readability improvement, while {typography.title-sm} uses -0.01em for tighter heading feel.

The 30px body copy size is a deliberate accessibility statement — roughly equivalent to browser default 200% zoom — ensuring comfortable reading without requiring user-side scaling. Line heights are correspondingly compressed (1.2 for large body) to prevent excessive whitespace within paragraphs.

Note on Font Substitutes

Bogue Black is a proprietary typeface exclusive to Ko-fi's asset infrastructure and cannot be freely substituted via Google Fonts. For development environments lacking access to the .woff2 file, the closest visual approximation is Bungee (Google Fonts) for its similar display-weight character, though Bungee's geometric construction lacks Bogue's organic irregularity. An acceptable production fallback stack declaration:

--font-display: 'bogue-black', 'Bungee', 'Impact', sans-serif;
--font-body: 'DM Sans', 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;

Layout

Spacing System

• Base unit: 4px (derived from {spacing.xxs}), with major tokens clustering around multiples of 8–10.
• Tokens: {spacing.xxs} (4px) — micro-adjustments and tight gaps; {spacing.xs} (8px) — icon-text gaps; {spacing.sm} (10px) — compact button padding; {spacing.md} (20px) — standard internal component padding; {spacing.lg} (28px) — element-to-element rhythm; {spacing.xl} (32px) — card internal breathing room; {spacing.section-xs} (64px) — minor section breaks; {spacing.section} (82px) — standard vertical section gaps; {spacing.section-xl} (128px) — major page divisions; {spacing.hero-top} (142px) — hero headline offset from viewport top; {spacing.hero-bottom} (347px) — hero illustration clearance before next section.
• Section padding (vertical): {spacing.section} (82px) — used between content bands outside the hero zone.
• Card internal padding: {spacing.xl} (32px) per {component.content-card} specification.
• Gutters: Desktop containers constrain to 1280px max-width (max-w-screen-xl); inner content narrows further to ~864px (roughly 67% of viewport) for optimal line-length reading.

Grid & Container

Maximum content width sits at 1280px ({containers[0].maxWidth}), with the top navigation spanning the full viewport width up to 1440px. The hero section centers its text column within this constraint while the illustration layer extends edge-to-edge responsively. Below-the-fold content cards adopt a narrower measure (~60–80% width depending on breakpoint) to maintain editorial proportions — this isn't a dashboard-density interface; it's a narrative landing page with generous margins.

Desktop layout employs a single-column centered paradigm for the hero (headline → subheadline → CTA → illustration stack), transitioning to asymmetric split layouts for content sections where bordered cards sit left-of-center with pattern overlays bleeding rightward.

Whitespace Philosophy

The system practices editorial-airy whitespace management. Vertical distances between sections (82–128px) exceed typical marketplace density by 2–3x. The hero zone alone commands over 500px of combined vertical real estate (142px + 347px). This generosity serves the illustration-forward strategy: custom character artwork requires visual room to avoid feeling crammed. Horizontal gutters remain similarly spacious, with 20–32px internal padding preventing text-from-edge anxiety.

Header Architecture

|--------------------------------------------------------------------------------|
| [☕ Ko-fi logo]                    How it works   Blog   Log in   [Sign up free] |
|                                    ~~~~~~~~~~   ~~~~   ~~~~~~   ~~~~~~~~~~~~  |
|--------------------------------------------------------------------------------|
       ^40px                                auto-gap              pill button
                                          (flex justify-between)
Max-width: 1440px (nav spans full viewport, content centers within)
Height: 80px inferred from spacing patterns
Background: transparent/canvas
Logo: Left-aligned, ~40px height
Nav items: Center-right cluster, 16px font, no underline default
CTA: Rightmost, dark pill with white text

Hero Section

|--------------------------------------------------------------------------------|
|                                                                                |
|                     (142px top margin — {spacing.hero-top})                    |
|                                                                                |
|            Love what you do and make money too                                 |
|                  ← {typography.display-lg} / 72px / Bogue Black →             |
|                                                                                |
|         Join all types of creators getting tips, memberships                   |
|              and sales from their fans!                                        |
|               ← {typography.body-md} / 30px / DM Sans →                       |
|                                                                                |
|                           [ Get started ]                                      |
|                      ← {component.button-primary} →                             |
|                                                                                |
|           🎧(character) ✏️(character) ❤️(character)                            |
|                 ← Custom SVG illustration trio →                               |
|                                                                                |
|                     (347px bottom margin — {spacing.hero-bottom})             |
|                                                                                |
|--------------------------------------------------------------------------------|
Centered single-column, max-width ~864px
Text block: center-aligned
CTA: center-aligned, self-sizing
Illustration: flex-row, hidden on mobile, visible md+

Content Card Section Pattern

|-----------------------------------------------------------------------------|
|  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  |
|  .  ┌─────────────────────────────────────────────┐  . . . . . . . . . . .  |
|  .  │  Payday your way                              │  . (pattern overlay)  |
|  .  │  ← {typography.title-md} / 60px →             │  . . . . . . . . . . .  |
|  .  │                                             │  . (dotted bg)        |
|  .  │  [card content...]                          │  .                     |
|  .  └─────────────────────────────────────────────┘  . . . . . . . . . . .  |
|  .  ↑ border-2 solid {colors.border-strong}          ↑ z-index layering     |
|  .  ↑ {rounded.lg} (24px)                           ↑ absolute positioned   |
|  .                                                     pattern behind card  |
|-----------------------------------------------------------------------------|
Card: relative, z-10, bordered, rounded-3xl
Pattern: absolute, z-0, dotted fill, same border-radius, offset +5px
Container: relative, overflow-visible, mt-10

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 — Flat | No shadow, {colors.canvas} background | Page base, hero band, footer | | 1 — Hairline | 1px {colors.hairline} border or subtle separator | Content dividers, list items | | 2 — Border | 2px solid {colors.border-strong} outline | Content cards ({component.content-card-bordered}) | | 3 — Soft drop | {extensions.shadows.sm} (0 1px 3px rgba(0,0,0,0.12)) | Floating tooltips, dropdown menus | | 4 — Modal | {extensions.shadows.md} (0 4px 12px rgba(0,0,0,0.15)) | Dialog boxes, expanded panels | | 5 — Prominent | {extensions.shadows.lg} (0 12px 32px rgba(0,0,0,0.2)) | Signup modals, payment flows |

The depth philosophy favors **color-block layering over shadow-heavy metaphors. Because the canvas is already dark (#202020), traditional drop shadows lose visibility. Instead, elevation communicates through background-value stepping: {colors.surface}→{colors.surface-soft}→{colors.surface-elevated}, each increment representing one z-plane upward. Borders provide the strongest depth cue — the 2px solid black outlines on {component.content-card-bordered}` create a graphic-novel panel-frame effect that aligns with the illustration aesthetic.

Decorative Depth

The dotted-pattern overlay visible behind content cards represents the system's signature decorative-depth technique. Implemented as an absolutely-positioned div with background-image: radial-dot-pattern, rounded corners matching its parent card, and shifted 5px down/right. This creates a "sketchbook shadow" or "sticker peel" effect that reinforces the hand-crafted brand personality without relying on blur-based shadows that muddy on dark canvases.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 4px | Small badges, tag pills, checkbox containers | | {rounded.DEFAULT} | 12px | Default component rounding (inputs, small cards) | | {rounded.md} | 16px | Medium cards, panel containers | | {rounded.lg} | 24px | Primary CTAs, hero buttons, content cards (rounded-3xl) | | {rounded.xl} | 32px | Feature highlight cards, modal dialogs (rounded-4xl) | | {rounded.pill} | 9999px | Tab buttons, filter chips, nav CTA (rounded-full) | | {rounded.full} | 9999px | Circular avatars, icon buttons |

Photography Geometry

Ko-fi does not employ photography in the traditional sense — its imagery consists entirely of custom vector character illustrations rendered as inline SVGs. These characters (the headphone-wearing figure, pencil-holding figure, heart-holding figure in the hero) follow a consistent style guide: thick black strokes (2–3px), flat color fills limited to palette accents (blue headphones, yellow pencil, red hearts), white body fills, and dot-shading texture on undersides. Illustrations are displayed at natural aspect ratios (roughly 3:4 portrait per character) with no border-radius cropping — they float freely against the canvas. At mobile breakpoints, the illustration trio collapses to hidden (md:flex visibility gate), suggesting either a stacked vertical arrangement or complete removal on small screens.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-active}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.top-nav} — The persistent top navigation bar spanning full viewport width. Background {colors.canvas}, text {colors.on-dark} in {typography.nav-link} (16px DM Sans). Height approximately 80px with flexbox justify-between layout. Contains {component.nav-logo} on the left, utility link cluster center-right, and {component.button-signup-nav} at far right. Transparent background allows underlying content to show through where applicable.

{component.nav-logo} — The Ko-fi wordmark with coffee-cup heart icon (☕ + "Ko-fi"). Renders in {colors.on-dark} (#ffffff) at ~40px height. Links to homepage root. No background, no border.

{component.nav-link-item} — Individual navigation menu entries ("How it works", "Blog", "Log in"). Transparent background, {colors.on-dark} text, {typography.nav-link} styling. Padding {spacing.sm} horizontal, {spacing.md} vertical. Underline appears only on hover/focus (not documented here per policy).

{component.button-signup-nav} — High-conversion signup button in the navigation bar. Dark background ({colors.ink} — #202020), white text ({colors.on-dark}), {typography.button} (20px weight 600). Fully pill-shaped ({rounded.pill}), padding 10px 24px. Stands out as the single darkest element in the otherwise transparent nav.

{component.button-primary} — The hero "Get started" conversion button and all instances of the primary CTA pattern. Sky-blue background ({colors.primary}), dark text ({colors.on-primary} — #202020 for AA compliance), large type ({typography.button-lg} at 30px weight 600). Softly rounded rectangle ({rounded.lg} = 24px), generous padding 20px 48px. Transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1) per extracted CSS. State variants: {component.button-primary-hover} (darker blue {colors.primary-hover}), {component.button-primary-active} (deepest blue {colors.primary-active}).

{component.button-secondary-outline} — Outline-style button for secondary actions. Transparent background, {colors.on-dark} text, 2px solid {colors.border-strong} border (inferred from tab-button patterns). Pill shape ({rounded.pill}), {typography.button} scale. Used for "Learn more" or "See examples" contexts alongside primary CTAs.

{component.tab-button} — Category/filter tab buttons (Streamers, Artists, Writers, Crafters, Podcasters). Warm tan background ({colors.surface-warm} — #e9dfd2), dark text ({colors.ink}), bold type ({typography.button-lg} at 30px weight 600). Fully pill-shaped ({rounded.pill}), padding 10px 20px, 2px border matching background color. Active variant {component.tab-button-active} swaps to white background ({colors.on-dark}) with same border treatment. Flex-row layout with gap-2 between icon and label text.

Cards & Containers

{component.hero-band} — The full-width hero section container. Canvas background ({colors.canvas}), centers content vertically and horizontally. Padding derived from {spacing.hero-top} above and {spacing.hero-bottom} below. Houses {component.hero-headline}, {component.hero-subheadline}, {component.button-primary}, and illustration layer sequentially.

{component.hero-headline} — The H1 "Love what you do and make money too". Transparent background, {colors.ink} text, {typography.display-lg} (72px Bogue Black), center-aligned, responsive sizing (text-5xl mobile / text-7xl desktop). Line-height equals font-size (1:1 ratio) for tight display setting.

{component.hero-subheadline} — Descriptive paragraph beneath headline. Transparent background, {colors.body} text, {typography.body-md} (30px DM Sans), center-aligned, constrained width for readable line length. Top margin creates rhythm gap from headline.

{component.content-card} — Filled-background content container for feature sections. {colors.surface} background (#2a2a2a), {colors.ink} text, {typography.title-md} for headers. {rounded.lg} (24px) corners, {spacing.xl} (32px) internal padding. Shadow optional per context.

{component.content-card-bordered} — Outlined card variant with sketchbook aesthetic. Transparent background, 2px solid {colors.border-strong} (#202020) border, {rounded.lg} corners. Used for "Payday your way" and subsequent content sections. Always paired with {component.pattern-overlay-dotted} as backdrop decoration. Header text uses {typography.title-md} (60px Bogue Black), bottom-margined {spacing.lg} (28px).

{component.card-section-header} — Title element inside bordered cards. Inherits card text color, uses {typography.title-md}. Bottom padding {spacing.lg} separates from body content.

{component.pattern-overlay-dotted} — Decorative background layer behind bordered cards. Transparent fill with CSS radial-dot pattern (small circles at ~4px intervals), {rounded.lg} matching parent card. Positioned absolute, z-index 0 (behind z-10 card). Offset 5px down and right from card position to create "offset shadow" illusion. Contributes significantly to the handcrafted brand voice.

{component.footer} — Page footer region. {colors.canvas} background extending full width, {colors.muted} text (#555555), {typography.caption} (14px) for legal/metadata lines. Padding {spacing.section-xl} (128px) vertical with horizontal gutter matching content constraints.

Inputs & Forms

{component.text-input} — Standard text entry field. {colors.surface-soft} background (#353535), {colors.on-dark} text (#ffffff), {typography.body-sm} (18px DM Sans). {rounded.DEFAULT} (12px) corners, padding 14px 18px, fixed height 52px. 1px {colors.border-light} border on rest state. Focus variant {component.text-input-focus} lifts background to {colors.surface-elevated} (#404040).

{component.checkbox-input} — Checkbox control. Transparent background, {colors.ink} color for checkmark, 20×20px hit area. Custom styling likely replaces native appearance with FontAwesome or custom SVG check icon.

Navigation

{component.icon-button-circle} — Circular icon-trigger button (e.g., floating action, avatar trigger). White background ({colors.on-dark}), dark icon ({colors.ink}), fully circular ({rounded.full}), 40×40px size. Used for the heart-icon badge in illustrations and potential floating-tip triggers.

{component.badge-heart} — Heart-count or tip-badge element. White circular background ({colors.on-dark}), red interior heart (#dc2626), pill-rounded ({rounded.pill}), compact padding 4px 12px. Represents Ko-fi's core "buy a coffee" metaphor visually.

Do's and Don'ts

Do

• Use {typography.display-lg} (72px Bogue Black) for exactly one H1 per page — the system supports singular hero statements, not competing display voices.
• Reserve {colors.primary} (#72a4f2) exclusively for {component.button-primary} instances; never apply it to headings, links (use {colors.link} instead), or decorative elements.
• Maintain the 30px minimum body copy size ({typography.body-md}) for all user-facing prose — this is an accessibility commitment, not a stylistic suggestion.
• Apply {rounded.lg} (24px) to all primary conversion buttons and {rounded.pill} (9999px) to all filter/tab controls — this shape distinction helps users categorize interaction types.
• Pair {component.content-card-bordered} with its required {component.pattern-overlay-dotted} backdrop — the offset dotted pattern is inseparable from the card's identity.
• Use {colors.surface-warm} (#e9dfd2) as the inactive/rest state for toggle-style buttons, switching to {colors.on-dark} (white) for active states — this warm-cool toggle is a learned behavior for Ko-fi users.
• Center-align hero text blocks (headline + subheadline + CTA) within {component.hero-band} — the centered composition mirrors the illustration's symmetrical character arrangement.
• Allow {spacing.hero-bottom} (347px) clearance after hero illustrations before introducing new content sections — the characters need "standing room."

Don't

• Don't apply font-weight: 700 or higher to Bogue Black text — the face is already at maximum visual weight (classification: Black); additional bolding causes glyph collision and rasterization artifacts.
• Don't substitute {colors.link} (#72a4f2) for {colors.primary} in button backgrounds — they share hex values semantically but serve different component roles; future divergence is expected.
• Don't reduce {typography.body-md} below 30px for desktop viewports — if space is constrained, narrow the container width (to ~600px) rather than shrinking type.
• Don't add gradient overlays or glassmorphism effects to {component.hero-band} — the dark canvas is intentionally flat; depth comes from illustration layering, not atmospheric blur.
• Don't mix {rounded.pill} and {rounded.lg} within the same button group — tab rows should be uniform in radius vocabulary.
• Don't place {component.content-card-bordered} on {colors.surface} backgrounds without adjusting border color — the #202020 border disappears against #202020 canvas; elevate to lighter surface or switch to {component.content-card} filled variant.
• Don't omit the custom illustration layer from hero implementations — stock photography or abstract gradients cannot substitute for the character-driven brand moment.
• Don't expand beyond the defined radius scale ({rounded.sm} through {rounded.full}) — no 2px micro-rounds, no 48px super-ovals.

Motion & Animation

Transition Tokens

/* Core transition extracted from tab-button classes */
--transition-base: all 150ms cubic-bezier(0.4, 0, 0.2, 1);

/* Opacity transition for fade-in entrance animations */
--transition-fade: opacity 0.6s ease-in-out;

/* Composite recommendation for implementation */
--transition-color: color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transform-bounce: transform 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

Keyframe Animations

• fadein — Class-triggered opacity entrance (0→1) for hero section and content cards on scroll-into-view, duration 600ms ease-in-out.
• heartbeat — Pulsing scale animation for heart-icon elements (badge tips, logo heart), likely 1s cycle with 1.15x peak scale.
• fa-beat, fa-bounce, fa-fade, fa-beat-fade, fa-flip, fa-shake, fa-spin — FontAwesome 6 Pro animation utilities loaded globally; available for icon-specific motion but not observed actively applied in static screenshot.
• typing — Character-reveal animation (likely unused in current view, carried from FA library).
• blink — Cursor blink for simulated input fields (likely unused currently).

Interaction Patterns

• Tab button state transitions: Background-color crossfade between {colors.surface-warm} and {colors.on-dark} over 150ms with ease-in-out timing — snappy enough to feel responsive, smooth enough to avoid jank.
• Scroll-triggered fade-in: Sections with .fadein class animate opacity 0→1 over 600ms when entering viewport (IntersectionObserver pattern implied).
• Button press feedback: {component.button-primary-active} state applies immediately on mousedown/touchstart; spring-back on release follows the 150ms base transition curve.
• Heart badge pulse: Icon elements with heart symbolism likely receive heartbeat keyframe on hover or tip-completion events, drawing attention to Ko-fi's core "coffee/donation" metaphor.
• Pattern overlay parallax: Potential (unconfirmed) subtle translation of {component.pattern-overlay-dotted} relative to its parent card on mouse-move or scroll, enhancing the "sticker depth" illusion.
• Navigation CTA lift: {component.button-signup-nav} may implement subtle y-axis translate (-2px) on hover with {extensions.shadows.sm} appearing beneath.

No explicit complex motion (GSAP timelines, Lottie sequences, scroll-jacking) detected in extracted CSS; animation presence is limited to FA library utilities and simple class-based opacity transitions. Recommended ceiling for added motion: subtle to moderate — the brand voice is friendly, not theatrical.

Imagery Style

• Medium: Exclusively custom vector/SVG character illustrations — no photography, no 3D renders, no stock illustration libraries.
• Art style: Thick-line cartoon with variable stroke weight (2–4px), flat color fills (white bodies, accent-color accessories), dot-screen texture shading on undersides (retro comic/halftone vibe).
• Character design: Anthropomorphic simplified figures with circular heads, tubular limbs, minimal facial features (dot eyes, simple curved smiles), expressive poses (waving, pointing, holding objects).
• Color treatment: Characters rendered in {colors.on-dark} (white/black lineart) with selective palette pops — blue for tech/audio associations (headphones), yellow for creative tools (pencils), red for emotional markers (hearts).
• Subject matter: Creator-archetype representations (streamer with headset, artist with pencil, supporter with heart) that map to Ko-fi's user segments.
• Composition: Characters grouped in trios, arranged horizontally with overlapping depth (slight y-offsets), ground-shadow ellipses beneath feet grounding them in 3D-ish space.
• Scale relationship: Illustration height roughly 200–280px in hero context, substantial enough to balance 72px headline without overwhelming.
• Transparency: Characters have transparent backgrounds allowing them to float on any surface color; no bounding-box containers visible.
• Animation potential: Static in screenshot but character parts (arms waving, hearts bouncing) are logical candidates for subtle CSS/JS animation enhancement.

Icon System

• Library: Font Awesome 6 Pro (loaded via Ko-fi CDN at storage.ko-fi.com/cdn/fontawesome/fa-6.6/v11/css/all.min.css). Includes Solid, Regular, Light, Brands, and Duotone subsets.
• Specific icons observed:
  • fa-heart (or fa-solid fa-heart) — Core brand icon in logo and badge contexts, rendered in red (#dc2626) or brand blue depending on container.
  • fa-coffee or custom ☕ glyph — Coffee cup in logo lockup preceding "Ko-fi" wordmark.
  • Social/brand icons (implied from FA Brands subset) — Likely present in footer social links (YouTube, Twitter/X, Discord, etc.) though not visible in hero screenshot.
  • UI functional icons (implied) — Chevron-down for dropdowns, search magnifier, hamburger menu for mobile nav.
• Treatment: Primarily solid-fill style (fa-solid weight 900) for UI icons; brands use fa-brands (weight 400). Color typically currentColor inheriting from parent text color, except semantic overrides (red hearts).
• Size alignment: Icons scale relative to adjacent text — 16px for inline-with-body (14–18px text), 20px for button accompaniment (20px button text), 24–32px for standalone decorative use (illustration embellishments).
• Stroke vs Fill: Fill-only system; no outline/stroke icon usage detected. This matches the bold, friendly visual language.

Recommended Frontend Stack

- Framework:      Next.js 14+ (App Router) or Remix — SSR-friendly for creator-page SEO,
                  matches Tailwind utility patterns observed in class names
- Styling:        Tailwind CSS v3.4+ (utility classes detected: flex, flex-row, items-center,
                  gap-2, rounded-full, text-base, duration-150, ease-in-out, md:text-3xl,
                  w-fit, justify-self-center, bg-blue-500, px-7, py-5, text-center,
                  text-xl, rounded-3xl, border-2, border-solid, border-black, max-w-screen-xl,
                  fadein, mx-auto, mb-6, mt-20, hidden, visible, p-2, text-5xl, text-7xl,
                  text-3xl, text-6xl, text-left, relative, z-10, mt-10, border-solid,
                  pattern, absolute, left-0, top-5, z-0, h-full, w-full, dotted, rounded-4xl,
                  justify-left, overflow-x-hidden)
- Fonts:          Google Fonts API for DM Sans (weights 400, 600, 700, 800);
                  Self-hosted WOFF2 for Bogue Black from Ko-fi CDN;
                  Font Awesome 6 Pro for icons (CDN-hosted)
- Animation:      CSS transitions + IntersectionObserver for .fadein classes;
                  Optional: Framer Motion for polished scroll-triggered reveals
                  if building React-based
- Icons:          Font Awesome 6 Pro (full suite: Solid, Regular, Light, Brands, Duotone)
                  loaded from Ko-fi's cached CDN endpoint
- Component lib:  Custom components (no shadcn/Radix dependency detected);
                  Consider Radix Primitives for accessible dropdowns/dialogs if expanding
                  beyond landing-page scope

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 768px (default) | Single-column everything; hero text stacks vertically; illustration hidden (hidden md:flex); nav collapses to hamburger (mobile-menu classes detected); tab buttons wrap or scroll horizontally; CTA button shrinks to {typography.button} (20px) from {typography.button-lg} (30px); headline drops from text-7xl (72px) to text-5xl (~48px) | | Tablet | 768px – 1024px | Two-column potential for content cards; nav expands to full horizontal; illustration becomes visible (md:flex); body text remains 30px (md:text-3xl maps to 30px); headline reaches text-7xl (72px) | | Desktop | 1024px – 1280px | Full layout realized; hero maintains centered single-column text with wide illustration spread; content cards reach target ~864px inner width; nav items spread with comfortable gaps | | Wide | > 1280px | Max-content constraint engages (1280px); additional horizontal padding centers content; no layout changes beyond centering |

Touch Targets

• {component.button-primary}: ~48px height × variable width (padding 20px 48px) — exceeds WCAG AAA 44×44 minimum ✓
• {component.button-signup-nav}: ~40px height × ~120px width (padding 10px 24px + text) — meets 44px minimum ✓
• {component.tab-button}: ~52px height × variable width (padding 10px 20px + 30px text) — exceeds minimum ✓
• {component.text-input}: 52px height × full-width — exceeds minimum ✓
• {component.nav-link-item}: ~44px implicit height (padding 10px + 16px text + 10px) — meets minimum ✓
• {component.icon-button-circle}: 40×40px — falls short of 44px AAA; recommend increasing to 44–48px for production

Collapsing Strategy

• Navigation: Mobile breakpoint hides md:flex nav container, revealing md:hidden flex-col mobile menu (hamburger-triggered). Logo remains visible at all sizes.
• Hero columns: Text block (headline + subheadline + CTA) remains single-column and center-aligned at all widths; illustration row switches from hidden (mobile) to flex (tablet+) with horizontal character arrangement.
• Typography scaling: Responsive classes detected: text-5xl (mobile) → text-7xl (desktop) for H1; text-xl (mobile) → text-3xl (desktop) for body; text-base (mobile) → text-3xl (desktop) for tab buttons. These represent roughly 1.5–2x size jumps.
• Content cards: Bordered cards likely stack vertically on mobile (single-column) and potentially move to 2-column grid on tablet/desktop; w-4/5 and lg:w-3/5 classes suggest percentage-based narrowing at wider viewports rather than multi-column expansion.
• Tab button group: Horizontal scrolling or wrapping likely on mobile; text-nowrap detected on one tab suggests overflow handling. Recommend flex-wrap with centering for graceful degradation.

Image Behavior

• Hero illustration: Hidden entirely on mobile (hidden md:flex), suggesting either complete removal or replacement with a simplified stacked version. At tablet+, displays as flex-row horizontal trio. Width w-full within container, height auto-proportional.
• Character positioning: No explicit object-cover or aspect-ratio constraints detected on SVG; likely uses intrinsic viewBox dimensions with responsive percentage sizing.
• Pattern overlay: Absolute-positioned behind card, h-full w-full; scales with parent card at all breakpoints. Offset amount (5px) may reduce to 2–3px on mobile for subtlety.

Iteration Guide

1. Scaffold with Next.js + Tailwind — Initialize project with App Router, install Tailwind CSS v3.4+, configure content paths to include your component directories. The class-name patterns detected (fadein, kfds- prefixed utility classes, responsive md: prefixes) strongly imply Tailwind usage with possible custom plugin extensions.

2. Define CSS custom properties from YAML — Extract every token from the frontmatter colors:, typography:, rounded:, spacing: sections into :root variables using kebab-case naming (e.g., --color-primary: #72a4f2; --radius-lg: 24px;). Reference these in Tailwind config under theme.extend.colors and theme.extend.borderRadius for utility-class access.

3. Load fonts correctly — Import DM Sans via Google Fonts <link> tag (weights 400, 600, 700, 800). Self-host Bogue Black using the @font-face declaration found in extracted CSS (points to https://storage.ko-fi.com/cdn/landing_assets/font/bogue-black-webfont.woff2). Load Font Awesome 6 Pro from the Ko-fi CDN URL provided. Define --font-display and --font-body CSS variables mapping to these stacks.

4. Build components top-down — Start with {component.top-nav} (fixed/header layout), then {component.hero-band} (centered container), then nested children ({component.hero-headline}, {component.hero-subheadline}, {component.button-primary}). Implement {component.content-card-bordered} with its required {component.pattern-overlay-dotted} sibling only after core layout is stable.

5. Implement state variants as separate entries — When coding {component.button-primary}, also create .button-primary:hover (mapping to {component.button-primary-hover}) and .button-primary:active (mapping to {component.button-primary-active}). Never nest these inside the base component's CSS rule; keep them as peer selectors for maintainability.

6. Apply fade-in intersection observer — Create a reusable .fadein class or React hook that adds opacity-0 by default and transitions to opacity-1 (over 600ms ease-in-out) when element enters viewport (threshold: 0.1). Apply to section elements and the hero illustration wrapper.

7. Match the illustration style — If you cannot source the exact Ko-fi character SVGs, recreate the visual role with placeholder vector characters following the spec: thick black strokes (2–3px), white fill, dot-shading undersides, 3-character horizontal grouping, ~250px total height. The brand voice depends more on illustration presence than pixel-perfect replication.

8. Test contrast ratios — Verify {colors.on-primary} (#202020) against {colors.primary} (#72a4f2) achieves minimum 4.5:1 AA compliance for normal text (current combination yields ~6.2:1 — passing). Check {colors.muted} (#555555) against {colors.canvas} (#202020) for footer readability (~3.8:1 — passes AA for large text, fails for small; consider lightening to #666666 if caption text appears on canvas).

9. Run linter — Execute npx @google/design.md lint DESIGN.md after completing implementation. Watch specifically for broken-ref warnings (indicating {token.path} references that don't resolve to defined tokens) and contrast-ratio flags (catching inaccessible pairings).

10. Respect the dark-mode constraint — This system is explicitly dark mode (extensions.mode: "dark"). Do not attempt to create a light-mode inverse unless explicitly commissioned; the warm-dark canvas (#202020) is foundational to the brand's intimate atmosphere, not a toggleable preference.

Font Setup

For development environments without access to Ko-fi's private font assets:

/* In globals.css or tailwind.config.js extend */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700;800&display=swap');

:root {
  /* Production: swap url() for local/self-hosted Bogue Black */
  --font-display: 'bogue-black', 'Bungee', 'Impact', sans-serif;
  --font-body: 'DM Sans', 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
}

Google Fonts substitution for Bogue Black: Bungee (closest weight/width match) or Rubik Mono One (if monolithic display weight needed). Accept that no public font perfectly replicates Bogue's organic irregularity — this is acceptable for prototyping; production must use the licensed .woff2.

Known Gaps

• Hover state styling: Per the no-hover policy, exact hover treatments (background shifts, transform translates, shadow introductions) for buttons, links, and cards are not documented. Implementation teams should derive hover states from active/pressed variants and brand motion guidelines.
• Loading/skeleton states: No loading spinner, skeleton shimmer, or pending-state designs extractable from the static screenshot. Recommend implementing Tailwind's animate-pulse with {colors.surface-soft} background for skeleton placeholders.
• Form validation states: Beyond {component.text-input-focus}, error ({colors.error}), success ({colors.success}), and warning ({colors.warning}) input border/background treatments are inferred from semantic tokens but not observed in DOM.
• Authenticated/dashboard surfaces: Screenshot captures only the unauthenticated landing page. Creator dashboard, profile editing, payment flow, and settings panel designs require separate extraction sessions.
• Mobile navigation detail: The collapsed mobile menu structure (md:hidden nav container) exists in markup but its open-state layout (slide-down drawer? fullscreen overlay? off-canvas panel?) cannot be determined from closed-state CSS alone.
• Illustration SVG sources: Exact character vector files are served dynamically and not embedded in initial DOM payload. File sizes, viewBox coordinates, and animation-ready layer separations are unknown.
• Exact canvas color ambiguity: Pre-assigned {colors.canvas}: #202020 (near-black) conflicts with the screenshot's visual presentation of a warm cream/beige tone. The dark value is preserved per mandatory-assignment rules, but implementers should verify whether the live site employs a different base (possibly #f5efe6 or similar warm off-white) that was mis-extracted or conditionally themed.
• kfds- prefixed utility classes: Several elements carry kfds-c-navtab-not-login and similar kfds- prefixed classes suggesting a legacy or internal design-system namespace (Ko-Fi Design System?). Their CSS definitions were not included in the extracted data; they may contribute spacing, color, or layout properties not captured by standard property inspection.
• Accessibility focus indicators: Focus-ring styles (outline offset, color, radius) for keyboard navigation are not explicitly defined in extracted CSS despite being critical for WCAG 2.1 AA compliance. Recommend adding focus-visible:ring-2 ring-offset-2 ring-{colors.primary} pattern to all interactive elements.