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

# 247studio · Design System

> Quiet monochrome, confident typographic scale

**Theme:** light · **Industry:** agency · **Source:** https://www.247studio.co/ · **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 restrained agency homepage uses oversized Polish headlines, generous white space, and a sharp black section to frame its brand work. Project media, client proof, editorial content, and contact details unfold in an understated portfolio rhythm.

## North star

Let oversized typography and deliberate white space lead; use black only to create clear structural contrast.

## Overview

The visual strategy is built on a strict, near-monochrome palette: white is the dominant canvas, black anchors typography and one prominent services band, and muted grays distinguish selected headline phrases and supporting copy. Typography carries most of the identity. Large, light-feeling grotesk headlines sit beside compact uppercase navigation, labels, and metadata, creating a deliberate contrast in scale and density. The opening is spacious and asymmetric: a dense navigation and studio contact cluster occupies the upper right, while the oversized hero headline starts far below the top edge and supporting copy sits near the lower right. Subsequent sections alternate broad white fields with occasional media-led project layouts; a full black services section provides the main tonal break. Case studies and client proof rely on imagery rather than decorative UI. Hairline dividers and square-edged cards keep the interface flat and precise. Motion is subtle; the page’s pacing comes from whitespace, content placement, and changes in background tone.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | brand | Dominant page canvas across the hero, work, editorial, and footer areas; also used for reversed text and the light service CTA. |
| Soft Graphite | `#666666` | `--color-soft-graphite` | neutral | Muted supporting text and card details, softening secondary information against white. |
| Studio Ink | `#000000` | `--color-studio-ink` | brand | Primary text and links; forms the full-width services band and dark testimonial/contact panel. |
| Paper Gray | `#f2f2f2` | `--color-paper-gray` | surface | Subtle neutral card surface, including the observed editorial-style content card. |
| Rule Gray | `#cccccc` | `--color-rule-gray` | semantic | Fine borders, separators, and understated link or content outlines. |
| Quiet Gray | `#808080` | `--color-quiet-gray` | neutral | Secondary text tones used for quieter supporting content. |
| Deep Charcoal | `#333333` | `--color-deep-charcoal` | neutral | Occasional dark card edge or supporting interface detail, not a dominant section color. |
| Mist Gray | `#e6e6e6` | `--color-mist-gray` | neutral | Subtle card and interface detail, including faint outlines against white. |
| Mid Gray | `#999999` | `--color-mid-gray` | neutral | Occasional subdued heading or text detail; use sparingly for secondary emphasis. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f2f2f2` (Paper Gray) · `--color-surface-2` → `#000000` (Studio Ink) · `--color-text` → `#000000` (Studio Ink) · `--color-text-muted` → `#666666` (Soft Graphite) · `--color-text-subtle` → `#808080` (Quiet Gray) · `--color-border` → `#cccccc` (Rule Gray)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f2f2f2` | 18.76:1 | AAA |
| `#666666` | `#ffffff` | 5.74:1 | AA |
| `#666666` | `#f2f2f2` | 5.13:1 | AA |
| `#666666` | `#000000` | 3.66:1 | AA-large |
| `#808080` | `#ffffff` | 3.95:1 | AA-large |
| `#808080` | `#f2f2f2` | 3.53:1 | AA-large |
| `#808080` | `#000000` | 5.32:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Ntbau | `--font-body` | webfont | 400, 500, 700 | Main compact sans-serif for body copy, uppercase navigation, captions, and utility labels. | Inter |
| 247 Grotesk | `--font-display` | webfont | 400, 500, 300 | Display and heading face for the oversized hero, section titles, and prominent text links. | Manrope |

- **Ntbau:** Regular body copy; labels and links use uppercase, with captions slightly emphasized. Keep utility text compact and restrained.
- **247 Grotesk:** Use measured regular and light weights for large headings; maintain clean, untracked forms and sentence case.

### Type scale — Augmented Fourth (ratio ≈ 1.402, base 13.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 73px | 400 | 1.2 | 0 | — | 247 Grotesk | Oversized opening statement and standout display headlines. |
| h1 | 55px | 400 | 1.2 | 0 | — | 247 Grotesk | Primary hero headline and major page-level statements. |
| h2 | 51.5px | 300 | 1.2 | 0 | — | 247 Grotesk | Large section headings, often with contrasting muted phrases. |
| h3 | 48px | 400 | 1.2 | 0 | — | 247 Grotesk | Secondary section and content-group headings. |
| h4 | 35px | 400 | 1.14 | 0 | — | 247 grotesk | Smaller prominent card or subsection titles. |
| body | 13.5px | 400 | 1.3 | 0 | — | Ntbau | Supporting descriptions, studio information, and editorial summaries. |
| caption | 12px | 500 | 1.2 | 0 | uppercase | Ntbau | Uppercase labels, dates, categories, and compact metadata. |
| link | 14px | 400 | 1.14 | 0 | uppercase | Ntbau | Uppercase navigation and utility links. |

OpenType features in use: `"ss01"`.

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 4, 5, 6, 7, 8, 9, 11, 12, 14, 15, 16, 17, 19, 20, 24 px.
- Section rhythm 48px · element gap 8px · card padding — · max content width 1344px.

The measured page max width is 1344px, with comfortable density and a 48px section gap. The opening uses an asymmetric composition: compact navigation and contact information sit in the upper-right area while the hero headline begins lower and aligns left; supporting copy anchors toward the right. Broad single-column white sections alternate with split and multi-column content, including project grids and testimonial material. Keep alignments crisp, margins generous, and section transitions spacious rather than filling every field.

