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

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