Design System Experiments 20

同一個網站，二十種設計語言。用 awesome-design-md 的 DESIGN.md 把 ootob.ai 重新穿衣服。

Powered by awesome-design-md · Each page includes interactive showcase sections highlighting what makes each system unique.

Developer Tools & Platforms

Dark-mode-native, indigo-violet accent, luminance stacking, command palette.

Shadow-as-border, extreme letter compression, gallery emptiness.

Warm off-white, three typographic voices, AI timeline aesthetic.

Monochrome chrome + vibrant gradients. Variable weight precision, dashed focus.

Warm neutrals, whisper borders, multi-layer shadows, blank-canvas philosophy.

Pastel accent palette, collaborative canvas aesthetic, ring shadows.

Fintech & AI

Weight 300 elegance, blue-tinted chromatic shadows, financial-grade precision.

Warm parchment canvas, serif headlines, terracotta accent. Literary salon aesthetic.

TerracottaParchment

Dark-first cinema, ultra-light 330 weight, neon green accent, forest-teal surfaces.

Consumer & Media

Cinematic black/gray alternation, single blue accent, pill CTAs, product-as-hero.

Dark immersive, green accent, pill buttons, uppercase labels, now-playing bar.

Photography-first, Rausch Red accent, three-layer warm shadows, generous radii.

Massive uppercase Futura, zero shadows, monochrome UI, full-bleed photography.

Photography-first retail, pill CTAs, frosted glass nav, scale hover animations.

Three-surface channel, weight 300 quiet authority, signature power-on hover.

PS BlueDark/Light/Blue

Editorial & Magazine

Acid-mint + ultraviolet hazard tape, massive Manuka display, color-block tiles.

Broadsheet density, square corners, four typeface roles, mono kicker system.

Automotive & Luxury

Chiaroscuro editorial, razor-sharp 2px corners, extreme red sparseness.

Full-viewport cinematic, uppercase everything, zero UI, one ghost button.

Cinema-black void, monumental 200px+ display, three colors only, silent chrome.