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

# Pally · Design System

> A warm, spacious canvas for a personal AI assistant.

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

Pally pairs a warm off-white canvas and deep plum typography with generous whitespace and vivid blue message accents. A long, editorial landing page uses phone demonstrations and softly elevated interface cards to make the assistant feel personal and approachable.

## North star

Keep the page calm and spacious, using deep plum for hierarchy and blue only to spotlight real product interactions.

## Overview

The page is built on a warm, nearly continuous canvas of #fcf8f6, with the pale #f8f0ec gradient appearing as a gentle backdrop rather than a strong section change. Deep plum #2a0a1e anchors the logo, large headlines, and main pill CTA; muted plum tones keep body copy and navigation quieter. Bright blue is reserved for message bubbles and occasional emphasis, making product interactions pop without turning the whole page into a bright interface. System sans-serif typography combines a very large, tightly tracked hero with compact, readable supporting copy. Sections unfold in a long, spacious editorial rhythm: left-aligned headlines, centered feature moments, split layouts, and modular rounded cards. Product imagery is mostly interface-focused, with phone mockups, message conversations, and small illustrative objects. Fine borders and restrained shadows define cards and controls while preserving the airy, soft-edged feel.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Canvas | `#fcf8f6` | `--color-warm-canvas` | brand | Dominant page canvas across the hero, content sections, and footer. |
| Message Blue | `#3e9bfe` | `--color-message-blue` | accent | Bright blue for selected message bubbles and secondary emphasis. |
| Deep Plum | `#2a0a1e` | `--color-deep-plum` | brand | Primary headline, navigation, links, and dark primary CTA text or fills. |
| Card White | `#ffffff` | `--color-card-white` | surface | Clean card interiors, message surfaces, and white text on dark or blue buttons. |
| Muted Plum | `#68515e` | `--color-muted-plum` | neutral | Supporting paragraph, navigation, and footer copy. |
| Soft Divider | `#e2dbdc` | `--color-soft-divider` | semantic | Fine card, section, and footer borders that separate content without heavy contrast. |
| Blush Wash | `#f8f0ec` | `--color-blush-wash` | surface | Lower tone in the subtle warm canvas gradient and gentle backdrop transitions. |
| True Black | `#000000` | `--color-true-black` | neutral | Limited dark text in measured interface content and product mockups. |
| Dusty Plum | `#7a6471` | `--color-dusty-plum` | neutral | Secondary heading and supporting text accents. |
| Warm Gray | `#b7b2b1` | `--color-warm-gray` | semantic | Subtle outlines and incidental low-contrast details. |
| Signal Blue | `#0b84fe` | `--color-signal-blue` | accent | Additional blue CTA and interface accent; use sparingly. |
| Mist Surface | `#e9e6e8` | `--color-mist-surface` | surface | Pale card, control, or message surfaces within interface examples. |
| Soft Ink | `#2b2127` | `--color-soft-ink` | neutral | Occasional dark text detail, including product-interface content. |
| Rose Taupe | `#98868e` | `--color-rose-taupe` | neutral | Low-emphasis link, heading, and footer text details. |
| Stone Gray | `#80797a` | `--color-stone-gray` | neutral | Minor subdued text details; not a defining brand color. |

### Semantic aliases

