---
title: "Regis Grumberg design system"
variant: extended
source: https://www.regisgrumberg.com/
captured_at: 2026-10-12
theme: dark
industry: portfolio
generator: Design DNA (https://four.wiralomi.com/style/regisgrumberg-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Regis Grumberg · Design System

> A monochrome portal into experimental creativity

**Theme:** dark · **Industry:** portfolio · **Source:** https://www.regisgrumberg.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A stark black canvas frames an animated circular typographic entrance. The opening view uses near-total negative space and a single white ENTER button to make the portfolio feel like an invitation.

## North star

Keep the experience nearly all black, and let one precisely centered, high-contrast typographic interaction command attention.

## Overview

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.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Absolute Black | `#000000` | `--color-absolute-black` | surface | Near-total page canvas; creates the uninterrupted dark field around the entrance mark. |
| Soft Silver | `#c4c4c4` | `--color-soft-silver` | neutral | Muted supporting text, including footer copy; subordinate to the white entrance lettering. |
| Signal White | `#ffffff` | `--color-signal-white` | brand | Primary text, circular entrance lettering, and the filled ENTER button. |
| Pale Ash | `#cccccc` | `--color-pale-ash` | neutral | Quiet contact and navigation text; use for secondary labels, not prominent calls to action. |

### Semantic aliases

`--color-canvas` → `#000000` (Absolute Black) · `--color-text` → `#ffffff` (Signal White) · `--color-text-muted` → `#c4c4c4` (Soft Silver)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#c4c4c4` | `#000000` | 12.04:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Montserrat | `--font-body` | webfont | 400, 600 | Headings, body text, navigation, and captions. | Manrope |
| Anton | `--font-display` | webfont | 500 | Oversized uppercase display lettering in the entrance treatment. | Bebas Neue |

- **Montserrat:** Use uppercase for headings and body copy; navigation and captions remain in natural case. Weights are 400 and 600.
- **Anton:** Use the bold, condensed display face for uppercase impact; keep tracking neutral and line height tight.

### Type scale — Golden Ratio (ratio ≈ 1.619, base 13.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 150px | 500 | 1 | 0 | uppercase | Anton | Large uppercase display lettering in the circular entrance graphic. |
| h1 | 90px | 500 | 1 | 0 | uppercase | Anton | Primary uppercase page title or dominant portfolio statement. |
| h2 | 36px | 600 | normal | 0 | uppercase | Montserrat | Uppercase section headings in Montserrat semibold. |
| h3 | 30px | 600 | normal | 0 | uppercase | Montserrat | Uppercase subsection headings in Montserrat semibold. |
| h4 | 24px | 400 | 1 | 0 | uppercase | Montserrat | Uppercase supporting headings in regular Montserrat. |
| body | 13.5px | 400 | normal | 0 | uppercase | Montserrat | Compact uppercase supporting copy in Montserrat. |
| caption | 11px | 400 | 1 | 0 | — | Montserrat | Small natural-case captions and secondary annotations. |
| nav | 13.5px | 600 | 2.78 | 0 | — | Montserrat | Navigation labels in Montserrat semibold, natural case. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 12, 23, 42, 54 px.
- Section rhythm 54px · element gap — · card padding — · max content width 864px.

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.

## Shape & elevation

- Radius: button `50%` · xs `2px`
- No box shadows measured: the page is flat.
- Motion: standard transition `1.3s cubic-bezier(0.8, 0, 0, 1)` on interactive elements.

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.

## 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.

## Components

### 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.

### Measured component styles

- **Primary button** (“ENTER”): background #ffffff · text #000000 · radius 100% · padding 0px · 400 13.3333px monospace
- **Navigation item** (“CONTACT”): transparent background · text #cccccc · radius 0px · padding 0px · 400 13.3333px monospace

## Do

- 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.

## Don't

- 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.

## Agent prompt

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.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered circular typographic entrance on a full black canvas, with a fine divider near the viewport bottom. | central enter action, animated circular lettering | monochrome typography, white circular CTA, large negative space |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/regisgrumberg-com