North star · Keep the interface quiet and spacious so the featured motion work carries the visual impact.
The page uses a light grey canvas (#eeeeee) as its continuous backdrop, with near-black (#080808) for the logo, headlines, navigation, and most copy. Off-white (#fdfdfc) panels distinguish project links, article cards, and utility modules; muted grey (#646464) handles secondary labels and inactive navigation. Suisse Int'l is used throughout in a clean sans-serif voice, with larger, plainly set introductory and navigation text balanced by compact captions and card metadata. The desktop composition is asymmetric: a small brand mark and two introductory text blocks sit across the top, while a large featured project image dominates the main column and a narrow stack of controls and project links occupies the right. Below, three editorial cards form a compact row, followed by a sparse footer. Generous gaps keep the interface calm; rounded modules and image corners soften the grid. Colourful artwork and photography supply the main visual contrast, rather than interface accents.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
表层色
中性色
功能色
页面底色 · Soft Canvas表层 · Warm Paper主文字 · Studio Ink次要文字 · Quiet Grey弱文字 · Warm Paper
The sole site-wide typeface for introductions, navigation, card text, captions, and controls.
角色
示例
字号
字重
行高
字距
一级标题
Introductory studio statement at the top of the homepage.
The quick brown fox 敏捷的狐狸
20px
450
1.2
0
正文
Studio description and supporting project or article copy.
The quick brown fox 敏捷的狐狸
16px
400
1.5
0
辅助文字
Compact project labels, source badges, and card metadata.
The quick brown fox 敏捷的狐狸
11px
450
1.2
0
按钮
Small utility and action labels, including cookie preferences.
The quick brown fox 敏捷的狐狸
13px
450
1.2
0
导航
Prominent home and page navigation links.
The quick brown fox 敏捷的狐狸
20px
450
1.2
0
链接
Project links and calls to view more work.
The quick brown fox 敏捷的狐狸
20px
450
1.2
0
间距与布局
基准单位 4px · 密度：宽松
128px版块间距
8px元素间距
—卡片内边距
—内容最大宽度
1px
2px
4px
8px
10px
11px
16px
20px
24px
32px
Use a broad desktop composition with a small brand mark and two text blocks aligned across the top. Below, give most of the width to one featured project and reserve a narrow right rail for a motion widget, navigation controls, and stacked project links. Follow the feature with three evenly sized article cards, then a sparse footer. The measured page is spacious; preserve large section pauses and clear alignment rather than inventing a fixed maximum width.
圆角与层次
按钮 · 20px
卡片 · 20px
导航 · 16px
链接 · 20px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface reads as mostly flat, without measured shadows. Separate cards and controls with changes between the grey canvas and off-white surfaces, plus rounded corners on prominent modules. Allow image content to provide its own depth and contrast; avoid adding decorative borders or extra shadow treatments.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Introductory header
A compact brand mark sits alongside a short, larger studio statement and a denser explanatory paragraph on the grey canvas.
Featured project
A wide rounded image panel dominates the main column, with a translucent-looking text overlay visible over the lower image area.
Right utility rail
A narrow stack combines a circular time-and-place graphic, pill-like navigation controls, a new-business contact link, and a showcase thumbnail.
Project links
Off-white rounded rows pair compact title and client metadata with small dark image or logo previews.
Article cards
Three off-white cards use a compact source or category label, a text headline, and a large editorial cover image.
Footer
A spacious closing area aligns a brief studio statement, navigation and social links, then small legal and back-to-top links.
Imagery · Lead with a large photographic project presentation showing a designed motion identity in an urban display setting. Supporting project thumbnails and article covers bring contrasting graphic compositions, typography, and bright colors. A small motion-oriented module in the right rail reinforces the studio’s specialty. Treat artwork as embedded project content: it supplies color and visual energy while the surrounding interface stays neutral.
该做与不该做
✓ 该做
Keep the page canvas consistently #eeeeee.
Use #080808 for primary text and brand marks.
Reserve #fdfdfc for cards and pale utility panels.
Use #646464 for secondary labels and inactive links.
Let project imagery provide the strongest color.
Preserve the asymmetric main-column and right-rail composition.
Use rounded image and card containers sparingly.
✕ 不该做
Do not introduce unmeasured interface colors.
Do not make every panel equally prominent.
Do not crowd the header or footer.
Do not replace project imagery with generic decoration.
Do not add heavy borders or prominent shadows.
Do not apply oversized display typography across the page.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new creative-studio page in Vucko’s restrained portfolio style. Use Soft Canvas (#eeeeee) across the page, Studio Ink (#080808) for primary copy and navigation, Warm Paper (#fdfdfc) for card and utility surfaces, and Quiet Grey (#646464) for secondary labels. Set all text in a clean Suisse Int'l-like sans serif with natural casing and restrained weights. Create an asymmetrical desktop layout: a concise intro across the top, a large featured work area, and a narrow utility rail with stacked project links. Follow with a row of editorial image cards and a sparse footer. Keep generous breathing room, use rounded media and surfaces, and make vivid imagery—not interface decoration—the source of contrast. Avoid invented accent colors, heavy shadows, or dense ornament.
