Name: Mic Ui Style
Author: hwchiu

搵技能.../

Mic Ui Style | Skills Pool

:root {
  /* 底色 */
  --c-dark:       #1a2332;    /* Sidebar 深色背景 */
  --c-dark-2:     #111827;    /* 更深底色 */
  --c-white:      #ffffff;    /* Card、主背景 */
  --c-bg:         #f3f4f6;    /* 淺灰背景（交替行、input 背景） */

  /* 文字層級（由深到淺） */
  --c-text:       #111827;    /* 主文字 */
  --c-text-2:     #374151;    /* 次要文字 */
  --c-text-3:     #6b7280;    /* 第三層文字（灰色） */
  --c-text-4:     #9ca3af;    /* 最淡文字（placeholder、disabled） */

  /* 邊框 */
  --c-border:     #e5e7eb;    /* 標準邊框 */
  --c-border-2:   #d1d5db;    /* 較深邊框（focus、hover） */

  /* 語意色彩 */
  --c-accent:     #4fc3f7;    /* 主強調色（cyan blue） */
  --c-orange:     #ea580c;    /* 警告 / 次要動作 */
  --c-pos:        #16a34a;    /* 正向（漲、增、綠） */
  --c-neg:        #dc2626;    /* 負向（跌、減、紅） */
  --c-btn-active: #374151;    /* 按鈕 active 態 */
}

色碼	用途
`#1e66f5`	Coming Soon 徽章
`#bf3030` / `rgb(191,48,48)`	NEW 徽章、Banner 警告底色
`#f59e0b`	星號（收藏、已加入）
`rgba(79,195,247,0.17)` → `rgba(79,195,247,0.04)`	Sidebar active 漸層
`rgba(0,0,0,0.45)`	Mobile overlay 遮罩
`rgba(255,255,255,0.08)` ~ `0.62`	Sidebar 內白色文字 / icon 透明度

--radius-sm: 4px;     /* 小元素：input、小按鈕、badge */
--radius:    8px;     /* 標準元件：card、dropdown、modal */
--radius-lg: 10px;    /* 大卡片、日曆格 */

--font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif;

尺寸	用途	字重
9–9.5px	眉標（eyebrow）、section label	700–800 + `letter-spacing: 0.08–0.14em` + `text-transform: uppercase`
10–10.5px	Badge、腳註、dropdown 分類	600–800
11–11.5px	次要文字、表格欄位、sidebar 連結	400–500
12–12.5px	表格資料、按鈕文字	400–500
13–13.5px	主體文字、搜尋輸入框	400
15px	區塊標題	600–700
21px	Logo	700 + `letter-spacing: -0.5px`
22–48px	頁面大標題（特殊頁面）	700–800

elevation-0:  無陰影
elevation-1:  0 1px 4px rgba(0,0,0,0.05)         — 微浮（靜態）
elevation-2:  0 1px 6px rgba(0,0,0,0.07)         — Input、小 dropdown
elevation-3:  0 2px 8px rgba(0,0,0,0.06)         — Card hover
elevation-4:  0 4px 12px rgba(0,0,0,0.10)        — 標準 Card
elevation-5:  0 4px 16px rgba(0,0,0,0.10)        — Dropdown、popover
elevation-6:  0 8px 24px rgba(0,0,0,0.10)        — Modal
elevation-7:  0 12px 48px rgba(0,0,0,0.22)       — 浮動面板
elevation-8:  0 20px 60px rgba(0,0,0,0.35)       — 全屏 modal

層級	元件
0–2	堆疊卡片、表單元素
10–50	日曆 / 表格內部
100	Sidebar overlay
200	TopNav、Dropdown
300	子選單
400–500	Modal、搜尋面板
600	通知面板
800	Mobile sidebar
900–1000	Watchlist modal、AI Chatbot
1200	Chatbot（最高常規層）

時長	用途	備註
`0.12s`	快速反饋（hover 色變）	`ease`
`0.15s`	標準過渡（最常用）	`background, color, border-color`
`0.18s`	Modal 進場	`ease`
`0.22s`	Sidebar 收合 / Panel 滑入	`ease`
`0.28s`	Mobile drawer 滑入	`cubic-bezier(0.4, 0, 0.2, 1)`

