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

# Partiful · Design System

> Party energy, polished with playful gradients and bold type

**Theme:** light · **Industry:** entertainment · **Source:** https://partiful.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._

Partiful pairs an energetic, photo-led party hero with a mostly white, spacious page showcasing invitations, templates, and event features. Bold rounded display typography and soft pastel gradients bring warmth to an otherwise restrained black-and-white interface.

## North star

Let vivid, candid party imagery carry the excitement while keeping the interface itself white, black, and easy to scan.

## Overview

The visual strategy contrasts a high-energy opening with a light, open page below. The hero uses a full-bleed photograph with blue-violet and pink light, white headline text, and a compact announcement strip; these vivid hues are image-led rather than the core interface palette. Subsequent sections return to white, with very pale blue and lavender washes around invitation previews and feature areas. Black anchors headings and primary actions, while gray provides supporting copy; the measured blue gradient tones are section atmospherics, not strong UI accents. Typography combines expressive Partiful display faces and TWK Lausanne sans with tight tracking and compact line-height in large headlines. Layout alternates broad visual showcases, template imagery, feature cards, and editorial content, leaving generous whitespace between them. Cards use restrained shadows and rounded corners rather than prominent borders. Overall, the page feels social and celebratory without sacrificing clarity or scanability.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas and section background; also appears as white text over the photographic hero. |
| Party Ink | `#000000` | `--color-party-ink` | neutral | Primary text and dark filled actions, including the Create event call to action. |
| Soft Graphite | `#666666` | `--color-soft-graphite` | neutral | Muted supporting copy and secondary descriptions. |
| Deep Slate | `#333333` | `--color-deep-slate` | neutral | Secondary link and text color for subdued interface details. |
| Quiet Gray | `#999999` | `--color-quiet-gray` | neutral | Occasional low-emphasis text; not a defining brand color. |
| Cloud Blue | `#eaf3ff` | `--color-cloud-blue` | accent | Pale blue gradient tint in soft section backgrounds, not a primary control color. |
| Mist Blue | `#f4f9ff` | `--color-mist-blue` | accent | Very light blue atmospheric section wash behind showcase content. |
| Button Mist | `#f2f2f2` | `--color-button-mist` | surface | Light background for secondary links such as the Try it action. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Party Ink) · `--color-text-muted` → `#666666` (Soft Graphite) · `--color-text-subtle` → `#333333` (Deep Slate)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#666666` | `#ffffff` | 5.74:1 | AA |
| `#333333` | `#ffffff` | 12.63:1 | AAA |

### Gradients

