精選 · 開放 · 免費
Norgram
一個專注於本質形式與高對比單色呈現的成熟設計工作室作品集。
StudioPhotographicTypographyCleanPremium
01
設計氣質 DNA
高端極簡本質現代
頂級北歐設計工作室的藝廊
02
色彩
#000000Ink
#1a1a1aBG
#777777Muted
rgba(0,0,0,1.0)Line
以深黑背景與純白文字構成的高對比單色調色盤
03
字型
geometric-sans
- display
87px · 400 - body
12px · 400
大型展示標題採用緊湊的字距調整 · 大量使用 Helvetica Now Display 作為標題與內文字體 · 透過尺度對比來建立極簡的字體層級
04
間距
4px
8px
12px
16px
24px
32px
48px
64px
96px
不受嚴格垂直間距限制，由專案影像主導的不規則格線節奏
05
表面 (圓角 / 陰影 / 邊線)
sm · 2px
md · 4px
lg · 7px
pill · 26px
浮動介面元素使用 0 4px 12px rgba(0,0,0,0.15) 陰影
06
版面
1400container
12columns
8pxgutter
768 / 1024breakpoints
不對稱瀑布流格線，搭配大型主視覺影像與浮動的文字覆層
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.87, 0, 0.13, 1)easing
滑動介面面板的平滑進入過渡 · 覆層元素的透明度漸隱 · 互動元素細膩的互動狀態過渡
互動元素細膩的透明度或變形移動 · 平滑的面板過渡
08
組件
- button 用於導覽分頁的小型圓角藥丸按鈕
- card 以影像為主的專案卡片，帶有中繼資料覆層
- chip 帶有邊框的小型中繼資料標籤
- input 帶有細邊框的極簡文字輸入欄位
- hero 全幅或半幅的電影感專案影像，搭配覆蓋的中繼資料
09
文案語氣與禁用清單
- 語氣 極簡、自信且具權威感
- 標題風格 採用緊湊字距的幾何無襯線大型宣言式標題
- 按鈕文案 內斂、功能性的導覽設計
- 勿使用鮮明的強調色——截圖顯示的是嚴謹的單色調色盤
- 勿使用襯線字體——截圖中全程使用 Helvetica Now Display
- 勿使用寬鬆的字距——即使在大尺度下，截圖顯示的字距仍相當緊湊
- 勿對所有元素使用小圓角——截圖顯示藥丸形按鈕與方角並存
- 勿使用厚重的陰影——截圖顯示的是極簡、細膩的陰影
- 勿使用複雜的格線——除了特定介面元素，截圖顯示的是乾淨、無邊框的佈局
- 避免: 裝飾性元素
- 避免: 繁複的版面佈局
- 避免: 鮮明的強調色
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Norgram 是一個高端設計工作室作品集，其特徵在於嚴謹的單色調色盤與幾何無襯線字體。主要背景為深炭灰色 #1a1a1a，搭配純白 #ffffff 或實黑 #000000 文字。核心字體類別為 geometric-sans，特別是 Helvetica Now Display，同時用於巨大的展示標題與微小的中繼資料。佈局依賴不對稱格線，搭配大型、具電影感的專案影像與浮動文字覆層。關鍵禁忌：勿引入鮮明的強調色，以維持嚴格的單色美學。勿使用襯線字體，其識別度建立於幾何無襯線上。勿應用寬鬆字距，設計即使在展示尺度下仍使用緊湊字距。動態效果內斂，使用 ease-in-out 與 cubic-bezier 過渡處理面板滑動與透明度漸隱。整體感受是精煉、本質且高度受控的。
en · zh-CN · zh-TW · ja · ko