editorialv1.0.0·light

Dispatch

Dispatch — Newsletter & Blog

editorialblognewsletterbluereading

AAA

39 tokens

primarysecondarybaseraisedprimarydefaultsuccessdanger

Fork & edit

Live preview

dispatch · rendered from tokens

Color

brand.primary

oklch(0.5 0.16 255)

brand.secondary

oklch(0.55 0.13 200)

brand.onBrand

oklch(0.99 0 0)

text.primary

oklch(0.2 0.008 255)

text.muted

oklch(0.44 0.012 255)

text.link

oklch(0.5 0.16 255)

surface.base

oklch(0.99 0.002 255)

surface.raised

oklch(1 0 0)

surface.sunken

oklch(0.96 0.004 255)

border.default

oklch(0.89 0.006 255)

state.success

oklch(0.55 0.14 150)

state.danger

oklch(0.55 0.2 25)

state.warning

oklch(0.68 0.14 70)

state.info

oklch(0.55 0.13 245)

Typography

3xlThe quick brown fox

2xlThe quick brown fox

xlThe quick brown fox

lgThe quick brown fox

baseThe quick brown fox

smThe quick brown fox

Components

Buttons

Inputs

Fintech

Selection

Notifications

AutoManual

Feedback

successdangerwarninginfo

Tokens validatedAll contrast checks pass WCAG AA.

Data

AMRKJD+5

2,847+12%

Storage64%

Navigation

OverviewTokensActivity

Home/Library/Item

123

Cards

Confetti

A bright, joyful design language with playful motion.

Pro

$12/ mo

Unlimited exports

Private systems

Priority support

Aria Moss

Owner

success

Ravi Kohli

Editor

info

Lena Park

Viewer

warning

Radius, shadow & spacing

full

Use this system

Three ways to drop Dispatch into your workflow.

Save the file for your tool — your agent then generates UI in Dispatch, automatically.

CCClaude Code

CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor

.cursor/rules/dispatch.mdc

Project rule — applied to every generation.

WsWindsurf

.windsurfrules

Repo root — Cascade reads it automatically.

GCGitHub Copilot

.github/copilot-instructions.md

Repo-wide custom instructions for Copilot.

The system

Brand & Voice

Dispatch is made for words. A readable serif body, a clear blue for links and calls to subscribe, and surfaces that get out of the way. The tone is personal and considered — a newsletter you actually open.

Layout & Grid

One generous reading column with deep line-height and clear section breaks. Inline subscribe prompts use the brand blue; everything else stays text-first.

Components

Buttons

Subscribe and share buttons in color.brand.primary at radius.md. Inline links are underlined and unmistakable.

Post Cards

Title, dek, and reading-time on color.surface.raised, divided by soft borders; hover lifts with a faint shadow.md.

Accessibility

Large, high-contrast reading: primary and muted text pass WCAG AA on every surface. Measure is capped for comfort and focus rings are always visible.

Tokens

Color (14)

Tokens

breakpoint

iconography

motion

radius

shadow

spacing

typography

zIndex

Export

One source of truth, five formats — copy or download any of them.

design.md97 lines

1---

2$schema: https://designmd.in/schema/v1.json

3id: dispatch

4name: Dispatch

5title: Dispatch — Newsletter & Blog

6version: 1.0.0

7category: editorial

8tags: [editorial, blog, newsletter, blue, reading]

9author: designmd

10license: CC-BY-4.0

11updatedAt: 2026-06-22

12colorMode: [light]

13tokens:

14 color:

15 brand:

16 primary: { value: "oklch(0.5 0.16 255)", type: color }

17 secondary: { value: "oklch(0.55 0.13 200)", type: color }

18 onBrand: { value: "oklch(0.99 0 0)", type: color }

19 text:

20 primary: { value: "oklch(0.2 0.008 255)", type: color }

21 muted: { value: "oklch(0.44 0.012 255)", type: color }

22 link: { value: "{color.brand.primary}", type: color }

23 surface:

24 base: { value: "oklch(0.99 0.002 255)", type: color }

25 raised: { value: "oklch(1 0 0)", type: color }

26 sunken: { value: "oklch(0.96 0.004 255)", type: color }

27 border:

28 default: { value: "oklch(0.89 0.006 255)", type: color }

29 state:

30 success: { value: "oklch(0.55 0.14 150)", type: color }

31 danger: { value: "oklch(0.55 0.2 25)", type: color }

32 warning: { value: "oklch(0.68 0.14 70)", type: color }

33 info: { value: "oklch(0.55 0.13 245)", type: color }

34 typography:

35 family:

36 serif: { value: "Source Serif 4, Georgia, serif", type: fontFamily }

37 sans: { value: "Inter, system-ui, sans-serif", type: fontFamily }

38 mono: { value: "ui-monospace, monospace", type: fontFamily }

39 scale:

40 sm: { value: "0.9375rem", type: dimension }

41 base: { value: "1.125rem", type: dimension }

42 lg: { value: "1.4rem", type: dimension }

43 xl: { value: "1.8rem", type: dimension }

44 "2xl": { value: "2.4rem", type: dimension }

45 "3xl": { value: "3.2rem", type: dimension }

46 weight:

47 regular: { value: 400, type: fontWeight }

48 bold: { value: 700, type: fontWeight }

49 leading:

50 tight: { value: 1.2, type: number }

51 normal: { value: 1.7, type: number }

52 spacing:

53 base: { value: "0.25rem", type: dimension }

54 radius:

55 sm: { value: "0.375rem", type: dimension }

56 md: { value: "0.5rem", type: dimension }

57 full: { value: "9999px", type: dimension }

58 shadow:

59 sm: { value: "0 1px 2px oklch(0.2 0.01 255 / 0.06)", type: shadow }

60 md: { value: "0 6px 18px oklch(0.2 0.01 255 / 0.08)", type: shadow }

61 motion:

62 duration:

63 base: { value: "180ms", type: duration }

64 easing:

65 standard: { value: "cubic-bezier(0.25, 0, 0.15, 1)", type: cubicBezier }

66 breakpoint:

67 md: { value: "768px", type: dimension }

68 iconography:

69 style: { value: "1.5px stroke, simple, readable", type: descriptor }

70 zIndex:

71 dropdown: { value: 1000, type: number }

72 modal: { value: 1300, type: number }

73---

75# Dispatch Design System

77## Brand & Voice

78Dispatch is made for words. A readable serif body, a clear blue for links and

79calls to subscribe, and surfaces that get out of the way. The tone is personal

80and considered — a newsletter you actually open.

82## Layout & Grid

83One generous reading column with deep line-height and clear section breaks.

84Inline subscribe prompts use the brand blue; everything else stays text-first.

86## Components

87### Buttons

88Subscribe and share buttons in `color.brand.primary` at `radius.md`. Inline links

89are underlined and unmistakable.

91### Post Cards

92Title, dek, and reading-time on `color.surface.raised`, divided by soft borders;

93hover lifts with a faint `shadow.md`.

95## Accessibility

96Large, high-contrast reading: primary and muted text pass WCAG AA on every

97surface. Measure is capped for comfort and focus rings are always visible.

Related systems

View →

Button

Vellum

95AA

Vellum — Warm Editorial Reading

editorialeditorialwarm

View →

Button

Almanac

98AA

Almanac — Vintage Reference Editorial

editorialeditorialvintage

View →

Button

Broadsheet

98AAA

Broadsheet — Newspaper Editorial

editorialeditorialserif