Yellow 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:#fefdf7"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Yellow 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">#fefdf7</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-yellow-100</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#fefbec"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Yellow 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">#fefbec</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-yellow-200</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#fef6d3"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Yellow 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">#fef6d3</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-yellow-300</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#fef0b3"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Yellow 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">#fef0b3</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-yellow-400</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#FFEB00"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Yellow 500</h4><p class="typography-caption1 text-semantic-text-secondary mb-2">기준 노랑 (Warning)</p><div class="space-y-1"><div class="typography-caption2 font-mono text-semantic-text-secondary">#FFEB00</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-yellow-500</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#e6d400"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Yellow 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">#e6d400</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-yellow-600</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#ccbe00"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Yellow 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">#ccbe00</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-yellow-700</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#b3a700"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Yellow 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">#b3a700</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-yellow-800</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#999100"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Yellow 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">#999100</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-yellow-900</div></div></div></div><div class="border border-semantic-border rounded-lg overflow-hidden"><div class="w-full h-20" style="background-color:#807a00"></div><div class="p-4"><h4 class="typography-body1-bold mb-1">Yellow 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">#807a00</div><div class="typography-caption2 font-mono text-semantic-text-secondary">bg-yellow-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:#fefdf7" title="Yellow 100 - #fefdf7"><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:#fefbec" title="Yellow 200 - #fefbec"><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:#fef6d3" title="Yellow 300 - #fef6d3"><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:#fef0b3" title="Yellow 400 - #fef0b3"><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:#FFEB00" title="Yellow 500 - #FFEB00"><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:#e6d400" title="Yellow 600 - #e6d400"><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:#ccbe00" title="Yellow 700 - #ccbe00"><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:#b3a700" title="Yellow 800 - #b3a700"><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:#999100" title="Yellow 900 - #999100"><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:#807a00" title="Yellow 1000 - #807a00"><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>