---
title: "Ko-fi design system"
variant: extended
source: https://ko-fi.com/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/ko-fi-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Ko-fi · Design System

> Warm, playful tools for independent creators

**Theme:** light · **Industry:** saas · **Source:** https://ko-fi.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Ko-fi pairs a warm neutral canvas and expressive display headlines with friendly illustrations and soft blue calls to action. Generous whitespace, pill-shaped controls, and outlined cards make the creator platform feel approachable rather than corporate.

## North star

Keep the warm cream canvas and playful display type in balance with simple, readable UI and generous breathing room.

## Overview

The page builds its identity around a warm cream canvas (#f4efe7), near-black typography, and restrained blue accents. A centered hero pairs a distinctive heavy display face with concise sans-serif copy, one blue primary action, and hand-drawn creator characters. The content alternates between open canvas sections and large white cards outlined in black, with rounded corners and a subtle dotted offset edge that gives the cards a tactile, printed feel. Creator examples and category chips add texture without disrupting the calm rhythm. Toward the bottom, blue FAQ and signup bands create a clear shift in mood while staying within the palette. DM Sans handles most interface and body text; the display face gives headlines their playful editorial character. Repeated pill controls, generous section separation, and centered compositions keep the long page legible and welcoming.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Ink | `#202020` | `--color-soft-ink` | neutral | Primary text, display headlines, navigation, and dark filled secondary actions. |
| Outline Black | `#000000` | `--color-outline-black` | semantic | Strong card outlines and dotted offset edging; use as structural detail rather than broad fill. |
| Warm Canvas | `#f4efe7` | `--color-warm-canvas` | brand | Main page background and the continuous warm field behind the hero and creator content. |
| Clean Paper | `#ffffff` | `--color-clean-paper` | surface | Large content cards, footer panel, and high-contrast card interiors. |
| Oat Surface | `#ede6dd` | `--color-oat-surface` | surface | Secondary warm surface tone used for section details and understated interface backing. |
| Ko-fi Blue | `#aac9f7` | `--color-ko-fi-blue` | brand | Prominent blue section bands and accent surfaces, especially the closing signup and footer area. |
| Sky Band | `#c7dbfa` | `--color-sky-band` | surface | Pale blue FAQ section background, visually separating help content from the warm canvas. |
| Action Blue | `#72a4f2` | `--color-action-blue` | accent | Primary hero CTA fill, with near-black label text. |
| Scone Beige | `#e9dfd2` | `--color-scone-beige` | accent | Warm beige category-chip button fill; a small supporting accent rather than a page-wide brand field. |

### Semantic aliases

`--color-canvas` → `#f4efe7` (Warm Canvas) · `--color-surface` → `#ffffff` (Clean Paper) · `--color-surface-2` → `#ede6dd` (Oat Surface) · `--color-surface-3` → `#aac9f7` (Ko-fi Blue) · `--color-surface-4` → `#c7dbfa` (Sky Band) · `--color-text` → `#202020` (Soft Ink) · `--color-border` → `#000000` (Outline Black) · `--color-accent` → `#aac9f7` (Ko-fi Blue) · `--color-accent-2` → `#72a4f2` (Action Blue) · `--color-on-accent` → `#202020` (Soft Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#202020` | `#f4efe7` | 14.23:1 | AAA |
| `#202020` | `#ffffff` | 16.29:1 | AAA |
| `#202020` | `#ede6dd` | 13.16:1 | AAA |
| `#202020` | `#aac9f7` | 9.63:1 | AAA |
| `#aac9f7` | `#f4efe7` | 1.48:1 | fail |
| `#aac9f7` | `#ffffff` | 1.69:1 | fail |
| `#aac9f7` | `#ede6dd` | 1.37:1 | fail |

### Gradients

- `radial-gradient(circle, rgb(0, 0, 0) 1px, rgba(0, 0, 0, 0) 0px), radial-gradient(circle, rgb(0, 0, 0) 1px, rgba(0, 0, 0, 0) 0px)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| DM Sans | `--font-body` | webfont | 400, 600 | Main interface typeface for navigation, body copy, labels, links, and buttons. | Nunito Sans |
| bogue-black | `--font-display` | webfont | 400 | Expressive display face for the hero and large editorial headlines. | Fraunces |

- **DM Sans:** Use regular and semibold weights; sentence case, clear rounded forms, and no measured tracking adjustment.
- **bogue-black:** Heavy, soft-edged display character; reserve for prominent headings and keep text in natural case.

### Type scale — Augmented Fourth (ratio ≈ 1.377, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 400 | 1 | 0 | — | bogue-black | Oversized expressive display headline treatment. |
| h1 | 60px | 400 | 1 | 0 | — | bogue-black | Hero headline and highest-level page title. |
| h2 | 30px | 400 | 1.2 | 0 | — | DM Sans | Major section headings and prominent text links. |
| h3 | 24px | 600 | 1.33 | 0 | — | DM Sans | Card and subsection headings. |
| body | 20px | 400 | 1.4 | 0 | — | DM Sans | Hero supporting copy and standard explanatory paragraphs. |
| caption | 16px | 600 | 1.4 | 0 | — | DM Sans | Small labels, creator metadata, and supporting notes. |
| button | 20px | 600 | 1.4 | 0 | — | DM Sans | Primary and secondary action labels. |
| nav | 16px | 600 | 1.4 | 0 | — | DM Sans | Header navigation and compact footer navigation. |
| link | 30px | 400 | 1.2 | 0 | — | DM Sans | Prominent inline or standalone informational links. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 8, 10, 16, 20, 24, 28, 32, 40, 80, 96 px.
- Section rhythm 96px · element gap 8px · card padding 24px · max content width 648px.

The hero is centered on a narrow content column, with a compact top navigation and ample open space around the headline, CTA, and illustration. Below it, the page alternates centered creator-category content with large rounded feature cards. The measured content max width is 648px, and the spacious section rhythm is driven by a 96px section gap. The lower FAQ and signup/footer regions use full-width blue bands; the footer itself sits in a white rounded panel. Keep alignment calm and avoid dense layouts.

## Shape & elevation

- Radius: button `9999px` · card `9999px` · media `40px` · xs `24px` · sm `40px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat, with no measured shadow system. Use crisp black outlines to define large white cards and a restrained dotted offset edge for tactile depth. Rounded card frames, white panels, and contrasting section bands provide the layering; avoid floating, shadow-heavy UI.

## Imagery

Hand-drawn, black-outlined characters lead the hero and recur as decorative companions in later sections. Creator examples use real profile photography in rounded image frames, while product imagery and sample page previews sit inside outlined white cards. Keep illustrations charming and lightly imperfect; treat photography as supporting proof, not the dominant visual language.

## Components

### Header navigation

Compact horizontal brand and link row; use near-black DM Sans labels and a dark rounded signup action.

### Hero CTA

A centered blue pill action using #72a4f2 with #202020 text, semibold DM Sans, and generous internal padding.

### Feature card

Large white panel with a strong black outline, generous padding, rounded corners, and occasional dotted offset edge.

### Creator category chips

Small rounded category controls with warm beige backing, dark semibold text, and simple creator-related icons.

### Creator profile cards

Rounded photography frames paired with white, black-outlined name and supporter-count labels.

### FAQ accordion

A white rounded container on a pale blue band, with stacked blue rounded question rows and simple expand indicators.

### Signup and footer band

Blue closing section with a centered signup prompt and a broad white footer panel containing grouped link columns.

### Measured component styles

- **Primary button** (“Get started”): background #72a4f2 · text #202020 · radius 24px · padding 20px 28px · 600 20px DM Sans
- **Secondary button** (“Artists”): background #e9dfd2 · text #202020 · border 2px solid #e9dfd2 · radius 9999px · padding 10px 20px · 600 30px DM Sans
- **Link** (“Drakoniques 200+ Supporters”): transparent background · text #202020 · radius 0px · padding 0px · 400 16px DM Sans
- **Input**: transparent background · text #202020 · radius 0px · padding 0px · 400 20px DM Sans
- **Card** (“Drakoniques 200+ Supporters”): background #ffffff · text #202020 · border 2px solid #000000 · radius 9999px · padding 20px 28px · 400 16px DM Sans
- **Navigation item** (“How it works Blog Log in Sign up free”): transparent background · text #202020 · radius 0px · padding 0px · 400 16px DM Sans

## Do

- Keep the warm cream canvas as the dominant page background.
- Reserve the display face for short, prominent headlines.
- Use DM Sans for readable interface and body text.
- Give major sections generous vertical separation.
- Use blue for key actions and distinct lower-page bands.
- Frame content with rounded corners and deliberate dark outlines.

## Don't

- Do not replace the warm neutral canvas with a stark white page.
- Do not use blue as a competing full-page background.
- Do not add heavy shadows or glossy gradients.
- Do not crowd the hero with extra controls or dense copy.
- Do not use the display face for long paragraphs.
- Do not make the illustrations look like polished 3D product renders.

## Agent prompt

Build a new creator-platform page in Ko-fi's warm, playful visual style. Use Warm Canvas (#f4efe7) as the main field, Soft Ink (#202020) for text, and Clean Paper (#ffffff) for rounded content cards. Set display headlines in an expressive, heavy serif-like face and use DM Sans or a close sans-serif for body text and controls. Keep the layout centered and spacious, with a narrow content column, generous section breaks, and concise copy. Use Action Blue (#72a4f2) for the primary pill CTA; reserve Ko-fi Blue (#aac9f7) and Sky Band (#c7dbfa) for distinct section bands. Add friendly hand-drawn illustrations, occasional creator photography, and crisp black card outlines with subtle dotted edging. Keep controls rounded, legible, and visually calm.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | gallery | Warm canvas section with a centered heading, category chips, and a multi-column creator image gallery. | Browse creator categories, Open creator profiles | Centered section heading, Rounded category chips, Rounded profile photos, Outlined profile labels |
| 2 | faq | Full-width pale blue band with a single centered column and white rounded accordion container. | Expand questions, Scan common concerns | Pale blue section background, White rounded panel, Stacked blue question rows |
| 3 | cta | Two-column blue section with a centered signup prompt and a small page-creation form. | Enter page name, Claim page | Blue background band, Display-style title, Rounded input, Compact claim action |
| 4 | footer | Blue band containing a broad white rounded footer panel with grouped navigation columns. | Browse product links, Find support and company information | White rounded panel, Multi-column link groups, Compact social icons |

## Source CSS custom properties (selected)

```css
--font-primary: "DM Sans","Nunito",sans-serif;
--font-legacy: "Nunito",sans-serif;
--brand-blue-50: #f0f5fe;
--brand-blue-100: #dde8fc;
--brand-blue-200: #c3d8fa;
--brand-blue-300: #99c0f7;
--brand-blue-400: #72a4f2;
--brand-blue-500: #467ceb;
--brand-blue-600: #305de0;
--brand-blue-700: #284acd;
--brand-blue-800: #263da7;
--brand-blue-900: #243784;
--brand-blue-950: #1b2450;
--brand-red-50: #fff5ed;
--brand-red-100: #ffe8d4;
--brand-red-200: #ffcda8;
--brand-red-300: #ffa970;
--brand-red-400: #ff7937;
--brand-red-500: #ff5a16;
--brand-red-600: #f03a06;
--brand-red-700: #c72807;
--brand-red-800: #9e210e;
--brand-red-900: #7f1f0f;
--brand-red-950: #450b05;
--brand-yellow-50: #fffaeb;
--brand-yellow-100: #fff1c6;
--brand-yellow-200: #ffda6e;
--brand-yellow-300: #ffcb4a;
--brand-yellow-400: #ffb520;
--brand-yellow-500: #f99207;
--brand-yellow-600: #dd6b02;
--brand-yellow-700: #b74906;
--brand-yellow-800: #94370c;
--brand-yellow-900: #7a2e0d;
--brand-yellow-950: #461602;
--shadow-reg-0: 0px 0px 2px rgba(0,0,0,.15),0px 2px 5px rgba(0,0,0,.05),0px 8px 40px rgba(0,0,0,.04);
--shadow-white-reg-0: 0px 0px 2px #ffffff29,0px 2px 5px #ffffff29,0px 8px 40px #ffffff29;
--shadow-none: none;
--text-color: #192025;
--text-color-hover: #2b3a44;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/ko-fi-com