editorialv1.0.0·light

Vellum

Vellum — Warm Editorial Reading

editorialwarmserifreadingcalm

35 tokens

primarysecondarybaseraisedprimarydefaultsuccessdanger

Fork & edit

Live preview

vellum · rendered from tokens

Color

brand.primary

oklch(0.50 0.13 42)

brand.secondary

oklch(0.46 0.08 150)

brand.onBrand

oklch(0.99 0.01 80)

text.primary

oklch(0.25 0.02 60)

text.muted

oklch(0.46 0.02 60)

text.link

oklch(0.50 0.13 42)

surface.base

oklch(0.99 0.008 80)

surface.raised

oklch(0.97 0.012 80)

border.default

oklch(0.90 0.012 80)

state.success

oklch(0.48 0.13 150)

state.danger

oklch(0.50 0.19 28)

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 Vellum into your workflow.

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

CCClaude Code

CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor

.cursor/rules/vellum.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

Literary, unhurried, and warm. Vellum is built for long-form reading: the page feels like quality paper, the type invites you in, and color is used sparingly to mark voice rather than decorate.

Layout & Grid

A single 680px measure for body text on a warm canvas. Wide margins, drop caps optional, and a clear vertical rhythm anchored to the 1.7 line height.

Components

Links

Inline links use color.brand.primary with a subtle underline that thickens on hover. Pull quotes borrow color.brand.secondary.

Accessibility

Body text exceeds 4.5:1 on the warm surface. Reading width and line height are tuned for comfort, not density.

Do & Don't

Let the type breathe — favor whitespace over density.
Reserve color for emphasis and voice.
Don't introduce cool greys that fight the warm paper tone.

Tokens

Color (11)

Tokens

breakpoint

iconography

motion

radius

shadow

spacing

typography

Export

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

design.md93 lines

1---

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

3id: vellum

4name: Vellum

5title: Vellum — Warm Editorial Reading

6version: 1.0.0

7category: editorial

8tags: [editorial, warm, serif, reading, calm]

9author: designmd

10license: CC-BY-4.0

11updatedAt: 2026-06-19

12colorMode: [light]

13tokens:

14 color:

15 brand:

16 primary: { value: "oklch(0.50 0.13 42)", type: color }

17 secondary: { value: "oklch(0.46 0.08 150)", type: color }

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

19 text:

20 primary: { value: "oklch(0.25 0.02 60)", type: color }

21 muted: { value: "oklch(0.46 0.02 60)", type: color }

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

23 surface:

24 base: { value: "oklch(0.99 0.008 80)", type: color }

25 raised: { value: "oklch(0.97 0.012 80)", type: color }

26 border:

27 default: { value: "oklch(0.90 0.012 80)", type: color }

28 state:

29 success: { value: "oklch(0.48 0.13 150)", type: color }

30 danger: { value: "oklch(0.50 0.19 28)", type: color }

31 typography:

32 family:

33 sans: { value: "Newsreader, Georgia, serif", type: fontFamily }

34 mono: { value: "iA Writer Mono, ui-monospace, monospace", type: fontFamily }

35 scale:

36 sm: { value: "0.9rem", type: dimension }

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

38 lg: { value: "1.375rem", type: dimension }

39 xl: { value: "1.75rem", type: dimension }

40 "2xl": { value: "2.5rem", type: dimension }

41 "3xl": { value: "3.5rem", type: dimension }

42 weight:

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

44 medium: { value: 500, type: fontWeight }

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

46 leading:

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

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

49 spacing:

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

51 radius:

52 sm: { value: "0.25rem", type: dimension }

53 md: { value: "0.375rem", type: dimension }

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

55 shadow:

56 sm: { value: "0 1px 2px oklch(0 0 0 / 0.05)", type: shadow }

57 md: { value: "0 8px 24px oklch(0 0 0 / 0.07)", type: shadow }

58 motion:

59 duration:

60 base: { value: "300ms", type: duration }

61 easing:

62 standard: { value: "cubic-bezier(0.33, 0, 0.2, 1)", type: cubicBezier }

63 breakpoint:

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

65 lg: { value: "1024px", type: dimension }

66 iconography:

67 style: { value: "thin 1.25px line icons, slightly humanist", type: descriptor }

68---

70# Vellum Design System

72## Brand & Voice

73Literary, unhurried, and warm. Vellum is built for long-form reading: the page

74feels like quality paper, the type invites you in, and color is used sparingly

75to mark voice rather than decorate.

77## Layout & Grid

78A single 680px measure for body text on a warm canvas. Wide margins, drop caps

79optional, and a clear vertical rhythm anchored to the 1.7 line height.

81## Components

82### Links

83Inline links use `color.brand.primary` with a subtle underline that thickens on

84hover. Pull quotes borrow `color.brand.secondary`.

86## Accessibility

87Body text exceeds 4.5:1 on the warm surface. Reading width and line height are

88tuned for comfort, not density.

90## Do & Don't

91- Let the type breathe — favor whitespace over density.

92- Reserve color for emphasis and voice.

93- Don't introduce cool greys that fight the warm paper tone.

Related systems

View →

Button

Almanac

98AA

Almanac — Vintage Reference Editorial

editorialeditorialvintage

View →

Button

Broadsheet

98AAA

Broadsheet — Newspaper Editorial

editorialeditorialserif

View →

Button

Dispatch

98AAA

Dispatch — Newsletter & Blog

editorialeditorialblog