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

# 큰그림컴퍼니 · Design System

> Monochrome agency identity meets oversized brand imagery

**Theme:** light · **Industry:** agency · **Source:** https://www.bpco.kr/ · **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._

Bigpicture Company’s homepage pairs a restrained monochrome interface with a monumental, perspective-warped billboard visual. Compact mono navigation and a centered agency introduction give way to oversized typography and highly composed advertising imagery.

## North star

Keep the interface almost entirely monochrome and let oversized, art-directed advertising imagery deliver the visual drama.

## Overview

The page builds its identity from a near-monochrome palette: white canvas, near-black text and outlines, and pale grays that soften the transition into the hero artwork. The screenshot’s dominant grays belong largely to the billboard image, rather than a separate colorful brand palette. Helvetica Neue carries the clear, centered introduction and oversized display lettering; PPSupplyMono gives the navigation and small utility copy a technical, studio-like voice. Rock Salt adds a handwritten accent where the design calls for a more expressive note. The header spreads compact text labels across a wide horizontal line, while the intro sits centered above the large perspective billboard. Generous open space separates these elements, but the hero image itself is dense with printed messaging and graphic detail. Use dashed, pill-shaped navigation framing sparingly; keep other outlines crisp and square. The result feels like an editorial agency portfolio: quiet interface, assertive typography, and image-led impact.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and open space around the header, introduction, and billboard artwork. |
| Print Ink | `#121212` | `--color-print-ink` | brand | Primary text, navigation, graphic lettering, and the fine outlines that define interface elements. |
| Mist Gray | `#e5e5e5` | `--color-mist-gray` | neutral | Pale gray visible in the soft hero-background gradient and transitions around the billboard presentation. |
| Cloud Gray | `#f3f3f3` | `--color-cloud-gray` | neutral | Light gradient tone behind the hero imagery; supports the atmospheric monochrome stage rather than a separate brand accent. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#121212` (Print Ink) · `--color-border` → `#121212` (Print Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#121212` | `#ffffff` | 18.73:1 | AAA |

### Gradients

- `linear-gradient(0deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), linear-gradient(rgb(229, 229, 229), rgb(243, 243, 243) 79.17%, rgb(226, 226, 226))`
- `linear-gradient(rgba(255, 255, 255, 0.54), rgba(217, 217, 217, 0))`
- `linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Helvetica Neue | `--font-body` | webfont | 400, 500, 700 | Main interface text, introduction copy, captions, and oversized display lettering. | Inter |
| Rock Salt | `--font-rock-salt` | webfont | 400 | Occasional handwritten display accent. | Permanent Marker |
| PPSupplyMono | `--font-mono` | webfont | 400 | Navigation, utility labels, and compact mono-style interface copy. | Space Mono |
| PPSupplySans | `--font-ppsupplysans` | webfont | 400 | Navigation text inside the dashed, pill-shaped menu. | Inter |

- **Helvetica Neue:** Ranges from regular body text to bold display; display lettering is exceptionally large, tightly tracked, and visually dominant.
- **Rock Salt:** Use sparingly as an expressive handwritten contrast to the otherwise clean sans-serif system.
- **PPSupplyMono:** Regular-weight monospaced lettering; keep labels compact and preserve the technical, editorial character.
- **PPSupplySans:** Regular sans-serif menu lettering contrasts with the surrounding monospaced header labels.

### Type scale — Custom (ratio ≈ 13.675, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 273.5px | 700 | 1.05 | -0.04em | — | Helvetica Neue | Oversized hero and billboard lettering, led by bold condensed-looking headlines. |
| body | 20px | 400 | 1.3 | 0 | — | Helvetica Neue | Centered agency introduction and longer explanatory copy. |
| caption | 15px | 500 | 1.6 | 0 | — | Helvetica Neue | Small supporting labels and compact explanatory text. |
| nav | 17px | 400 | 1 | 0 | — | PPSupplyMono | Monospaced header labels and utility navigation. |
| code | 17px | 400 | 1 | 0 | — | PPSupplyMono | Technical-style compact labels where a code-like voice is appropriate. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 1, 3, 10, 13, 17, 20, 30, 40, 45, 50, 72, 81, 99, 108, 144, 171 px.
- Section rhythm 171px · element gap 72px · card padding — · max content width —.

The header forms a wide horizontal band of small labels, with the brand at left, a dashed pill navigation near center, and location information toward the right. A centered agency introduction sits below it. The hero then expands into a full-bleed, perspective billboard image that dominates the composition. Keep the interface sparse and the artwork visually dense; the measured spacing system is spacious, with pronounced separation between major content areas. Avoid inventing a fixed maximum width: the screenshot presents the hero as a broad, edge-spanning composition.

## Shape & elevation

- Radius: media `9999px` · nav `9999px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is predominantly flat: no measured shadows are present, and the visual hierarchy comes from typography, whitespace, and the billboard’s perspective. Use thin dark outlines for select controls and labels. The dashed navigation border is a distinctive detail; reserve layered depth for the artwork and its soft gray background treatment.

