Loading…
◆ ✦ ◆
Design Lab
設計系統與配色展示
◆ ✦ ◆
這是什麼 · How to use
每一套都是完整的設計系統 — 配色、字型、元件規範。挑一套喜歡的，下載 DESIGN.md 交給 AI coding 工具，就能生出風格一致的介面、簡報或配圖。Each card is a complete design system. Download its DESIGN.md and hand it to an AI coding tool to generate consistent UI, decks, or graphics.
- 1挑一套喜歡的風格
- 2下載 DESIGN.md
- 3交給 Claude Code / Cursor 生成
Brand PaletteClassical Morandi
TingYu's personal design system — Morandi-inspired muted palette with classical serif typography
莫蘭迪古典設計系統 — 薄荷、薰衣草、奶油底的灰調溫暖配色
Brand PaletteArtisan Earth
Warm, handcraft-inspired design system — earthy linen, forest green, burnt sienna with botanical studio atmosphere
大地色手作工藝設計系統 — 暖亞麻、森林綠、燒赭石，藝術家工作室的自然光氛圍
Web ReferenceEnchanted Woodland
Storybook-whimsical design system — golden afternoon light, forest moss, cotton candy pastels with nature-inspired warmth and dreamy atmosphere
魔法林地設計系統 — 金色午後光影、森林苔蘚、棉花糖粉彩，繪本般的自然溫暖與夢幻氛圍
Web ReferencePorcelain Reverie
Pop-surrealist design system — muted pastels, gothic wine accents, porcelain-doll aesthetic with beautiful unease and faded fairy tale atmosphere
瓷夢囈語設計系統 — 消音粉彩、暗酒紅暗流、瓷娃娃美學，天真與黑暗的矛盾張力，褪色童話書的夢境氛圍
Web ReferenceSunlit Grove
Warm, nurturing design system — forest green trust, sunbeam gold joy, canvas white breathing room for creative education platforms
日光林間設計系統 — 深森林綠的信賴、日光金的喜悅、畫布白的呼吸空間，為創作教育打造的溫暖陪伴系統
Web ReferencePetal Cream
Whimsical, feminine design system — blush petal warmth, cream canvas breathing room, artisanal character for creative maker platforms
花瓣奶霜設計系統 — 花瓣粉的柔美溫暖、奶油畫布的呼吸空間、手作質感的人情味，為女性創作者打造的溫馨設計語言
Web ReferenceDoodle Notebook
Hand-drawn lecture handout design system — cream ruled paper, fine-liner ink borders, fluorescent highlighter accents, and handwritten typography that makes dense instructional content feel approachable
塗鴉筆記本設計系統 — 稿紙底、代針筆墨線框、螢光筆標記、手寫字型，把「老師手寫的講義」搬進網頁，讓硬知識變得親切
Brand PaletteFUO Warm Slate
Editorial medical design system — warm linen canvas, deep slate text, amber and emerald accents; clinical authority with humanistic warmth
暖石板醫學簡報系統 — 暖亞麻底、深石板墨、琥珀與翡翠雙強調色，臨床的嚴謹與人文的溫度並存
Artwork ColorsPaper Peony
Colors sampled from real giant crepe paper peony artwork — peony rose, dusty rose, stamen gold, and garden green, harmonized by nature and craft rather than a color picker
紙上牡丹 — 從巨型皺紋紙牡丹作品實拍照取樣的色票：牡丹緋、乾燥玫瑰、蕊心金、庭園深綠，由真實的紙張與光線調和，不是調色盤調出來的
IP Design SheetMagnolia Mark
Brand IP design sheet for the TingYu's Deco magnolia — mark anatomy, lavender color spec, motion personality with easing tokens, and usage rules
木蘭印記 — TingYu's Deco 品牌 IP 設計表：花標構成解剖、薰衣草紫色彩規格、含 easing tokens 的動態人格、使用規範
Brand PaletteGraphite Sketch
Grayscale pencil-draft design system — double-traced sketch borders, dashed blueprint guides, and a single red-pencil accent reserved for correction marks
石墨草稿設計系統 — 鉛筆灰階與虛線藍圖構造線打底，唯一的紅鉛筆色只用於校對標記，像一頁還在推敲中的設計草圖
Brand PaletteMagazine Editorial
High-contrast print-magazine design system — serif display type, hairline rules, drop caps, and a single restrained proof-red accent
雜誌誌面設計系統 — 襯線大字標題、髮線分隔、首字放大與一抹校訂紅，把印刷雜誌的排版紀律搬進網頁
Brand PaletteRiso Print
Risograph zine-poster design system — fluorescent spot inks, off-register overprint effects, and rice-paper grain texture
孔版印刷設計系統 — 螢光專色油墨、套版錯位疊色與米紙顆粒紋理，獨立誌與藝文海報的手感
Brand PaletteDramatic Light
Cinematic dark design system — a single deep-gold spotlight against near-black, poster-style off-center headlines, depth expressed by light intensity instead of shadows
戲劇光影設計系統 — 近黑舞台上唯一的深金聚光燈、海報式失衡構圖，用光的強弱而非陰影表達層次
Brand PaletteNeobrutal Pop
High-saturation neobrutalist system — thick black borders, zero-blur hard offset shadows, and sticker-like rotated components
新粗獷設計系統 — 高飽和原色色塊、3–4px 純黑粗框、零模糊硬位移陰影，貼紙式元件的大膽直接
Brand PaletteNeon Night
Cyberpunk neon-signage system — layered glow shadows, thin glass-tube borders, and a near-black canvas where light is the only visual weight
霓虹夜設計系統 — 多層光暈陰影、細玻璃管邊框、近黑畫布，光就是唯一的視覺重量
Brand PaletteFrosted Glass
Glassmorphism design system — translucent white cards floating above a multicolor gradient mesh, unified by backdrop blur and hairline borders
毛玻璃設計系統 — 半透明白色玻璃卡片漂浮在多彩柔霧漸層上，backdrop-filter 模糊與細白描邊統一景深
Brand PaletteRetro Wave
80s-90s Memphis pastiche — cassette-cream canvas, clashing bright geometry, and bouncy rounded display type
復古浪潮設計系統 — 卡帶奶油底、撞色 Memphis 幾何裝飾、彈跳圓潤字體，隨身聽與街機廳時代的快樂能量
Brand PaletteSci-Fi Fiction
Retro pulp-paperback sci-fi book-cover system — deep space navy panels, old-paper cream interiors, condensed orange-red display type, star-chart dot decorations
科幻小說設計系統 — 深空藏青封面、舊紙米內頁、橘紅壓縮體標題與星圖點陣，二手書店裡那本絕版科幻小說
Brand PaletteDithered Pixel
Near-monochrome 1-bit terminal aesthetic — Bayer-dithered gradients, pixel-notch corners, and a single red signal accent; old Macintosh panels and thermal receipts
抖動像素設計系統 — 近乎單色的 1-bit 終端機美學、Bayer 抖動網點、像素階梯邊角，唯一的紅色訊號燈；舊 Macintosh 與熱感紙的質感
Brand PaletteColorful Pop
Joyful candy-bright system on white — five saturated accents, large rounded corners, organic blob decoration, color-tinted shadows, one dominant color per section
繽紛波普設計系統 — 白底上的五色糖果調、大圓角、有機 blob 裝飾、彩色陰影，靠一區一主色的紀律讓熱鬧不失序
Web ReferencePaper
Minimal, accessibility-first design system built on whitespace, disciplined typography, and always-visible focus states
紙感極簡設計系統 — 以留白、克制排版與永遠可見的焦點狀態為核心，像一張被認真對待的白紙
Web ReferenceCypherpunk
Stark two-tone retro-terminal system — electric lime canvas, near-black ink, beige raised surfaces with bold 2px borders and pixel display type
刻意二色調的復古終端機系統 — 電光萊姆綠全版底、極黑墨字、卡其米浮面配 2px 粗墨框與像素標題字
Web ReferenceCream
Warm, rounded system for approachable SaaS — alternating cream and soft-gray sections, one vivid blue action color, bordered-not-shadowed cards
溫暖圓角的產品介面系統 — 奶油與柔霧灰版面交替、活力藍領銜互動層、卡片以邊框取代陰影
Web ReferenceNostalgia
Retro desktop-OS system — toasted-cream windows, espresso-brown ink, glowing orange accents, and window-chrome panels with pressed-key feedback
復古作業系統設計語言 — 烤吐司米桌面、濃縮咖啡墨字、發光橘強調，視窗式面板與按鍵下壓回饋讓控制項像實體物件
Web ReferenceFantasy
Heraldic epic-fantasy system — royal blue structure, gold spent only as reward currency, blackletter display type over manuscript-serif body
紋章史詩系統 — 皇家藍為結構、紋章金只作獎勵貨幣，blackletter 展示字搭配手抄本襯線正文
Web ReferenceTerracotta
Sun-baked editorial system — warm cream surfaces, ink-brown serif headlines, and a single terracotta accent tuned for long-form reading
曬暖的編輯系統 — 暖奶油紙面、墨棕 serif 標題、單一陶土強調色，為長文閱讀調校的獨立誌氣質
Web ReferenceSkeumorphism
Tactile material system built on dual raised/inset shadow tokens — every control visibly presses, toggles, and lights up like a real device
以 raised 與 inset 雙陰影 token 打造的觸感材質系統 — 按鈕、旋鈕與 LED 都像真實裝置般可按可撥
Web ReferenceCreative
Comic-book pop-art system — blue and violet sweep together as one gradient current, framed by thick ink outlines and hard offset shadows
漫畫普普藝術系統 — 藍紫雙色永遠以漸層一同流動，粗墨線框與硬陰影框出海報張力
Web ReferenceDark
Calm premium dark interface — deep charcoal-plum surfaces, muted plum accents, serif display headings, and a restrained three-layer glint as the only glow
安靜高級的深色介面 — 深炭梅紫底、克制的梅紫 accent、serif 展示標題，唯一允許的光是內斂的三層微光
Web ReferenceBrutalism
Raw structural system inspired by 1950s architectural brutalism — terracotta and ochre material tones, thick black borders, zero border-radius, extreme weight contrast
承襲 1950 年代建築粗獷主義 — 陶土紅與赭石黃雙主色、厚黑邊框、零圓角、100 到 900 的極端字重跨度，結構誠實的裸露美學
Web ReferenceMinimax
Cozy deserted-island system — warm cream surfaces, leafy green accents, and pill-shaped controls for approachable, low-pressure products
溫暖的無人島系統 — 暖米紙面、熱帶綠意、藥丸形控制項，為平易近人的低壓力產品而生
Web ReferenceRefined
Serif-forward editorial system where Playfair Display carries the interface's authority and blue-violet color stays a supporting accent
以 Playfair Display 領銜的雜誌級系統 — 字體本身就是品牌體驗，藍紫色彩只當互動配角
Web ReferenceGradient
Vibrant flow-driven system where purple-to-pink color transitions are the design language itself — heroes melt, buttons shift hue, progress bars sweep the spectrum
以漸層為語言的系統 — 深電紫融向熱粉，hero 在流動、按鈕在變色、進度條掃過整段光譜，漸層不是裝飾是本體
Web ReferenceStorytelling
Narrative-driven system using dramatic Inter-to-Abril-Fatface type contrast and three-act pacing to make interfaces read like chapters of a book
敘事驅動系統 — Inter 敘事正文與 Abril Fatface 章節標題的戲劇反差，三幕節奏讓介面讀起來像書的章節
Brand PaletteClinical Clarity
Professional medical infographic system — calm clinical teal, disciplined semantic color grading, and data-first hierarchy for trustworthy IG health graphics
臨床清晰 — 專業醫療資訊圖系統：冷靜臨床藍綠打底、語意色三級分工、資料階層優先，為可信賴的衛教圖而生
Brand PaletteCare Warm
Warm, low-anxiety patient-education system — soft coral and sage, oversized rounded corners, gentle iconography for general-public health graphics
暖心衛教 — 面向民眾的溫暖衛教系統：柔珊瑚配鼠尾草綠、奶油底大圓角、圓潤親和 icon，降低衛教資訊的距離感
Brand PaletteChart Studio
Colorblind-validated light-mode dataviz system — categorical, sequential, and diverging scales for reports, decks, and dashboards
圖表工作室 — 色盲安全驗證的淺色資料視覺化系統：分類／漸序／發散三種色階，給報告、簡報、儀表板的圖表用
Brand PaletteSignal Dark
Dark-surface monitoring-console dataviz system — glow-controlled categorical colors and a KPI-tile-centric component set
深色訊號盤 — 深色監控台美學的資料視覺化系統：暗底驗證的受控發光色，以 KPI 數字磚為核心元件
Brand PaletteTitle Card
Broadcast-grade lower-third and subtitle system — opaque text plates and one accent per card so text stays legible over any footage
動態字卡 — 廣播級下三分之一與字幕系統：不透明字板、每張卡一個強調色，讓文字疊在任何影片畫面上都清晰
Brand PaletteExplainer Flow
Gradient-driven scene system — persistent step badges, timed-reveal content, and 3D-transform-ready cards for full animated explainer sequences
解說流動 — 漸層場景系統：步驟徽章、計時揭露內容、3D 卡片，用於整段動畫解說的視覺節奏