Pure White
#ffffffPage background, card surface, inverted text on dark blocks
Agencja brandingowa
247studio.coWebsite preview
The design language
A stark editorial identity system built on absolute monochrome — white canvas, black ink, gray echoes. The design reads like a printed architecture monograph: every element earns its space through generous whitespace, precise typographic control, and a refusal to use color for anything but information. Type does all the emotional work; a single custom grotesk carries both 73px display lines and 10px meta labels, unified by a stylistic alternate ('ss01') that gives the letterforms a distinctive editorial edge. Components stay flat, borders stay hairlines, radii stay generously rounded, and the entire surface stack moves from pure white through cool grays to ink black without any chromatic interruption.
Color palette
neutral
Ink Black
#000000Primary text, headings, logo mark, all stroke and border weight
Obsidian
#1f1f1fDark section backgrounds, deep surface elevation, footer bands
Graphite Wash
#333333Elevated dark surfaces, overlay panels
Slate
#666666Muted body copy, secondary text, supporting meta
Steel
#808080Tertiary text, captions, decorative strokes, logo placeholder tints
Fog
#999999Subtle text, placeholder labels, inactive indicators
Pale Mist
#ccccccHairline borders, dividers, subtle outlines, disabled link state
Vapor
#e6e6e6Card backgrounds, input fields, soft container fill
Ash
#f2f2f2Section background, alternating band fill, image placeholder fill
Typography
Type scale
Minor Third (1.2) · 20px basedisplay
73px · 400 · 1The quick brown fox jumps
text-55
55px · 400 · 1.2The quick brown fox jumps
heading-lg
52px · 300 · 1The quick brown fox jumps
text-48
48px · 400 · 1.2The quick brown fox jumps
heading
35px · 400 · 1.14The quick brown fox jumps
text-31
31px · 400 · 1.3The quick brown fox jumps
heading-sm
28px · 400 · 1.14The quick brown fox jumps
text-21
21px · 400 · 1.3The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
247 grotesk
- Weights
- 400, 500
- Sizes
- 10, 11, 14, 16, 19, 21, 28, 31, 35, 48, 52, 55, 73
- Line height
- 1.00, 1.14, 1.20, 1.25, 1.30, 1.89
- Fallback
- Inter, Neue Haas Grotesk, Söhne
- Features
- "ss01"
The singular brand typeface — carries the logo, 73px display headlines, navigation labels, and all UI micro-copy in one voice. The 'ss01' stylistic alternate is critical: it reshapes select glyphs into a distinctive editorial form. Medium weight (500) is reserved for emphasis; the system trusts 400 for even the largest display sizes, giving headlines a quiet, authoritative restraint rather than visual shouting.
Additional typeface
Ntbau
- Weights
- 400, 500, 700
- Sizes
- 10, 11, 12, 14, 18
- Line height
- 1.00, 1.14, 1.20, 1.30
- Letter spacing
- 0.0190em
- Fallback
- Söhne, Inter, Untitled Sans
Secondary workhorse for body paragraphs, supporting descriptions, and small annotations. The slight positive tracking (0.0190em) makes it readable at small sizes and gives it a measured, documentary feel that contrasts the tighter grotesk display. Weight 700 appears in fine print and legal micro-copy.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1440px
- Section gap
- 80-120px
- Card padding
- 24-40px
- Element gap
- 8-16px
Border radius
tags
33.76pxcards
33.76pxbuttons
42.96pximagePlaceholders
33.76pxSpacing scale
2px4px5px6px7px8px9px11px12px14px15px16px17px19px20px24px30px32px34px37px43px48px50px52px55px56px61px64px80px112px128px131px182px184pxGuidelines
Do
- Use #000000 for all primary text and structural elements — no off-black substitutes
- Apply the 'ss01' font feature setting on all 247 grotesk instances to preserve the alternate glyph forms
- Set display headlines at weight 400, never bold — let the 73px size carry the impact
- Maintain a minimum 80px section gap between major content blocks
- Use 0.0190em letter-spacing on all uppercase labels and Ntbau body text
- Separate rows and sections with 1px #e6e6e6 or #cccccc hairlines, never with shadow or color blocks
- Italicize the second line of multi-line display headlines in #999999 to create a typographic echo
Don’t
- Never introduce chromatic color — the system is 100% achromatic by design
- Never add box-shadow, glow, or blur effects to any element
- Never use weight 600+ for headlines — the system caps at 500 for emphasis
- Never reduce display headline below 48px or use 247 grotesk for body paragraphs
- Never center body text — always flush-left for the editorial alignment
- Never use square or small radii — the system commits to 33-43px rounded corners on all containers
- Never place CTAs in filled colored buttons — use text links with arrows or brackets only
Components
247 Logo Mark
Brand wordmark, top-left anchor of every pageCustom "247" typeset in 247 grotesk, bold weight, with distinctive slash/dot punctuation integrated into the numerals. Rendered in #000000 on light backgrounds, #ffffff on dark. Fixed size, not scaled. The 'ss01' alternate is essential to its character.
Primary Navigation Link
Top-bar site navigationUppercase 247 grotesk, weight 500, 11px, letter-spacing 0.0190em, #000000. Grouped in a multi-line block aligned left. Leading arrow (▸) on the active link. No underlines, no color shifts — emphasis comes purely from weight and the directional indicator.
Language Toggle
PL / EN switcher in headerTwo stacked items (POLSKI, ENGLISH) in 247 grotesk 11px weight 500, #000000. Active language in 500, inactive in 400. Vertical stack with 5px row gap. Right-aligned to the header edge.
Contact Link
Persistent call-to-action in header"KONTAKT" followed by a right arrow (→), 247 grotesk 11px weight 500, #000000. Positioned at the far right of the header. Functions as a text-only CTA — no button chrome.
Office Info Card
Header address and contact blockWhite card with 33.76px border-radius, 1px #cccccc border, containing a 1:1 image placeholder (top) and a text block below. Padding 24px. Label "BIURO" in 247 grotesk 11px weight 500, address lines in Ntbau 11px, email underlined.
Display Headline
Hero text, section openers247 grotesk weight 400, 73px, line-height 1.0, #000000. Multi-line construction where the second line is italicized in #999999. Sets 52px+ variants for secondary sections. The use of 400 (not bold) for a 73px headline is a signature choice — the system relies on size and silence, not weight.
Body Text Block
Supporting description copyNtbau 14px, line-height 1.89, #000000. Generous line-height creates air between sentences. Used in narrow column widths (250-400px) beside large headlines for a magazine-spread feel.
Scroll Indicator
Bottom-left directional cue"[ PRZEWIŃ W DÓŁ ]" in 247 grotesk 10px, #999999, bracketed in #cccccc. Bracket chars in hairline gray, text in muted gray — a typographic gesture rather than an icon.
Client Logo Grid Item
Index of brand clients2-column wide cell containing a 01–12 number label (Ntbau 10px, #999999, top-left) and a centered grayscale client logo. 1px #e6e6e6 bottom border separates rows. No card chrome — logos float on white. The numbered label is a deliberate editorial device, not pagination.
Brand Project Card
Featured case study tileTwo-up grid of project showcases. Each card: a 1:1 or 16:9 image area with 33.76px radius, a project title in 247 grotesk 21px weight 400, and a category label below. White card background, no shadow, 1px #e6e6e6 border optional.
Documentary Sidebar Label
Vertical context marker on right edgeRotated 90° text "DOKUMENTARIUSZ" in 247 grotesk 10px weight 500, letter-spacing 0.0190em, #000000. Positioned absolute on the right viewport edge, runs vertically. Anchors the page to its content category — an editorial masthead device.
Section Header (All-Caps Eyebrow)
Small uppercase label preceding section content247 grotesk 11px weight 500, #000000, all-caps, letter-spacing 0.0190em. Two-line max. Sits flush-left with a 24-40px gap before the headline or content below.
Surfaces & elevation
Level 0
Pure Canvas
#ffffffPage base, primary background
Level 1
Ash Band
#f2f2f2Section separators, image placeholders, light card fill
Level 2
Vapor Card
#e6e6e6Soft card containers, input fields
Level 3
Hairline
#ccccccDivider lines, subtle structural edges
Level 4
Obsidian Block
#1f1f1fDark feature sections, inverted content blocks
Level 5
Ink Black
#000000Maximum contrast, logo lockup, documentary label
The system deliberately avoids shadow elevation entirely. Depth and separation are achieved through surface tone shifts (#ffffff → #f2f2f2 → #e6e6e6), generous spacing, and hairline borders. The flatness is a core brand decision — it makes the interface feel like printed editorial matter rather than screen UI, reinforcing the studio's positioning as a craft brand-design agency.
Layout & imagery
Imagery
Photography and project renders are presented in contained cards with generous 33.76px rounded corners, never full-bleed. Image treatment is neutral — grayscale or desaturated — to maintain the monochrome system discipline. A consistent placeholder system uses a centered image-icon glyph in a 1:1 frame with no decorative framing. Project imagery functions as portfolio evidence rather than lifestyle atmosphere; the studio's craft is the subject, not the setting. Iconography is minimal: small line-weight glyphs (16-24px) used only for functional cues like the language switcher arrow, the contact directional, and scroll indicators.
Design notes
Agent Guide
**Quick Color Reference** - text: #000000 - background: #ffffff - border: #cccccc / #e6e6e6 - muted text: #999999 / #808080 - dark surface: #1f1f1f - primary action: no distinct CTA color **Example Component Prompts** 1. **Hero Display Headline**: Two-line flush-left headline. First line: 247 grotesk weight 400, 73px, line-height 1.0, #000000. Second line: same family, weight 400, 73px, italic, color #999999. Max-width container 1200px, 120px left margin. Below headline: body text in narrow 350px column, Ntbau 14px, line-height 1.89, #000000. 2. **Client Logo Grid Cell**: 2-column cell with 80px height. Top-left number "03" in Ntbau 10px, #999999. Centered grayscale client logo at 60% opacity, 32px height, #808080. 1px #e6e6e6 bottom border, no side borders. White background, no padding. 3. **Office Info Card**: 280px wide card, 33.76px border-radius, 1px #cccccc border, white fill, 24px padding. Top: 1:1 image placeholder at 100% width with #f2f2f2 fill and centered image-icon glyph. Below: "BIURO" label in 247 grotesk 11px weight 500, then 4 address lines in Ntbau 11px line-height 1.30, email line underlined. 4. **Documentary Sidebar Label**: Absolutely positioned at right: 0, top: 40%. Text "DOKUMENTARIUSZ" in 247 grotesk 10px weight 500, letter-spacing 0.0190em, #000000, transform: rotate(90deg), transform-origin: right top. 1px #cccccc hairline beneath the rotated text. 5. **Section Header Eyebrow**: Flush-left, 247 grotesk 11px weight 500, all-caps, #000000, letter-spacing 0.0190em, two lines max. 40px margin-bottom before headline. 120px left margin to align with hero content edge.
Typographic System Logic
The type system is intentionally bipolar: one display family (247 grotesk with 'ss01') and one text family (Ntbau with 0.0190em tracking). 247 grotesk handles everything from 10px nav labels to 73px display lines in a single voice, trusting the 'ss01' alternate and weight contrast (400 vs 500) to create hierarchy rather than swapping to a serif or condensed cut. Ntbau is reserved for body copy and small annotations where its wider tracking and gentler proportions support long-read readability. The italic-on-second-line display pattern is the system's most recognizable signature — it creates a typographic conversation between the first statement and the second, quieter echo.
Similar brands
Pentagram
Same editorial restraint, generous whitespace, and text-driven hero composition with no decorative imagery
Werkstatt (Berlin)
Identical commitment to absolute monochrome with a custom grotesk display face and italic second-line treatment
Manual Studio
Shared numbered-grid client index pattern and hairline-bordered layout structure
Locomotive MTL
Same flat surfaces, no-shadow elevation, and architectural-portfolio information density
Studio Dumbar
Custom typeface as brand anchor and ruthless typographic discipline across all UI scales
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