- `linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%)`
- `linear-gradient(rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%)`
- `linear-gradient(rgba(255, 255, 255, 0.2) 0%, rgba(150, 196, 255, 0.2) 100%)`
- `linear-gradient(rgba(150, 196, 255, 0.1) 0%, rgb(255, 255, 255) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| TWK Lausanne Pan 550 | `--font-twk-lausanne-pan-550` | webfont | 550, 400 | Prominent interface and body text | Inter |
| .SFNSText | `--font-sfnstext` | system | 400 | Small captions and incidental interface text | Inter |
| TWK Lausanne Pan 400 | `--font-body` | webfont | 400 | Body copy and links | Inter |
| TWK Lausanne Pan 700 | `--font-twk-lausanne-pan-700` | webfont | 400, 700 | Strong headings and navigation | Inter |
| Partiful Display Medium | `--font-display` | webfont | 400, 500 | Page and section display headings | DM Sans |
| .SFNSDisplay-Semibold | `--font-sfnsdisplay-semibold` | system | 600 | System display fallback | Inter |

- **TWK Lausanne Pan 550:** Medium sans weight; clean, compact forms with subtly tight tracking.
- **.SFNSText:** System sans fallback used at small sizes; keep captions understated.
- **TWK Lausanne Pan 400:** Regular sans with slightly tight tracking and readable, compact line spacing.
- **TWK Lausanne Pan 700:** Bold sans; headings retain natural case rather than all caps.
- **Partiful Display Medium:** Rounded, distinctive display forms; medium weight with close, polished spacing.
- **.SFNSDisplay-Semibold:** Semibold system sans fallback for display text.

### Type scale — Augmented Fourth (ratio ≈ 1.441, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 112px | 825 | 0.8 | -0.03em | — | TWK Lausanne Pan 850 | Oversized hero headline, set prominently over the opening photograph. |
| h1 | 48px | 500 | 1 | -0.02em | — | Partiful Display Medium | Primary page or major section heading. |
| h2 | 42px | 400 | 1.2 | 0 | — | Partiful Display Medium | Section titles such as feature and template introductions. |
| h3 | 40px | 500 | 1.2 | -0.02em | — | Partiful Display Medium | Feature card and subsection headings. |
| h4 | 36px | 400 | 1.2 | -0.04em | — | TWK Lausanne Pan 700 | Smaller strong headings in content areas. |
| body | 18px | 400 | 1.4 | -0.02em | — | TWK Lausanne Pan 400 | Supporting descriptions and explanatory section copy. |
| caption | 11px | 400 | 1.4 | -0.02em | — | .SFNSText | Fine print, small labels, or image-related metadata. |
| nav | 18px | 400 | 1.2 | -0.04em | — | TWK Lausanne Pan 700 | Top navigation links and menu labels. |
| link | 14px | 400 | 1.4 | -0.02em | — | TWK Lausanne Pan 400 | Compact inline links and secondary actions. |

OpenType features in use: `"blwf", "cv03", "cv04", "cv09", "cv11"`.

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 4, 6, 8, 10, 12, 16, 20, 24, 30, 40, 60, 80 px.
- Section rhythm 40px · element gap 12px · card padding 15px · max content width 1360px.

The page moves through wide, mostly full-width sections on a white canvas, with showcase content centered within a broad measured max width. The measured layout uses a 12-column grid in the template area and three columns for feature cards, while major image sections can break into a single full-bleed composition. Headings are predominantly left-aligned, with centered treatments for selected campaign blocks. Spacing is compact inside cards but generous between large showcases, leaving conspicuous blank intervals that give colorful imagery room to breathe.

## Shape & elevation

- Radius: button `4px` · card `8px` · media `12px` · nav `4px` · link `4px` · xs `4px` · sm `6px` · md `8px` · lg `12px` · xl `16px` · pill `9999px`
- Shadow `sm` (card): `rgba(0, 0, 0, 0.1) 0px 0px 6px 0px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0.05) 0px 0.796192px 2.38858px -0.625px, rgba(0, 0, 0, 0.05) 0px 2.41451px 7.24352px -1.25px, rgba(0, 0, 0, 0.05) 0px 6.38265px 19.148px -1.875px, rgba(0, 0, 0, 0.05) 0px 20px 60px -2.5p`
- Shadow `md` (link): `rgba(0, 0, 0, 0.1) 0px 0px 20px 0px`

The page is largely flat: white space and image placement establish hierarchy instead of borders. Feature cards use subtle soft shadows and rounded corners, while larger preview media has more generous rounding. Avoid heavy outlines or dramatic drop shadows; layering is reserved for overlapping invitation previews, collage imagery, and the hero composition.

## Imagery

Candid party photography dominates the hero, with smiling people framed edge to edge against saturated blue-violet and pink light. Product previews show invitation designs and RSVP screens, while feature illustrations and party-photo collages provide visual variety further down. Images are colorful and energetic; pale atmospheric washes soften showcase sections. Keep interface mockups legible and treat their embedded colors as content rather than brand tokens.

## Components

### Hero and navigation

Full-bleed party photo with white brand/navigation text, a narrow announcement strip, oversized headline, supporting copy, and a white primary action.

### Invitation showcase

Pale blue-tinted presentation area with a large invitation and RSVP preview, paired with a short heading and compact customization controls.

### Template gallery

A spacious white section introducing templates, followed by a visually rich invitation collection.

### Occasion feature banner

Split composition pairing a short left-aligned message and dark action with a broad, overlapping spread of invitation artwork.

### Feature cards

Three-column set of rounded cards with image-led tops, concise titles, supporting copy, and light secondary Try it links.

### Editorial feed

Three-column story cards with vivid thumbnail images, compact headlines, brief descriptions, and publication or author details.

### Footer

Quiet white closing area with brand mark, grouped navigation links, and low-emphasis policy and social details.

### Measured component styles

- **Primary button** (“Create event”): background #000000 · text #0000ee · radius 4px · padding 0px 24px · 400 12px sans-serif
- **Secondary button**: background #cccccc · text #000000 · radius 40px · padding 0px · 400 12px sans-serif
- **Link** (““I’d Rather Send a Partiful Invite””): transparent background · text #0000ee · radius 0px · padding 0px · 400 12px sans-serif
- **Card** (“A must May 29 r3boi I don't even hang ou”): transparent background · text #000000 · radius 8px · padding 12px 16px 16px 16px · 400 12px sans-serif · shadow rgba(0, 0, 0, 0.1) 0px 0px 6px 0px
- **Navigation item** (“Halloween Birthdays Dinners Explore Hous”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px sans-serif

## Do

- Use white as the default canvas and let imagery introduce most vivid color.
- Set primary headlines in expressive rounded display typography.
- Use black for primary text and strong filled actions.
- Keep supporting copy gray, compact, and clearly subordinate.
- Give major showcases generous surrounding whitespace.
- Use soft shadows and rounded corners for feature cards.
- Make party photography feel candid, joyful, and full-bleed where appropriate.

## Don't

- Do not turn the pale blue tints into saturated interface accents.
- Do not use heavy borders to divide every section or card.
- Do not crowd the page with dense grids or continuous text.
- Do not let decorative gradients compete with the headline or imagery.
- Do not mistake colors inside invitation mockups for global brand colors.
- Do not use all-caps styling as the default for headings.

## Agent prompt

Build a new Partiful-style page with a clean #ffffff Gallery White canvas and #000000 Party Ink typography and primary actions. Use vivid party photography as the emotional focal point; reserve soft #eaf3ff Cloud Blue and #f4f9ff Mist Blue for subtle atmospheric section washes, not buttons. Pair rounded, expressive display headings with a clean sans-serif such as DM Sans for display and Inter for interface text. Keep sections broad and airy, with a strong full-bleed hero, carefully spaced showcases, and compact three-column feature cards. Use subdued gray supporting copy, restrained rounded card corners, and soft shadows rather than borders. Let invitation mockups and photo collages provide varied color and texture, while keeping navigation, calls to action, and editorial content easy to scan.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed photographic hero with top announcement and navigation overlays. | Primary create-invite action, Ratings reassurance | Full-bleed photo, White headline, Top navigation, Compact announcement strip |
| 2 | product-showcase | Showcase heading and controls above a wide invitation preview. | Invitation customization, RSVP preview | Pale gradient wash, Preview mockup, Compact option controls |
| 3 | product-grid | Template introduction and broad gallery, preceded by short press quotes. | Browse templates, Social proof | White canvas, Editorial quotes, Invitation thumbnails |
| 4 | category-nav | Wide occasion banner with copy on one side and overlapping invite artwork. | Explore by occasion, Create event | Split composition, Image collage, Dark CTA |
| 5 | comparison | Large, open comparison section with a centered heading and soft color washes. | Contrast alternatives, Build product understanding | Centered heading, Pale atmospheric gradients, Generous blank space |
| 6 | feature-grid | Three-column feature cards centered below a section heading. | Explore features, Try a feature | Rounded image cards, Soft shadows, Secondary links |
| 7 | cta | Large branded close with party-photo collage, centered app message, and store links. | Start planning, Download app | Photo collage, Centered CTA, Soft gradient background |
| 8 | content-feed | Three-column editorial cards followed by a blog link and grouped footer. | Read featured stories, Explore more articles | Image thumbnails, Compact headlines, Multi-column footer links |

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