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

# SavvyCal · Design System

> Warm editorial type meets vivid, product-led color.

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

SavvyCal pairs oversized editorial headlines with warm neutral content areas and vivid green and coral accents. Product videos and customer quotes give the spacious, color-blocked page a clear focus on the scheduling experience.

## North star

Use spacious cream editorial sections as a calm frame for bold color bands and crisp, product-focused demonstrations.

## Overview

The page balances a warm cream canvas with saturated, full-width green, blush, and near-black bands. The opening hero reverses that balance: layered green imagery fills the viewport, while a bright lime serif headline and compact navigation sit above a centered CTA. GT-Alpina-Condensed gives display headings an expressive editorial character; GT-America-Standard handles readable body copy, with condensed and extended cuts reserved for headings, navigation, and actions. Content sections are centered and spacious, with product demos framed by thin coral outlines and feature summaries arranged in three columns. Testimonial rows pair portraits with restrained quote typography. Rather than relying on gradients or heavy shadows, the page uses clear color changes, generous breathing room, and crisp borders to establish hierarchy. The footer returns to the cream canvas, separates its link columns with a coral hairline, and finishes with playful red line art.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Parchment | `#fcf7ed` | `--color-warm-parchment` | brand | Main canvas for the content sections, CTA area, and footer. |
| Soft Graphite | `#3f3f47` | `--color-soft-graphite` | neutral | Muted body copy and supporting footer text. |
| Night Ink | `#18181b` | `--color-night-ink` | neutral | Dark section background, primary heading text, and button text. |
| Blush Wash | `#ffe3e3` | `--color-blush-wash` | surface | Full-width background for the availability feature and its testimonial. |
| Signal Coral | `#f54320` | `--color-signal-coral` | accent | Fine outlines around product demos, decorative hairlines, and pricing CTA. |
| Cloud Gray | `#d4d4d8` | `--color-cloud-gray` | neutral | Muted text on dark or inverse surfaces. |
| Slate Charcoal | `#27272a` | `--color-slate-charcoal` | neutral | Supporting dark text; secondary rather than dominant page color. |
| Electric Lime | `#b9ff78` | `--color-electric-lime` | accent | Hero headline and primary CTA on the green opening section. |
| Forest Green | `#0d542b` | `--color-forest-green` | brand | Opening hero background and key inverse green surface. |
| Pure White | `#ffffff` | `--color-pure-white` | surface | Small borders and light details, including framing around product imagery. |
| Mint Tint | `#dbfce7` | `--color-mint-tint` | semantic | Pale green supporting text; appears as a minor supporting color. |

### Semantic aliases

