精選 · 開放 · 免費

Miro

Miro 是團隊與 AI 代理共同思考、規劃與構建的協作平台。

01

設計氣質 DNA

一個數位白板，作為團隊構思與 AI 代理協作的中樞神經系統。

02

色彩

採用純淨白色畫布搭配高對比深色文字以確保可讀性，使用單一鮮明藍色作為主要互動色彩，並以柔和灰色構建結構。

03

字型

humanist-sans · monospace

• display56px · 500
• h148px · 500
• h224px · 600
• body16px · 400
• small12px · 400

標題使用 font-weight 500，維持友善且專業的視覺感受。 · 較大的標題採用負字距（tracking）來緊縮視覺節奏。 · 內文保持中性 400 字重，搭配寬裕行高以提升可讀性。

04

間距

基於 Base-4 格線系統，內部間距與元件間隙採用一致的 8px 與 16px 間隔。

05

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

謹慎使用細微 1px 邊框，主要應用於輸入欄位與卡片。

0px 1px 3px rgba(0,0,0,0.1) · 0px 10px 10px -3.75px rgba(0,0,0,0.06) · 0px 2.28px 2.28px -2.5px rgba(0,0,0,0.16)

06

版面

標準 12 欄格線佈局，主容器置中對齊。

07

動效與互動

按鈕與互動元件採用流暢的 hover 轉場效果。 · 互動狀態的背景色與 transform 動畫。

細微背景色變換或邊框顏色改變。 · 縮放或 transform 微型動畫。

08

組件

• button 實心黑色「免費開始」與「瞭解更多」按鈕，採用藥丸形或圓角矩形；首頁主視覺的「免費開始」按鈕使用藍色。
• card 淺灰色背景卡片，採用圓角設計，包含標題、圖示與說明文字。
• chip 小型藥丸形元素，用於顯示使用者游標或標籤。
• input 簡潔的圓角矩形輸入欄位，搭配細微邊框。
• hero 置中文字型首頁主視覺，搭配醒目輸入欄位與行動呼籲按鈕。

09

文案語氣與禁用清單

• 語氣 賦予能力、專業且前瞻。
• 標題風格 簡短有力、以效益為導向的語句，闡述協作與 AI 價值。
• 按鈕文案 直接且具行動導向（例如：「免費開始」、「前往控制面板」）。

• 不使用襯線字體——截圖顯示乾淨的人文無襯線字體排版。
• 不採用深色模式主題——截圖以白色/淺灰色背景為主。
• 不使用厚重裝飾性陰影——截圖呈現細微柔和的陰影效果。
• 不使用混亂多色調色盤——截圖採用克制的白、黑、灰及單一藍色強調色。
• 不使用生硬尖銳的四處圓角——截圖混用圓角矩形（12px、20px）與藥丸形設計。
• 不使用密集小字標題——截圖採用寬鬆間距的大型標題。
• 避免: 首頁主視覺避免過度技術術語或冗長段落。
• 避免: 避免具侵略性或過度推銷的語氣。
• 避免: 避免雜亂佈局干擾核心訊息傳遞。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

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