精選 · 開放 · 免費

Madebyon

專注於透過大膽設計與技術創新，塑造數位體驗未來的高端數位代理商。

01

設計氣質 DNA

如同為數位體驗服務的高端建築事務所，結合技術精確度與創意魄力。

02

色彩

高對比極簡主義，單一鮮豔強調色用於號召性用語，打造大膽、聚焦的視覺層次。

03

字型

geometric-sans

• display56px · 400
• h240px · 400
• body16px · 400
• caption12px · 400

所有主要文字使用幾何無襯線字體，保持簡潔現代的美感。 · 標題字號放大且加粗，字距緊湊以增強衝擊力。 · 限制字重變化，主要依賴字重 400 以保持一致、精緻的外觀。

04

間距

以 8px 為基準單位的一致節奏，搭配充裕留白，營造寬敞、高端的空間感。

05

表面 (圓角 / 陰影 / 邊線)

極簡邊框，透過細微的透明度變化或髮絲線分隔線進行區隔。

0px 4px 14px rgba(0, 0, 0, 0.12) · 0px 24px 60px rgba(0, 0, 0, 0.35) · 0px 32px 68px rgba(0, 0, 0, 0.3)

06

版面

首頁文字左對齊，下方為全寬視覺元素，過渡至網格系統的專案展示。

07

動效與互動

頁面元素採用流暢的淡入與變換動畫。 · 實驗性區塊中的動態影片背景搭配細微粒子效果。 · 互動元素的懸停過渡效果以增強回饋感。

透過顏色變化、透明度調整或輕微變換提供細微視覺回饋。 · 即時的視覺回應，搭配流暢的過渡狀態。

08

組件

• button 高對比膠囊形按鈕，採用鮮豔強調色（黃色）與黑色文字，或白色文字的描邊膠囊按鈕。
• card 內容卡片具有充裕內距、細微的背景區分，以及流暢的懸停過渡效果。
• chip 極簡的標籤用於導航或標記，通常帶有邊框或細微背景。
• input 簡潔的輸入欄位，具備細微邊框與明確的聚焦狀態。
• hero 全寬沉浸式首頁區塊，搭配大型排版與動態視覺背景（影片/圖片）。

09

文案語氣與禁用清單

• 語氣 自信、具遠見且專業，帶有前瞻性視角。
• 標題風格 大膽、宣言式的語句，使用大型、具衝擊力的排版。
• 按鈕文案 直接且行動導向，使用高對比按鈕驅動互動。

• 勿使用裝飾性或襯線字體——截圖顯示通篇採用簡潔的幾何無襯線字體。
• 勿使用多種強調色——截圖僅顯示一個主導的強調色（黃綠色）。
• 勿用不必要的元素使介面雜亂——截圖顯示充裕的留白與極簡的介面。
• 勿使用小而擁擠的排版——截圖顯示字號大、易讀的文字與充裕的間距。
• 勿使用僵硬、方正的佈局——截圖顯示流暢、有機的元素與圓角設計。
• 勿依賴粗重邊框進行區隔——截圖顯示的是細微的間距與背景區分。
• 避免: 技術術語
• 避免: 過於隨意的語言
• 避免: 不確定或猶豫的措辭

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko