精選 · 開放 · 免費
Stellar Work
以機構速度交付的精英設計服務。
AgencyPortfolioPremiumBold TypographyClean
01
設計氣質 DNA
快速精英設計衝刺資深級別
一家提供速度與獨家性的高端設計精品店。
02
色彩
#6A48F2Accent
#FFFFFFInk
#888888Ink soft
#171718BG
#2C2C2EBG soft
rgba(255, 255, 255, 0.2)Line
深色、中性的基礎,搭配單一電紫色作為主要操作的強調色。
03
字型
grotesque-sans
- display
80px · 400 - display-lg
96px · 400 - body
16px · 400
大型展示型文字採用緊湊字距 · 段落之間留有充足的垂直間距
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
128px
200px
280px
彈性格線系統,搭配大垂直邊距(128-280px)以創造呼吸空間。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 10px
lg · 16px
pill · 50px
細微的 1px 邊框,使用 rgba(255,255,255,0.2) 作為輕微區隔。
0px 0px 16px 0px rgba(255, 219, 0, 0.5)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中、寬幅容器,搭配充裕的水平邊距,首頁區塊則採用緊湊的垂直對齊。
07
動效與互動
220msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
所有互動元素採用流暢過渡動畫(0.3秒) · 內容揭露時搭配細微的淡入效果
按鈕與互動元素在互動時,背景或透明度產生細微變化。 · 點擊時提供即時視覺回饋,帶有輕微的縮放或透明度變化。
08
組件
- button 膠囊形(border-radius: 50px),實心強調色填充,搭配白色文字。
- card 深色背景卡片(rgba(23,23,24,1.0)),帶有細微邊框與圓角。
- chip 用於篩選的膠囊形標籤(例如:「品牌設計」、「網站設計」)。
- hero 以深色為背景,搭配大型、緊湊字距的展示型字體,影像元素極簡。
09
文案語氣與禁用清單
- 語氣 自信、直接、高端。
- 標題風格 簡短、有力、以價值為導向的陳述。
- 按鈕文案 清晰、以行動為導向的動詞,如「預約」或「開始」。
- 不要使用明亮或柔和的背景色——截圖顯示的是深灰色(#171718)
- 不要使用裝飾性或手寫風格的字體——截圖顯示的是簡潔的 grotesque-sans 字體
- 不要使用多種高飽和度的強調色——截圖顯示的是單一主導的紫色(#6A48F2)
- 不要使用狹小、擁擠的展示型字體——截圖顯示的是大型、緊湊字距的標題
- 不要使用銳利、方正的按鈕邊角——截圖顯示的是膠囊形(50px 圓角)按鈕
- 不要使用繁雜、擁擠的佈局——截圖顯示的是寬裕的留白與簡潔的格線
- 避免: 謙遜或過度客套的語言
- 避免: 通用的企業術語
- 避免: 過多的驚嘆號
- 避免: 冗長的解釋
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Stellar Work 是一個高端、高速的設計機構登陸頁面,其特色在於暗色、沉穩的美學,以及大型、緊湊字距的 grotesque-sans 排版。色板嚴格單色(深灰色 #171718 背景,白色 #FFFFFF 墨色,#888888 柔化色),並僅使用單一鮮明的電紫色(#6A48F2)作為主要行動呼籲按鈕與強調色。佈局寬敞居中,擁有充裕的垂直邊距與 12 欄格線。避免使用淺色背景、裝飾性襯線字體、多種明亮色彩或繁雜、資訊密集的區塊。互動保持流暢,採用 0.3 秒過渡動畫,並在所有文案中維持自信、直接的語氣。
en · zh-CN · zh-TW · ja · ko