.opencode/gsd-core/templates/UI-SPEC.md

metadata

phase:
  'N': null
slug:
  phase-slug: null
status: draft
shadcn_initialized: false
preset: none
created:
  date: null

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}