DESIGN.md · Analysis

ARCHIVE CPCOMPANY

archive.cpcompany.com · 29 Oct 2026 · 47 colors · IBM Plex Mono

ARCHIVE CPCOMPANY

Monochrome archive interface for C.P. Company's product, magazine, people and fabric-treatment catalogue. A stark black canvas with white monospaced tags lets the garments carry all the colour.

Colors

surface#0a0b09

surface-dim#0a0b09

surface-bright#1a1b19

surface-container-lowest#000000

surface-container-low#0a0b09

surface-container#111210

surface-container-high#1a1b19

surface-container-highest#242522

on-surface#ffffff

on-surface-variant#ffffff

inverse-surface#ffffff

inverse-on-surface#0a0b09

outline#ffffff

outline-variant#ffffff

surface-tint#ffffff

primary#ffffff

on-primary#0a0b09

primary-container#ffffff

on-primary-container#0a0b09

inverse-primary#0a0b09

secondary#ffffff

on-secondary#0a0b09

secondary-container#242522

on-secondary-container#ffffff

tertiary#ffffff

on-tertiary#0a0b09

tertiary-container#242522

on-tertiary-container#ffffff

error#ffffff

on-error#0a0b09

error-container#242522

on-error-container#ffffff

primary-fixed#ffffff

primary-fixed-dim#e6e6e6

on-primary-fixed#0a0b09

on-primary-fixed-variant#0a0b09

secondary-fixed#ffffff

secondary-fixed-dim#e6e6e6

on-secondary-fixed#0a0b09

on-secondary-fixed-variant#0a0b09

tertiary-fixed#ffffff

tertiary-fixed-dim#e6e6e6

on-tertiary-fixed#0a0b09

on-tertiary-fixed-variant#0a0b09

background#0a0b09

on-background#ffffff

surface-variant#1a1b19

Typography

display: fontFamily: IBM Plex Mono · fontSize: 16px · fontWeight: 400 · lineHeight: 24px
headline-lg: fontFamily: IBM Plex Mono · fontSize: 16px · fontWeight: 400 · lineHeight: 24px
headline-md: fontFamily: IBM Plex Mono · fontSize: 16px · fontWeight: 400 · lineHeight: 24px
title-lg: fontFamily: IBM Plex Mono · fontSize: 16px · fontWeight: 400 · lineHeight: 24px
body-lg: fontFamily: IBM Plex Mono · fontSize: 16px · fontWeight: 400 · lineHeight: 24px
body-md: fontFamily: IBM Plex Mono · fontSize: 16px · fontWeight: 400 · lineHeight: 24px
label-md: fontFamily: IBM Plex Mono · fontSize: 10px · fontWeight: 400 · lineHeight: 15px
label-sm: fontFamily: IBM Plex Mono · fontSize: 10px · fontWeight: 400 · lineHeight: 15px

Design guidance

Overview

ARCHIVE CPCOMPANY is the digital index of C.P. Company's garment archive, covering products, magazine books, people, music, community, objects, references and fabric treatments. The aesthetic is Archival Monochrome: a flat #0a0b09 canvas, uncompressed product photography isolated on black, and monospaced type that reads like a catalogue card. The emotional response is quiet, objective reverence, as if the garment were filed rather than sold.

The voice is terse and taxonomic. Navigation labels are uppercase nouns with no adjectives, and captions are bare reference codes such as "ARCHCP0160". Example sentence: "ARCHCP0160 — Hooded field jacket, teal, lens pocket, 1999."

Colors

