精選 · 開放 · 免費

Heylow

為目的導向組織服務的設計與程式碼合作夥伴,協助他們展現與自身作品同等深思熟慮的形象。

AgencyCleanBold TypographyPremiumCalm
Heylow 網站截圖
↓ 下載設計系統包 (10 MB)在 OpenDesign 中開啟

原站: https://heylow.world

📦 瀏覽包內檔案 →

01

設計氣質 DNA

設計程式碼合作夥伴目的導向低碳為長久而生

一個高端、目的導向的創意工作室,在設計與數位執行上重視清晰、優雅與永續性。

02

色彩

#faf8f3Ink
#a8a3a1Ink soft
#0f0e0cBG
#4a4643Muted
rgba(74, 70, 67, 1.0)Line

深色、溫暖、大地色調的單色調色盤,搭配高對比度的文字以確保清晰度與專注力。

03

字型

humanist-sans

在大型展示文字上使用緊湊的字間距,以營造精緻、現代的感覺。 · 為內文字體保持慷慨的行高(1.6),以確保可讀性。 · 導覽與小型標籤使用大寫字母與寬鬆的字間距。 · 所有字體排印保持一致的 400 字重,以營造寧靜、統一的視覺效果。

04

間距

4px
8px
16px
24px
32px
48px
64px
96px

所有間距皆採用一致的 4px 基礎網格,提供結構化且可預測的佈局節奏。

05

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

sm · 4px
md · 8px
lg · 12px
pill · 999px

使用細緻的 1px 邊框,色彩為柔和的大地色調(#4a4643 或 #faf8f3),用以結構化佈局並界定互動區域,而不產生過多的視覺重量。

06

版面

1280container
12columns
24pxgutter
768 / 1024breakpoints

強而可見的網格結構透過虛線邊框線顯現,強調建築般的精確性。

07

動效與互動

200msmicro
200mssmall
500msmedium
cubic-bezier(0.4, 0.0, 0.2, 1)easing

在 hover 時有細微的透明度過渡效果。 · 選單互動採用流暢的淡入/淡出效果。 · 簡約、具目的性的動態,不干擾內容。

細微的透明度變化以指示互動性。 · 即時的回饋,搭配最小化的動畫。

08

組件

09

文案語氣與禁用清單

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

這是一個名為 Heylow 的設計與程式碼合作夥伴機構的作品集網站。設計特點在於寧靜、精緻且深思熟慮的美學。主要色彩包括深沉溫暖的黑色(#0f0e0c)背景,搭配淺色溫暖的灰白色文字(#faf8f3)與柔和的灰色點綴(#a8a3a1, #4a4643)。字體排印使用簡潔的人文主義無襯線字體家族,具備多種字重,並特別強調用於文字標誌的粗體、超大展示字型。佈局寬敞且基於網格,具有清晰的結構線條。關鍵注意事項:不要使用明亮、飽和的強調色;不要使用裝飾性或書法字體;不要使用過多元素或厚重的視覺效果使介面顯得雜亂;不要將內文設定為大寫字母;不要使用厚重的陰影;不要使用複雜、繁忙的佈局。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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