风格库/个人作品集/Regis Grumberg

Regis Grumberg

以黑白字形开启实验创意之旅A monochrome portal into experimental creativity

深色主题个人作品集creative portfolio homepage极简暗色黑白实验性字体主导原网页 regisgrumberg.com ↗ · 2026-10-12 采集 · 1440×900 桌面端
Regis Grumberg 首屏

纯黑画布衬托动态环形文字入口,形成鲜明而克制的开场。页面以大量留白和醒目的白色 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
文字背景对比度WCAG
#ffffff Signal White#000000 Absolute Black21:1AAA
#c4c4c4 Soft Silver#000000 Absolute Black12.04:1AAA

字体

字号阶梯:Golden Ratio(比例约 1.619,正文 13.5px)。示例用免费替代字体渲染,数值为实测。

Aa 设计

Montserrat

网络字体 · 字重 400 / 600 · 占比 81%
免费替代:Manrope

Headings, body text, navigation, and captions.

Aa 设计

Anton

网络字体 · 字重 500 · 占比 19%
免费替代:Bebas Neue

Oversized uppercase display lettering in the entrance treatment.

角色示例字号字重行高字距
特大标题
Large uppercase display lettering in the circular entrance graphic.
Regis Grumberg
150px50010
一级标题
Primary uppercase page title or dominant portfolio statement.
Regis Grumberg
90px50010
二级标题
Uppercase section headings in Montserrat semibold.
Regis Grumberg
36px600normal0
三级标题
Uppercase subsection headings in Montserrat semibold.
Regis Grumberg
30px600normal0
四级标题
Uppercase supporting headings in regular Montserrat.
The quick brown fox 敏捷的狐狸
24px40010
正文
Compact uppercase supporting copy in Montserrat.
The quick brown fox 敏捷的狐狸
13.5px400normal0
辅助文字
Small natural-case captions and secondary annotations.
The quick brown fox 敏捷的狐狸
11px40010
导航
Navigation labels in Montserrat semibold, natural case.
The quick brown fox 敏捷的狐狸
13.5px6002.780

间距与布局

基准单位 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.

页面版块

共 1 个版块,按页面从上到下排列,每个都标了类型、布局和交互套路。

该做与不该做

✓ 该做

  • Use #000000 as the dominant canvas.
  • 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.

相似风格

Regis Grumberg 设计系统 — 配色、字体与 DESIGN.md | Design DNA