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

# Glyphs · Design System

> A calm canvas for expressive type and software

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

Glyphs pairs a quiet white canvas and confident editorial typography with vivid feature panels. Large, carefully framed software screenshots make the font editor itself the central visual proof.

## North star

Keep the page calm and editorial, using oversized typography and product screenshots on white, then reserve vivid colors for precise emphasis.

## Overview

The page is built on a predominantly white canvas, letting oversized dark headlines and the product interface command attention. Deep green-black text anchors the typography, while lime, cyan, orange, and golden yellow distinguish calls to action and feature cards. These colors are concentrated into small, high-contrast surfaces rather than spread across the background; some sampled hues also belong to screenshots and illustrations, not the underlying brand system. Headlines use expressive serif letterforms, contrasting with restrained, readable supporting copy and compact navigation. The long homepage alternates spacious text-led moments with large, pale-framed application screenshots. Feature cards overlap or sit against those screenshots, creating a lively but legible rhythm. Testimonials use bright color blocks and portraits, while the final capabilities and support content returns to a white editorial layout. Generous whitespace and consistent alignment keep the bright accents from overwhelming the product story.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas behind navigation, editorial content, product screenshots, and most section bands. |
| Interface Cyan | `#1ad1e6` | `--color-interface-cyan` | accent | Bright fill for selected feature cards and the secondary Get Glyphs 4 call to action. |
| Glyph Lime | `#9aff00` | `--color-glyph-lime` | brand | Primary Get Glyphs button and the vivid testimonial panel; use as a focused brand highlight. |
| Plum Ink | `#42242e` | `--color-plum-ink` | brand | Core editorial text and dark feature-card surfaces, paired with warm yellow or orange. |
| Golden Ochre | `#f2ad0d` | `--color-golden-ochre` | accent | Feature-card text and fills, especially warm panels introducing product capabilities. |
| Olive Gold | `#604900` | `--color-olive-gold` | semantic | Text on cyan and lime accents, plus selected headings and button content. |
| Roasted Umber | `#4d2f1a` | `--color-roasted-umber` | semantic | Warm dark text detected in headings; treat as a secondary editorial ink rather than a broad surface. |
| Signal Orange | `#f66a06` | `--color-signal-orange` | accent | Orange feature-card backgrounds and occasional links; a high-energy contrast to white and plum. |
| Deep Teal | `#243f42` | `--color-deep-teal` | semantic | Muted body text for secondary explanatory copy. |
| Soft Gray | `#eeeeee` | `--color-soft-gray` | surface | Subtle neutral button surface; keep large page sections white rather than gray. |
| Forest Ink | `#1e3219` | `--color-forest-ink` | brand | Navigation, primary button text, and deep green typography visible in the hero and supporting copy. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#eeeeee` (Soft Gray) · `--color-surface-2` → `#42242e` (Plum Ink) · `--color-text` → `#42242e` (Plum Ink) · `--color-text-muted` → `#243f42` (Deep Teal) · `--color-text-subtle` → `#1e3219` (Forest Ink) · `--color-border` → `#1ad1e6` (Interface Cyan) · `--color-accent` → `#604900` (Olive Gold) · `--color-accent-2` → `#f2ad0d` (Golden Ochre) · `--color-accent-3` → `#9aff00` (Glyph Lime) · `--color-on-accent` → `#1e3219` (Forest Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#42242e` | `#ffffff` | 13.78:1 | AAA |
| `#42242e` | `#eeeeee` | 11.88:1 | AAA |
| `#243f42` | `#ffffff` | 11.26:1 | AAA |
| `#243f42` | `#eeeeee` | 9.71:1 | AAA |
| `#243f42` | `#42242e` | 1.22:1 | fail |
| `#1e3219` | `#ffffff` | 13.77:1 | AAA |
| `#1e3219` | `#eeeeee` | 11.87:1 | AAA |
| `#1e3219` | `#42242e` | 1:1 | fail |
| `#604900` | `#ffffff` | 8.57:1 | AAA |
| `#604900` | `#eeeeee` | 7.39:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Symbol Helper | `--font-body` | webfont | 400 | Measured font family for display through navigation roles; screenshots show expressive serif headlines and restrained interface copy. | Literata |

- **Symbol Helper:** Measured weights are regular throughout; preserve the prominent editorial serif contrast, normal tracking, and mostly sentence-case text.

