Design.dev design.dev
Style Pack

Swiss Editorial Style Pack for AI Agents

International Typographic Style as a constraint set for Claude, Cursor, and any coding agent. One grotesque, a 12-column grid, one red.

Install → Prompt → Ship

Live Preview

Same fixture · Every pack

Every pack renders this exact markup. Only the constraints change.

The Pack

Download
Loading…

Prompt overlay

Paste above any component prompt.

Claude Code · Codex · Cursor

.claude/skills/swiss-editorial/ .agents/skills/swiss-editorial/

SKILL.md plus references/tokens.md and references/components.md.

Cursor rule

.cursor/rules/swiss-editorial.mdc

Any agent

./DESIGN.md

Link it from AGENTS.md.

Tokens

Color
signal
Once per view, on the primary button
hair
Ink at 25% for rows and dividers
Type
family
Helvetica Neue / Arial, weights 400 and 700
display
44 to 80px · 700 · sentence case · -0.045em
body
16 / 24 · max 62ch
label
11px · 700 · uppercase · 0.14em
Grid
columns
12 · 24px gutter
marginalia
1 to 3: kicker, byline, captions
measure
4 to 12: headline, body, table
spacing
8 · 16 · 24 · 48 · 72
Rules & motion
rules
hairline · 1px ink · 2px ink
radius
0
motion
120ms linear, hover color only

Component Rules

01

Masthead

Brand, dateline, and nav on one line of the grid. A 1px ink rule, then 72px of air.

02

Heading / dek

Kicker on columns 1 to 3. Headline on 4 to 12: bold, sentence case, tight, at least 44px.

03

Pull quote

A statement, not a quotation. Rule across the grid, then bold type on 4 to 12. No red bar.

04

Button

Primary is the view's one red. Ghost is a 1px ink outline. Hover inverts.

05

Input

A 1px ink baseline, no box. Focus thickens it to 2px. No glow.

06

Index

Three ruled columns, hairlines between, no fill. Number, title, summary.

07

Table

Title on 1 to 3, table on 4 to 12. Heads on 1px ink, hairline rows, figures right-aligned.

08

Tabs / alert

Selected tab is a 2px ink rule. Alert is a 2px rule and a kicker. Never a pill.

Anti-Drift

Always

  • One grotesque, weights 400 and 700 only
  • Flush left, ragged right, on a 12-column grid
  • Marginalia on columns 1 to 3, content on 4 to 12
  • Signal red once per view, on the primary button
  • Radius 0; rules are hairline, 1px, or 2px ink

Never

  • A second red, or a centered headline
  • Uppercase headlines, Inter, or a 500 weight
  • Boxed inputs, card tiles, rounded corners
  • Pill badges, status chips, tinted selected rows
  • Shadow, glass, blur, gradient
Copied to clipboard