Design

Design

All code must follow the Coding Principles in AGENTS.md (functional, minimal, readable, modular).

Core principles

• No scrolling — ever. The webview is a fixed sandboxed canvas (min 320×320px).
• Mobile-first. Design for the smallest viewport, then scale up.
• Tailwind only. No <style> blocks, no inline style= attributes.
• Functional over decorative. Every visual element should serve the user.

---

Spacing scale

Use Tailwind's default spacing scale. Avoid arbitrary values (p-[13px]).

---

Typography

<h1 class="text-xl font-bold tracking-tight">Title</​h1>
<h2 class="text-base font-semibold">Section</​h2>
<p  class="text-sm text-gray-700 dark:text-gray-300">Body</​p>
<span class="text-xs text-gray-500">Caption / meta</​span>

• Base body size: text-sm (14px). Never below text-xs for readable content.
• Line length: max-w-sm or max-w-xs for prose.
• No custom fonts — use the system font stack (Tailwind default).

---

Color

Always pair a light and dark variant. Reddit renders in both modes.

---

Buttons

<!-- Primary -->
<button class="w-full rounded-lg bg-orange-500 px-4 py-2.5 text-sm font-semibold text-white
               hover:bg-orange-600 active:scale-95 transition-all disabled:opacity-50
               disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2
               focus-visible:ring-orange-400">
  Submit
</​button>

<!-- Secondary -->
<button class="w-full rounded-lg border border-gray-300 dark:border-gray-600 px-4 py-2.5
               text-sm font-semibold text-gray-700 dark:text-gray-200
               hover:bg-gray-100 dark:hover:bg-gray-700 active:scale-95 transition-all">
  Cancel
</​button>

• Minimum tap target: min-h-[44px] or py-2.5 on text-sm.
• Always include disabled:opacity-50 disabled:cursor-not-allowed.
• Always include active:scale-95 transition-all for tactile feedback.

---

Inputs

<input
  class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white
         dark:bg-gray-800 px-3 py-2 text-sm text-gray-900 dark:text-gray-100
         placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-400"
/>

---

UI states

Every data-driven component must handle all four states:

---

Cards & surfaces

<div class="rounded-xl border border-gray-200 dark:border-gray-700
            bg-white dark:bg-gray-800 p-4 shadow-sm">
  <!-- content -->
</​div>

• rounded-xl for cards, rounded-lg for inputs/​buttons, rounded-md for badges.
• shadow-sm only — avoid heavy shadows.
• Max two surface levels deep (page → card → no deeper).

---

Animation

• Only Tailwind built-in transitions: transition-all, transition-colors, transition-opacity.
• Default duration (150ms). No custom durations.
• animate-pulse for loading, animate-spin for spinners.
• No entrance animations.

---

Checklist before finishing

• No <style> blocks — Tailwind classes only
• No arbitrary values (p-[13px]) — use scale steps
• Dark mode variants on all color classes
• Buttons have disabled, active:scale-95, and focus-visible:ring classes
• Minimum tap target size respected
• Typography follows the hierarchy (xl → base → sm → xs)