### Type scale — Augmented Fourth (ratio ≈ 1.414, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 400 | 1 | 0 | — | Symbol Helper | Oversized expressive hero or promotional display lettering. |
| h1 | 50px | 400 | 1.1 | 0 | — | Symbol Helper | Primary hero headline and major section titles. |
| h2 | 34px | 400 | 1.18 | 0 | — | Symbol Helper | Feature, testimonial, and editorial section headings. |
| h3 | 24px | 400 | 1.25 | 0 | — | Symbol Helper | Feature-card and smaller content headings. |
| body | 20px | 400 | 1.25 | 0 | — | Symbol Helper | Introductory and explanatory product copy. |
| caption | 18px | 400 | 1.4 | 0 | — | Symbol Helper | Screenshot credits, testimonial attribution, and compact supporting notes. |
| button | 14px | 400 | 1.43 | 0 | — | Symbol Helper | Compact navigation and action button labels. |
| nav | 20px | 400 | 1.25 | 0 | — | Symbol Helper | Brand wordmark and primary site navigation. |
| link | 18px | 400 | 1.4 | 0 | — | Symbol Helper | Inline resources and supporting content links. |

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

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 4, 10, 18, 20, 24, 25, 36, 40, 45, 50, 53, 60, 80, 100, 106 px.
- Section rhythm 80px · element gap 40px · card padding 54px · max content width 1240px.

Use a centered content area capped at the measured 1240px maximum, with spacious section gaps and a single-column editorial flow for the hero and most feature showcases. The hero headline aligns to the left while its type specimen occupies generous open space. Long product sections repeat a broad screenshot with an offset, overlapping color card. Multi-column layouts appear for the capabilities list and later documentation-style content. Keep overall density spacious, with distinct white intervals between blocks.

## Shape & elevation

- Radius: button `5px` · card `10px` · nav `10px` · link `5px` · xs `5px` · sm `10px`
- Shadow `inset` (other): `color(srgb 1 1 1 / 0.4) 0px 2px 0px 0px inset, color(srgb 1 1 1 / 0.15) 0px 0px 20px 0px inset`
- Motion: standard transition `0.166s cubic-bezier(0.25, 0.46, 0.45, 0.94)` on interactive elements.

The design is mostly flat: white canvas, simple borders, and clear color blocks do the structural work. Screenshot panels use subtle pale outlines rather than heavy shadows. Layer feature cards over product captures to create depth; keep corners gently rounded on cards and avoid adding prominent drop shadows.

## Imagery

Use authentic font-editor screenshots as the primary imagery: large interface captures show glyph grids, vector paths, controls, and previews. Frame them in pale, lightly outlined panels and let feature cards overlap an edge. The hero uses a dramatic specimen glyph, while testimonial sections pair grayscale portrait photography with vivid quote panels. Avoid decorative stock photography or unrelated illustration.

## Components

### Primary navigation

Compact wordmark and plain links sit on white; the Get Glyphs action uses a lime fill with dark green text.

### Hero specimen

A large left-aligned serif headline leads into a dramatically scaled glyph specimen, with supporting product copy below.

### Product feature showcase

A broad pale-framed application screenshot pairs with an offset colored text card; cycle cyan, plum, orange, and golden yellow.

### Testimonial panel

Portrait photography sits alongside a bright lime quote surface, serif testimonial text, attribution, and simple directional controls.

### Capabilities list

An editorial heading introduces concise product benefits arranged into several aligned columns on white.

### Text action button

Prominent secondary action uses a cyan fill, compact copy, and generous inset padding.

### Support content card

Orange card introduces a capability, with a small dark tutorial action and nearby plain text links.

### Measured component styles

- **Primary button** (“Get Glyphs”): background #9aff00 · text #1e3219 · border 1px solid #9aff00 · radius 0px · padding 3.5px · 400 14px Symbol Helper
- **Secondary button** (“→ Get Glyphs 4”): background #1ad1e6 · text #604900 · border 1px solid #1ad1e6 · radius 5px · padding 18px · 400 18px Symbol Helper
- **Link** (“Read the tutorials”): background #42242e · text #f66a06 · border 1px solid #42242e · radius 5px · padding 18px · 400 18px Symbol Helper
- **Card** (“COLRv1 support Colors, blends, gradients”): background #42242e · text #f2ad0d · radius 10px · padding 36px 40px 40px 99.9px · 400 20px Symbol Helper
- **Navigation item** (“Learn Forum News Events”): transparent background · text #1e3219 · radius 0px · padding 0px · 400 14px Symbol Helper

## Do

- Keep the canvas white and the overall composition spacious.
- Use large editorial serif headlines as clear section anchors.
- Show real font-editor interfaces as the primary feature imagery.
- Reserve lime for the primary action and select testimonial moments.
- Use cyan, orange, plum, and ochre as localized feature-card colors.
- Align copy and screenshots consistently within a centered content area.

## Don't

- Do not turn feature colors into full-page background bands.
- Do not decorate the page with unrelated stock photography.
- Do not add heavy shadows or dense ornamental borders.
- Do not crowd the hero or reduce the headline's visual prominence.
- Do not make every link or button equally bright.
- Do not treat colors sampled inside screenshots as core brand surfaces.

## Agent prompt