The palette is strictly achromatic at the interface level. Surface (#0a0b09) forms the entire canvas and background; on-surface (#ffffff) carries all text, borders and tag fills. Primary (#ffffff) is used for interactive outlines and the inverted hover state, and on-primary (#0a0b09) is the only text colour allowed on a white fill. Secondary and tertiary collapse to white to keep the system singular; the only chroma on screen belongs to the product photography. Surface-container-low (#0a0b09) and surface-container-high (#1a1b19) are used only to separate card and hover layers without introducing new hues.

Typography

A single monospaced family, IBM Plex Mono, carries the entire system, which signals archival precision. Body and headings share 16px / 24px at weight 400 with no letter-spacing, while labels drop to 10px / 15px with uppercase transform and tracking of 0.04em to 0.06em. Apply text-transform: uppercase and letter-spacing: 0.04em to all navigation tags and captions; do not introduce a bold weight, since hierarchy comes from size and placement rather than emphasis.

Layout

The layout is a fixed header with a three-column flex row (left empty, centred logo, right About link) padded 10px horizontally and 10px top. Product imagery occupies a full-viewport fixed overlay with a square aspect ratio capped at 640px wide and 50vw on large screens. Spacing rhythm uses the 4px base unit, with 24px (lg) for section gaps and 48px (xl) between image and navigation. Navigation tags wrap in a centred flex row with 8px (sm) gaps.

Elevation & Depth

The system is flat. No box-shadow, no blur and no gradient is used; depth is conveyed solely by the contrast between #0a0b09 and #ffffff and by the 1px solid white border on tags. Hover inverts fills rather than lifting elements, with transitions of 300ms using cubic-bezier(0.4, 0, 0.2, 1).

Shapes

The shape language is Architectural Sharpness restrained to a barely perceptible softness. Every interactive element uses a 3px border-radius, which reads as a catalogue-card corner rather than a rounded pill. Tags and buttons share this radius, and the rounded-full token is reserved for the rare circular indicator.

Components

Action Elements Primary and secondary buttons are 24px tall with 8px horizontal padding, 1px solid #ffffff border and 3px radius. Hover swaps background and text colours, inverting to white fill with #0a0b09 text, over 300ms ease-in-out.

Containers & Surfaces Cards sit on surface-container-low at 12px padding with no border. On hover they shift to surface-container-high over 300ms. Image frames are unbordered and use object-fit: contain.

Inputs & Interaction Navigation tags are the primary interaction element: 10px uppercase monospaced text, 1px white border, 10px and 4px padding, and a selected state that fills white with black text. Disabled tags drop to 30% opacity with cursor: not-allowed.

Do's and Don'ts

**Do**

Do keep every interactive element on a 1px solid #ffffff border with a 3px radius.
Do set all navigation labels and captions in uppercase with 0.04em letter-spacing.
Do invert fills on hover (background #ffffff, text #0a0b09) over 300ms.
Do let product photography carry all colour and keep the interface achromatic.

**Don't**

Don't introduce shadows, gradients or blur; the system is strictly flat.
Don't use any hue in UI chrome, since colour belongs to the garments.
Don't set labels in bold weights; hierarchy comes from size and placement.
Don't round buttons beyond 3px or use pill shapes outside the full-radius token.

---
version: alpha
name: ARCHIVE CPCOMPANY
description: >-
  Monochrome archive interface for C.P. Company's product, magazine, people and fabric-treatment catalogue. A stark
  black canvas with white monospaced tags lets the garments carry all the colour.
logo:
  src: https://archive.cpcompany.com/icon.png?icon.06~zrzg_-1g8j.png
colors:
  surface: '#0a0b09'
  surface-dim: '#0a0b09'
  surface-bright: '#1a1b19'
  surface-container-lowest: '#000000'
  surface-container-low: '#0a0b09'
  surface-container: '#111210'
  surface-container-high: '#1a1b19'
  surface-container-highest: '#242522'
  on-surface: '#ffffff'
  on-surface-variant: '#ffffff'
  inverse-surface: '#ffffff'
  inverse-on-surface: '#0a0b09'
  outline: '#ffffff'
  outline-variant: '#ffffff'
  surface-tint: '#ffffff'
  primary: '#ffffff'
  on-primary: '#0a0b09'
  primary-container: '#ffffff'
  on-primary-container: '#0a0b09'
  inverse-primary: '#0a0b09'
  secondary: '#ffffff'
  on-secondary: '#0a0b09'
  secondary-container: '#242522'
  on-secondary-container: '#ffffff'
  tertiary: '#ffffff'
  on-tertiary: '#0a0b09'
  tertiary-container: '#242522'
  on-tertiary-container: '#ffffff'
  error: '#ffffff'
  on-error: '#0a0b09'
  error-container: '#242522'
  on-error-container: '#ffffff'
  primary-fixed: '#ffffff'
  primary-fixed-dim: '#e6e6e6'
  on-primary-fixed: '#0a0b09'
  on-primary-fixed-variant: '#0a0b09'
  secondary-fixed: '#ffffff'
  secondary-fixed-dim: '#e6e6e6'
  on-secondary-fixed: '#0a0b09'
  on-secondary-fixed-variant: '#0a0b09'
  tertiary-fixed: '#ffffff'
  tertiary-fixed-dim: '#e6e6e6'
  on-tertiary-fixed: '#0a0b09'
  on-tertiary-fixed-variant: '#0a0b09'
  background: '#0a0b09'
  on-background: '#ffffff'
  surface-variant: '#1a1b19'
typography:
  display:
    fontFamily: IBM Plex Mono
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
  headline-lg:
    fontFamily: IBM Plex Mono
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
  headline-md:
    fontFamily: IBM Plex Mono
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
  title-lg:
    fontFamily: IBM Plex Mono
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
  body-lg:
    fontFamily: IBM Plex Mono
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
  body-md:
    fontFamily: IBM Plex Mono
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
  label-md:
    fontFamily: IBM Plex Mono
    fontSize: 10px
    fontWeight: '400'
    lineHeight: 15px
  label-sm:
    fontFamily: IBM Plex Mono
    fontSize: 10px
    fontWeight: '400'
    lineHeight: 15px
rounded:
  sm: 3px
  DEFAULT: 3px
  md: 3px
  lg: 3px
  xl: 3px
  full: 9999px
spacing:
  unit: 4px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 24px
  xl: 48px
  gutter: 10px
  container-max: 640px
elevation:
  sm: none
  md: none
  lg: none
layout:
  containerMaxWidth: 640px
  gridColumns: 12
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.DEFAULT}'
    padding: '{spacing.sm}'
    height: 24px
  button-primary-hover:
    backgroundColor: '{colors.on-primary}'
    textColor: '{colors.primary}'
  button-secondary:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.DEFAULT}'
    padding: '{spacing.sm}'
    height: 24px
  button-secondary-hover:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
  tag:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.on-surface}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.DEFAULT}'
    padding: '{spacing.sm}'
  tag-hover:
    backgroundColor: '{colors.on-surface}'
    textColor: '{colors.surface}'
  tag-selected:
    backgroundColor: '{colors.on-surface}'
    textColor: '{colors.surface}'
  header-link:
    backgroundColor: transparent
    textColor: '{colors.on-surface}'
    typography: '{typography.label-sm}'
  header-link-hover:
    backgroundColor: transparent
    textColor: '{colors.on-surface}'
  image-caption:
    backgroundColor: transparent
    textColor: '{colors.on-surface}'
    typography: '{typography.label-sm}'
  logo-mark:
    backgroundColor: transparent
    textColor: '{colors.on-surface}'
  card:
    backgroundColor: '{colors.surface-container-low}'
    rounded: '{rounded.DEFAULT}'
    padding: '{spacing.md}'
  card-hover:
    backgroundColor: '{colors.surface-container-high}'
