纯黑画布衬托动态环形文字入口,形成鲜明而克制的开场。页面以大量留白和醒目的白色 ENTER 按钮,引导访客进入作品集。
North star · Keep the experience nearly all black, and let one precisely centered, high-contrast typographic interaction command attention.
The page is built around a strictly monochrome palette: #000000 fills the canvas, while #ffffff carries the circular entrance lettering and its small central ENTER button. Supporting text uses #c4c4c4 and #cccccc, keeping secondary information quieter than the primary white mark. The first viewport is deliberately sparse: a compact, centered typographic circle sits amid expansive black space, with a fine, subdued horizontal divider near the bottom. Anton supplies the entrance’s bold, condensed uppercase character; Montserrat handles the broader text system in uppercase for headings and body copy, with lighter, sentence-case navigation and captions. The visible interface avoids cards, photographs, gradients, and decorative colour. Layout and contrast do the expressive work: isolate a single interactive focal point, let generous empty space surround it, and use thin separators rather than boxed sections. The white circular CTA is the only clearly filled control.
配色
点色块复制色值。用途说明来自对页面的实测位置(背景、文字、描边、按钮)与截图判读。
品牌色
表层色
中性色
页面底色 · Absolute Black主文字 · Signal White次要文字 · Soft Silver
Oversized uppercase display lettering in the entrance treatment.
角色
示例
字号
字重
行高
字距
特大标题
Large uppercase display lettering in the circular entrance graphic.
Regis Grumberg
150px
500
1
0
一级标题
Primary uppercase page title or dominant portfolio statement.
Regis Grumberg
90px
500
1
0
二级标题
Uppercase section headings in Montserrat semibold.
Regis Grumberg
36px
600
normal
0
三级标题
Uppercase subsection headings in Montserrat semibold.
Regis Grumberg
30px
600
normal
0
四级标题
Uppercase supporting headings in regular Montserrat.
The quick brown fox 敏捷的狐狸
24px
400
1
0
正文
Compact uppercase supporting copy in Montserrat.
The quick brown fox 敏捷的狐狸
13.5px
400
normal
0
辅助文字
Small natural-case captions and secondary annotations.
The quick brown fox 敏捷的狐狸
11px
400
1
0
导航
Navigation labels in Montserrat semibold, natural case.
The quick brown fox 敏捷的狐狸
13.5px
600
2.78
0
间距与布局
基准单位 2px · 密度:适中
54px版块间距
—元素间距
—卡片内边距
864px内容最大宽度
2px
12px
23px
42px
54px
The opening composition centers a circular typographic emblem horizontally, surrounded by extensive uninterrupted black space. A fine horizontal rule spans most of the content width at the bottom of the first viewport. Measured content width is capped at 864px, with a comfortable density and a 54px section rhythm. The screenshot suggests a deliberately sparse, single focal area rather than a visible card grid; preserve the centered alignment and generous breathing room.
圆角与层次
按钮 · 50%
没有测到阴影:页面是扁平的,层次靠底色和描边区分。
The interface is essentially flat, with no measured shadows or gradients. Use the black canvas as the only broad surface and rely on white-on-black contrast for hierarchy. A subdued horizontal hairline separates the opening area; avoid cards, raised panels, and layered surfaces.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建(字体用替代字体)。
Circular entrance mark
Concentric rings of uppercase white lettering form the centered opening graphic, surrounding the ENTER control.
ENTER control
A compact, fully rounded white button at the graphic’s center, with black monospace text.
Section divider
A thin, muted horizontal rule spans most of the viewport near the bottom of the opening view.
Contact navigation
Secondary CONTACT labels use #cccccc and remain visually quiet against the black canvas.
Imagery · The visible hero is typographic rather than photographic: words are arranged in concentric circular paths around a white ENTER control. No photography, product imagery, or illustration-led colour appears in the supplied screenshots. Keep the mark crisp, high contrast, and isolated against black; treat any motion as part of the entrance graphic rather than a backdrop.
Reserve #ffffff for focal text and the primary control.
Keep the first view centered and exceptionally sparse.
Use Anton for oversized uppercase display lettering.
Set supporting text in Montserrat with restrained contrast.
Separate areas with subtle hairlines instead of cards.
✕ 不该做
Do not introduce bright accent colours.
Do not fill empty space with extra content.
Do not add gradients or decorative shadows.
Do not put the entrance mark inside a panel.
Do not use oversized card grids in the opening view.
Do not make secondary navigation compete with the central CTA.
给 AI 的提示词
想快速出一个同风格的新页面,把这段话连同 DESIGN.md 一起发给 AI。
Build a new portfolio page using this visual system. Make #000000 Absolute Black the dominant canvas and keep the composition sparse, centered, and immersive. Use #ffffff Signal White for the main typographic focal point and primary control; apply #c4c4c4 Soft Silver or #cccccc Pale Ash only to subdued supporting copy and navigation. Set display lettering in Anton, uppercase and tightly composed; use Montserrat for headings, body text, navigation, and captions, following the measured uppercase habits. Favor generous negative space, a narrow content measure, and subtle horizontal dividers. Keep surfaces flat: no gradients, shadows, decorative cards, or unrelated imagery. Create one clear interaction at the center of the visual composition, with a white circular CTA and black label. Make any motion restrained and purposeful, supporting the typography rather than obscuring it.