Files
AGENTS/.pi/gsd/templates/UI-SPEC.md
2026-04-24 20:00:33 +02:00

2.9 KiB

phase, slug, status, shadcn_initialized, preset, created
phase slug status shadcn_initialized preset created
N
phase-slug
draft false none
date

Phase {N} - UI Design Contract

Visual and interaction contract for frontend phases. Generated by gsd-ui-researcher, verified by gsd-ui-checker.


Design System

Property Value
Tool {shadcn / none}
Preset {preset string or "not applicable"}
Component library {radix / base-ui / none}
Icon library {library}
Font {font}

Spacing Scale

Declared values (must be multiples of 4):

Token Value Usage
xs 4px Icon gaps, inline padding
sm 8px Compact element spacing
md 16px Default element spacing
lg 24px Section padding
xl 32px Layout gaps
2xl 48px Major section breaks
3xl 64px Page-level spacing

Exceptions: {list any, or "none"}


Typography

Role Size Weight Line Height
Body {px} {weight} {ratio}
Label {px} {weight} {ratio}
Heading {px} {weight} {ratio}
Display {px} {weight} {ratio}

Color

Role Value Usage
Dominant (60%) {hex} Background, surfaces
Secondary (30%) {hex} Cards, sidebar, nav
Accent (10%) {hex} {list specific elements only}
Destructive {hex} Destructive actions only

Accent reserved for: {explicit list - never "all interactive elements"}


Copywriting Contract

Element Copy
Primary CTA {specific verb + noun}
Empty state heading {copy}
Empty state body {copy + next step}
Error state {problem + solution path}
Destructive confirmation {action name}: {confirmation copy}

Registry Safety

Registry Blocks Used Safety Gate
shadcn official {list} not required
{third-party name} {list} shadcn view + diff required

Checker Sign-Off

  • Dimension 1 Copywriting: PASS
  • Dimension 2 Visuals: PASS
  • Dimension 3 Color: PASS
  • Dimension 4 Typography: PASS
  • Dimension 5 Spacing: PASS
  • Dimension 6 Registry Safety: PASS

Approval: {pending / approved YYYY-MM-DD}