用 Stripe 設計系統
打造的熊熊博物館

結合專業設計系統與可愛的熊熊元素，示範如何用現代 CSS 技術創造美觀的網頁。

設計特色

🎨
CSS Variables

設計系統 Tokens

使用 Stripe 的色彩系統與陰影變數，維持一致的視覺風格。

📱
響應式

自適應佈局

使用 clamp() 與 Grid 自動調整，在任何設備上都好看。

✨
微動畫

流暢過渡

hover 放大、卡片浮起、淡入滑動，讓介面更有生命力。

🐻 熊熊成員分類

🐻

館長熊熊

棉花糖雲 · 2026年6月3日入館

No.0001
🐼

熊二

雪地領袖棕 · 沙發悠閒熊

No.0002
🧸

熊三

雲朵綿綿 · 蜜糖爪爪

No.0003
🐻

館長熊熊

2026年6月3日 · 熊熊博物館開幕日

No.0001
🐼

熊二

2026年6月3日 · 同日入館

No.0002

這是第二層折疊，裡面可以放任何內容：

🎨

CSS Variables

📱

Responsive

✨

Animations

熊熊成員

🐻

館長熊熊

No.0001 · 2026年6月3日入館 · 棉花糖雲

🐼

熊二

No.0002 · 沙發悠閒熊 · 雪地領袖棕

🧸

熊三

No.0003 · 雲朵綿綿 · 蜜糖爪爪

CSS 範例

/* Stripe 風格陰影系統 */ :root { --shadow-standard: rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px; } /* 響應式文字大小 */ h1 { font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -1.4px; font-weight: 300; /* Stripe 的輕盈優雅 */ }