Styling Patterns

Styling Patterns

Quick Start

<!-- ✅ Correct: Proper background hierarchy -->
<div class="bg-base-200 p-6">
	<div class="card bg-base-100 p-4 shadow-md">
		<h2 class="mb-3 text-2xl font-bold">Section Title</h2>
		<p class="text-base">Main content text</p>
		<p class="text-sm opacity-60">Secondary metadata</p>
	</div>
</div>

<!-- ❌ Wrong: Same background as parent -->
<div class="bg-base-100">
	<div class="card bg-base-100">No visual separation</div>
</div>

Core Principles

• Background hierarchy: base-200 (page) → base-100 (card) → base-200 (nested) - never same as parent
• Borders: Use border-base-300 solid (no opacity)
• Text sizes: 3xl (h1) → 2xl (h2) → xl (h3) → base (body) → sm (metadata) → xs (hints)
• Opacity: ONLY 60/70/80, ONLY on metadata/descriptions (never titles/buttons/primary actions)
• Shadows: md (default) → lg (hover) → xl (important)
• Semantic colors: error/success should NOT have opacity
• Test contrast: Always verify on both light and dark themes

Reference Files

• styling-guide.md - Complete design system with all rules and examples