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

# Passionfroot · Design System

> Warm editorial typography meets a cosmic AI product world.

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

Passionfroot pairs a warm, restrained SaaS interface with a cinematic night-sky hero and playful product imagery. Serif headlines and compact sans-serif controls give the page an editorial voice without obscuring the product story.

## North star

Keep product content calm and legible, then let a cinematic illustrated hero provide the page’s memorable contrast.

## Overview

The page contrasts a pale, warm canvas (#f8f7f2) with a full-bleed, deep night-sky hero. The dark hero is led by a centered, off-white serif headline, while a concise muted sans-serif paragraph and paired calls to action sit directly beneath it. Product UI cards float across the lower hero area, surrounded by atmospheric stars, clouds, and a character illustration; these vivid media colors belong to the artwork, not the core interface palette. Across the broader page, measured section backgrounds remain warm and light, with white cards, fine neutral borders, and near-black text. New Kansas supplies the expressive display voice; Nunito Sans handles navigation, body copy, and controls. Generous open space separates content blocks, while compact controls and softly rounded cards keep interactions approachable. Use pink, violet, and orange as selective brand accents rather than large interface fills.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Oat Canvas | `#f8f7f2` | `--color-oat-canvas` | brand | Warm page canvas and hero base; also appears in pale badge backgrounds. |
| Soft Ink | `#1d1d1c` | `--color-soft-ink` | neutral | Primary headings, body text, dark button text, and navigation labels. |
| Porcelain Surface | `#fdfdfa` | `--color-porcelain-surface` | surface | Light card and control surfaces against the warm canvas. |
| Warm Graphite | `#43423e` | `--color-warm-graphite` | neutral | Secondary copy and muted interface text; some measured gradient usage is not a defining page treatment. |
| Lilac Glint | `#dab2ff` | `--color-lilac-glint` | accent | Sparse button detail; treat as a restrained interface accent, not a dominant fill. |
| Linen Rule | `#edeae4` | `--color-linen-rule` | semantic | Default card borders and subtle separators. |
| Mist Border | `#f2f1ec` | `--color-mist-border` | semantic | Subtle control outlines and pale navigation or button details. |
| Stone Muted | `#99978f` | `--color-stone-muted` | neutral | Low-emphasis copy, footer text, and badge labels. |
| Deep Charcoal | `#2c2b29` | `--color-deep-charcoal` | semantic | Measured button gradient detail; secondary to the page’s mostly light UI. |
| Cosmic Plum | `#190922` | `--color-cosmic-plum` | surface | Dark inverse section surface and a close measured anchor for the night-sky hero. |
| Violet Thread | `#b775f5` | `--color-violet-thread` | accent | Isolated card-border accent; use sparingly rather than as a broad background. |
| Bloom Pink | `#f788d2` | `--color-bloom-pink` | accent | Brand accent in small visual details and artwork. |
| Orbit Violet | `#b26bf5` | `--color-orbit-violet` | accent | Brand accent in small visual details and decorative elements. |
| Quiet Pebble | `#d8d6ce` | `--color-quiet-pebble` | neutral | Low-contrast text and minor interface details. |
| Tangerine Spark | `#ff9147` | `--color-tangerine-spark` | accent | Selective brand accent; brighter appearances also occur in product chart artwork. |

### Semantic aliases

`--color-canvas` → `#f8f7f2` (Oat Canvas) · `--color-surface` → `#fdfdfa` (Porcelain Surface) · `--color-surface-2` → `#190922` (Cosmic Plum) · `--color-text` → `#1d1d1c` (Soft Ink) · `--color-text-muted` → `#43423e` (Warm Graphite) · `--color-text-subtle` → `#99978f` (Stone Muted) · `--color-border` → `#edeae4` (Linen Rule) · `--color-accent` → `#f788d2` (Bloom Pink) · `--color-accent-2` → `#b26bf5` (Orbit Violet) · `--color-accent-3` → `#ff9147` (Tangerine Spark)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1d1d1c` | `#f8f7f2` | 15.73:1 | AAA |
| `#1d1d1c` | `#fdfdfa` | 16.56:1 | AAA |
| `#1d1d1c` | `#190922` | 1.13:1 | fail |
| `#43423e` | `#f8f7f2` | 9.38:1 | AAA |
| `#43423e` | `#fdfdfa` | 9.87:1 | AAA |
| `#43423e` | `#190922` | 1.89:1 | fail |
| `#99978f` | `#f8f7f2` | 2.73:1 | fail |
| `#99978f` | `#fdfdfa` | 2.87:1 | fail |
| `#99978f` | `#190922` | 6.5:1 | AA |
| `#f788d2` | `#f8f7f2` | 2.08:1 | fail |

### Gradients

- `linear-gradient(oklab(0.999994 0.0000455678 0.0000200868 / 0.1) 0%, oklab(0.999994 0.0000455678 0.0000200868 / 0.05) 100%)`
- `linear-gradient(to top, oklch(0.29 0.005 98) 0%, oklch(0.38 0.008 98) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Nunito Sans | `--font-body` | webfont | 400, 700, 600, 500 | Body copy, navigation, buttons, captions, and product UI labels. | Nunito Sans |
| new-kansas | `--font-display` | webfont | 400, 500 | Display headlines and section headings. | Lora |

- **Nunito Sans:** Use clear, friendly sans-serif forms; measured weights range from regular to bold. Navigation and controls are compact and readable.
- **new-kansas:** Editorial serif with moderate weights and slightly tight headline tracking; preserve natural title case rather than all caps.

### Type scale — Perfect Fourth (ratio ≈ 1.355, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 500 | 1.2 | -0.01em | — | new-kansas | Oversized editorial hero headline. |
| h1 | 48px | 500 | 1.2 | -0.013em | — | new-kansas | Primary page or section headline. |
| h2 | 28px | 500 | 1.2 | -0.023em | — | new-kansas | Prominent section headings. |
| h3 | 20px | 400 | 1.45 | 0 | — | new-kansas | Supporting feature and content headings. |
| h4 | 18px | 400 | 1.56 | 0 | — | Nunito Sans | Smaller explanatory subheadings. |
| body | 14px | 400 | 1.43 | 0 | — | Nunito Sans | Main paragraphs and product interface copy. |
| caption | 12px | 400 | 1.33 | 0 | — | Nunito Sans | Badges, metadata, and fine print. |
| button | 16px | 700 | 1.5 | 0 | — | Nunito Sans | Primary and secondary action labels. |
| nav | 14px | 700 | 1.43 | 0 | — | Nunito Sans | Top navigation and menu labels. |

OpenType features in use: `"kern", "liga"`, `"calt", "kern", "liga"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 2, 3, 4, 6, 8, 10, 12, 16, 24, 48 px.
- Section rhythm 48px · element gap 8px · card padding 10px · max content width 1280px.

The hero uses full-bleed media behind a centered headline, description, and paired actions; floating product cards occupy the lower visual field. Navigation is arranged in two compact rounded groups near opposite sides of the top edge. Measured content width reaches 1280px, with a comfortable overall density and broad section gaps. Subsequent measured sections retain the warm canvas, leaving substantial negative space around content. Use centered alignment for the hero and logo strip, then allow later content to align to its own feature or footer composition.

## Shape & elevation

- Radius: button `8px` · card `10px` · media `12px` · badge `4px` · nav `12px` · xs `4px` · sm `6px` · md `8px` · lg `10px` · xl `12px` · 2xl `14px` · pill `9999px`
- Shadow `sm` (card, other, button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(237, 234, 228) 0px 0px 0px 1px, oklch(0.23 0.002 98 / 0.04) `
- Shadow `sm-2` (other, button, card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklch(0.876 0.011 98) 0px 0px 0px 1px, oklch(0.23 0.002 98 / 0.0`
- Shadow `sm-3` (other, card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklch(0.958 0.007 98) 0px 0px 0px 1px, oklch(0.23 0.002 98 / 0.0`
- Shadow `md` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklch(0.23 0.002 98 / 0.02) 0px 1px 1px -0.5px, oklch(0.23 0.002`
- Shadow `hairline` (card, other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.2) 0px 0px 0px 3px, rgba(255, 255, 255, 0.`
- Shadow `hairline-2` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.2) 0px 0px 0px 3px`
- Motion: standard transition `0.2s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Use mostly flat surfaces with thin warm-gray borders and very restrained soft shadows. Product cards float above the hero artwork through contrast and layering, not heavy interface elevation. Rounded card and button silhouettes soften the composition; reserve stronger glow effects for the hero artwork and its product mockups.

## Imagery

The first screen is defined by cinematic digital illustration rather than conventional photography: a star-speckled plum-to-blue sky, glowing cloudscape, and friendly character sit behind product UI mockups. Keep the hero media edge-to-edge and let the floating interface cards remain crisp, pale, and legible. The illustration’s vivid palette is artwork-specific; do not spread its colors across generic controls.

## Components

### Split navigation

Two compact translucent dark groups at the hero top: brand and audience links on one side, Careers, Login, and a highlighted access action on the other.

### Hero headline and actions

Centered New Kansas headline, short Nunito Sans supporting copy, a white primary action, and a subdued secondary trailer action.

### Floating product cards

Pale rounded analytics panels overlap the hero illustration, showing metrics and charts with dark labels and selective color.

### AI prompt panel

Large white rounded product input mockup with a campaign question, compact controls, and a dark circular submit affordance.

### Brand logo strip

A light horizontal trust band with a short centered label and a row of customer logos.

### Neutral content cards

Light card surfaces on the warm canvas, defined by subtle borders and restrained shadow rather than dramatic elevation.

### Measured component styles

- **Primary button** (“Plan strategy”): background #fefefd · text #7a7974 · border 1px solid #f2f1ec · radius 12px · padding 6px 12px · 600 14px Nunito Sans · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Secondary button** (“Start for free”): background #ffffff · text #1d1d1c · border 1px solid · radius 12px · padding 10px 16px · 700 16px Nunito Sans · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Card** (“Engagement per platform”): background #fefefe · text #1d1d1c · radius 12px · padding 10px · 400 14px Nunito Sans · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Badge**: background #f8f7f2 · text #99978f · radius 4px · padding 3px 4px · 600 12px Nunito Sans
- **Navigation item** (“For Brands For Creators Careers Login Ge”): transparent background · text #1d1d1c · radius 0px · padding 0px · 400 16px Nunito Sans

## Do

- Use the warm canvas as the default for non-hero sections.
- Set major headlines in an editorial serif.
- Keep body text and controls in a friendly sans-serif.
- Make the hero media full-bleed and cinematic.
- Keep product mockups bright and readable over dark artwork.
- Reserve pink, violet, and orange for selective accents.

## Don't

- Do not turn illustration colors into broad interface fills.
- Do not use heavy shadows on ordinary cards.
- Do not crowd the hero with extra copy or controls.
- Do not replace the serif display voice with generic geometric type.
- Do not make navigation or body copy compete with the headline.
- Do not invent palette values or spacing measurements.

## Agent prompt

Build a new Passionfroot page with a calm, warm SaaS foundation and one distinctive cinematic moment. Use Oat Canvas (#f8f7f2) for light sections, Porcelain Surface (#fdfdfa) for cards, Soft Ink (#1d1d1c) for primary text, and Linen Rule (#edeae4) for subtle borders. Set editorial headlines in New Kansas or a close serif alternative, pairing them with Nunito Sans for body copy, navigation, and actions. If the page has a hero, use a deep Cosmic Plum (#190922) night-sky treatment with full-bleed artwork and legible floating product panels. Keep the layout spacious, hero content centered, and controls compact and rounded. Apply Bloom Pink (#f788d2), Orbit Violet (#b26bf5), and Tangerine Spark (#ff9147) sparingly. Favor flat surfaces and restrained shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed cinematic backdrop; top split navigation; centered headline and actions; floating product UI below. | audience navigation, primary and secondary CTA, product prompt mockup | dark illustrated sky, serif headline, floating analytics cards, glow accents |
| 2 | logo-cloud | A light horizontal trust strip with a brief centered introduction and customer logos. | social proof | warm light surface, compact logo row |
| 3 | feature-grid | Measured section retains the warm canvas; detailed layout is not visible in the supplied page captures. | feature discovery | light canvas |
| 4 | feature-split | Measured section retains the warm canvas; specific text and media alignment are not evidenced. | product explanation | light canvas |
| 5 | cta | Shorter measured block with six-column structure, media, and two actions. | conversion CTA | light canvas, paired buttons, supporting imagery |
| 6 | footer | Single broad footer section on the warm canvas; detailed internal arrangement is not visible. | site navigation | light canvas |

## Source CSS custom properties (selected)

```css
--font-heading: "new-kansas",system-ui,sans-serif;
--font-body: "Nunito Sans",system-ui,sans-serif;
--surface-50: oklch(99.3% .004 96);
--surface-300: oklch(97.5% .007 96);
--surface-500: oklch(96.3% .012 96);
--bg-page: oklch(99.3% .004 96);
--bg-foundation: oklch(97.5% .007 96);
--bg-brand-surface: oklch(96.3% .012 96);
--bg-clickable: oklch(100% 0 0);
--bg-hovered: oklch(97.9% .004 91);
--bg-hovered-strong: oklch(96.1% .01 87);
--bg-activated: oklch(96.1% .01 87);
--bg-activated-strong: oklch(95% .013 97);
--border-subtle: oklch(95.8% .007 98);
--border-default: #edeae4;
--border-strong: oklch(87.6% .011 98);
--border-strong-destructive: oklch(65% .18 25);
--border-vstrong: oklch(71.4% .009 98);
--border-vstrong-destructive: oklch(60% .19 25);
--border-xstrong: oklch(67.6% .012 98);
--text-primary: oklch(23% .002 98);
--text-secondary: oklch(38% .008 98);
--text-muted: oklch(67.6% .012 98);
--text-inverse: oklch(95.8% .007 98);
--text-inverse-muted: oklch(87.6% .011 98);
--text-accent: oklch(65% .18 25);
--shadow-input-hover: 0 0 0 3px color-mix(in oklch,oklch(57.6% .008 98)12%,transparent);
--radius-xs: .125rem;
--radius-sm: .25rem;
--radius-base: .375rem;
--radius-md: .5rem;
--radius-lg: .625rem;
--radius-xl: .75rem;
--radius-2xl: 1rem;
--radius-3xl: 1.5rem;
--radius-full: 9999px;
--text-xxs: .688rem;
--text-xs: .75rem;
--text-sm: .875rem;
--text-base: .875rem;
```

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