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

# Glitch — Blog · Design System

> A crisp editorial canvas for a playful maker community

**Theme:** light · **Industry:** devtools · **Source:** https://blog.glitch.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._

Glitch Blog pairs a restrained editorial shell with colorful, personality-led artwork. A featured story leads into a compact, image-forward archive, with vivid pink reserved for links and small accents.

## North star

Keep the interface neutral and editorial so the colorful creator-focused artwork, not the chrome, commands attention.

## Overview

The page is built on a white canvas with near-black typography, giving the editorial content a clean, high-contrast frame. A restrained hot pink marks links and small interactive emphasis; it is not used as a large section background. The header combines the Glitch Blog mark with compact utility links, followed by a single-row category navigation. A broad featured story anchors the page, using a large, colorful illustration above a bold headline. Below it, a three-column archive grid presents varied article artwork at consistent visual weight, with dates and titles directly beneath each image. InterVariable supplies a cohesive sans-serif voice: heavy, prominent headlines and compact navigation and metadata. Generous outer margins and clear gaps keep the dense content feed from feeling crowded. The art itself carries most of the palette variation, while the surrounding interface remains flat, quiet, and consistent.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, article cards, and footer background; keeps the content feed visually open. |
| Editorial Ink | `#000000` | `--color-editorial-ink` | neutral | Headlines, dates, navigation, and footer copy for strong, direct contrast. |
| Quiet Divider | `#e4e4e4` | `--color-quiet-divider` | neutral | Subtle footer separation and thin structural rules. |
| Glitch Pink | `#ff00bc` | `--color-glitch-pink` | accent | Article links and small link emphasis; keep it out of large background areas. |
| Soft Graphite | `#b4b4b4` | `--color-soft-graphite` | semantic | Thin input outline on the theme control in the footer. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Editorial Ink) · `--color-border` → `#e4e4e4` (Quiet Divider) · `--color-accent` → `#ff00bc` (Glitch Pink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#ff00bc` | `#ffffff` | 3.51:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| InterVariable | `--font-body` | webfont | 600, 700, 400 | Headings, article text, navigation, links, and metadata throughout the blog. | Inter |

- **InterVariable:** Use bold weights for story headlines and body emphasis, semibold for navigation and links; keep tracking neutral and casing natural.

### Type scale — Custom (ratio ≈ 2, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 700 | 1.38 | 0 | — | InterVariable | Featured story headline anchoring the blog feed. |
| body | 20px | 700 | 1.38 | 0 | — | InterVariable | Prominent article text and headline-style content. |
| caption | 14px | 600 | normal | 0 | — | InterVariable | Article dates and compact metadata. |
| nav | 16px | 600 | normal | 0 | — | InterVariable | Category navigation and header utility links. |
| link | 16px | 600 | normal | 0 | — | InterVariable | Article titles, category links, and footer destinations. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 8, 16, 18, 20, 28, 48 px.
- Section rhythm 48px · element gap 8px · card padding — · max content width 1080px.

Center the content within a measured 1080px maximum-width frame. Place the brand and utility links in the top header, with category navigation immediately below. The featured story spans the content width before the archive shifts into three aligned columns. Keep article images and text aligned consistently within each card. The measured spacing uses a 4px base unit and a comfortable rhythm, with a 48px section gap and 8px element gap. The footer follows the feed as a distinct, simple closing band.

## Shape & elevation

- No box shadows measured: the page is flat.

The page is predominantly flat: cards sit directly on the white canvas without measured shadows, rounded corners, or raised surfaces. Use spacing and image boundaries to distinguish stories. A subtle light-gray hairline separates the footer, while the theme input has a measured gray border.

## Imagery

Use expressive, colorful illustrations and artwork as the defining visual element. The featured story receives a wide, cropped image, while archive cards use varied artwork in consistent rectangular frames. Some images contain gradients, characters, or screenshots; treat those colors as editorial image content rather than additions to the interface palette. Avoid decorative image effects or heavy overlays.

## Components

### Header

Brand mark and wordmark sit at the left; compact Glitch.com and Search utilities align opposite.

### Category navigation

A horizontal row of semibold black category links sits below the header.

### Featured story

A full-width illustrated lead image precedes its date and large, bold black headline.

### Article feed cards

Three-column image-led cards pair rectangular artwork with date metadata and bold linked titles.

### Article links

Semibold links use Glitch Pink (#ff00bc) as the measured accent.

### Footer

A light, text-led closing area includes community copy, site links, and a compact theme input with a gray outline.

### Measured component styles

- **Link** (“Wednesday, July 23, 2025 Until we meet a”): transparent background · text #ff00bc · radius 0px · padding 0px · 600 16px InterVariable
- **Input** (“Light Dark”): transparent background · text #000000 · border 2px solid #b4b4b4 · radius 0px · padding 4px · 400 13.3333px Arial
- **Card** (“Wednesday, July 23, 2025 Until we meet a”): background #ffffff · text #000000 · radius 0px · padding 0px · 400 16px InterVariable
- **Navigation item** (“Glitch.com Search”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px InterVariable

## Do

- Use a white canvas and black editorial text.
- Let article artwork provide the strongest color.
- Keep the brand and utility links in a clean header.
- Align article images, dates, and titles consistently.
- Use hot pink sparingly for links and emphasis.
- Preserve generous space around the main content.

## Don't

- Do not turn illustration colors into interface colors.
- Do not add shadows or rounded card treatments.
- Do not use large pink background panels.
- Do not crowd the feed with decorative chrome.
- Do not make article metadata compete with headlines.
- Do not replace the artwork with generic stock imagery.

## Agent prompt

Build a new editorial blog page in the Glitch style. Use Gallery White (#ffffff) as the canvas and Editorial Ink (#000000) for headings, navigation, and metadata. Reserve Glitch Pink (#ff00bc) for links and small emphasis; use Quiet Divider (#e4e4e4) only for subtle rules and Soft Graphite (#b4b4b4) for a restrained input outline. Set Inter or a close sans-serif alternative with bold story headlines and semibold navigation. Center content in a measured 1080px maximum-width frame. Create a compact brand header, a horizontal category row, one prominent illustrated lead story, and a three-column image-led article feed. Keep card surfaces flat and square-edged, with clear spacing rather than shadows. Finish with a simple footer and let original, playful artwork carry the color.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | footer | Single-column footer on white, separated from the content by a subtle horizontal rule. | About and social links, RSS destination, Theme selector | Compact text links, Light divider, Outlined theme input |

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