Kiro 品牌设计系统

完整的 Tailwind CSS 品牌色系和组件库

K

颜色系统

主要品牌色

kiro-primary

#9046FF

kiro-purple-light

#C6A0FF

kiro-purple-dark

#19161D

UI 背景色

kiro-gray-purple

#28242E

kiro-gray

#4A464F

kiro-gray-light

#938F9B

功能色

kiro-white

#FFFFFF

kiro-accent-gold

#FEF08A

kiro-accent-orange

#F59E0B

按钮组件

主要按钮

次要按钮

渐变按钮

特殊按钮

卡片组件

基础卡片

这是一个使用 Kiro 品牌色系的基础卡片组件。

发光卡片

带有紫色发光效果的卡片，适合突出重要内容。

动画卡片

鼠标悬停时会有缩放和发光效果的交互卡片。

渐变背景

主渐变

bg-kiro-gradient

深色渐变

bg-kiro-gradient-dark

火焰渐变

bg-kiro-gradient-fire

英雄渐变

bg-kiro-gradient-hero

动画效果

脉动

animate-kiro-pulse

发光

animate-kiro-glow

浮动

animate-kiro-float

火焰闪烁

animate-kiro-fire-flicker

使用示例

// 基础颜色类
<div className="bg-kiro-primary text-kiro-white">主要按钮</div>
<div className="bg-kiro-gray-purple border-kiro-gray">卡片容器</div>
<p className="text-kiro-gray-light">次要文本</p>

// 渐变背景
<div className="bg-kiro-gradient">紫色渐变背景</div>
<div className="bg-kiro-gradient-fire">火焰渐变背景</div>

// 阴影效果
<div className="shadow-kiro">基础紫色阴影</div>
<div className="shadow-kiro-glow">发光阴影</div>

// 动画效果
<div className="animate-kiro-pulse">脉动动画</div>
<div className="animate-kiro-float">浮动动画</div>

// 组合使用
<button className="bg-kiro-primary hover:bg-kiro-purple-light 
                 text-kiro-white px-6 py-3 rounded-lg 
                 shadow-kiro hover:shadow-kiro-lg 
                 transition-all duration-200 
                 hover:scale-105">
  完美的 Kiro 按钮
</button>