`--color-canvas` → `#fcf8f6` (Warm Canvas) · `--color-surface` → `#ffffff` (Card White) · `--color-surface-2` → `#e9e6e8` (Mist Surface) · `--color-text` → `#000000` (True Black) · `--color-text-muted` → `#68515e` (Muted Plum) · `--color-text-subtle` → `#2a0a1e` (Deep Plum) · `--color-border` → `#e2dbdc` (Soft Divider) · `--color-accent` → `#3e9bfe` (Message Blue) · `--color-accent-2` → `#0b84fe` (Signal Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#fcf8f6` | 19.9:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#e9e6e8` | 16.95:1 | AAA |
| `#68515e` | `#fcf8f6` | 6.8:1 | AA |
| `#68515e` | `#ffffff` | 7.17:1 | AAA |
| `#68515e` | `#e9e6e8` | 5.79:1 | AA |
| `#2a0a1e` | `#fcf8f6` | 17.14:1 | AAA |
| `#2a0a1e` | `#ffffff` | 18.09:1 | AAA |
| `#2a0a1e` | `#e9e6e8` | 14.6:1 | AAA |
| `#3e9bfe` | `#fcf8f6` | 2.72:1 | fail |

### Gradients

- `linear-gradient(rgb(252, 248, 246), rgb(248, 240, 236))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| -apple-system | `--font-body` | system | 400, 600, 500, 700 | Primary site type for headings, navigation, body copy, links, and buttons. | Inter |
| ui-monospace | `--font-mono` | system | 400, 700 | Code-like and receipt-style text inside product demonstrations. | Roboto Mono |

- **-apple-system:** System sans-serif; headlines are bold, compact, and tightly tracked, while body copy stays restrained and readable. No all-caps styling.
- **ui-monospace:** Use sparingly for mock interface details; preserve a technical, monospaced texture rather than applying it to site-wide copy.

### Type scale — Custom (ratio ≈ 1.897, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 54px | 600 | 1.02 | -0.04em | — | -apple-system | Oversized hero and major section headlines, including pricing and closing CTA. |
| h2 | 21px | 600 | 1.12 | -0.028em | — | -apple-system | Compact feature, card, and FAQ question headings. |
| body | 15px | 400 | 1.4 | -0.01em | — | -apple-system | Supporting descriptions, feature explanations, and longer copy. |
| caption | 14.5px | 400 | 1.3 | -0.018em | — | -apple-system | Small labels, annotations, and supporting interface details. |
| button | 13.5px | 500 | normal | -0.01em | — | -apple-system | CTA and interface-control labels. |
| nav | 15px | 400 | 1.3 | -0.008em | — | -apple-system | Header and footer navigation links. |
| link | 15px | 400 | normal | 0 | — | -apple-system | Inline actions such as Telegram and recipe links. |
| code | 13px | 400 | 1.56 | 0 | — | ui-monospace | Monospaced receipt and product-demo text. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24 px.
- Section rhythm 117px · element gap 8px · card padding 26px · max content width 1200px.

A spacious, long-form page sits within a measured maximum content width of 1200px. The hero uses a wide two-part composition, with left-aligned copy and a phone demonstration on the right. Later sections alternate between centered statements, split content, and modular feature cards; several use a multi-column layout. Section gaps are generous, and the measured element gap is 8px, giving small groups structure without crowding. Most sections keep the same canvas, so alignment, content grouping, and subtle rules create progression instead of strong color bands.

## Shape & elevation

- Radius: button `9999px` · card `28px` · media `14px` · nav `50%` · xs `15px` · sm `17px` · md `28px` · pill `9999px`
- Shadow `md` (button): `rgba(42, 10, 30, 0.06) 0px 0px 0px 1px, rgba(70, 22, 40, 0.05) 0px 1px 2px 0px, rgba(70, 22, 40, 0.32) 0px 10px 22px -16px`
- Shadow `hairline` (other): `rgb(255, 255, 255) 0px 0px 0px 1.5px`
- Shadow `hairline-2` (other): `rgb(255, 255, 255) 0px 0px 0px 2px`
- Shadow `hairline-3` (other): `rgb(255, 255, 255) 0px 0px 0px 2.5px`
- Shadow `lg` (card): `rgba(70, 22, 40, 0.05) 0px 0px 0px 1px, rgba(70, 22, 40, 0.04) 0px 1px 2px 0px, rgba(70, 22, 40, 0.3) 0px 18px 36px -28px`
- Shadow `lg-2` (button): `rgba(70, 22, 40, 0.55) 0px 10px 26px -10px`
- Motion: standard transition `0.25s ease` on interactive elements.

The page stays mostly flat, with fine pale borders marking card edges and section boundaries. White interface cards lift gently from the canvas using soft plum-tinted shadows; the main dark CTA has a stronger but still diffuse shadow. Rounded cards and message surfaces add depth through layering rather than heavy outlines or hard drop shadows.

## Imagery

The hero centers a realistic phone mockup showing a text conversation, while later sections use product-interface cards, message bubbles, relationship maps, app integrations, and a receipt-style pricing demo. Small decorative illustrations appear near the closing CTA and in feature cards. Imagery sits within the page's warm neutral palette, with blue reserved for message interactions; avoid introducing unrelated photography or strong visual filters.

## Components

### Announcement strip

A narrow deep-plum notice band above the navigation, with small light text and a close control.

### Pill navigation CTA

An outlined, rounded Text Pally control sits alongside understated navigation links.

### Primary CTA

A deep-plum pill with white label, generous horizontal padding, and a soft plum-tinted shadow.

### Message bubble

Rounded conversation bubbles use vivid blue for Pally or user messages and pale gray for replies.

### Feature card

White, softly elevated card with a generous rounded shape, restrained copy, and an embedded product example.

### Integration orbit

A central product conversation is surrounded by small app labels, keeping integrations legible without a heavy logo wall.

### FAQ conversation demo

A large white messaging panel stacks compact questions and answers, with blue question bubbles providing clear interaction cues.

### Measured component styles

- **Primary button** (“Text Pally”): background #2a0a1e · text #ffffff · radius 999px · padding 0px 28px · 600 17px -apple-system · shadow rgba(70, 22, 40, 0.55) 0px 10px 26px -10px
- **Secondary button** (“is it really free?”): background #3e9bfe · text #ffffff · radius 17px · padding 6.3px 10.7px 7.2px 10.7px · 400 17px -apple-system
- **Link** (“See recipes →”): transparent background · text #2a0a1d · radius 0px · padding 0px · 500 14px -apple-system
- **Card** (“Keeping track of things Investor outreac”): background #ffffff · text #2a0a1e · radius 28px · padding 24px 26px 26px 26px · 400 16px -apple-system · shadow rgba(70, 22, 40, 0.05) 0px 0px 0px 1px, rgba(70, 22, 40, 0.04) 0px 1px 2px 0px, 
- **Navigation item** (“Product”): transparent background · text #290a1e · radius 0px · padding 0px · 400 15px -apple-system

## Do

- Use #fcf8f6 as the dominant page canvas.
- Set key headlines and primary actions in deep plum.
- Reserve vivid blue for message interactions and selective emphasis.
- Use generous whitespace to separate the long-form sections.
- Build feature content from rounded, softly elevated interface cards.
- Use realistic product conversations as the main visual proof.

## Don't

- Do not replace the warm canvas with stark white or dark full-page bands.
- Do not use blue as a broad background or dominant brand field.
- Do not crowd sections or force every block into a dense grid.
- Do not add harsh, high-contrast shadows or heavy borders.
- Do not use decorative imagery that competes with product demonstrations.
- Do not apply monospaced typography to general headings or body copy.

## Agent prompt

Build a new AI-assistant landing page in Pally’s warm, spacious visual language. Use Warm Canvas (#fcf8f6) as the main background, Deep Plum (#2a0a1e) for headlines and primary CTAs, and Card White (#ffffff) for elevated product panels. Keep Message Blue (#3e9bfe) focused on conversation bubbles and small interface accents; use Muted Plum (#68515e) for supporting copy and Soft Divider (#e2dbdc) for fine rules. Use a system sans-serif close to Inter, with a large tightly tracked headline and quiet readable body text. Structure the page as an editorial sequence of broad, well-separated sections, alternating split layouts, centered statements, and rounded feature cards. Show the product through phone and messaging-interface demonstrations, with restrained shadows and no visual clutter.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Wide hero with left-aligned headline and copy beside a phone conversation demo. | Primary text CTA, Telegram alternative | Deep-plum headline, Pill CTA, Phone mockup |
| 2 | stats | Left-aligned statement paired with a small message-count proof point and CTA. | Social proof, Repeat CTA | Large two-tone heading, Compact usage stat, Pill CTA |
| 3 | product-showcase | Centered headline above a relationship map and elevated profile-detail panel. | Interactive profile cue, Context demonstration | Centered heading, Relationship nodes, White information card |
| 4 | how-it-works | Two-column section with headline and explanatory copy above paired message lists. | Explains handoff, Contrasting message directions | Split text block, Paired activity lists, Layered assistant card |
| 5 | feature-grid | Left-aligned introduction followed by an asymmetric multi-column feature-card grid. | Browse capabilities, Recipe links | Rounded white cards, Illustrated task demos, Blue message bubbles |
| 6 | integrations | Heading and supporting copy above a centered conversation surrounded by app labels. | Integration discovery, Monitoring explanation | Central message panel, Distributed app names, Small icon labels |
| 7 | feature-grid | Centered title and description framed by two concise feature columns around a central illustration. | Privacy reassurance, Link to policy | Six short assurances, Central sealed-envelope illustration, Subtle separators |
| 8 | pricing | Split pricing section with large copy and CTA on the left and receipt-style demo on the right. | Free-plan reassurance, Explains future monetization | Oversized headline, Dark pill CTA, Receipt mockup |
| 9 | faq | Two-column block with questions and reassurance on the left, conversation panel on the right. | Tap a question, Ask Pally directly | Compact FAQ copy, Stacked blue bubbles, Large white chat surface |
| 10 | cta | Centered closing headline and message-entry motif with supporting details and decorative illustrations. | Start a text conversation, QR scan option | Large centered heading, Message input bar, QR code |
| 11 | footer | Multi-column footer with brand summary, grouped links, and legal information. | Grouped navigation, Legal links | Brand lockup, Column link lists, Fine divider |
| 12 | other | A final single-column decorative brand panel below the footer links. | Brand recognition | Oversized low-contrast wordmark |

## Source CSS custom properties (selected)

```css
--v2-bg: #fcf8f6;
--v2-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Inter Fallback", system-ui, sans-serif;
--v2-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
--v2-font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
--v2-ease: cubic-bezier(.22, .7, .12, 1);
--v2-radius-pill: 999px;
--v2-radius-card: 36px;
--v2-radius-tile: 28px;
--v2-radius-box: 22px;
--v2-radius-focus: 8px;
```

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