---
version: alpha
name: BPco
description: Editorial monochrome for a Korean outdoor-advertising studio — pure black ink on off-white paper, oversized scroll-driven type, loading-percentage and "PLEASE SCROLL DOWN" choreography, star and globe SVG accents, and a single hot-red signal color reserved for emphasis.
colors:
  background: "#f4f2ee"
  surface: "#ffffff"
  surface-soft: "#eae7e1"
  ink: "#0a0a0a"
  ink-pure: "#000000"
  ink-secondary: "#5c5a55"
  ink-muted: "#8c8983"

  primary: "#ff3b21"
  on-primary: "#ffffff"
  on-ink: "#f4f2ee"

  hairline: "#d8d4cc"
  border: "#cfcbc2"
  overlay-scrim: "#0a0a0a"
  selection: "#ff3b21"

typography:
  display-hero:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 88px
    fontWeight: 700
    lineHeight: 0.95
    letterSpacing: -3px
  display:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: -1.8px
  section-heading:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -1px
  card-title:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  label-mono:
    fontFamily: "Space Mono, ui-monospace, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 1.5px
  caption:
    fontFamily: "Space Mono, ui-monospace, Menlo, monospace"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 1px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 160px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 8px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

  button-accent:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    borderColor: "{colors.border}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label-mono}"
    padding: 20px 32px
    borderColor: "{colors.hairline}"

  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
    borderColor: "{colors.border}"

  card-project:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
    borderColor: "{colors.hairline}"

  card-meta:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.none}"
    padding: 16px 0px

  loader-counter:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.display-hero}"
    rounded: "{rounded.none}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 0px
    borderColor: "{colors.border}"
---

# BPco Design System

## Overview

BPco (Bigpicture Company) is a Korean outdoor-advertising and creative studio, and its site reads exactly like a printed portfolio that learned to scroll. The canvas is an off-white paper tone (`{colors.background}`) rather than clinical white, and the ink is a dense near-black (`{colors.ink}`). The whole experience is choreographed around scrolling — a loading percentage counts up, a "PLEASE SCROLL DOWN" instruction sets the pace, and oversized project imagery reveals progressively. This is editorial design: type and image do all the talking, chrome stays out of the way.

The typographic move is scale. Hero and section type run enormous, set tight (negative tracking down to -3px on the hero) in a grotesque sans, so headlines feel like billboard copy — appropriate for a studio that literally builds billboards. A monospace voice (used for labels, the loading counter, navigation, and captions) supplies the "technical credit line" texture you see in fashion and ad-agency portfolios: uppercase, letter-spaced, small.

Color is almost entirely absent by design. The system is monochrome — paper, ink, and a few warm grays — punctuated by a single hot signal red (`{colors.primary}`) held in reserve for true emphasis (a hover, an active link, a key word). Star and globe SVG glyphs act as decorative punctuation rather than UI. Corners are square; borders are thin hairlines; nothing is rounded except pill-shaped action buttons. The result is restrained, confident, and print-literate.

**Key Characteristics:**
- Off-white paper canvas (`{colors.background}`) with dense near-black ink (`{colors.ink}`)
- Oversized grotesque-sans display type with aggressive negative tracking (-3px at hero)
- Monospace label voice for nav, captions, loading counter, and credit lines — uppercase, letter-spaced
- Single hot-red signal color (`{colors.primary}`) reserved strictly for emphasis
- Scroll-driven choreography: loading percentage, "PLEASE SCROLL DOWN", progressive image reveals
- Square corners and thin hairlines; pill radius only on buttons
- Star / globe SVG glyphs as decorative punctuation

## Colors

### Canvas & Ink
- **Paper** (`{colors.background}`): The off-white page tone — warmer and softer than pure white.
- **Surface** (`{colors.surface}`): Pure white used behind project imagery and cards.
- **Surface Soft** (`{colors.surface-soft}`): Slightly deeper paper tone for alternating bands.
- **Ink** (`{colors.ink}`): Primary text and headings — dense near-black.
- **Ink Pure** (`{colors.ink-pure}`): True black for maximum-contrast moments.
- **Ink Secondary** (`{colors.ink-secondary}`): Captions, secondary copy, meta credit lines.
- **Ink Muted** (`{colors.ink-muted}`): Tertiary detail, disabled states.

### Signal
- **Signal Red** (`{colors.primary}`): The one accent — hovers, active links, key emphasis. Used sparingly.
- **On Primary** (`{colors.on-primary}`): White text on the red signal.
- **On Ink** (`{colors.on-ink}`): Paper-tone text on dark ink surfaces.

### Lines & Overlays
- **Hairline** (`{colors.hairline}`): Thin dividers between sections and nav.
- **Border** (`{colors.border}`): Slightly stronger outline for buttons and inputs.
- **Overlay Scrim** (`{colors.overlay-scrim}`): Dark scrim over imagery for caption legibility.

## Typography

