Blue Palette

<div class="space-y-6"><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#eff6ff"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Blue 100</h4><p class="typography-caption1 text-semantic-text-secondary mb-2">매우 밝은 파랑</p><div class="space-y-1"><div class="typography-caption2 font-mono text-semantic-text-secondary">#eff6ff</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-blue-100</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#dbeafe"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Blue 200</h4><p class="typography-caption1 text-semantic-text-secondary mb-2">밝은 파랑</p><div class="space-y-1"><div class="typography-caption2 font-mono text-semantic-text-secondary">#dbeafe</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-blue-200</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#93c5fd"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Blue 300</h4><p class="typography-caption1 text-semantic-text-secondary mb-2">연한 파랑</p><div class="space-y-1"><div class="typography-caption2 font-mono text-semantic-text-secondary">#93c5fd</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-blue-300</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#60a5fa"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Blue 400</h4><p class="typography-caption1 text-semantic-text-secondary mb-2">중간 파랑</p><div class="space-y-1"><div class="typography-caption2 font-mono text-semantic-text-secondary">#60a5fa</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-blue-400</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#2563eb"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Blue 500</h4><p class="typography-caption1 text-semantic-text-secondary mb-2">기준 파랑 (Success)</p><div class="space-y-1"><div class="typography-caption2 font-mono text-semantic-text-secondary">#2563eb</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-blue-500</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#1d4ed8"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Blue 600</h4><p class="typography-caption1 text-semantic-text-secondary mb-2">진한 파랑</p><div class="space-y-1"><div class="typography-caption2 font-mono text-semantic-text-secondary">#1d4ed8</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-blue-600</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#1e40af"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Blue 700</h4><p class="typography-caption1 text-semantic-text-secondary mb-2">어두운 파랑</p><div class="space-y-1"><div class="typography-caption2 font-mono text-semantic-text-secondary">#1e40af</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-blue-700</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#1e3a8a"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Blue 800</h4><p class="typography-caption1 text-semantic-text-secondary mb-2">더 어두운 파랑</p><div class="space-y-1"><div class="typography-caption2 font-mono text-semantic-text-secondary">#1e3a8a</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-blue-800</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#1e3170"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Blue 900</h4><p class="typography-caption1 text-semantic-text-secondary mb-2">매우 어두운 파랑</p><div class="space-y-1"><div class="typography-caption2 font-mono text-semantic-text-secondary">#1e3170</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-blue-900</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#172554"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Blue 1000</h4><p class="typography-caption1 text-semantic-text-secondary mb-2">가장 어두운 파랑</p><div class="space-y-1"><div class="typography-caption2 font-mono text-semantic-text-secondary">#172554</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-blue-1000</div></div></div></div></div><div class="mt-8"><h3 class="typography-headline3-bold mb-4">Color Strip</h3><div class="flex h-16 rounded-lg overflow-hidden border border-semantic-border"><div class="flex-1 relative group cursor-pointer" style="background-color:#eff6ff" title="Blue 100 - #eff6ff"><div class="absolute inset-0 bg-opacity-0 group-hover:bg-opacity-10 transition-all flex items-center justify-center"><span class="typography-caption2 text-white opacity-0 group-hover:opacity-100 transition-opacity font-semibold drop-shadow">100</span></div></div><div class="flex-1 relative group cursor-pointer" style="background-color:#dbeafe" title="Blue 200 - #dbeafe"><div class="absolute inset-0 bg-opacity-0 group-hover:bg-opacity-10 transition-all flex items-center justify-center"><span class="typography-caption2 text-white opacity-0 group-hover:opacity-100 transition-opacity font-semibold drop-shadow">200</span></div></div><div class="flex-1 relative group cursor-pointer" style="background-color:#93c5fd" title="Blue 300 - #93c5fd"><div class="absolute inset-0 bg-opacity-0 group-hover:bg-opacity-10 transition-all flex items-center justify-center"><span class="typography-caption2 text-white opacity-0 group-hover:opacity-100 transition-opacity font-semibold drop-shadow">300</span></div></div><div class="flex-1 relative group cursor-pointer" style="background-color:#60a5fa" title="Blue 400 - #60a5fa"><div class="absolute inset-0 bg-opacity-0 group-hover:bg-opacity-10 transition-all flex items-center justify-center"><span class="typography-caption2 text-white opacity-0 group-hover:opacity-100 transition-opacity font-semibold drop-shadow">400</span></div></div><div class="flex-1 relative group cursor-pointer" style="background-color:#2563eb" title="Blue 500 - #2563eb"><div class="absolute inset-0 bg-opacity-0 group-hover:bg-opacity-10 transition-all flex items-center justify-center"><span class="typography-caption2 text-white opacity-0 group-hover:opacity-100 transition-opacity font-semibold drop-shadow">500</span></div></div><div class="flex-1 relative group cursor-pointer" style="background-color:#1d4ed8" title="Blue 600 - #1d4ed8"><div class="absolute inset-0 bg-opacity-0 group-hover:bg-opacity-10 transition-all flex items-center justify-center"><span class="typography-caption2 text-white opacity-0 group-hover:opacity-100 transition-opacity font-semibold drop-shadow">600</span></div></div><div class="flex-1 relative group cursor-pointer" style="background-color:#1e40af" title="Blue 700 - #1e40af"><div class="absolute inset-0 bg-opacity-0 group-hover:bg-opacity-10 transition-all flex items-center justify-center"><span class="typography-caption2 text-white opacity-0 group-hover:opacity-100 transition-opacity font-semibold drop-shadow">700</span></div></div><div class="flex-1 relative group cursor-pointer" style="background-color:#1e3a8a" title="Blue 800 - #1e3a8a"><div class="absolute inset-0 bg-opacity-0 group-hover:bg-opacity-10 transition-all flex items-center justify-center"><span class="typography-caption2 text-white opacity-0 group-hover:opacity-100 transition-opacity font-semibold drop-shadow">800</span></div></div><div class="flex-1 relative group cursor-pointer" style="background-color:#1e3170" title="Blue 900 - #1e3170"><div class="absolute inset-0 bg-opacity-0 group-hover:bg-opacity-10 transition-all flex items-center justify-center"><span class="typography-caption2 text-white opacity-0 group-hover:opacity-100 transition-opacity font-semibold drop-shadow">900</span></div></div><div class="flex-1 relative group cursor-pointer" style="background-color:#172554" title="Blue 1000 - #172554"><div class="absolute inset-0 bg-opacity-0 group-hover:bg-opacity-10 transition-all flex items-center justify-center"><span class="typography-caption2 text-white opacity-0 group-hover:opacity-100 transition-opacity font-semibold drop-shadow">1000</span></div></div></div></div></div>