深色极简的作品集以宽松的图片网格展示 Thomas Vimare 的设计项目。克制的文字与低调导航让视觉焦点落在色彩鲜明的作品图像上。
North star · Keep the interface nearly monochrome and let the project images provide the page’s color and visual variety.
The page uses a black canvas as a continuous frame, with white text for primary content and muted gray for secondary labels and navigation details. A near-black media surface gives selected archive imagery a subtle lift without introducing decorative card treatments. Helvetica Now Display Light creates a fine, understated typographic voice: large introductory copy reads like an editorial statement, while project names and captions stay small and quiet. The main work area is a two-column gallery of broad rectangular images, with consistent alignment and clear breathing room between rows. Project artwork supplies almost all saturated color, so the surrounding interface stays neutral and does not compete. The archive continues the same dark language, including a prominent oversized title tile and simpler portfolio-link tiles. Overall, the design relies on scale, whitespace, image variety, and restrained contrast rather than shadows, ornament, or bright interface accents.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
表层色
中性色
页面底色 · Canvas Black表层 · Media Charcoal主文字 · Paper White次要文字 · Quiet Gray描边 · Paper White
Navigation, introductory display copy, headings, project names, captions, and links.
角色
示例
字号
字重
行高
字距
特大标题
Large introductory statement above the selected-project gallery.
Thomas Vimare
56px
400
1.2
-0.003em
一级标题
Primary page or section headings, including archive content.
Thomas Vimare
32px
400
1.5
-0.005em
二级标题
Secondary section headings and larger project-related titles.
Thomas Vimare
28px
400
1.4
-0.006em
三级标题
Compact headings for individual content blocks or project items.
The quick brown fox 敏捷的狐狸
24px
400
1
-0.007em
正文
Introductory and descriptive text accompanying portfolio content.
The quick brown fox 敏捷的狐狸
20px
400
1.4
-0.008em
链接
Navigation and text links such as Biography and Instagram.
The quick brown fox 敏捷的狐狸
20px
400
1.2
-0.008em
间距与布局
基准单位 4px · 密度：适中
60px版块间距
—元素间距
—卡片内边距
1320px内容最大宽度
2px
5px
10px
20px
48px
60px
120px
160px
The page follows a centered portfolio canvas with a measured maximum width of 1320px. The top navigation sits on one horizontal line, followed by a left-aligned introductory statement and a two-column project gallery. Project imagery forms broad, consistent rectangles with captions beneath. Sections retain a comfortable rhythm, with a measured 60px section gap and generous whitespace around the opening statement and archive. Keep the overall density low; align titles, images, and captions consistently rather than adding decorative modules.
圆角与层次
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The page is fundamentally flat: no measured shadows, gradients, or rounded-card system. The black canvas separates content through whitespace, while occasional near-black media surfaces add slight tonal distinction. White borders are present in the measured palette but do not define a pervasive boxed-card interface; avoid invented elevation or ornamental layering.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Top navigation
Single horizontal row of text links on black; active Work is underlined, while other links stay subdued and the designer name sits at the far right.
Intro statement
Large, light-weight, left-aligned text introduces the designer and current work, followed by a muted Selected projects cue.
Project gallery
Two-column layout of large rectangular project images, each followed by a compact title and subdued descriptive caption.
Archive feature tile
A large dark media tile featuring an oversized Archives title and a small date label within the artwork.
Archive links
Simple image-led tiles for Dribbble and Behance, with restrained labels and supporting text below.
Footer links
Compact version and update details align opposite a short row of social and publishing links.
Imagery · Use large rectangular project images as the main visual content. The gallery mixes campaign photography, product interfaces, identity work, and colorful motion or illustrative artwork; the screenshots show varied project-specific color rather than a unified image filter. Keep images crisp, naturally framed, and paired with quiet text captions. Archive tiles use simpler graphic treatments against dark surfaces.
Keep primary interface text white and secondary text muted gray.
Let project artwork carry saturated color.
Align gallery images and captions to a consistent two-column grid.
Use light, tightly tracked sans-serif typography.
Preserve generous whitespace between the introduction and gallery.
✕ 不该做
Don’t add colorful interface accents absent from the measured palette.
Don’t place every project inside a bordered or rounded card.
Don’t add shadows or gradients to create artificial depth.
Don’t let captions compete with the project imagery.
Don’t replace the calm layout with dense dashboards or stacked panels.
Don’t apply a uniform color filter to varied project artwork.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new designer-portfolio page in Thomas Vimare’s restrained visual style. Use Canvas Black (#000000) as the page background, Paper White (#ffffff) for primary text and links, Quiet Gray (#9a9a9a) for secondary labels, and Media Charcoal (#171717) only where a subtle media surface is useful. Use a light, clean sans-serif close to Helvetica Now Display Light, with tight tracking and quiet sentence-case labels. Create a simple horizontal text navigation, a left-aligned editorial introduction, and an image-led two-column gallery with consistent rectangular crops and captions beneath. Let project imagery provide the color; keep the interface neutral. Use generous whitespace, measured alignment, and flat surfaces. Avoid shadows, gradients, rounded cards, bright UI accents, and decorative framing.