### Font Family
- **Display / Body**: `Archivo` (grotesque sans), fallbacks `Arial, sans-serif`
- **Mono / Labels**: `Space Mono`, fallbacks `ui-monospace, Menlo, monospace`

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 88px billboard hero — maximum scale and compression |
| `display` | Large project titles |
| `section-heading` | Section titles |
| `card-title` | Project card titles |
| `body-large` | Lead paragraphs, intro copy |
| `body` | Standard reading text |
| `label-mono` | Nav, buttons, loading counter, uppercase labels |
| `caption` | Meta credits, image captions |

### Principles
- **Scale as identity**: Display type runs huge and tight — headlines behave like printed billboard copy.
- **Mono as credit voice**: Labels, captions, and the loading counter use letter-spaced uppercase monospace, echoing ad-agency credit lines.
- **Two voices only**: One grotesque sans for content, one monospace for technical labels. No third family.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px, opening into very large gaps (`{spacing.3xl}`–`{spacing.4xl}`) between full-bleed project sections.

### Grid & Container
- Full-bleed imagery edge to edge; text columns sit within a centered measure
- Project list as a vertical sequence of oversized image + mono caption pairs
- Generous top padding under a thin hairline nav

### Whitespace Philosophy
- **Editorial breathing room**: Large vertical gaps let each project stand alone.
- **Image-forward**: White/paper space frames imagery; the page is a gallery wall.
- **Scroll rhythm**: Pacing is deliberate — loading counter and "scroll down" cue set the tempo.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Cards, images, inputs — square by default |
| `xs` | 2px | Tiny inline elements |
| `sm` | 4px | Small containers |
| `md` | 8px | Occasional softened blocks |
| `pill` | 9999px | Action buttons, badges |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card-project}`).

### Buttons
- **`button-primary`** — Ink fill, paper text, pill radius, monospace label.
- **`button-accent`** — Signal-red fill for the single highest-emphasis action.
- **`button-ghost`** — Paper surface with a thin border outline.

### Navigation
- **`nav-bar`** — Paper background, ink monospace links (HOME / PROJECTS / CONTACT), hairline underline.

### Cards
- **`card-project`** — Square white surface holding full-bleed project imagery with hairline separation.
- **`card-meta`** — Monospace credit/meta block beneath each project.

### Distinctive Components
- **`loader-counter`** — Oversized loading percentage on dark ink — the site's signature entrance.
- **`badge`** — Pill outline badge for tags, monospace caption text on white surface.

## Do's and Don'ts

### Do
- Use the off-white paper canvas (`{colors.background}`), not pure white, as the default page
- Run display type huge with aggressive negative tracking
- Use monospace, uppercase, letter-spaced for labels, captions, and the loading counter
- Keep the signal red (`{colors.primary}`) rare — emphasis only
- Default to square corners and thin hairlines

### Don't
- Don't scatter the red — one accent, used sparingly
- Don't round project imagery or cards — keep them square
- Don't add a third type family
- Don't crowd projects — large vertical gaps are the rhythm
- Don't use heavy borders — hairlines only

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero type scales down, nav collapses |
| Tablet | 600–1024px | Wider measure, larger imagery |
| Desktop | >1024px | Full-bleed projects, maximum hero scale |

### Collapsing Strategy
- Hero: 88px → scales down, maintains proportional negative tracking
- Navigation: inline mono links → minimal mobile menu
- Projects: full-bleed images stack with mono captions beneath
- Loading counter: remains centered and oversized at all sizes

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Paper `{colors.background}`
- Heading / body text: Ink `{colors.ink}`
- Secondary text / captions: `{colors.ink-secondary}`
- Accent / emphasis: Signal Red `{colors.primary}`
- Dividers: Hairline `{colors.hairline}`

### Example Component Prompts
- "Build a hero on paper background (`{colors.background}`). Headline at 88px Archivo weight 700, line-height 0.95, letter-spacing -3px, color `{colors.ink}`. Below it a monospace label at 12px Space Mono, uppercase, letter-spacing 1.5px, color `{colors.ink-secondary}` reading 'PLEASE SCROLL DOWN'."
- "Create a project block: full-bleed white image, square corners, with a monospace caption row beneath (`{typography.caption}`, `{colors.ink-secondary}`). Separate from the next with a `{colors.hairline}` divider and `{spacing.3xl}` gap."
- "Make a pill button: ink fill (`{colors.ink}`), paper text (`{colors.on-ink}`), 12px 24px padding, monospace uppercase label. Accent variant swaps fill to `{colors.primary}`."
- "Design the loading counter: large 88px Archivo number on dark ink, paper-tone text, counting up to 100%."

### Iteration Guide
1. Paper canvas, not white — the warmth matters
2. Display type huge and tight; mono for every label and caption
3. Red is the only color — keep it rare
4. Square corners everywhere except pill buttons and badges
5. Hairlines, not heavy borders; large gaps between projects

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by BPco. Brand names and trademarks belong to their respective owners.