editorialv1.0.0·light

Broadsheet

Broadsheet — Newspaper Editorial

editorialserifnewsprinthigh-contrast

AAA

39 tokens

primarysecondarybaseraisedprimarydefaultsuccessdanger

Fork & edit

Live preview

broadsheet · rendered from tokens

Color

brand.primary

oklch(0.52 0.2 25)

brand.secondary

oklch(0.4 0.04 250)

brand.onBrand

oklch(0.99 0 0)

text.primary

oklch(0.18 0.004 60)

text.muted

oklch(0.42 0.008 60)

text.link

oklch(0.52 0.2 25)

surface.base

oklch(0.985 0.006 80)

surface.raised

oklch(1 0 0)

surface.sunken

oklch(0.955 0.01 80)

border.default

oklch(0.84 0.008 80)

state.success

oklch(0.5 0.13 150)

state.danger

oklch(0.52 0.2 25)

state.warning

oklch(0.64 0.13 70)

state.info

oklch(0.5 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 Broadsheet into your workflow.

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

CCClaude Code

CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor

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

Broadsheet carries the authority of print: a tall serif for headlines, a clean humanist sans for body, and a single editorial red for emphasis. Rules and column breaks do the structuring — no rounded corners, no soft shadows.

Layout & Grid

Multi-column reading with strong vertical rhythm and hairline rules between sections. Headlines dominate; bylines and kickers recede in muted text.

Components

Buttons

Squared, text-forward buttons. Primary uses the editorial red; everything else is a bordered, typographic affordance.

Article Cards

Headline-led cards divided by border.default rules, with a kicker, dek, and byline. Hover underlines the headline.

Accessibility

Body text is large and high-contrast; primary and muted text pass WCAG AA on all surfaces. Reading width is capped for comfort and links are always underlined.

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

4name: Broadsheet

5title: Broadsheet — Newspaper Editorial

6version: 1.0.0

7category: editorial

8tags: [editorial, serif, news, print, high-contrast]

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.2 25)", type: color }

17 secondary: { value: "oklch(0.4 0.04 250)", type: color }

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

19 text:

20 primary: { value: "oklch(0.18 0.004 60)", type: color }

21 muted: { value: "oklch(0.42 0.008 60)", type: color }

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

23 surface:

24 base: { value: "oklch(0.985 0.006 80)", type: color }

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

26 sunken: { value: "oklch(0.955 0.01 80)", type: color }

27 border:

28 default: { value: "oklch(0.84 0.008 80)", type: color }

29 state:

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

31 danger: { value: "{color.brand.primary}", type: color }

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

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

34 typography:

35 family:

36 serif: { value: "Playfair Display, Georgia, serif", type: fontFamily }

37 sans: { value: "Source Sans 3, 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.375rem", type: dimension }

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

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

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

46 weight:

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

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

49 leading:

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

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

52 spacing:

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

54 radius:

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

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

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

58 shadow:

59 sm: { value: "0 1px 0 oklch(0.84 0.008 80)", type: shadow }

60 md: { value: "0 2px 0 oklch(0.84 0.008 80)", type: shadow }

61 motion:

62 duration:

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

64 easing:

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

66 breakpoint:

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

68 iconography:

69 style: { value: "thin editorial line icons, 1.25px", type: descriptor }

70 zIndex:

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

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

73---

75# Broadsheet Design System

77## Brand & Voice

78Broadsheet carries the authority of print: a tall serif for headlines, a clean

79humanist sans for body, and a single editorial red for emphasis. Rules and

80column breaks do the structuring — no rounded corners, no soft shadows.

82## Layout & Grid

83Multi-column reading with strong vertical rhythm and hairline rules between

84sections. Headlines dominate; bylines and kickers recede in muted text.

86## Components

87### Buttons

88Squared, text-forward buttons. Primary uses the editorial red; everything else

89is a bordered, typographic affordance.

91### Article Cards

92Headline-led cards divided by `border.default` rules, with a kicker, dek, and

93byline. Hover underlines the headline.

95## Accessibility

96Body text is large and high-contrast; primary and muted text pass WCAG AA on all

97surfaces. Reading width is capped for comfort and links are always underlined.

Related systems

View →

Button

Almanac

98AA

Almanac — Vintage Reference Editorial

editorialeditorialvintage

View →

Button

Folio

98AAA

Folio — Magazine Editorial

editorialeditorialmagazine

View →

Button

Vellum

95AA

Vellum — Warm Editorial Reading

editorialeditorialwarm