minimalv1.0.0·light

Paper

Paper — Warm Quiet Minimal

minimalwarmsagecalmreading

39 tokens

primarysecondarybaseraisedprimarydefaultsuccessdanger

Fork & edit

Live preview

paper · rendered from tokens

Color

brand.primary

oklch(0.5 0.07 155)

brand.secondary

oklch(0.58 0.06 80)

brand.onBrand

oklch(0.99 0 0)

text.primary

oklch(0.26 0.012 80)

text.muted

oklch(0.47 0.016 80)

text.link

oklch(0.5 0.07 155)

surface.base

oklch(0.975 0.01 85)

surface.raised

oklch(0.992 0.005 85)

surface.sunken

oklch(0.95 0.014 85)

border.default

oklch(0.89 0.012 85)

state.success

oklch(0.52 0.13 150)

state.danger

oklch(0.54 0.19 25)

state.warning

oklch(0.66 0.13 70)

state.info

oklch(0.55 0.12 250)

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

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

CCClaude Code

CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor

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

Paper feels like a well-made notebook: warm off-white surfaces, a calm sage accent, and a serif made for long reading. The tone is gentle and unhurried, designed to lower the temperature of a busy screen.

Layout & Grid

Single, comfortable reading column with deep line-height and soft section breaks. Sage appears at links and quiet accents; nothing competes with the text.

Components

Buttons

Softly rounded radius.md buttons in muted sage with a barely-there shadow.sm. Secondary actions are bordered and warm.

Notes & Cards

Cards sit on color.surface.raised a half-step above the warm base, separated by soft borders rather than strong shadow.

Accessibility

Warm but legible: primary and muted text pass WCAG AA on every surface. Reading measure is capped, the serif is large, and links carry an underline.

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: paper

4name: Paper

5title: Paper — Warm Quiet Minimal

6version: 1.0.0

7category: minimal

8tags: [minimal, warm, sage, calm, 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.07 155)", type: color }

17 secondary: { value: "oklch(0.58 0.06 80)", type: color }

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

19 text:

20 primary: { value: "oklch(0.26 0.012 80)", type: color }

21 muted: { value: "oklch(0.47 0.016 80)", type: color }

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

23 surface:

24 base: { value: "oklch(0.975 0.01 85)", type: color }

25 raised: { value: "oklch(0.992 0.005 85)", type: color }

26 sunken: { value: "oklch(0.95 0.014 85)", type: color }

27 border:

28 default: { value: "oklch(0.89 0.012 85)", type: color }

29 state:

30 success: { value: "oklch(0.52 0.13 150)", type: color }

31 danger: { value: "oklch(0.54 0.19 25)", type: color }

32 warning: { value: "oklch(0.66 0.13 70)", type: color }

33 info: { value: "oklch(0.55 0.12 250)", type: color }

34 typography:

35 family:

36 serif: { value: "Newsreader, 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.875rem", type: dimension }

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

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

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

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

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

46 weight:

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

48 bold: { value: 600, 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.625rem", type: dimension }

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

58 shadow:

59 sm: { value: "0 1px 2px oklch(0.26 0.01 80 / 0.05)", type: shadow }

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

61 motion:

62 duration:

63 base: { value: "220ms", 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, soft rounded joins", type: descriptor }

70 zIndex:

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

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

73---

75# Paper Design System

77## Brand & Voice

78Paper feels like a well-made notebook: warm off-white surfaces, a calm sage

79accent, and a serif made for long reading. The tone is gentle and unhurried,

80designed to lower the temperature of a busy screen.

82## Layout & Grid

83Single, comfortable reading column with deep line-height and soft section

84breaks. Sage appears at links and quiet accents; nothing competes with the text.

86## Components

87### Buttons

88Softly rounded `radius.md` buttons in muted sage with a barely-there `shadow.sm`.

89Secondary actions are bordered and warm.

91### Notes & Cards

92Cards sit on `color.surface.raised` a half-step above the warm base, separated by

93soft borders rather than strong shadow.

95## Accessibility

96Warm but legible: primary and muted text pass WCAG AA on every surface. Reading

97measure is capped, the serif is large, and links carry an underline.

Related systems

View →

Button

Linen

Linen — Warm Minimal

Gridline

98AAA

Gridline — Swiss International

minimalminimalswiss

View →

Button

Mono

98AAA

Mono — Pure Grayscale Minimal

minimalminimalgrayscale