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

# Qatchup · Design System

> Quiet SaaS clarity, warmed by playful customer voices

**Theme:** light · **Industry:** saas · **Source:** https://www.qatchup.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._

Qatchup presents its customer-feedback widget through a calm, spacious SaaS landing page with strong black-and-white contrast. Hand-drawn people illustrations and a restrained orange accent add warmth to an otherwise product-focused interface.

## North star

Keep the interface quiet and spacious, letting clear product examples and selective hand-drawn color carry the personality.

## Overview

The page uses a near-white canvas (#fafafa) from the hero through the pricing and waitlist sections, so the full-length page feels continuous rather than divided into many color bands. Dark charcoal (#292929) anchors the navigation CTA, headings, and two large inverse panels; lighter gray text keeps explanatory copy quiet. Aspekta is the dominant sans-serif: large, closely tracked headings are centered in the hero and selected section intros, while feature and letter content shifts to left-aligned columns. Small Fasthand labels provide a handwritten editorial cue above some headings. The layout alternates two-column story and feature areas with centered product, pricing, and signup moments, using generous vertical gaps. Interface screenshots and mockups demonstrate the widget and dashboard; colorful hand-drawn people are deliberately used as illustration, not as the brand palette. Rounded pills, soft card corners, and subtle shadows keep controls and product previews approachable.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#fafafa` | `--color-gallery-white` | neutral | Continuous page canvas behind the hero, story, features, pricing, and waitlist. |
| Soft Graphite | `#696969` | `--color-soft-graphite` | semantic | Muted body copy, card text, and supporting descriptions against light surfaces. |
| Qatch Charcoal | `#292929` | `--color-qatch-charcoal` | brand | Primary headings, dark CTA pills, navigation actions, and inverse section backgrounds. |
| Quiet Divider | `#e4e4e7` | `--color-quiet-divider` | semantic | Subtle hairlines and media outlines; keep borders low-contrast. |
| Silver Haze | `#b2b2b2` | `--color-silver-haze` | neutral | Secondary, low-emphasis text and supporting labels. |
| Slate Panel | `#3d3d3d` | `--color-slate-panel` | surface | Cards within the dark insights panel, separated softly from its charcoal backdrop. |
| Near Black | `#080808` | `--color-near-black` | neutral | Occasional very dark heading or text rendering; a minor measured variant, not a separate theme. |
| Ash Detail | `#8d8d8d` | `--color-ash-detail` | neutral | Rare subdued text detail; do not elevate it into a primary color. |
| Mockup Slate | `#2c2f32` | `--color-mockup-slate` | surface | Minor dark surface detected inside a card; treat as product-preview detail. |
| Signal Tangerine | `#ff7429` | `--color-signal-tangerine` | accent | Sparse warm text accent; colorful illustration accents are artwork, not an expanded UI palette. |

### Semantic aliases

`--color-canvas` → `#fafafa` (Gallery White) · `--color-surface` → `#292929` (Qatch Charcoal) · `--color-surface-2` → `#3d3d3d` (Slate Panel) · `--color-text` → `#292929` (Qatch Charcoal) · `--color-text-muted` → `#696969` (Soft Graphite) · `--color-text-subtle` → `#b2b2b2` (Silver Haze) · `--color-border` → `#e4e4e7` (Quiet Divider) · `--color-accent` → `#ff7429` (Signal Tangerine)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#292929` | `#fafafa` | 13.94:1 | AAA |
| `#292929` | `#3d3d3d` | 1.34:1 | fail |
| `#696969` | `#fafafa` | 5.26:1 | AA |
| `#696969` | `#292929` | 2.65:1 | fail |
| `#696969` | `#3d3d3d` | 1.98:1 | fail |
| `#b2b2b2` | `#fafafa` | 2.03:1 | fail |
| `#b2b2b2` | `#292929` | 6.86:1 | AA |
| `#b2b2b2` | `#3d3d3d` | 5.12:1 | AA |
| `#ff7429` | `#fafafa` | 2.59:1 | fail |
| `#ff7429` | `#292929` | 5.39:1 | AA |

### Gradients

- `linear-gradient(rgba(250, 250, 250, 0), rgb(250, 250, 250) 70%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Aspekta | `--font-body` | webfont | 400, 500 | Primary interface and marketing type, including headings, body copy, links, and buttons. | Inter |
| Fasthand | `--font-fasthand` | webfont | 400 | Small handwritten section labels such as “Listen!” and “Pricing.” | Caveat |

- **Aspekta:** Mostly regular and medium weights; large headings use tight negative tracking. Sentence case; avoid all-caps styling.
- **Fasthand:** Use sparingly as a short decorative eyebrow, not for body copy or controls.

### Type scale — Major Third (ratio ≈ 1.255, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 500 | 1.14 | -0.03em | — | Aspekta | Prominent hero and campaign display headlines. |
| h1 | 48px | 400 | 1.17 | -0.03em | — | Aspekta | Primary hero headline and key page-level titles. |
| h2 | 40px | 400 | 1.2 | -0.02em | — | Aspekta | Major section headings, including story and pricing introductions. |
| h3 | 32px | 400 | 1.38 | 0 | — | Aspekta | Feature and insight card headings. |
| h4 | 24px | 500 | 1.33 | -0.01em | — | Aspekta | Smaller subheads and product-preview titles. |
| body | 18px | 400 | 1.5 | 0 | — | Aspekta | Explanatory paragraphs, descriptions, and supporting copy. |
| caption | 16px | 500 | 1.5 | 0 | — | Aspekta | Compact labels and secondary interface text. |
| link | 16px | 500 | 1.5 | 0 | — | Aspekta | Navigation and footer links, plus inline actions. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 4, 8, 10, 12, 15, 16, 20, 24, 32, 34, 40, 48, 64, 100 px.
- Section rhythm 100px · element gap 10px · card padding 34px · max content width 1136px.

Use a centered content frame with a measured maximum width of 1136px and a spacious, low-density rhythm. The hero stacks a small handwritten cue, centered headline and supporting copy above a broad illustrated product scene. Below it, alternate left-aligned two-column narrative and feature content with centered product, pricing, and signup sections. The measured section gap is 100px; use it as the reference for generous separation. Keep content alignment purposeful and preserve broad margins rather than filling every section.

## Shape & elevation

- Radius: button `9999px` · card `32px` · media `16px` · link `9999px` · xs `16px` · sm `24px` · md `32px` · pill `9999px`
- Shadow `xl` (other): `rgba(19, 19, 22, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 3px 0px, rgba(47, 48, 55, 0.05) 0px 24px 68px 0px, rgba(34, 42, 53, 0.04) 0px 4px 6px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px`
- Shadow `md` (other): `rgba(19, 19, 22, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 3px 0px, rgba(34, 42, 53, 0.04) 0px 4px 6px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px`
- Shadow `lg` (media): `rgba(16, 24, 40, 0.08) 0px 17px 23px -6px, rgba(16, 24, 40, 0.03) 0px 6px 9px -3px`
- Shadow `sm` (card): `rgba(0, 0, 0, 0.2) 0px 0px 0.5px 0.5px, rgba(0, 0, 0, 0.08) 0px 1px 1px -0.5px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px`
- Shadow `hairline` (button): `rgba(0, 0, 0, 0.1) 0px 1px 2px 0px`
- Shadow `sm-2` (card): `rgba(0, 0, 0, 0.05) 0px 2px 4px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

Most page areas are flat on the continuous pale canvas, with subtle borders and minimal card separation. Reserve measured soft shadows for floating product previews and selected light cards. Dark insights cards rely primarily on tonal contrast between #292929 and #3d3d3d, not heavy outlines or dramatic elevation.

## Imagery

Use product UI screenshots and widget mockups as the main evidence of function, framed as clean, light interface previews with rounded corners and restrained shadow. The hero and waitlist use colorful, hand-drawn people and expressive marks; keep these illustrations lively but visually softened against the pale canvas. Avoid treating illustration colors as a systematic UI palette. No photographic or video-led direction is apparent.

## Components

### Pill CTA

Charcoal rounded pill with light text, using the measured 100px radius and compact horizontal padding; used for Login / Sign up and Get started.

### Handwritten eyebrow

Short Fasthand label above a section title, adding a small editorial accent without competing with the Aspekta heading.

### Insight card

Rounded card inside a charcoal section, using #3d3d3d against #292929, with concise title, muted copy, and a small colored icon.

### Product preview

Light interface mockup or screenshot with a 16px media radius and soft shadow, demonstrating feedback forms or dashboard workflows.

### Pricing card

Large rounded white plan card with muted details, clear price, a prominent dark pill action, and compact benefit rows.

### Two-column story

Left-aligned title block paired with readable explanatory copy; generous whitespace keeps the narrative from feeling dense.

### Measured component styles

- **Primary button** (“Login / Sign up”): background #292929 · text #fafafa · radius 100px · padding 10px 16px · 500 16px Aspekta
- **Secondary button** (“Feedback Hear their thoughts in real tim”): background #ffffff · text #222222 · radius 24px · padding 20px 48px 20px 20px · 400 16px Aspekta · shadow rgba(0, 0, 0, 0.1) 0px 1px 2px 0px
- **Link** (“Privacy Policy”): transparent background · text #ffffff · radius 0px · padding 0px · 500 16px Aspekta
- **Card** (“Your Users Are Your North Star They’ll t”): background #3d3d3d · text #696969 · radius 32px · padding 34px · 400 16px Aspekta

## Do

- Keep the main canvas near-white and continuous across sections.
- Use charcoal for primary text and high-priority actions.
- Set large headings in Aspekta or a close sans-serif substitute.
- Use handwritten labels sparingly above section titles.
- Let product previews show real interface structure.
- Keep colorful artwork confined to illustrative moments.
- Use generous spacing and soft, rounded components.

## Don't

- Do not introduce extra section background colors without a clear purpose.
- Do not turn illustration colors into a broad UI accent system.
- Do not use heavy borders or dramatic shadows on every card.
- Do not crowd the page with dense copy or tightly packed sections.
- Do not use handwritten type for paragraphs or controls.
- Do not replace the calm layout with a high-density dashboard grid.

## Agent prompt

Build a new Qatchup-style SaaS page with a continuous Gallery White (#fafafa) canvas, Qatch Charcoal (#292929) headings and pill CTAs, and Soft Graphite (#696969) supporting copy. Use Aspekta-like clean sans-serif typography, close tracking on large headlines, and a rare handwritten eyebrow for section cues. Favor a spacious centered content frame, alternating left-aligned two-column stories with centered product and conversion sections. Present product functionality through light interface mockups with rounded corners and restrained soft shadows. Use Slate Panel (#3d3d3d) only for cards inside a charcoal insight band. Keep Signal Tangerine (#ff7429) sparse; hand-drawn colorful artwork may add warmth but should remain illustration, not UI chrome. Maintain clear hierarchy, calm surfaces, and generous vertical breathing room.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and copy above a broad illustrated widget scene on a pale canvas. | prominent value proposition, product-in-context preview | handwritten eyebrow, large centered heading, faded illustration base |
| 2 | feature-split | Two-column, left-aligned story and supporting copy with illustration details. | founder-led narrative, problem framing | compact section label, paired text columns, small floating icons |
| 3 | gallery | Full-bleed horizontal artwork between text sections. | visual pause | edge-to-edge media, colorful hand-drawn figures |
| 4 | feature-grid | Dark rounded band with a centered intro and a two-by-two card grid. | benefit explanation, scannable feature cards | charcoal section surface, slate cards, small colored icon badges |
| 5 | feature-split | Centered heading above a two-column list and product-form mockup. | feature discovery, interface demonstration | icon-led feature list, light form preview, rounded media |
| 6 | product-showcase | Centered title and CTA above wide dashboard screenshots. | product proof, direct signup action | dashboard preview, compact dark pill CTA |
| 7 | pricing | Centered section intro above two side-by-side rounded plan cards. | plan comparison, clear conversion action | price emphasis, benefit checklist, dark primary button |
| 8 | cta | Centered signup message with supporting illustration and compact action. | waitlist signup, closing conversion prompt | centered copy, dark pill CTA, colorful illustration |
| 9 | footer | Full-width charcoal footer with centered brand content and a separated bottom link row. | contact links, legal navigation | inverse background, subtle divider, compact footer links |

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