`--color-canvas` → `#fcf7ed` (Warm Parchment) · `--color-surface` → `#ffe3e3` (Blush Wash) · `--color-surface-2` → `#18181b` (Night Ink) · `--color-surface-3` → `#0d542b` (Forest Green) · `--color-text` → `#18181b` (Night Ink) · `--color-text-muted` → `#3f3f47` (Soft Graphite) · `--color-text-subtle` → `#d4d4d8` (Cloud Gray) · `--color-border` → `#f54320` (Signal Coral) · `--color-accent` → `#b9ff78` (Electric Lime) · `--color-accent-2` → `#0d542b` (Forest Green) · `--color-accent-3` → `#f54320` (Signal Coral) · `--color-on-accent` → `#18181b` (Night Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#18181b` | `#fcf7ed` | 16.59:1 | AAA |
| `#18181b` | `#ffe3e3` | 14.64:1 | AAA |
| `#18181b` | `#0d542b` | 1.96:1 | fail |
| `#3f3f47` | `#fcf7ed` | 9.77:1 | AAA |
| `#3f3f47` | `#ffe3e3` | 8.62:1 | AAA |
| `#3f3f47` | `#18181b` | 1.7:1 | fail |
| `#3f3f47` | `#0d542b` | 1.15:1 | fail |
| `#d4d4d8` | `#fcf7ed` | 1.38:1 | fail |
| `#d4d4d8` | `#ffe3e3` | 1.22:1 | fail |
| `#d4d4d8` | `#18181b` | 11.99:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| GT-America-Standard | `--font-body` | webfont | 400, 700 | Body copy, feature descriptions, testimonials, and supporting headings. | Inter |
| GT-America-Condensed | `--font-display` | webfont | 400 | Section headings and uppercase eyebrow labels. | Roboto Condensed |
| GT-Alpina-Condensed | `--font-gt-alpina-condensed` | webfont | 700 | Large hero and editorial display headings. | Lora |
| GT-America-Extended | `--font-gt-america-extended` | webfont | 400 | Navigation links, buttons, and action links. | Space Grotesk |

- **GT-America-Standard:** Use regular weight for readable copy and bold for compact feature titles.
- **GT-America-Condensed:** Use a compact silhouette for headings; eyebrow labels are uppercase with increased tracking.
- **GT-Alpina-Condensed:** Bold, expressive serif display with tight leading; preserve the contrast against sans-serif copy.
- **GT-America-Extended:** Use regular weight and a wide, clean appearance for concise interface labels.

### Type scale — Golden Ratio (ratio ≈ 1.658, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 136px | 700 | 1 | 0 | — | GT-Alpina-Condensed | Oversized hero-style display headline treatment. |
| h1 | 96px | 700 | 1.08 | 0 | — | GT-Alpina-Condensed | Primary hero and major section headlines. |
| h2 | 38px | 400 | 1.38 | -0.025em | — | GT-America-Condensed | Section titles and secondary editorial headings. |
| h3 | 24px | 400 | 1.5 | 0 | — | GT-America-Standard | Feature titles and compact subsection headings. |
| body | 18px | 400 | 1.56 | 0 | — | GT-America-Standard | Introductory copy, feature descriptions, and testimonials. |
| caption | 16px | 400 | 1.5 | 0 | — | GT-America-Standard | Attributions, supporting notes, and small labels. |
| button | 20px | 400 | 1 | 0 | — | GT-America-Extended | Primary and secondary CTA labels. |
| link | 16px | 400 | 1 | 0 | — | GT-America-Extended | Navigation, feature links, and footer links. |
| eyebrow | 18px | 400 | 1.56 | 0.05em | uppercase | GT-America-Condensed | Uppercase category labels above section headings. |

OpenType features in use: `"cv11"`.

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 2, 6, 12, 16, 24, 32, 40, 48, 64, 104 px.
- Section rhythm 104px · element gap 32px · card padding — · max content width 1360px.

The page uses a spacious, centered composition within a measured 1360px maximum page width. Full-bleed color bands separate major themes; within them, centered headline-and-copy groups lead into wide product demonstrations. Feature summaries sit in three columns, while testimonials use a two-column portrait-and-quote arrangement. The measured spacing scale is based on an 8px unit, with a spacious density and a 104px section rhythm. Keep navigation compact and let large editorial headings provide the strongest alignment cue.

## Shape & elevation

- Radius: button `8px` · link `8px` · xs `8px` · sm `24px`
- Shadow `inset` (link): `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(185, 255, 120) 0px 0px 0px 2px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The visual system is mostly flat: large background-color changes create section depth instead of drop shadows. Product demonstrations are distinctly layered within outlined frames, with a light inner edge visible around the media. Buttons use solid fills and modest rounded corners. A measured inset lime ring appears on a link state; avoid adding unmeasured shadow treatments.

## Imagery

Product videos are the main visual evidence: wide scheduling-interface views sit over scenic landscape imagery and are enclosed by fine coral outlines. Small customer portraits accompany testimonial quotes. The opening hero uses a large, abstract layered green graphic rather than photography. The footer adds hand-drawn coral line art; keep decorative imagery secondary to the product UI.

## Components

### Hero navigation

Compact links and account actions sit across the top of the green hero; the sign-up action is outlined in lime.

### Hero CTA

Centered lime button with dark text and rounded corners, followed by a small customer-count reassurance.

### Product demo frame

Wide video or product image framed by a thin coral outline and a light inner border.

### Three-column feature row

Three compact feature summaries with bold titles, short descriptions, and occasional Read more links.

### Customer testimonial

Portrait and customer quote sit side by side, with the customer name and role beneath the quote.

### Pricing CTA

Centered offer on the cream canvas with a coral pricing button and a compact money-back reassurance.

### Footer link columns

Brand mark and grouped link columns sit below a thin coral decorative rule, followed by red line-art illustration.

### Measured component styles

- **Primary button** (“Try SavvyCal risk-free”): background #b9ff78 · text #18181b · radius 8px · padding 16px 32px · 400 20px GT-America-Extended
- **Secondary button** (“See plans & pricing”): background #f54320 · text #ffffff · radius 8px · padding 16px 32px · 400 20px GT-America-Extended
- **Link** (“Features”): transparent background · text #fcf7ed · radius 0px · padding 0px · 400 16px GT-America-Extended
- **Card**: transparent background · text #000000 · border 4px solid #ffffff · radius 0px · padding 0px · 400 16px InterVariable

## Do

- Use the cream canvas to give long content sections a warm, calm base.
- Reserve the lime accent for high-priority actions and hero emphasis.
- Separate major themes with full-width color bands.
- Frame product demonstrations with crisp coral outlines.
- Pair display serif headings with readable sans-serif body copy.
- Keep feature descriptions and navigation labels concise.
- Use generous whitespace to preserve the spacious editorial rhythm.

## Don't

- Don't add gradients as a substitute for the page's solid color bands.
- Don't use heavy drop shadows to create hierarchy.
- Don't make every section dark or highly saturated.
- Don't let decorative illustrations compete with product demonstrations.
- Don't replace the expressive display serif with generic bold sans-serif headings.
- Don't crowd feature columns or testimonial layouts.
- Don't introduce colors outside the measured palette.

## Agent prompt

Build a new SaaS page in SavvyCal's spacious editorial style. Use Warm Parchment (#fcf7ed) as the main content canvas, with Forest Green (#0d542b), Blush Wash (#ffe3e3), and Night Ink (#18181b) as deliberate full-width section bands. Set large headlines in an expressive condensed serif, with clean sans-serif body copy and extended-style interface labels. Make the primary action Electric Lime (#b9ff78) with dark text; use Signal Coral (#f54320) for demo outlines, fine rules, and a secondary CTA. Center section introductions, give product media a wide outlined frame, and organize feature summaries into calm columns. Pair testimonial portraits with readable quotes. Keep surfaces flat, spacing generous, and decoration subordinate to the product. Avoid gradients, heavy shadows, and unmeasured colors.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width green hero with compact top navigation and centered headline, copy, and CTA. | Primary trial CTA, Login and sign-up navigation | Layered green backdrop, Lime display headline, Centered CTA |
| 2 | product-showcase | Centered introduction above a wide, full-bleed product video. | Explain scheduling experience, Show product in context | Cream canvas, Coral-outlined media frame, Editorial heading |
| 3 | feature-grid | Three feature summaries arranged in a single horizontal row. | Scan feature benefits, Read more links | Three columns, Compact bold titles, Short descriptions |
| 4 | testimonials | Two-column portrait-and-quote row on the cream canvas. | Social proof, Customer attribution | Customer portrait, Large quote text, Name and role |
| 5 | product-showcase | Full-width blush section with centered introduction and wide product video. | Introduce availability controls, Demonstrate calendar settings | Blush color band, Coral-outlined media frame, Centered section heading |
| 6 | feature-grid | Three feature summaries beneath the product demonstration. | Scan controls, Open detailed feature links | Three columns, Bold feature titles, Inline links |
| 7 | testimonials | Two-column portrait-and-quote row within the blush section. | Social proof, Customer attribution | Portrait image, Readable quote, Name and role |
| 8 | product-showcase | Full-width dark section with centered introduction and product video. | Explain team scheduling, Demonstrate shared availability | Night Ink background, Coral media outline, Light text |
| 9 | feature-grid | Three feature summaries in a horizontal row on the dark background. | Compare scheduling modes, Read more links | Three columns, Light text, Compact feature links |
| 10 | cta | Centered conversion block on the cream canvas. | View pricing, Money-back reassurance | Large serif headline, Coral CTA, Centered seal illustration |
| 11 | footer | Cream footer with brand mark, grouped link columns, and decorative line art. | Browse grouped site links, Find company and support details | Coral hairline, Three link columns, Illustrated footer decoration |

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