Use this to give instruction to Claude.

ui_design.md

UI Design Principles

Follow these design principles for a minimal, functional interface:

Core Design Philosophy

• Extreme minimalism: Half the padding you initially think. Use p-1, p-2 max, never p-4 or higher
• Compact spacing: Use gap-1 for flex gaps, space-y-1 for vertical spacing
• Small text: Default to text-xs for UI elements, text-sm for important headers only
• Tight controls: Buttons use px-2 py-0.5 text-xs, inputs use px-1 py-0.5 text-xs
• Monospace for data: Use font-family: 'Courier New', monospace for any data display

Layout Structure

• Single-purpose panels: Each section has one clear function
• Full-width primary content: Main content area should span full width, not split into columns
• Metadata in headers: Display counts/stats inline with section headers, not in separate panels
• Scrollable areas: Fixed heights with overflow-auto (e.g., h-96 or h-[500px])
• Minimal borders: Use simple border class, avoid thick borders or shadows

Color Palette

• Background: bg-gray-50 for page, bg-white for panels
• Interactive elements:
  • Blue (bg-blue-500): Primary actions, navigation
  • Green (bg-green-500): Add/Create actions
  • Red (bg-red-500): Delete/Remove actions
  • Gray (bg-gray-500): Secondary actions like copy/cancel
  • Purple (bg-purple-600): Special entities (like relationships)
• Selection states:
  • bg-blue-100 (#dbeafe) for selected items
  • bg-yellow-100 (#fef3c7) for secondary selections
  • bg-gray-100 (#f3f4f6) for hover states

Interactive Patterns

• Inline actions: Place action buttons directly in the flow, not in separate toolbars
• Collapsible sections: Use [+]/[-] indicators for expandable content
• Click to select: Direct clicking on items to select, highlight with background color
• Compact modals: When needed, use simple overlays with minimal padding

Form Controls

• Search inputs: Full-width with datalist for autocomplete
• Action buttons: Grouped horizontally with flex gap-1 flex-wrap
• Text inputs: Always full-width within their container
• No labels: Use placeholders instead of separate labels

Typography

• Headers: font-semibold for section titles, avoid bold
• Hierarchy: h1 text-lg, h2 font-semibold text-sm, h3 font-semibold text-xs
• Data display: Monospace font for IDs, JSON, and structured data
• Info text: text-gray-600 for supporting information

Example Component Structure

<div class="bg-white border rounded p-2">
    <div class="flex justify-between items-center mb-1">
        <h2 class="font-semibold">Section Title</h2>
        <div class="text-xs text-gray-600">Metadata here</div>
    </div>
    <div class="h-96 overflow-auto border-t pt-1">
        <!-- Scrollable content -->
    </div>
    <div class="mt-2 pt-2 border-t">
        <!-- Controls section -->
        <input type="text" class="border px-1 py-0.5 text-xs w-full mb-1" />
        <div class="flex gap-1">
            <button class="bg-blue-500 text-white px-2 py-0.5 text-xs rounded">Action</button>
        </div>
    </div>
</div>

Key Principles to Remember

1. Information density over aesthetics: Fit more content in less space
2. Functional over beautiful: Clear actions and states matter more than visual flair
3. Reduce cognitive load: Consistent patterns, minimal visual noise
4. Performance first: Simple CSS, no animations, fast interactions
5. Accessibility through simplicity: Clear contrast, readable fonts, logical flow