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

# Studio Gruhl · Design System

> Subculture-rooted design, framed in cinematic dark.

**Theme:** dark · **Industry:** design · **Source:** https://www.studiogruhl.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._

Studio Gruhl presents its branding and digital design work through a dark, typography-led portfolio. Large project visuals and concise editorial copy carry the page, with vivid colour appearing mainly within the featured work.

## North star

Keep the dark canvas and oversized white type quiet enough for each project’s artwork to provide the page’s colour and visual drama.

## Overview

The page uses an almost-black canvas (#18181b) as a continuous frame for white display typography and a long sequence of project imagery. Muted grey (#969696) is reserved for quieter supporting text; vivid violet (#c92bf6) is measured as an accent, but the screenshots show the featured artwork—not violet UI—as the main source of colour variation. GreedStandard supplies both oversized uppercase display statements and compact body copy, creating a deliberately compressed hierarchy without introducing a second type family. The layout is a spacious, single-column editorial flow: a cinematic media-led opening, a blunt studio statement, then broad project previews separated by generous dark intervals. News coverage shifts to a three-column grid, while the closing navigation sits over expressive white lettering. Rounded media corners and subdued dark buttons soften the otherwise flat, high-contrast composition.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Charcoal | `#18181b` | `--color-studio-charcoal` | brand | Continuous page canvas and border colour, framing the media, project list, editorial blocks, and footer. |
| Soft Graphite | `#969696` | `--color-soft-graphite` | neutral | Muted supporting text against the dark canvas; use for secondary information, not primary headlines. |
| Paper White | `#ffffff` | `--color-paper-white` | neutral | Primary headline, body, link, and footer text, including the high-contrast oversized display statements. |
| Electric Violet | `#c92bf6` | `--color-electric-violet` | accent | Measured accent associated with a section; keep restrained, as project artwork supplies most visible colour. |
| Button Slate | `#2e2e30` | `--color-button-slate` | surface | Subtle button and footer surface, distinguishing compact actions from the uninterrupted dark canvas. |

### Semantic aliases

`--color-canvas` → `#18181b` (Studio Charcoal) · `--color-surface` → `#2e2e30` (Button Slate) · `--color-text` → `#ffffff` (Paper White) · `--color-text-muted` → `#969696` (Soft Graphite) · `--color-border` → `#18181b` (Studio Charcoal) · `--color-accent` → `#c92bf6` (Electric Violet)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#18181b` | 17.72:1 | AAA |
| `#ffffff` | `#2e2e30` | 13.55:1 | AAA |
| `#969696` | `#18181b` | 5.99:1 | AA |
| `#969696` | `#2e2e30` | 4.58:1 | AA |
| `#c92bf6` | `#18181b` | 4.35:1 | AA-large |
| `#c92bf6` | `#2e2e30` | 3.33:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| GreedStandard | `--font-body` | webfont | 400, 700 | Site-wide typeface for display headlines, body copy, captions, links, and navigation. | Space Grotesk |

- **GreedStandard:** Display and prominent links use bold, uppercase styling; body text is regular. Keep tracking neutral and hierarchy driven by scale and weight.

### Type scale — Custom (ratio ≈ 5, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 700 | 1 | 0 | uppercase | GreedStandard | Oversized uppercase studio statement and major editorial headlines. |
| body | 16px | 400 | 1.15 | 0 | — | GreedStandard | Project descriptions, supporting copy, and general page text. |
| caption | 15px | 700 | normal | 0 | uppercase | GreedStandard | Compact uppercase labels, including section and news labels. |
| link | 80px | 700 | 1 | 0 | uppercase | GreedStandard | Large uppercase email callout and prominent contact link. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 6, 8, 9, 12, 16, 24, 28, 29, 30, 32, 59, 120 px.
- Section rhythm 120px · element gap 29px · card padding — · max content width 1105px.

Use a spacious, predominantly single-column flow with a measured page maximum width of 1105px. The opening is full-bleed media within the dark canvas; subsequent sections return to a centered, editorial rhythm. Project previews are stacked and given generous separation, while the news area changes to three columns. Align large statements and project titles to the start rather than centering them. The measured section gap is 120px and element gap is 29px; preserve this roomy pacing instead of filling every band with content.

## Shape & elevation

- Radius: button `12px` · media `7px` · xs `7px` · sm `9px` · md `12px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.075s cubic-bezier(0.645, 0.045, 0.355, 1)` on interactive elements.

The interface is predominantly flat: the dark canvas does the framing, with no measured shadows or gradient treatments. Use subtle separation through spacing rather than cards or outlines. Media uses a measured 7px radius and buttons a 12px radius; dark slate button surfaces provide the main visible layer above the canvas.

## Imagery

Lead with large cinematic project media, including video, then alternate between full-width and split compositions within individual project artwork. The imagery ranges from product mockups and brand graphics to atmospheric 3D scenes. Keep images crisp and prominent, with restrained rounded corners; let each project retain its own palette rather than recolouring everything to match the site. News thumbnails form a compact image-led grid.

## Components

### Media-led opening

A large, cinematic visual sits inside the dark canvas, with the first viewport dominated by imagery rather than a conventional text-heavy hero.

### Studio statement

A bold uppercase introduction and short follow-up line use white GreedStandard display type, with a compact dark-slate “More About Us” button.

### Project feature

Stacked project previews pair prominent artwork with a large project title and concise descriptive link; media corners use the measured 7px radius.

### Contact callout

An oversized uppercase email and newsletter prompt acts as a typographic CTA, with selected phrases presented as links.

### News grid

A three-column image-led coverage grid uses compact uppercase headings and short summaries beneath the section label.

### Footer navigation

A closing visual and compact navigation links sit on the dark canvas, followed by small legal links.

### Measured component styles

- **Primary button** (“More About Us”): background #2e2e30 · text #ffffff · radius 12px · padding 8px 16px · 400 16px GreedStandard
- **Link** (“RERUN A brand identity around the visual”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px GreedStandard
- **Navigation item** (“INDEX”): transparent background · text #ffffff · radius 0px · padding 0px 24px · 400 16px GreedStandard

## Do

- Use #18181b as the dominant page canvas.
- Set primary display copy in bold uppercase white.
- Give project artwork room to dominate each preview.
- Preserve generous vertical gaps between editorial sections.
- Use #2e2e30 for subdued compact action surfaces.
- Keep news coverage image-led and arranged in three columns.

## Don't

- Do not add a bright global background or broad colour bands.
- Do not let decorative UI compete with the project artwork.
- Do not turn every section into a card grid.
- Do not use violet as a pervasive interface colour.
- Do not center all headlines or project descriptions.
- Do not add heavy shadows or ornamental borders.

## Agent prompt

Build a new creative-studio page using Studio Gruhl’s restrained dark editorial language. Make #18181b the continuous canvas; use #ffffff for large uppercase GreedStandard-style headlines and primary copy, and #969696 only for quieter supporting text. Treat #c92bf6 as a restrained accent, not a page-wide treatment, and use #2e2e30 for understated buttons. Organize the page as a spacious single-column narrative with a cinematic opening, concise studio statement, prominent project previews, and a compact three-column editorial grid where useful. Let original project visuals retain their own palettes and compositions. Keep corners subtle, surfaces mostly flat, and spacing generous. Use scale and contrast—not shadows, borders, or decorative UI—to establish hierarchy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed media framed by the dark page canvas. | Cinematic first impression, Media-first introduction | Dark canvas, Rounded media |
| 2 | other | Single-column uppercase statement followed by a short line and compact action. | Studio introduction, About link | Oversized white type, Dark button surface |
| 3 | product-showcase | Single-column project feature with prominent media and start-aligned title. | Project overview, Case-study link | Large artwork, White project title |
| 4 | product-showcase | Single-column project feature in the ongoing portfolio sequence. | Project overview, Case-study link | Media-led preview, Concise supporting copy |
| 5 | product-showcase | Single-column feature with project artwork paired with a short descriptor. | Project overview, Case-study link | Split artwork, Start-aligned heading |
| 6 | product-showcase | Single-column project preview separated by generous dark spacing. | Project overview, Case-study link | Expressive project graphic, Large title |
| 7 | product-showcase | Single-column feature with a wide, prominent project visual. | Project overview, Portfolio browsing | Product imagery, Compact show-all action |
| 8 | cta | Large start-aligned uppercase contact statement on the dark canvas. | Email contact, Newsletter invitation | Oversized text links, Editorial CTA |
| 9 | content-feed | Three-column image-led news grid beneath a compact section label. | Press coverage, Browse news | Thumbnail grid, Compact titles and summaries |
| 10 | footer | Expressive closing graphic with centered compact navigation and small legal links. | Primary site navigation, Legal links | White display artwork, Dark navigation surface |

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