精選 · 開放 · 免費

Carrd

為單頁式網站建立器打造的極簡漸層風格登陸頁。

nocodetool

↓ 下載設計系統包 (44 MB)在 OpenDesign 中開啟

原站: https://carrd.co

📦 瀏覽包內檔案 →

設計氣質 DNA

簡潔無障礙響應式

一個數位工具包的沉靜幾何風格歡迎畫面。

色彩

#33ada9Accent

#ffffffInk

rgba(255,255,255,0.75)Ink soft

#24252dBG

rgba(255,255,255,0.4)Muted

rgba(255,255,255,0.075)Line

深色低飽和度漸層上的高對比白色文字，搭配一個鮮明的青綠色強調色。

字型

grotesque-sans

display56px · 700
heading34px · 700
body-lg24px · 400
body16px · 400
caption12px · 400

間距

4px

8px

16px

24px

32px

48px

64px

96px

以 4px 為基礎的排版節奏，大型區塊採用寬鬆的內距（32-64px）。

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

sm · 4px

md · 6px

lg · 12px

pill · 999px

細緻的 1-2px 白色邊框，可變透明度（0.4 至 0.75）或實心白色描邊。

rgba(0, 0, 0, 0.1) 0px 8px 16px 0px

版面

1280container

12columns

24pxgutter

768 / 1024breakpoints

首頁英雄區採置中單欄佈局，進入功能區時轉為雙欄網格。

動效與互動

200msmicro

250mssmall

800msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

hover 與 focus 時的顏色與透明度過渡 · 頁面區塊淡入

互動元素上的顏色過渡與細微透明度變化。 · 不適用

組件

button 圓角矩形，主要操作採實心青綠色填充，次要操作則為細白色邊框。
card 帶有圖片與細緻陰影的卡片，常用於範本預覽。
chip 不適用
input 不適用
hero 全寬置中佈局，包含大型標誌、主標題、副標題與主要 CTA 按鈕。

文案語氣與禁用清單

語氣實用、極簡且親切。
標題風格 粗體、大字且乾淨，常使用單一詞彙如「響應式」或「免費」。
按鈕文案 直接且以行動為導向，使用如「選擇一個起點」這樣的短語。

勿使用多個相互競爭的強調色——截圖中僅有一個青綠色（#33ada9）作為唯一鮮豔色調。
勿使用複雜、多層次的漸層——截圖顯示為簡單的雙色線性漸層疊加。
勿使用裝飾性或襯線字體——截圖顯示為乾淨的標準 grotesque-sans（Arial/Helvetica）。
勿使用厚重、純黑的背景——截圖顯示為深炭灰色（#24252d）作為主要背景。
勿為按鈕使用方形、銳利的邊角——截圖顯示一致的 6px 圓角。
勿使用寬廣、散佈的佈局——截圖顯示內容限制在一個狹窄的置中欄位內。
避免: 術語過多的技術語言
避免: 過度複雜的句子
避免: 強勢或急迫的語氣

包內真實截圖

Carrd — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

擷取自真實頁面 · 真 computed styles

System Prompt

Carrd 是一個極簡且用戶友善的工具，用於建立簡單的單頁式網站。其設計採用以炭灰色（#24252d）為核心的深色低飽和度色調，搭配細微的紫藍色漸層疊加。字型嚴格以功能性為主，所有標題與內文皆依賴標準系統 grotesque-sans 字體（Arial/Helvetica）。單一鮮明的強調色是低飽和度的青綠色（#33ada9），專門用於主要號召行動按鈕，以提供清晰的視覺引導。關鍵設計限制包括避免複雜配色、維持嚴格的置中單欄或簡潔雙欄佈局，以及僅為互動元素使用一致的 6px 圓角。整體語調沉靜、克制，高度專注於清晰度與易用性。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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