DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).

How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?

Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.

Where is the source repo?

Maintainers link to github.com/whyashthakker/design-md-templates-skills. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.

How current is this DESIGN.md?

Explainx snapshots the file at import time. Recorded last update on this listing: May 8, 2026.

Need a fresh DESIGN.md from scratch?

Use the explainx.ai DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.

explainx.ainewsletter3.5k

workshops ↗

Ghost — DESIGN.md | explainx.ai | explainx.ai

DESIGN.md (markdown body)

name	Ghost
colors	background: "#ffffff" foreground: "#121217" # Woodsmoke brand: "#ff1a75" # Ghost Pink muted: "#757575" border: "#e6e6e6" card: "#ffffff" accent: "#820ad1" # Casper Purple dark: background: "#0c0c0f" foreground: "#f2f2f2" muted: "#a1a1a1" border: "#26262b" card: "#121217" accent: "#ff1a75"
typography	fontFamily: sans: "Inter, system-ui, -apple-system, sans-serif" serif: "Source Serif Pro, Georgia, serif" body: fontSize: "16px" lineHeight: "1.6" heading: fontWeight: "700" letterSpacing: "-0.02em"
rounded	default: "4px" md: "8px" full: "9999px"

Design System: Ghost

Overview

Ghost's design system is "The Professional Publisher." It is a minimalist, focused environment designed to help creators write and manage their newsletters and publications with absolute clarity.

Design Philosophy

Editorial Focus: The UI is a canvas for content. It uses high-quality serifs and generous whitespace to create a premium reading experience.
Minimalist Management: The dashboard is intentionally "clean," hiding complex features behind simple icons and intuitive menus.
The "Ghost" Signature: Uses a vibrant pink (#FF1A75) as a single point of energy against a monochrome, "Woodsmoke" foundation.
Performance Infrastructure: Designed for speed, with zero-latency loading and a lightweight UI that stays out of the creator's way.

Colors

Ghost Pink (#FF1A75): The signature brand color, used for primary actions and brand presence.
Woodsmoke (#121217): A deep, ink-like black used for primary text and dark UI elements.
Casper Purple (#820AD1): Used as a secondary accent in newer themes to add a layer of sophistication.

Typography

Source Serif Pro: Used for the core reading experience to provide a literary, high-quality feel.
Inter (UI): Handles the dashboard and management interface with high legibility and a neutral tone.

Components

The Editor View: A full-screen, distraction-free writing environment with minimal UI chrome.
Publication Cards: Clean, white units with large headlines and simple subscriber metrics.
The Sidebar: A minimalist, dark-grey column that uses high-contrast icons for navigation.

Visual Effects

Typography-first Depth: Relies on font scales and weights to create hierarchy rather than heavy borders or shadows.
Subtle Overlays: Uses light-grey background shifts for hover states in the post list.
Fast Content Fades: Uses smooth opacity transitions for loading articles and changing views.

Usage

Copy DESIGN.md into your project or paste it into your IDE agent chat.
Ask your assistant to follow the tokens for color, typography, spacing, and component styling.
When collaborating, share the file directly—or tap “Copy page link” below so teammates open the same snapshot.

Common questions

What is Ghost on explainx.ai?: Ghost's design system is "The Professional Publisher." It is a minimalist, focused environment designed to help creators write and manage their newsletters and publications with absolute clarity. Listed under category “Design System”. explainx.ai mirrors the full DESIGN.md document so assistants can cite stable tokens and prose in one place.
What is DESIGN.md?: DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).
How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?: Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.
Where is the source repo?: Maintainers link to github.com/whyashthakker/design-md-templates-skills. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.
How current is this DESIGN.md?: Explainx snapshots the file at import time. Recorded last update on this listing: May 8, 2026.
Need a fresh DESIGN.md from scratch?: Use the explainx.ai DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.

Still exploring the format? Browse the full DESIGN.md registry or draft a new system with our DESIGN.md generator.

Community listing for AI design workflows—not necessarily affiliated with any brand referenced in the name or summary. For context on the format, see Google Stitch.

Reference →DESIGN.md generator →Skills registry →

List Your Design.md

Share your design system with AI agents worldwide

Get started →