---

## Overview

## Colors

## Typography

## Layout

## Elevation & Depth

## Shapes

## Components

### Action Elements
Primary and secondary buttons are 24px tall with 8px horizontal padding, 1px solid #ffffff border and 3px radius. Hover swaps background and text colours, inverting to white fill with #0a0b09 text, over 300ms ease-in-out.

### Containers & Surfaces
Cards sit on surface-container-low at 12px padding with no border. On hover they shift to surface-container-high over 300ms. Image frames are unbordered and use object-fit: contain.

### Inputs & Interaction
Navigation tags are the primary interaction element: 10px uppercase monospaced text, 1px white border, 10px and 4px padding, and a selected state that fills white with black text. Disabled tags drop to 30% opacity with cursor: not-allowed.

## Do's and Don'ts

**Do**
- Do keep every interactive element on a 1px solid #ffffff border with a 3px radius.
- Do set all navigation labels and captions in uppercase with 0.04em letter-spacing.
- Do invert fills on hover (background #ffffff, text #0a0b09) over 300ms.
- Do let product photography carry all colour and keep the interface achromatic.

**Don't**
- Don't introduce shadows, gradients or blur; the system is strictly flat.
- Don't use any hue in UI chrome, since colour belongs to the garments.
- Don't set labels in bold weights; hierarchy comes from size and placement.
- Don't round buttons beyond 3px or use pill shapes outside the full-radius token.

Edit, then copy or download.