🎨 色彩系統

保持品牌 DNA (#00aaaa)，延伸完整色階與互補色系 + 漫畫風格視覺

🎨 Comic 風格樣式系統

日本漫畫風格：細線條 + 柔和陰影 + 留白

🔘 按鈕系統

統一的互動元素樣式 - 使用 Button 組件

<Button variant="primary">Default</Button>

<Button variant="accent">立即查看</Button>

<Button variant="outline">了解更多</Button>

<Button variant="ghost">取消</Button>

<Button variant="link" href="#">查看更多</Button>

<Button size="sm|md|lg">...</Button>

🎴 卡片系統

統一的內容容器設計 - 使用 Card 組件

<Card variant="project" title="..." year="2025" />

<Card variant="post" title="..." date={new Date()}/>

<Card variant="default" title="..." description="..." />

📏 間距與排版

統一的空間節奏

📱 響應式網格

斷點：sm(640px) / md(768px) / lg(1024px) / xl(1280px)

🏷️ Tag vs Badge 標籤系統

兩種不同用途的標籤組件

<Tags tags=JavaScriptAstroTailwindCSS />

<Badge color="primary|accent|success|...">...</Badge>

<Badge outline=true>...</Badge>

<Badge size="sm|md|lg">...</Badge>

📝 Input 表單組件

統一的表單輸入元素

<Input label="..." type="text" placeholder="..." required=true />

💬 Alert 提示組件

訊息提示與通知

<Alert variant="info|success|warning|error" title="..." dismissible=true>
  訊息內容
</Alert>

🎭 Hero 區塊組件

頁面英雄區塊

<Hero variant="primary|gradient|default" size="sm|md|lg" title="..." align="left|center|right">
  <Button>...</Button>
</Hero>

➖ Divider 分隔線組件

內容分隔線

<Divider variant="solid|dashed|dotted|gradient" text="OR" spacing="sm|md|lg" />

💭 Tooltip 提示框組件

滑鼠懸停提示

<Tooltip text="提示文字" position="top|bottom|left|right" color="primary|accent|neutral">
  <Button>Hover me</Button>
</Tooltip>

⏳ Loading 載入組件

載入指示器

<Loading variant="spinner|dots|ring|bars" size="sm|md|lg" color="primary|accent|neutral" text="載入中..." />

📋 Dropdown 下拉選單組件

下拉選單

<Dropdown
  label="選單"
  position="left|right"
  color="primary|accent|neutral"
  items=[object Object][object Object][object Object]
/>

🪟 Modal 彈窗組件

彈出視窗

<Button data-modal-open="my-modal">開啟彈窗</Button>

<Modal id="my-modal" title="標題" size="sm|md|lg|xl">
  內容...
  <div slot="footer">
    <Button data-modal-close>關閉</Button>
  </div>
</Modal>

📅 Timeline 時間軸組件

時間軸展示

<Timeline
  items={[
    {
      title: '標題',
      description: '描述',
      date: '2025-01-01',
      icon: 'ic:outline-check',
      color: 'primary|accent|success|warning|error|info|neutral'
    }
  ]}
/>

🍞 Breadcrumbs 麵包屑組件

導航路徑指示

<Breadcrumbs
  items={[
    { label: '首頁', href: '/', icon: 'ic:outline-home' },
    { label: '部落格', href: '/blog' },
    { label: '當前頁面' }
  ]}
  separator=">" // 或 separatorIcon="ic:outline-chevron-right"
  maxItems={4} // 超過會折疊顯示
/>

✅ 完整組件清單