精選 · 開放 · 免費
Notreal Tv
一個結合工藝、敘事與科技的獨立創意機構,服務全球品牌。
AgencyPortfolioTypographyEditorialClean
01
設計氣質 DNA
創意獨立設計導向工藝敘事科技
宛如一座精心策展的高階創意工作室畫廊。
02
色彩
#292a2cInk
#f2f2f2BG
rgba(0,0,0,1)Line
極簡、高對比的畫布,讓作品集影像成為色彩的主體。
03
字型
transitional-serif · geometric-sans
- display
80px · 400 - h2
25px · 400 - body
18px · 400
主標誌與藝術性強調使用過渡型襯線體。 · 所有導覽、描述與內文使用幾何無襯線體。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
寬敞而通透,作品集項目之間留有大量邊距,文字區塊周圍亦有充裕的 padding。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
極簡,偶爾使用 2px 實心黑色線條作為細微的結構分隔。
0px 0px 5px 0px rgb(128, 128, 128)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
不對稱的網格佈局,搭配大型顯眼的媒體區塊與簡潔、左對齊的文字說明。
07
動效與互動
200msmicro
300mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
導覽與互動元素上的細膩過渡效果。 · 作品集項目上的 hover 效果。
文字連結與作品卡片上的細微視覺變化或底線。 · 直接導覽至項目詳細頁面。
08
組件
- button 簡潔的文字連結用於導覽。
- card 全寬或半寬的媒體區塊,說明文字直接置於下方。
- hero 左側為大型襯線體標誌,右側為描述文字,下方則是大幅精選作品圖。
09
文案語氣與禁用清單
- 語氣 專業、精緻且具藝術感。
- 標題風格 簡短、具描述性,常使用斜體以示強調。
- 按鈕文案 極簡,導覽中使用文字連結。
- 勿使用圓角——截圖顯示為銳利的直角邊緣。
- 勿使用鮮豔飽和的 UI 顏色——截圖顯示為中性的近白色背景。
- 勿使用無襯線體作為主標誌——截圖顯示為過渡型襯線體。
- 勿使佈局雜亂——截圖顯示為非常簡潔、通透的網格,並留有大量空白。
- 勿在主要元素上使用投影——截圖顯示為平面影像,僅在特定元素上有極細微的陰影。
- 勿將內文全部大寫——截圖顯示為句首大寫或標題式大寫。
- 避免: 過度隨意或俚語化的語言。
- 避免: 過多使用驚嘆號。
- 避免: 模糊或籠統的描述。
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是 NotReal(一個獨立創意機構)的設計 DNA。網站以近白色 (#f2f2f2) 為背景,搭配深炭灰色 (#292a2c) 文字,呈現簡潔的編輯式佈局。排版上,精緻的過渡型襯線體用於標誌與強調,而簡潔的幾何無襯線體則用於導覽與描述。佈局基於網格但呈現不對稱,賦予高品質作品圖像顯著的視覺比重。關鍵設計限制:請勿使用圓角或鮮豔的 UI 顏色;美學風格為銳利、平面且專業。請勿使介面雜亂;充足的留白是核心特色。請勿使用無襯線體作為主 'NotReal' 品牌標誌;它必須保持襯線體。
en · zh-CN · zh-TW · ja · ko