精選 · 開放 · 免費
Remix
為開發者打造的現代、高效能網頁框架。
devtoolsframework
01
設計氣質 DNA
開發者框架效能現代
專為網頁開發打造的高速賽道
02
色彩
#3facf9Accent
#ffffffInk
#dee2e6Ink soft
#000000BG
#1e2226BG soft
rgba(255, 255, 255, 0.12)Line
高對比深色模式,搭配鮮明、充滿活力的點綴色。
03
字型
geometric-sans · humanist-sans · monospace
- display
84px · 700 - heading
56px · 700 - body
16px · 400 - caption
13px · 400
導覽和 UI 標籤使用大寫字母與等寬字體。 · 醒目標題使用粗體、緊湊字距的幾何無襯線字體。 · 內文使用簡潔的人文主義無襯線字體。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
120px
主要內容區塊之間保留寬裕的垂直內距 (120px)。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 24px
pill · 999px
1px solid rgba(255, 255, 255, 0.12)
rgb(253, 189, 134) 0px 0px 2px 0px · rgb(253, 189, 134) 0px 0px 8px 0px
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
全寬度深色首頁區塊,中央放置內容區,過渡為雙欄功能展示佈局。
07
動效與互動
150msmicro
300mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
細微的背景粒子動畫與發光光軌。 · UI 元素的平滑透明度過渡效果。
互動元素的顏色過渡效果。 · 按鈕和連結使用指標游標。
08
組件
- button 簡約的文字按鈕,常為大寫等寬字體標籤。
- card 深色背景搭配語法高亮的程式碼區塊,或帶有細微邊框的玻璃擬態面板。
- chip 大寫等寬字體的導覽標籤(例如:[G] GITHUB)。
- input 命令列風格,使用等寬字體(例如:npx remix@next new)。
- hero 超大尺寸、緊湊字距的醒目字體,置於動態深色粒子場背景之上。
09
文案語氣與禁用清單
- 語氣 自信、技術性、賦予力量。
- 標題風格 大膽、直接的陳述,強調強大功能與 versatility。
- 按鈕文案 直接的指示,常包含命令列程式碼片段。
- 勿使用淺色模式或柔和背景色——截圖顯示為深色、高對比環境。
- 勿使用襯線或手寫字體作為標題——截圖顯示為粗體、緊湊字距的幾何無襯線字體。
- 勿在元件上使用厚重粗邊框——截圖顯示為細微、纖細、低不透明度的邊框。
- 勿在導覽中使用標準句首大寫——截圖顯示為大寫等寬字體標籤。
- 勿使用靜態、扁平的背景——截圖顯示為動態、具動畫效果的粒子場與發光光軌。
- 勿使用狹窄、擁擠的間距——截圖顯示區塊之間保留寬裕的垂直內距。
- 避免: 過於複雜的技術術語,卻未清楚說明其效益。
- 避免: 被動或猶豫的語氣。
- 避免: 明亮或柔和的色彩調色盤。
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Remix 是一個高效能網頁框架網站,採用深色、以開發者為導向的美學。設計使用純黑 (#000000) 與米白 (#ffffff, #dee2e6) 為主調色盤,搭配鮮明的藍色點綴 (#3facf9) 與充滿活力的光軌。字體結合粗體幾何無襯線字體用於大型醒目標題、人文主義無襯線字體用於內文,以及等寬字體用於程式碼和 UI 標籤。關鍵特徵包括緊湊字距的標題、寬裕的垂直間距 (120px),以及細微、發光的互動元素。重要禁忌:避免淺色主題、避免使用襯線字體作為標題、避免厚重邊框。網站設計需營造快速、現代、技術性的感覺。
en · zh-CN · zh-TW · ja · ko