portfoliov1.0.0·light

Gallery

Gallery — Quiet Monochrome Portfolio

portfoliomonochromeminimalgalleryrestrained

AAA

38 tokens

primarysecondarybaseraisedprimarydefaultsuccessdanger

Fork & edit

Live preview

gallery · rendered from tokens

Color

brand.primary

oklch(0.3 0.008 270)

brand.secondary

oklch(0.5 0.01 270)

brand.onBrand

oklch(0.99 0 0)

text.primary

oklch(0.2 0.004 270)

text.muted

oklch(0.45 0.006 270)

text.link

oklch(0.3 0.008 270)

surface.base

oklch(0.985 0.001 270)

surface.raised

oklch(1 0 0)

surface.sunken

oklch(0.965 0.002 270)

border.default

oklch(0.88 0.003 270)

state.success

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

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

CCClaude Code

CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor

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

Gallery gets out of the way. Near-monochrome, square-cornered, and silent — the work hangs on white walls. Restraint is the statement: no accent color, just careful spacing and impeccable type.

Layout & Grid

A strict modular grid with consistent gutters. Images set the rhythm; captions are small, muted, and aligned. Negative space is a deliberate material.

Components

Buttons

Text and hairline-bordered buttons only. Hover shifts to color.brand.primary with no rounding and no shadow.

Image Grid

Edge-aligned thumbnails that fade in; the lightbox uses shadow.md and muted chrome so the image dominates.

Accessibility

High-contrast monochrome means primary and muted text comfortably pass WCAG AA. State colors appear only with labels, and focus outlines remain crisp.

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

4name: Gallery

5title: Gallery — Quiet Monochrome Portfolio

6version: 1.0.0

7category: portfolio

8tags: [portfolio, monochrome, minimal, gallery, restrained]

9author: designmd

10license: CC-BY-4.0

11updatedAt: 2026-06-22

12colorMode: [light]

13tokens:

14 color:

15 brand:

16 primary: { value: "oklch(0.3 0.008 270)", type: color }

17 secondary: { value: "oklch(0.5 0.01 270)", type: color }

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

19 text:

20 primary: { value: "oklch(0.2 0.004 270)", type: color }

21 muted: { value: "oklch(0.45 0.006 270)", type: color }

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

23 surface:

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

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

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

27 border:

28 default: { value: "oklch(0.88 0.003 270)", type: color }

29 state:

30 success: { value: "oklch(0.55 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 sans: { value: "Neue Haas Grotesk, Helvetica, Arial, sans-serif", type: fontFamily }

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

38 scale:

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

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

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

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

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

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

45 weight:

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

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

48 leading:

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

50 normal: { value: 1.55, 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.2 0 0 / 0.05)", type: shadow }

59 md: { value: "0 8px 24px oklch(0.2 0 0 / 0.08)", type: shadow }

60 motion:

61 duration:

62 base: { value: "200ms", 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: "1px hairline icons, minimal", type: descriptor }

69 zIndex:

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

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

72---

74# Gallery Design System

76## Brand & Voice

77Gallery gets out of the way. Near-monochrome, square-cornered, and silent — the

78work hangs on white walls. Restraint is the statement: no accent color, just

79careful spacing and impeccable type.

81## Layout & Grid

82A strict modular grid with consistent gutters. Images set the rhythm; captions

83are small, muted, and aligned. Negative space is a deliberate material.

85## Components

86### Buttons

87Text and hairline-bordered buttons only. Hover shifts to `color.brand.primary`

88with no rounding and no shadow.

90### Image Grid

91Edge-aligned thumbnails that fade in; the lightbox uses `shadow.md` and muted

92chrome so the image dominates.

94## Accessibility

95High-contrast monochrome means primary and muted text comfortably pass WCAG AA.

96State colors appear only with labels, and focus outlines remain crisp.

Related systems

View →

Button

Index

98AAA

Index — Typographic Portfolio

portfolioportfoliotypographic

View →

Button

Atelier

98AAA

Atelier — Expressive Portfolio

portfolioportfolioexpressive

View →

Button

Mono

98AAA

Mono — Pure Grayscale Minimal

minimalminimalgrayscale