minimalv1.0.0·light

Linen

Linen — Warm Minimal

minimalwarmbeigeterracottacalm

39 tokens

primarysecondarybaseraisedprimarydefaultsuccessdanger

Fork & edit

Live preview

linen · rendered from tokens

Color

brand.primary

oklch(0.52 0.1 45)

brand.secondary

oklch(0.5 0.06 150)

brand.onBrand

oklch(0.99 0.005 80)

text.primary

oklch(0.27 0.012 70)

text.muted

oklch(0.48 0.016 70)

text.link

oklch(0.52 0.1 45)

surface.base

oklch(0.965 0.012 80)

surface.raised

oklch(0.99 0.006 80)

surface.sunken

oklch(0.945 0.016 80)

border.default

oklch(0.88 0.014 80)

state.success

oklch(0.52 0.13 150)

state.danger

oklch(0.54 0.19 25)

state.warning

oklch(0.64 0.13 70)

state.info

oklch(0.54 0.11 240)

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

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

CCClaude Code

CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor

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

Linen is minimalism that feels lived-in. Warm beige surfaces, a muted terracotta, and a calm serif make a system that's restful rather than clinical. Quiet, tactile, and human.

Layout & Grid

Generous margins and a single warm column. Terracotta marks links and the rare accent; sage handles success. Texture comes from the off-white paper, not chrome.

Components

Buttons

Softly rounded radius.md buttons in muted terracotta with light onBrand text. Secondary actions are warm bordered outlines.

Cards

Cards sit a half-step above the warm base on color.surface.raised, divided 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, links are underlined, and focus rings stay 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: linen

4name: Linen

5title: Linen — Warm Minimal

6version: 1.0.0

7category: minimal

8tags: [minimal, warm, beige, terracotta, calm]

9author: designmd

10license: CC-BY-4.0

11updatedAt: 2026-06-22

12colorMode: [light]

13tokens:

14 color:

15 brand:

16 primary: { value: "oklch(0.52 0.1 45)", type: color }

17 secondary: { value: "oklch(0.5 0.06 150)", type: color }

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

19 text:

20 primary: { value: "oklch(0.27 0.012 70)", type: color }

21 muted: { value: "oklch(0.48 0.016 70)", type: color }

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

23 surface:

24 base: { value: "oklch(0.965 0.012 80)", type: color }

25 raised: { value: "oklch(0.99 0.006 80)", type: color }

26 sunken: { value: "oklch(0.945 0.016 80)", type: color }

27 border:

28 default: { value: "oklch(0.88 0.014 80)", 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.64 0.13 70)", type: color }

33 info: { value: "oklch(0.54 0.11 240)", 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.15rem", type: dimension }

45 "3xl": { value: "2.85rem", 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.65, 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.27 0.01 70 / 0.05)", type: shadow }

60 md: { value: "0 6px 18px oklch(0.27 0.01 70 / 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, warm", type: descriptor }

70 zIndex:

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

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

73---

75# Linen Design System

77## Brand & Voice

78Linen is minimalism that feels lived-in. Warm beige surfaces, a muted

79terracotta, and a calm serif make a system that's restful rather than clinical.

80Quiet, tactile, and human.

82## Layout & Grid

83Generous margins and a single warm column. Terracotta marks links and the rare

84accent; sage handles success. Texture comes from the off-white paper, not chrome.

86## Components

87### Buttons

88Softly rounded `radius.md` buttons in muted terracotta with light `onBrand` text.

89Secondary actions are warm bordered outlines.

91### Cards

92Cards sit a half-step above the warm base on `color.surface.raised`, divided 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, links are underlined, and focus rings stay visible.

Related systems

View →

Button

Paper

98AA

Paper — Warm Quiet Minimal

minimalminimalwarm

View →

Button

Gridline

98AAA

Gridline — Swiss International

minimalminimalswiss

View →

Button

Mono

98AAA

Mono — Pure Grayscale Minimal

minimalminimalgrayscale