## Imagery

The defining visual is a large, perspective-rendered advertising billboard, treated as a physical surface carrying printed identity, oversized words, and fine supporting copy. Its gray and near-black tones harmonize with the interface. Frame it broadly and let its angled top edge and warped surfaces create depth. The captured page does not establish a general photographic or illustration style beyond this art-directed showcase, so avoid adding unrelated colorful imagery.

## Components

### Distributed header

Arrange compact brand, agency descriptor, navigation, marketing category, and location labels across one horizontal header; use dark text on white.

### Dashed pill navigation

Frame HOME, PROJECTS, and CONTACT in a dashed dark outline with a fully rounded silhouette; keep the menu lettering compact.

### Centered agency introduction

Use centered, multi-line sans-serif copy to describe planning, production, and large-scale outdoor advertising.

### Perspective billboard hero

Show a broad, angled billboard artwork with oversized black lettering, printed brand details, and monochrome surface imagery.

### Outlined information label

Place compact agency and service text in a square-cornered, thin dark outlined panel over the lower-left area of the hero artwork.

### Scroll cue

Use a small graphic mark and concise scroll instruction near the lower center of the hero composition.

### Measured component styles

- **Card** (“©BPCO ADVERTISING AGENCY SPECIALIZING IN”): transparent background · text #121212 · border 1px solid #121212 · radius 0px · padding 0px · 400 14px Helvetica Neue · uppercase
- **Navigation item** (“Bigpicture Company We share Our pleasure”): transparent background · text #121212 · radius 0px · padding 0px · 400 17px PPSupplyMono

## Do

- Use #ffffff as the primary canvas.
- Set interface text and outlines in #121212.
- Keep the header labels compact and editorial.
- Center the agency introduction above the hero artwork.
- Use generous whitespace between major content areas.
- Let one art-directed billboard image dominate the first impression.

## Don't

- Do not introduce a bright accent palette.
- Do not add shadows to otherwise flat interface elements.
- Do not turn the header into a conventional stacked app toolbar.
- Do not crowd the introduction with extra controls.
- Do not make every element rounded; reserve pill rounding for navigation.
- Do not treat gray billboard colors as separate brand accents.

## Agent prompt

Build a new agency homepage in the Bigpicture Company visual style. Use Gallery White (#ffffff) as the canvas and Print Ink (#121212) for text, navigation, and crisp outlines. Keep the header wide and sparse, with compact mono-style labels and a dashed pill menu. Center a short agency introduction beneath it, then give the main visual broad, full-bleed presence. Use Mist Gray (#e5e5e5) and Cloud Gray (#f3f3f3) only for restrained atmospheric transitions, not as colorful accents. Pair clean sans-serif copy with oversized, tightly tracked display lettering and occasional handwritten character. Keep interface surfaces flat, avoid shadows, and make the artwork feel like a perspective-rendered printed billboard. Preserve generous whitespace around the text while allowing the hero composition itself to carry dense visual detail.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Sparse horizontal header, centered agency introduction, and a large perspective billboard hero. | Distributed navigation, Centered introduction, Scroll cue | Dashed pill menu, Monochrome typography, Outlined information label, Soft gray backdrop |
| 2 | gallery | A full-bleed, five-column media presentation with images arranged as a broad visual sequence. | Visual browsing, Image-led storytelling | Full-bleed media, Monochrome artwork, Open spacing |

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