精選 · 開放 · 免費
Aletagency
一家位於哥本哈根的創意工作室與製作公司,擁有策展式的、編輯風格的數位形象。
AgencyStudioCurationPhotographicRefined
01
設計氣質 DNA
創意故事敘事製作哥本哈根
一個策展的、高端的數位作品集,如同數位情緒板
02
色彩
#000000Ink
#252525Ink soft
#E5DDC4BG
#A2A093Muted
rgba(0, 0, 0, 0.1)Line
柔和、大地色調的中性背景,搭配高對比的黑色字體排印。
03
字型
transitional-serif · humanist-sans
- display
23px · 400 - body
11px · 400
為導覽與標籤使用寬鬆的字間距 · 將襯線體保留用於富有表現力的首頁醒目時刻
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
寬鬆的垂直節奏,核心內容周圍擁有大量留白
05
表面 (圓角 / 陰影 / 邊線)
sm · 11px
md · 11px
lg · 11px
pill · 9999px
極簡,依賴間距來進行區隔
rgba(0, 0, 0, 0.1) 0px 1px 3px 0px · rgba(0, 0, 0, 0.06) 0px 1px 2px 0px
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
置中的內容,搭配寬鬆的 padding 與瀑布流式的圖片排列
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
游標變為「抓取」圖示,表示可拖曳的畫廊
互動文字元素的細膩色彩過渡 · 主畫廊的拖曳探索互動
08
組件
- button 極簡的、基於字體排印的導覽連結
- card 超大尺寸的圖片卡片,帶有細微邊框
- chip 簡單的膠囊式切換鈕,用於檢視模式(Linear/Random)
- hero 動態的、重疊的項目圖片網格,搭配置中的文字聲明
09
文案語氣與禁用清單
- 語氣 專業、精緻且內斂
- 標題風格 基於襯線體、略帶詩意的聲明
- 按鈕文案 簡潔、無襯線、大寫的標籤
- 不要使用明亮的強調色——截圖顯示的是嚴格的柔和、大地色調調色板
- 不要套用厚重的陰影——截圖僅顯示極簡、柔和的層次效果
- 不要對圖片使用嚴格的網格——截圖顯示的是動態、重疊的佈局
- 不要使用裝飾性的無襯線字體——截圖使用功能性的、人文主義無襯線體作為 UI
- 不要讓介面雜亂——截圖優先考量大量留白與呼吸空間
- 不要過度使用全大寫——截圖嚴格將其保留用於導覽與切換鈕
- 避免: 喧鬧的行銷術語
- 避免: 複雜的佈局模式
- 避免: 雜亂的介面
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
此網站是一個位於哥本哈根的創意代理商作品集,優先考量精緻的、編輯風格的美學。主要背景是溫暖柔和的米色(#E5DDC4),搭配鮮明的黑色字體排印(#000000)。字體系統使用過渡襯線體以實現富有表現力的時刻,並使用人文主義無襯線體作為功能性 UI 元素。至關重要的是,設計避免使用明亮的強調色、厚重的陰影與雜亂的網格,而是運用大量留白、細微邊框與重疊的圖片卡片。導覽極簡且為大寫,互動則專注於一種觸覺式的「拖曳探索」畫廊。
en · zh-CN · zh-TW · ja · ko