## Shape & elevation

- Radius: xs `0px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s cubic-bezier(0.215, 0.61, 0.355, 1)` on interactive elements.

The interface is predominantly flat: no measured shadows or gradients. Cards and project areas use square corners, with occasional thin outlines and subtle gray separators rather than raised surfaces. Black section bands create depth through contrast, not layering. Avoid floating panels; keep media and text grounded in the page grid.

## Imagery

Use project imagery as portfolio evidence, not as a decorative background system. The page includes image and video work, with examples such as Enova365 and Fourth shown in large rectangular frames and minimal captions. Client marks and project media may carry their own colors; the surrounding interface remains monochrome. The opening includes a small dark media tile near studio details. Preserve clean crops and let media scale within the spacious grid.

## Components

### Studio navigation

Compact uppercase links arranged in a tight cluster, balanced by language and contact links and a separate studio address block.

### Hero statement

Large left-aligned grotesk headline on white, with a selected phrase in gray and explanatory copy positioned separately near the lower right.

### Services band

Full-width black section with a large white-and-gray heading, compact supporting copy, and a white square-cornered CTA.

### Project cards

Large rectangular project media with understated captions and category details; cards use square edges and may be separated by fine outlines.

### Client proof

A quiet client-logo area with a short uppercase introduction, generous whitespace, and minimal framing.

### Testimonial panel

Partner quote content led by a prominent heading and compact CTA; later contact content uses a black panel with reversed text.

### Editorial listing

Large section headline followed by article dates, categories, and titles in a restrained two-column content rhythm.

### Measured component styles

- **Primary button** (“POZNAJ USŁUGI”): background #ffffff · text #000000 · radius 0px · padding 0px 30.1px · 400 16px 247 grotesk
- **Secondary button** (“WIĘCEJ NA CLUTCH”): background #000000 · text #000000 · radius 0px · padding 0px 30.1px · 400 16px 247 grotesk
- **Link** (“HELLO[AT]247STUDIO.CO”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px 247 grotesk
- **Card** (“OD 4 TYGODNI Strategia Marki”): transparent background · text #000000 · border 1px solid #333333 · radius 0px · padding 0px · 400 16px 247 grotesk

## Do

- Keep the page predominantly white and monochrome.
- Use oversized grotesk headlines as the primary visual anchor.
- Pair large display text with compact uppercase navigation and labels.
- Preserve asymmetric placement and broad areas of whitespace.
- Use black section bands sparingly for strong structural contrast.
- Present portfolio media in clean rectangular frames with restrained captions.

## Don't

- Do not introduce bright accent colors into the interface palette.
- Do not fill the hero’s open space with extra controls or decoration.
- Do not add gradients, shadows, or rounded card treatments.
- Do not make navigation visually heavier than the headline.
- Do not let project-image colors dictate the surrounding UI palette.
- Do not compress sections into a dense dashboard-like layout.

## Agent prompt

Build a new agency page in the 247studio visual style. Use Gallery White (#ffffff) as the dominant canvas, Studio Ink (#000000) for core text and occasional full-width dark bands, and Soft Graphite (#666666) or Quiet Gray (#808080) for muted phrases and secondary copy. Set display headings in a clean grotesk similar to Manrope, with compact sans-serif navigation and metadata. Create an asymmetric, spacious composition: a small utility cluster, oversized left-aligned headline, and separately anchored supporting text. Organize content in broad sections with split project layouts, crisp rectangular media, thin gray dividers, and square-edged CTAs. Let portfolio imagery carry its own color while keeping surrounding UI neutral. Avoid shadows, gradients, rounded cards, and extra decorative elements.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Upper-right navigation and studio details balanced by a small media tile. | compact navigation, language switch, direct contact links | uppercase links, small media tile, two-column utility layout |
| 2 | hero | Large left-aligned headline with supporting paragraph anchored at lower right. | brand positioning, scroll cue | oversized typography, muted headline phrase, open white canvas |
| 3 | logo-cloud | Introductory label and client marks arranged across a broad, airy grid. | client proof | logo grid, uppercase introduction, generous whitespace |
| 4 | feature-grid | Full-width black band with a large headline, supporting copy, CTA, and service items. | service discovery, CTA | black background, reversed type, square white button |
| 5 | stats | White three-column section with a heading, explanatory copy, and separated details. | credibility through results | large heading, small supporting text, subtle separators |
| 6 | product-showcase | Two-column portfolio grid with large project media and short captions. | project browsing, case study links | rectangular media, minimal captions, open grid |
| 7 | gallery | Single wide text link and small icon above a fine divider. | view all projects | large text link, plus icon, hairline rule |
| 8 | testimonials | Wide heading and CTA followed by a spacious, multi-column testimonial area. | social proof, external review link | large heading, compact black CTA, open grid |
| 9 | content-feed | Large left-aligned heading with articles arranged in a two-column content area. | article discovery, view all posts | large heading, uppercase metadata, subtle divider |
| 10 | contact | Split contact section with a dark panel, portrait, large message, and response-time prompt. | contact conversion, response-time reassurance | black panel, reversed text, portrait image |
| 11 | footer | Two-column footer with studio contact information, service links, navigation, and oversized brand lettering. | site-wide navigation, contact access | small uppercase links, large wordmark, white field |

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