精選 · 開放 · 免費
Lamalama Nl
一家全力以赴的創意數位機構,否則寧願不做。
AgencyBold TypographyDark ModePhotographicExpressive
01
設計氣質 DNA
創意大膽無所畏懼工藝機構
一個數位創意工作室,將高衝擊力的攝影與大尺寸、緊湊排列的排版相結合。
02
色彩
#f9f4ebInk
#ffffffInk soft
#010101BG
#1a1c1cBG soft
#999999Muted
rgba(249, 244, 235, 0.2)Line
高對比的雙元性:深黑色背景搭配溫暖的米白色文字,旨在讓大尺寸排版與攝影作品更加突出。
03
字型
grotesque-sans · geometric-sans
- display
80px · 700 - heading-1
40px · 500 - body
16px · 400
所有使用者介面標籤與元資料皆採用大寫字母與類似等寬字體的字距調整。 · 標題嚴格採用左對齊與緊湊的行距設定。 · 內文保持在約 680px 的舒適閱讀長度。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
標準 4px 基礎網格,搭配寬裕的留白空間,以襯托大膽的排版元素。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 0px
lg · 0px
pill · 9999px
極簡的 1px 實線邊框僅用於結構性分隔,而非裝飾。
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
不對稱網格,包含一個厚重的主視覺區域、固定的底部導航欄,以及側邊面板影像。
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 1, 0.5, 1)easing
頁面之間流暢的過渡效果。 · 互動元素上細膩的 hover 狀態。 · 動態的背景影像切換。
互動元素上細膩的透明度或背景色變化。 · 透過狀態變化提供即時的視覺回饋。
08
組件
- button 半透明的膠囊按鈕,採用模糊或實色背景作為行動呼籲。
- card 以圖片為主的卡片,無邊框設計,依賴攝影構建結構。
- chip 大寫文字膠囊,用於標籤與元資料。
- input 極簡的底部邊框輸入框,用於表單。
- hero 全出血的沉浸式區域,搭配電影感影像上方的超大尺寸排版。
09
文案語氣與禁用清單
- 語氣 自信、直接且無所畏懼。
- 標題風格 全大寫、緊湊字距、巨大尺度。
- 按鈕文案 簡約、以行動為導向的文字,置於小型大寫膠囊中。
- 勿使用置中文字——截圖顯示所有標題與內文皆嚴格採用左對齊。
- 勿使用襯線字體——截圖顯示僅使用 grotesque 與 geometric 無襯線字體類別。
- 勿使用明亮的霓虹色調——截圖顯示採用柔和的米白色與深黑色高對比調色板。
- 勿在按鈕上使用厚重的 border-radius——截圖顯示採用膠囊形狀或細微圓角。
- 勿使用密集的段落佈局——截圖顯示文字區塊周圍有寬裕的留白空間。
- 勿在內文中使用多種字重——截圖顯示標準文字採用統一字重。
- 避免: 被動語態
- 避免: 過多的形容詞
- 避免: 置中的文字區塊
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
一個大膽、高對比的創意機構網站,以巨大的 grotesque 字體排版與電影感攝影為特色。設計採用深黑色(#010101)背景與溫暖的米白色(#f9f4eb)文字。展示型排版使用厚重的 grotesque-sans 字體類別與緊湊行距,而內文則使用簡潔的 geometric-sans 字體類別。佈局嚴格採用左對齊,避免使用置中元素以維持專業、編輯風格的感受。關鍵互動包括流暢的 hover 轉場效果與沉浸式的全出血主視覺區域。請務必避免使用襯線字體、置中文字、明亮的霓虹色調,或是密集、雜亂的佈局。系統強調透過視覺衝擊而非繁瑣的使用者介面模式來展現「全力以赴」的大膽氣勢。
en · zh-CN · zh-TW · ja · ko