名稱	效果	時長
`chatbot-slide-in`	右側滑入 + 淡入	0.22s ease
`chatbot-dot-bounce`	三點載入動畫	1.2s infinite（stagger 0.2s）
`wl-modal-in`	縮放 + 上移淡入	0.18s ease
`rmapPanelIn`	左側滑入	0.18s ease
`de-panel-slide-in`	右側滑入	0.22s ease
`pr-stack-expand-in`	縮放 + 位移展開	0.15s ease-out
`is-cursor-blink`	游標閃爍	1.1s step-end infinite

@media (max-width: 1600px) { /* 大螢幕微調 */ }
@media (max-width: 1400px) { /* 網格降為 2 欄 */ }
@media (max-width: 1100px) { /* 單欄佈局 */ }
@media (max-width: 900px)  { /* 平板模式 */ }
@media (max-width: 768px)  { /* ★ 主要斷點：sidebar 變 drawer */ }
@media (max-width: 480px)  { /* ★ 手機：緊湊間距 */ }

主題	檔案
設計令牌完整規格	`references/design-tokens.md`
可複製的元件樣式模板	`references/component-patterns.md`
動畫與過渡完整規格	`references/animation-system.md`
響應式規則與斷點行為	`references/responsive-system.md`

1.   :root 設計令牌
2.   全域 Reset & 基礎排版
3.   TopNav（~58px）
4.   Search Dropdown
5.   Banner Carousel
6.   App Body & Sidebar
7.   Main Content
8.   ——— 各功能區塊（按新增順序排列）———
9.   Calendar → Week/Month Grid → Detail
10.  AI Chatbot
11.  Watchlist → Company Profile → Supply Chain
12.  Financial → Press Release → Collaboration
13.  Data Explore → User Manual → Intelligence Search
14.  Knowledge Graph
15.  ——— 響應式區塊（最末端）———
16.  @media (max-width: 768px) { ... }
17.  @media (max-width: 480px) { ... }

.{prefix}-{component}           → .cp-card, .de-panel
.{prefix}-{component}-{element} → .cp-card-title, .de-panel-header
.{prefix}-{component}--{mod}    → .pr-card--compact
.{component}.{state}            → .toggle-btn.active, .week-cell.selected

功能	Prefix
TopNav	`topnav-`
Sidebar	`sidebar-`
Calendar	`cal-` / `week-` / `month-`
Company Profile	`cp-`
Press Release	`pr-`
Collaboration	`pg-`
Data Explore	`de-`
Financial Statement	`fin-stmt-`
Supply Chain	`rmap-`
M&A	`aapl-ma-`
Watchlist	`cwl-` / `wl-`
Chatbot	`chatbot-`
Knowledge Graph	`kg-`
Intelligence Search	`is-`

<body>                              /* flex column, height: 100vh */
  <TopNav/>                         /* 58px fixed */
  <Banner/>                         /* 40px（可選） */
  <div class="app-body">            /* flex row, flex: 1 */
    <Sidebar/>                      /* 236px / 52px collapsed */
    <main class="main-content">     /* flex: 1, overflow-y: auto */
      <div class="page-pad">        /* padding: 24px 28px 40px */
        {children}
      </div>
    </main>
  </div>
</body>

Mic Ui Style

MIC UI Style Guide

設計哲學

何時使用此 Skill

技術棧

Mic Ui Style

MIC UI Style Guide

設計哲學

何時使用此 Skill

技術棧

設計令牌速查

色彩系統

額外常用色（非變數，直接寫入）

圓角

字型

字體尺度

陰影層級系統

Z-Index 層級表

過渡與動畫

過渡時間規範

關鍵影格動畫

響應式系統

斷點（Desktop-first）

768px 行為

480px 行為

元件樣式模板

CSS 組織規則

globals.css 結構

新增功能的 CSS 規則

Class 命名慣例

Icon 系統

佈局骨架

快速檢查清單

Frontend Slides

Frontend Slides

Frontend Slides

Ascii Art

Popular Web Designs

Meme Generation