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

# Graphy · Design System

> A calm canvas for vivid data stories

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

Graphy pairs a pale, spacious canvas with confident navy typography and vivid blue calls to action. Floating chart artwork, product demonstrations and testimonial cards make the page feel like a polished, approachable tool for data storytelling.

## North star

Keep the interface calm and spacious, using vivid blue selectively to direct attention toward data and the primary action.

## Overview

The visual system is led by a cool, pale canvas (#f2f4f8) that carries most of the page, with white surfaces used for the navigation bar, product cards and testimonial panels. Aeonik gives headings and body copy a clean, contemporary voice; large centered hero typography sets the hierarchy, while subdued blue-gray text keeps supporting copy calm. Saturated blue accents mark the primary action and selected text, while soft blue chart illustrations provide visual energy without changing the overall quiet tone. The hero uses a centered message and CTA framed by floating chart graphics and customer logos. Below, generous open space separates the benefits display, stacked product workflow cards and testimonial wall. Rounded cards and pill-like buttons soften the interface; restrained shadows distinguish content from the canvas rather than relying on strong borders. A contrasting deep-purple gradient closing section provides a dramatic final CTA.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Graphite Mist | `#f2f4f8` | `--color-graphite-mist` | brand | Dominant page canvas behind the hero, feature content and testimonial sections. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Navigation backing, cards, product panels and secondary button surfaces. |
| Slate Iris | `#616581` | `--color-slate-iris` | neutral | Primary supporting copy and body text on the light canvas. |
| Chart Cyan | `#0099ff` | `--color-chart-cyan` | accent | Bright link accent; use sparingly for interactive text, not broad backgrounds. |
| Signal Blue | `#2e62ff` | `--color-signal-blue` | accent | Primary Start for free button and prominent blue emphasis. |
| Quiet Gray | `#999999` | `--color-quiet-gray` | neutral | Muted captions and secondary text that should recede from headings. |
| Lilac Haze | `#d1cdf5` | `--color-lilac-haze` | semantic | Gradient color contribution; treat as atmospheric illustration or glow, not a core flat UI fill. |
| Periwinkle Signal | `#4070fe` | `--color-periwinkle-signal` | accent | Secondary blue emphasis and illustration detail; also appears in colored text. |
| Charcoal Type | `#333333` | `--color-charcoal-type` | neutral | Small dark headings and text where near-black is softer than pure black. |
| Night Plum | `#28163d` | `--color-night-plum` | brand | Inner color of the dark-purple radial gradient in the closing section. |
| Deep Aubergine | `#180d24` | `--color-deep-aubergine` | brand | Dark edge of the footer CTA gradient, creating contrast with the light page. |
| Muted Periwinkle | `#6e738d` | `--color-muted-periwinkle` | neutral | Occasional secondary text, quieter than the principal Slate Iris copy. |
| Graphite Gray | `#666666` | `--color-graphite-gray` | neutral | Minor supporting text; keep usage limited to secondary interface details. |
| Midnight Ink | `#20295a` | `--color-midnight-ink` | brand | Deep navy headings and text, especially visible in hero and section titles. |
| Pure Ink | `#000000` | `--color-pure-ink` | semantic | Small black text and card copy; not the dominant headline color. |
| Soft Pewter | `#c2c2c2` | `--color-soft-pewter` | neutral | Occasional muted link or text detail, suitable for low-priority information. |

### Semantic aliases

`--color-canvas` → `#f2f4f8` (Graphite Mist) · `--color-surface` → `#ffffff` (Gallery White) · `--color-text` → `#616581` (Slate Iris) · `--color-text-muted` → `#999999` (Quiet Gray) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-accent` → `#2e62ff` (Signal Blue) · `--color-accent-2` → `#0099ff` (Chart Cyan) · `--color-accent-3` → `#4070fe` (Periwinkle Signal) · `--color-on-accent` → `#0000ee`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#616581` | `#f2f4f8` | 5.17:1 | AA |
| `#616581` | `#ffffff` | 5.7:1 | AA |
| `#999999` | `#f2f4f8` | 2.59:1 | fail |
| `#999999` | `#ffffff` | 2.85:1 | fail |
| `#ffffff` | `#f2f4f8` | 1.1:1 | fail |
| `#2e62ff` | `#f2f4f8` | 4.43:1 | AA-large |
| `#2e62ff` | `#ffffff` | 4.88:1 | AA |

### Gradients

- `linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(76, 48, 237, 0.2) 100%)`
- `radial-gradient(50% 50%, rgb(40, 22, 61) 0%, rgb(24, 13, 36) 100%)`
- `radial-gradient(50% 134% at 49% 0px, rgb(255, 255, 255) 1.25106%, rgba(255, 255, 255, 0) 100%)`
- `linear-gradient(rgba(120, 140, 255, 0.5) 0%, rgba(216, 218, 228, 0.5) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Aeonik Regular | `--font-body` | webfont | 400, 700 | Main body copy, links and regular interface text. | Inter |
| Aeonik Medium | `--font-display` | webfont | 400, 500 | Display headings and section titles. | Inter |
| Inter | `--font-inter` | webfont | 400 | Compact caption and supporting metadata text. | Inter |

- **Aeonik Regular:** Use a clean sans-serif voice with regular weight; keep case natural and tracking neutral.
- **Aeonik Medium:** Medium visual emphasis with natural casing; measured headings use neutral or slightly tight tracking.
- **Inter:** Use for small captions; measured caption styling has notably tight letter spacing.

### Type scale — Major Third (ratio ≈ 1.285, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 400 | 1.15 | 0 | — | Aeonik Medium | Large centered hero title and major closing CTA headline. |
| h1 | 32px | 400 | 1.2 | 0 | — | Aeonik Medium | Primary page or section heading where a clear heading tier is needed. |
| h2 | 24px | 400 | 1.4 | -0.033em | — | Aeonik Medium | Feature and testimonial section headings. |
| h3 | 22px | 400 | 1.35 | 0 | — | Aeonik Regular | Subheadings within workflow steps and content panels. |
| h4 | 20px | 400 | 1.2 | 0 | — | Aeonik Medium | Smaller feature headings and card titles. |
| body | 16px | 400 | 1.6 | 0 | — | Aeonik Regular | Hero description, product explanations and testimonial copy. |
| caption | 14px | 400 | 1.5 | -0.05em | — | Inter | Small supporting labels, metadata and fine-print descriptions. |
| link | 16px | 400 | 1.05 | 0 | — | Aeonik Regular | Navigation links and inline actions. |

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

## Spacing & layout

- Base unit **2px**, density **compact**.
- Scale (most used values): 1, 4, 6, 7, 10, 16, 20, 30, 32, 40 px.
- Section rhythm 40px · element gap 10px · card padding 16px · max content width 1200px.

The page uses a centered, constrained content area within a wide desktop canvas, with a measured maximum width of 1200px. The hero aligns its announcement, headline, description and actions centrally; chart artwork floats at the sides. Customer logos form a horizontal band below. Later content alternates centered section headings with product imagery and vertically stacked workflow cards, then spreads testimonials across a wide grid. Compact component spacing sits inside a deliberately generous section rhythm, leaving broad breathing room between major blocks.

## Shape & elevation

- Radius: button `20px` · card `8px` · media `50%` · link `9999px` · xs `4px` · sm `8px` · md `16px` · lg `20px` · xl `24px`
- Shadow `md` (other): `rgb(255, 255, 255) 0px 0px 0.24px 0px, rgb(255, 255, 255) 0px 0px 0.48px 0px, rgb(255, 255, 255) 0px 0px 1.68px 0px, rgb(255, 255, 255) 0px 0px 3.36px 0px, rgb(255, 255, 255) 0px 0px 5.76px 0px, rgb(2`
- Shadow `md-2` (other): `rgb(255, 255, 255) 0px 0px 0.12px 0px, rgb(255, 255, 255) 0px 0px 0.24px 0px, rgb(255, 255, 255) 0px 0px 0.84px 0px, rgb(255, 255, 255) 0px 0px 1.68px 0px, rgb(255, 255, 255) 0px 0px 2.88px 0px, rgb(2`
- Shadow `lg` (card): `rgba(0, 0, 0, 0.02) 0px 0.48175px 1.63795px -0.333333px, rgba(0, 0, 0, 0.03) 0px 1.83083px 6.22481px -0.666667px, rgba(0, 0, 0, 0.08) 0px 8px 27.2px -1px`
- Shadow `lg-2` (card): `rgba(97, 59, 6, 0.08) 0px 0.722625px 1.30072px -0.666667px, rgba(97, 59, 6, 0.09) 0px 2.74624px 4.94323px -1.33333px, rgba(97, 59, 6, 0.12) 0px 12px 21.6px -2px`
- Shadow `inset` (other): `rgba(255, 255, 255, 0) 0px 0px 0px 0px inset`
- Shadow `inset-2` (card): `rgba(255, 255, 255, 0.8) 0px -6px 8px 0px inset, rgba(255, 255, 255, 0.7) 0px 0px 20px 7px inset, rgba(0, 84, 219, 0.01) 0px 86px 35px 0px, rgba(0, 84, 219, 0.02) 0px 49px 29px 0px, rgba(0, 84, 219, 0`

The main canvas remains visually flat, with white cards and panels separated through subtle shadows rather than prominent borders. The measured card radius is 8px; pill-like primary buttons use a 20px radius. Some product surfaces receive soft layered shadows or white glow, while the dark closing CTA relies on its gradient and illustration rather than card elevation.

## Imagery

The hero and closing CTA use floating, softly glowing chart illustrations—bars, grids and circular charts—in bright blues. These are illustrative product motifs, not photographic imagery. Product screenshots appear within white, lightly elevated workflow panels and small chart examples; testimonial cards pair concise text with portrait thumbnails. Keep illustrations clean, slightly luminous and secondary to the headline, with screenshots framed as practical product evidence.

## Components

### Floating navigation

A white horizontal navigation surface on the pale canvas, with the Graphy mark at left, centered product links and account actions at right.

### Hero announcement

A small rounded white announcement label with a green indicator and linked product news above the centered hero title.

### Primary CTA

Bright #2e62ff Start for free button with a measured 20px radius; pair with a white secondary demo action.

### Chart artwork

Floating blue chart illustrations around the hero message, softly glowing and clearly decorative rather than functional controls.

### Workflow panels

Tall white product cards with an 8px radius and subtle elevation, presenting numbered steps, short copy and embedded product examples.

### Testimonial cards

Compact white cards in a broad grid, with small portrait, name, role and quote; use understated separation from the pale canvas.

### Closing CTA

A deep-purple gradient band with centered Graphy branding, headline, supporting text, blue action and floating chart motifs.

### Measured component styles

- **Primary button** (“Start for free”): background #2e62ff · text #0000ee · radius 20px · padding 16px 32px · 400 12px sans-serif
- **Secondary button** (“Sign up”): background #ffffff · text #0000ee · radius 12px · padding 12px 20px · 400 12px sans-serif
- **Link** (“Horizontal bar”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Aeonik Regular
- **Card** (“Cindy Ibanez Global Head of Marketing at”): background #ffffff · text #000000 · radius 8px · padding 16px · 400 12px sans-serif

## Do

- Use #f2f4f8 as the dominant page canvas.
- Reserve #2e62ff for the primary action and focused emphasis.
- Center hero messaging and give it ample surrounding space.
- Use white cards to frame product evidence and testimonials.
- Pair Aeonik-like sans-serif headings with calm blue-gray body copy.
- Keep chart illustrations soft, luminous and clearly decorative.

## Don't

- Do not turn the pale canvas into a high-contrast color-block layout.
- Do not use saturated blue as a large full-width background.
- Do not crowd the hero with dense copy or competing controls.
- Do not add heavy borders to cards that rely on subtle elevation.
- Do not let product illustrations overpower the page headline.
- Do not apply the dark footer gradient to ordinary content sections.

## Agent prompt

Build a new Graphy-style SaaS page with a calm, data-storytelling visual language. Use Graphite Mist (#f2f4f8) for the main canvas, Gallery White (#ffffff) for navigation and content surfaces, Slate Iris (#616581) for supporting copy, Midnight Ink (#20295a) for strong headings, and Signal Blue (#2e62ff) for the primary action. Set a centered, spacious hero with a short announcement, clear headline, concise description and paired actions; flank it with soft blue chart illustrations. Use Aeonik-like sans-serif typography, rounded white product cards, restrained shadows and generous gaps between sections. Include clear product evidence and human testimonials. Finish with a distinct Night Plum (#28163d) to Deep Aubergine (#180d24) gradient CTA band. Keep illustrations subordinate, interactions obvious and the overall page light, tidy and product-led.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered announcement, headline, description and paired actions, framed by floating chart motifs; customer logos follow below. | Prominent primary action, Secondary demo action, Announcement link, Customer logo proof | Pale canvas, Centered typography, Blue chart illustrations, Horizontal logo row |
| 2 | how-it-works | Centered benefits heading and chart-story visual lead into vertically stacked, numbered workflow panels. | Benefits overview, Numbered product steps, Visual product walkthrough | Pale canvas, White product cards, Embedded chart examples, Subtle card elevation |
| 3 | testimonials | Centered social-proof heading above a broad multi-column grid of compact testimonial cards. | Customer quotes, Name and role attribution, Rating proof | White quote cards, Portrait thumbnails, Wide testimonial grid, Dark gradient closing CTA |

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