精選 · 開放 · 免費
Lineto
一個簡潔、單色的字體樣本介面,展示 Electa 字型家族。
typefoundry
01
設計氣質 DNA
字體排印字型鑄造字體設計樣本極簡
為現代字型鑄造廠打造的數位字體樣本書
02
色彩
#000000Ink
#FFFFFFBG
#FFFDF7BG quiet
#E0E0E0Muted
rgba(0,0,0,0.12)Line
嚴格的單色無彩色調色盤
03
字型
transitional-serif · humanist-sans · monospace
- display
20px · 400 - body
19px · 400
基礎字級為 19px,字距為 0.38px · 內文行高為 23px · 導覽與強調文字行高為 38px
04
間距
2px
4px
8px
16px
24px
32px
48px
64px
96px
緊湊的格線,基礎單位為 2px 與 7.6px
05
表面 (圓角 / 陰影 / 邊線)
sm · 2px
md · 19px
lg · 19px
pill · 999px
無可見邊框,嚴格的單色邊緣
06
版面
1440container
12columns
24pxgutter
768 / 1024breakpoints
固定標題列含標誌與搜尋、最小化捲動內文、固定底部動作列
07
動效與互動
200msmicro
200mssmall
1500msmedium
lineareasing
透明度過渡效果用於 1.5 秒的淡入淡出 · 寬度與可見性過渡效果為 0.2 秒
按鈕與連結上的指標游標 · 平滑的過渡觸發
08
組件
- button 實心黑色膠囊型按鈕,配白色文字與箭頭/眼睛圖示
- card 無,佈局依賴原始的字體樣本文字
- chip 無
- input 黑色圓圈中的搜尋圖示,底部列的文字輸入欄
- hero 作為主要視覺元素的巨大字體樣本層級排列
09
文案語氣與禁用清單
- 語氣 極簡、臨床、專業
- 標題風格 直接、無標點、小寫品牌名稱
- 按鈕文案 帶有圖示的命令式(閱讀更多、查看全部)
- 不要使用多種字型系列——截圖顯示僅專注使用一種無襯線體和一種襯線體
- 不要添加漸層或陰影——截圖顯示完全平坦、霧面的黑白表面
- 不要將主要文字區塊置中——截圖顯示字體樣本層級排列嚴格左對齊
- 不要使用裝飾性圖像或照片——截圖顯示純粹的字體排印是唯一的視覺元素
- 不要為字體樣本使用大字級——截圖顯示所有內文元素均使用統一的 19px 文字
- 不要在主要按鈕上使用圓角——截圖顯示完全膠囊型的按鈕
- 避免: 過多的空白留白
- 避免: 彩色強調色
- 避免: 裝飾性元素
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是由 Lineto 打造的 Electa 字型的字型鑄造廠樣本網站。設計採用極簡、單色的介面,僅使用黑與白。主要字型類別為導覽與 UI 元素使用的無襯線人文體,以及主要字體樣本展示使用的過渡襯線體。關鍵色彩嚴格限制為 #000000 與 #FFFFFF,並在部分樣本區域使用細微的灰白 #FFFDF7。佈局為左對齊,頂部與底部固定有導覽列與動作列。關鍵限制:切勿使用彩色強調色、切勿添加裝飾性圖像、切勿使用陰影,並嚴格維持單色無彩色調色盤。字體排印是介面的唯一焦點。
en · zh-CN · zh-TW · ja · ko