Build a new page in the Glyphs visual style: an airy white editorial canvas with a centered, spacious content area. Use oversized serif headlines in deep Forest Ink (#1e3219) or Plum Ink (#42242e), then keep body copy restrained and readable. Anchor each product story in an authentic, large software screenshot framed with a subtle pale outline. Add one offset feature card in Interface Cyan (#1ad1e6), Signal Orange (#f66a06), Golden Ochre (#f2ad0d), or Plum Ink (#42242e), and reserve Glyph Lime (#9aff00) for the primary action or an occasional testimonial panel. Build rhythm through generous whitespace, alternating screenshot and copy emphasis rather than colored section bands. Keep borders quiet, shadows minimal, and the typography-led hierarchy unmistakable. Treat interface mock-up colors as product imagery, not a new brand palette.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | White, single-column hero with left-aligned headline, oversized specimen, controls, and concise intro copy. | Font specimen preview, Adjustable weight and contrast controls, Primary product action | Large serif headline, Open whitespace, Lime navigation CTA |
| 2 | testimonials | Wide testimonial strip with portrait images behind a vivid quote card. | Previous and next controls, Customer endorsement | Lime quote panel, Portrait photography, Serif quotation |
| 3 | product-showcase | Large software capture paired with an offset feature card. | Feature explanation, Inspect vector editing example | Pale screenshot frame, Cyan callout card |
| 4 | product-showcase | Broad product screenshot with a dark card overlapping its left side. | Explain color-font capability, Show blending and gradients | Plum card, Golden text, Interface screenshot |
| 5 | product-showcase | Screenshot-led feature panel with a warm callout offset to the left. | Explain drag-and-drop grouping, Show glyph organization | Ochre feature card, Large interface capture |
| 6 | product-showcase | Wide editor screenshot with an orange card overlapping the right edge. | Show updated navigation, Explain quick access to tools | Orange callout, Pale software frame |
| 7 | product-showcase | Screenshot and cyan feature panel overlap within a spacious section. | Explain cap and corner options, Show editable stroke examples | Cyan card, Light interface capture |
| 8 | product-showcase | Large editor screenshot with a dark plum card aligned over its left side. | Explain slant adjustments, Show correction controls | Plum surface, Golden text, Software panel |
| 9 | product-showcase | Wide product image with an orange feature card overlapping the right. | Explain reusable head components, Show path-to-icon example | Orange card, Pale framed screenshot |
| 10 | product-showcase | Editor capture paired with a dark callout card on the left. | Explain scripting tools, Show debugging and editing interface | Plum card, Golden copy, Dense app capture |
| 11 | product-showcase | Large glyph overview with an ochre card overlapping the right edge. | Browse font masters, Filter and group masters | Golden feature card, Glyph grid screenshot |
| 12 | product-showcase | Screenshot-led panel with cyan explanation card placed at the left. | Preview text in the app, Adjust text settings | Cyan card, Dark preview interface |
| 13 | product-showcase | Wide, light screenshot with a golden card overlaid toward the lower right. | Explain node conversion, Show curve transition example | Golden card, Pale path-editing capture |
| 14 | feature-grid | Four-column list beneath a prominent editorial section heading. | Scan grouped capabilities, Compare key features | Compact bullet lists, White background, Multiple aligned columns |
| 15 | testimonials | Portrait-backed testimonial strip with a prominent bright quote panel. | Previous and next controls, Attributed user quote | Lime testimonial card, Grayscale portrait, Serif quote text |
| 16 | cta | Short, left-aligned editorial call to action on white. | Transition to support content | Large serif heading, Open white space |
| 17 | feature-grid | Multi-column content area with a feature card, tutorial action, and supporting links. | Explore capabilities, Open tutorials, Follow related links | Orange feature card, Small dark tutorial button, Editorial heading |

## Source CSS custom properties (selected)

```css
--space-0-25: 0.25rem;
--space-0-5: 0.5rem;
--space-1: 1rem;
--space-1-5: 1.5rem;
--space-2: 2rem;
--space-2-25: 2.25rem;
--space-2-5: 2.5rem;
--space-3: 3rem;
--space-4: 4rem;
--space-5: 5rem;
--block-gap: 2.5rem;
--section-gap: 4rem;
--grid-gap: 2rem;
--grid-gaps-width: calc(2rem * (8 - 1));
--_tone-page-surface: #ffffff;
--_tone-primary-surface: #9aff00;
--_tone-primary-surface-inverse: #1e3219;
--_tone-primary-content: #1e3219;
--_tone-primary-content-inverse: #9aff00;
--page-surface: #ffffff;
--surface-neutral-subtle: #eeeeee;
--border-neutral: #bfbfbf;
--selection-surface: #e9318d;
--list-marker-surface: #1e3219;
--list-marker-subtle-surface: #e9f3eb;
--table-highlight-surface: #f5f0ed;
--primary-surface: #9aff00;
--primary-surface-inverse: #1e3219;
--primary-surface-subtle: #e9f3eb;
--primary-content: #1e3219;
--primary-content-inverse: #9aff00;
--primary-content-accent: #1e3219;
--primary-border: #9aff00;
--primary-border-inverse: #1e3219;
--secondary-surface: #f66a06;
--secondary-surface-inverse: #42242e;
--secondary-surface-subtle: #f7eef1;
--secondary-content: #42242e;
--secondary-content-inverse: #f66a06;
--secondary-content-accent: #243f42;
```

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