phase 2

stitch-exports/screen-05-writing/DESIGN.md

@@ -0,0 +1,72 @@
+# Design System
+
+Auto-generated from Google Stitch export.
+
+## Colors
+
+- `bg-slate-50`
+- `bg-slate-900`
+- `text-blue-800`
+- `text-blue-300`
+- `text-slate-500`
+- `text-slate-400`
+- `text-blue-600`
+- `bg-blue-50`
+- `bg-blue-900`
+- `text-blue-700`
+- `text-blue-400`
+- `border-l-4`
+- `border-blue-600`
+- `border-slate-200`
+- `text-slate-600`
+- `bg-slate-100`
+- `bg-slate-200`
+- `text-slate-700`
+- `bg-amber-50`
+- `bg-amber-100`
+
+## Typography
+
+- `text-xl`
+- `font-bold`
+- `text-xs`
+- `font-medium`
+- `text-sm`
+- `text-3xl`
+- `font-extrabold`
+- `text-lg`
+- `font-semibold`
+
+## Spacing
+
+- `p-0`
+- `space-y-1`
+- `gap-3`
+- `gap-4`
+- `gap-2`
+- `gap-8`
+- `space-y-6`
+- `m-0`
+- `p-8`
+- `m-6`
+- `space-y-4`
+- `p-5`
+- `space-y-3`
+- `p-4`
+- `m-4`
+
+## Components
+
+- `<nav>`
+- `<header>`
+- `<input>`
+- `<button>`
+- `<main>`
+- `<section>`
+- `<aside>`
+
+## Notes
+
+- Generated by Google Stitch AI
+- Tailwind CSS utility classes used throughout
+- Review and customize colors/typography for brand alignment