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

# Good Glyphs · Design System

> A bright canvas for expressive glyphs and collective giving.

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

Good Glyphs pairs oversized typography and a bright green canvas with a showcase of custom designer-made dingbats. The page connects the font preview and contributor gallery to a prominent donation-and-download action supporting Doctors Without Borders.

## North star

Let the custom glyphs and oversized type carry the page, keeping every supporting element within the two-color system.

## Overview

The page is built around a single, distinctive canvas green (#c7ffcd) and black (#000000), used consistently for backgrounds, typography, borders, and the inverse glyph-preview panel. Its opening is an oversized typographic composition: the custom dingbat font interrupts the wordmark, while a large uppercase sans-serif title and mission statement establish a blunt editorial voice. Typography does most of the visual work; Helvetica Neue ranges from light uppercase headings to compact body copy, with tight tracking on the main title. A black preview panel reverses the palette, showing glyphs in green, then hands off to pill-like donation controls and a long contributor gallery. The gallery uses a three-column desktop grid of transparent cards with fine black outlines, keeping each individual illustration prominent without introducing decorative color. Generous open green space around the hero contrasts with the compact, repeated gallery cells. The result feels direct, playful, and intentionally unpolished rather than glossy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Glyph Green | `#c7ffcd` | `--color-glyph-green` | brand | Dominant page canvas and section background; also used for glyphs and text on the inverse black preview panel. |
| Ink Black | `#000000` | `--color-ink-black` | neutral | Primary typography, card outlines, controls, illustrations, and the contrasting glyph-preview surface. |

### Semantic aliases

`--color-canvas` → `#c7ffcd` (Glyph Green) · `--color-surface` → `#000000` (Ink Black) · `--color-text` → `#000000` (Ink Black) · `--color-border` → `#000000` (Ink Black)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#c7ffcd` | 18.61:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Helvetica Neue | `--font-body` | system | 400, 300 | Wordmark heading, mission text, contributor labels, body copy, links, and controls. | Inter |
| good-glyphs | `--font-display` | webfont | 400 | Custom oversized dingbat characters within the hero wordmark and glyph previews. | Noto Sans Symbols 2 |

- **Helvetica Neue:** Use light weights for uppercase section headings and heavier regular display text; the hero title is uppercase with tight negative tracking.
- **good-glyphs:** This is a bespoke webfont, not a conventional text face; preserve its distinctive pictograms and use sparingly as display artwork.

### Type scale — Custom (ratio ≈ 2.74, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 288px | 400 | normal | 0 | — | good-glyphs | Oversized custom dingbat characters integrated into the hero wordmark. |
| h1 | 72px | 400 | 0.9 | -0.03em | uppercase | Helvetica Neue | Large uppercase hero title, with tightly tracked lettering. |
| h2 | 28px | 300 | 1 | 0.025em | uppercase | Helvetica Neue | Light uppercase section headings and prominent donation action. |
| body | 14px | 400 | 1.5 | 0 | — | Helvetica Neue | Compact explanatory copy beneath the font preview and donation controls. |
| button | 14px | 400 | normal | 0 | — | Helvetica Neue | Small labels on glyph buttons and donation amount controls. |
| link | 14px | 400 | normal | 0 | — | Helvetica Neue | Contributor names and small project-credit or footer links. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 1, 4, 7, 14 px.
- Section rhythm 42px · element gap — · card padding — · max content width 1426px.

The desktop layout uses a centered page canvas that can expand to the measured 1426px maximum width. The hero and mission statement are left-aligned and nearly full-width, with content flowing vertically into a wide black preview panel. Donation controls follow in a horizontal row. The contributor area switches to a dense three-column desktop grid of repeated cards; maintain consistent gaps and a comfortable section break. The page is open and emphatically simple above the gallery, then becomes rhythmically modular.

## Shape & elevation

- Radius: button `2px` · card `14px` · xs `1px` · sm `2px` · md `14px`
- No box shadows measured: the page is flat.

The design is essentially flat: measured data reports no shadows or gradients. Separate areas with the black preview surface, thin black card and control outlines, and the shift between open hero space and the repeated gallery grid. Preserve the understated rounded card corners and avoid layered effects.

## Imagery

There is no photography. The central visual material is the bespoke dingbat typeface: playful, monochrome pictograms displayed in a black preview strip and individually inside contributor cards. Artwork varies from fine line drawings to solid black silhouettes; keep it crisp, unframed by added effects, and visually centered within each cell.

## Components

### Hero wordmark

An oversized uppercase title on the green canvas, interrupted by custom glyph illustrations and accompanied by a small issue marker.

### Glyph preview

A broad black panel containing green dingbat samples, a small label, and a fine horizontal slider with a circular handle.

### Donation controls

Outlined pill-like amount choices followed by a large, uppercase DONATE & DOWNLOAD action.

### Contributor cards

A three-column desktop grid of transparent cards with thin black borders, contributor names, glyph labels, and centered artwork.

### Project credit

A small, understated credit link positioned at the upper-right of the hero.

### Footer links

A compact row of small copyright, studio, social, newsletter, and contact links at the end of the gallery.

### Measured component styles

- **Primary button** (“A”): background #000000 · text #c7ffcd · border 1px solid #000000 · radius 10% · padding 3.5px 4.2px 1.4px 4.2px · 400 14px Helvetica Neue
- **Secondary button** (“a”): transparent background · text #000000 · border 1px solid #000000 · radius 10% · padding 3.5px 4.2px 1.4px 4.2px · 400 14px Helvetica Neue
- **Link** (“Violet Office”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px Helvetica Neue
- **Input**: transparent background · text #000000 · radius 0px · padding 0px · 300 28px Helvetica Neue
- **Card** (“Michael Willis Aa a A a A”): transparent background · text #000000 · border 1px solid #000000 · radius 14px · padding 0px · 400 14px Helvetica Neue

## Do

- Use #c7ffcd as the dominant page canvas.
- Keep text and outlines in #000000.
- Make the hero typography oversized, uppercase, and left-aligned.
- Use custom pictograms as the primary visual content.
- Present contributor artwork in a consistent desktop grid.
- Use thin outlines and flat surfaces instead of shadows.
- Keep supporting copy and footer links visually quiet.

## Don't

- Do not introduce extra brand colors.
- Do not add gradients, drop shadows, or glossy effects.
- Do not use stock photography in place of glyph artwork.
- Do not soften the page with decorative textures.
- Do not make the hero title small or conventionally restrained.
- Do not give each contributor card a different background.
- Do not let navigation or secondary copy compete with the artwork.

## Agent prompt

Build a new page in the Good Glyphs visual style. Use Glyph Green (#c7ffcd) as the uninterrupted canvas and Ink Black (#000000) for typography, borders, and the inverse showcase surface. Set a Helvetica Neue-like sans-serif for uppercase, editorial headings and compact supporting copy; use a bespoke symbol font or custom artwork for expressive glyphs. Lead with a large, left-aligned typographic statement, then give the main preview a broad black panel with green symbols. Follow it with simple outlined donation controls and a repeated contributor-art grid. Keep the layout flat, spacious around the hero, and more rhythmically dense in the gallery. Use fine outlines rather than shadows, keep artwork centered and monochrome, and ensure every supporting element reinforces rather than competes with the glyphs.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Large, left-aligned typographic wordmark and oversized heading on a full-width green canvas. | immediate brand recognition, small project-credit link | oversized uppercase type, custom glyphs in the wordmark, green canvas |
| 2 | product-showcase | Mission copy above a broad black glyph-preview panel, followed by a horizontal row of donation controls. | interactive font preview, preset donation amounts, donate-and-download action | inverse black panel, green glyph artwork, outlined pill controls |
| 3 | team | Left-aligned section heading above a dense, repeated three-column contributor-card grid. | browse contributor artwork, identify each designer | thin outlined cards, centered monochrome glyphs, compact name labels |

## Source CSS custom properties (selected)

```css
--bg-color: #c7ffcd;
--text-color: #000;
--font-size: max(4vw,30px);
--swiper-theme-color: #007aff;
```

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