minimalv1.0.0·light

Gridline

Gridline — Swiss International

minimalswissgridredtypographic

AAA

38 tokens

primarysecondarybaseraisedprimarydefaultsuccessdanger

Fork & edit

Live preview

gridline · rendered from tokens

Color

brand.primary

oklch(0.55 0.22 27)

brand.secondary

oklch(0.22 0.004 270)

brand.onBrand

oklch(0.99 0 0)

text.primary

oklch(0.18 0.003 270)

text.muted

oklch(0.44 0.005 270)

text.link

oklch(0.55 0.22 27)

surface.base

oklch(0.99 0.001 270)

surface.raised

oklch(1 0 0)

surface.sunken

oklch(0.96 0.002 270)

border.default

oklch(0.86 0.004 270)

state.success

oklch(0.55 0.14 150)

state.danger

oklch(0.55 0.22 27)

state.warning

oklch(0.68 0.14 70)

state.info

oklch(0.55 0.13 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 Gridline into your workflow.

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

CCClaude Code

CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor

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

Gridline is Swiss to the bone: Helvetica, a strict grid, a single decisive red. Objective, legible, and timeless. Communication over ornament — the layout is the design.

Layout & Grid

A rigorous 12-column grid with a perfect-fourth type scale and flush-left alignment. Red appears only at the most important moment on any screen.

Components

Buttons

Square, flat buttons — red primary or black color.brand.secondary. No shadow, no rounding, just type and a tight box.

Tables & Lists

Hairline rules and exact alignment. Numerals are tabular; hierarchy is purely typographic weight and size.

Accessibility

Objective contrast: primary and muted text pass WCAG AA across surfaces. Links are underlined, the red is reserved for emphasis, and focus rings stay sharp.

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.md96 lines

1---

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

3id: gridline

4name: Gridline

5title: Gridline — Swiss International

6version: 1.0.0

7category: minimal

8tags: [minimal, swiss, grid, red, typographic]

9author: designmd

10license: CC-BY-4.0

11updatedAt: 2026-06-22

12colorMode: [light]

13tokens:

14 color:

15 brand:

16 primary: { value: "oklch(0.55 0.22 27)", type: color }

17 secondary: { value: "oklch(0.22 0.004 270)", type: color }

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

19 text:

20 primary: { value: "oklch(0.18 0.003 270)", type: color }

21 muted: { value: "oklch(0.44 0.005 270)", type: color }

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

23 surface:

24 base: { value: "oklch(0.99 0.001 270)", type: color }

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

26 sunken: { value: "oklch(0.96 0.002 270)", type: color }

27 border:

28 default: { value: "oklch(0.86 0.004 270)", type: color }

29 state:

30 success: { value: "oklch(0.55 0.14 150)", type: color }

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

32 warning: { value: "oklch(0.68 0.14 70)", type: color }

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

34 typography:

35 family:

36 sans: { value: "Helvetica Neue, Helvetica, Arial, sans-serif", type: fontFamily }

37 mono: { value: "ui-monospace, monospace", type: fontFamily }

38 scale:

39 sm: { value: "0.875rem", type: dimension }

40 base: { value: "1rem", type: dimension }

41 lg: { value: "1.3333rem", type: dimension }

42 xl: { value: "1.7778rem", type: dimension }

43 "2xl": { value: "2.3704rem", type: dimension }

44 "3xl": { value: "3.1605rem", type: dimension }

45 weight:

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

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

48 leading:

49 tight: { value: 1.1, type: number }

50 normal: { value: 1.5, type: number }

51 spacing:

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

53 radius:

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

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

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

57 shadow:

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

59 md: { value: "0 4px 12px oklch(0.18 0 0 / 0.08)", type: shadow }

60 motion:

61 duration:

62 base: { value: "140ms", type: duration }

63 easing:

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

65 breakpoint:

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

67 iconography:

68 style: { value: "geometric 1.5px, grid-aligned", type: descriptor }

69 zIndex:

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

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

72---

74# Gridline Design System

76## Brand & Voice

77Gridline is Swiss to the bone: Helvetica, a strict grid, a single decisive red.

78Objective, legible, and timeless. Communication over ornament — the layout is

79the design.

81## Layout & Grid

82A rigorous 12-column grid with a perfect-fourth type scale and flush-left

83alignment. Red appears only at the most important moment on any screen.

85## Components

86### Buttons

87Square, flat buttons — red primary or black `color.brand.secondary`. No shadow,

88no rounding, just type and a tight box.

90### Tables & Lists

91Hairline rules and exact alignment. Numerals are tabular; hierarchy is purely

92typographic weight and size.

94## Accessibility

95Objective contrast: primary and muted text pass WCAG AA across surfaces. Links

96are underlined, the red is reserved for emphasis, and focus rings stay sharp.

Related systems

View →

Button

Mono

98AAA

Mono — Pure Grayscale Minimal

minimalminimalgrayscale

View →

Button

Linen

Linen — Warm Minimal

Paper

98AA

Paper — Warm Quiet Minimal

minimalminimalwarm