Designer Portfolio — Spiral-Bound Magazine

# CRIMSON PRESS KIT — EDITORIAL BINDER PORTFOLIO

> A SELF-CONTAINED GENERATION PROMPT FOR A SINGLE-PAGE, MULTI-SECTION
> DESIGNER PORTFOLIO STAGED AS A PHYSICAL SPIRAL-BOUND MAGAZINE / PRESS KIT.

## AESTHETIC IDENTITY

BUILD A PORTFOLIO CALLED **"CRIMSON PRESS KIT"** — A RAW, EDITORIAL,
PRINT-INSPIRED DESIGNER PORTFOLIO THAT LOOKS AND FEELS LIKE A PHYSICAL
SPIRAL-BOUND MAGAZINE OR BRAND PRESS KIT LYING OPEN ON A DARK STUDIO TABLE.
EACH "PAGE" IS A FULL-BLEED CARD WITH ROUNDED CORNERS AND A HEAVY DROP
SHADOW, STACKED VERTICALLY AND JOINED BY A METAL SPIRAL-BINDING DIVIDER
RENDERED IN PURE SVG. THE MOOD IS CONFIDENT, LOUD, EDITORIAL AND TACTILE —
"FASHION MAGAZINE MEETS BRUTALIST ZINE". IT MUST NOT LOOK LIKE A GENERIC
SAAS SITE: NO SOFT GRADIENTS, NO ROUNDED PILL BUTTONS, NO PASTEL GLASS.
EVERYTHING IS SHARP, INKED, GRAINY, AND PRINTED.

## COLOR SYSTEM

- TABLE / SHELL BACKGROUND: NEAR-BLACK INK `#1A1A1A`.
- SIGNATURE CRIMSON: `#C83D32` (COVER + METHOD PAGES, FULL-BLEED FIELDS).
- HOT SELECTION RED / ACCENT: `#DC2626` (LINKS, HOVERS, RULES, TEXT SELECTION).
- PAPER / LIGHT CARD: WARM OFF-WHITE `#F2F0EB` (CONTENTS + CONTACT PAGES).
- PURE WHITE PAPER: `#FFFFFF` (INTRO PAGE).
- DARK GALLERY CARD: `#111111` WITH `#222222` SUB-PANELS AND `#333333` HAIRLINE BORDERS.
- INK BLACK: `#000000` FOR TYPE ON LIGHT/CRIMSON PAGES.
- MUTED GRAYS: `#9CA3AF`, `#D1D5DB`, `#6B7280` FOR META TEXT AND DIVIDERS.
- USE A SUBTLE GENERATED NOISE / GRAIN TEXTURE OVERLAY (CANVAS OR INLINE SVG
  FE-TURBULENCE) ON THE SHELL AND ON THE CRIMSON / PAPER PAGES, IN
  `mix-blend-multiply` AT LOW OPACITY, TO SELL THE PRINTED-PAPER FEEL.

## TYPOGRAPHY

- DISPLAY / HEADINGS: A HEAVY GROTESK SANS (INTER / ARCHIVO STYLE) AT
  WEIGHTS 800–900, UPPERCASE, NEGATIVE LETTER-SPACING, LINE-HEIGHT ~0.9.
  HEROS SCALE UP TO ~8XL. THIS IS THE LOUD VOICE.
- BODY / UI / META: SAME GROTESK AT 400/700, AND A MONOSPACE (ROBOTO MONO /
  SPACE MONO STYLE) FOR LABELS, FIGURE CAPTIONS, NUMBERING, AND CAPTIONS,
  ALWAYS UPPERCASE WITH WIDE TRACKING `0.2–0.3EM`.
- ONE ITALIC SERIF (PLAYFAIR DISPLAY STYLE) USED SPARINGLY AS AN ACCENT WORD
  INSIDE HEADLINES (E.G. A SINGLE LOWERCASE ITALIC WORD IN CRIMSON) TO BREAK
  THE BRUTALIST GROTESK RHYTHM.
- VENDOR ALL FONTS LOCALLY (WOFF2/TTF) — NO REMOTE FONT CDNS.

## LAYOUT & SECTION BREAKDOWN

A SINGLE VERTICAL "BINDER" CENTERED IN A MAX-WIDTH ~5XL COLUMN ON THE DARK
TABLE, WITH GENEROUS OUTER PADDING. BETWEEN EVERY PAGE SITS A FULL-WIDTH
SVG SPIRAL-BINDING DIVIDER (REPEATING METAL COILS THREADING THROUGH PUNCHED
HOLES). PAGES IN ORDER:

1. **COVER (CRIMSON):** A KICKER LINE IN MONO ("THE STRATEGY, PSYCHOLOGY &
   DESIGN"), A MASSIVE UPPERCASE WORDMARK TITLE, A THIN INK RULE, A BOLD
   TAGLINE, THEN A COLLAGE GRID OF 12–14 SMALL PORTRAIT TILES (GRAYSCALE,
   COLORIZING ON HOVER, EACH TAGGED `FIG.N` IN MONO). FOOTER ROW WITH
   VOLUME / LOCATION META IN MONO.
2. **CONTENTS (PAPER):** A HEAVY `CONTENTS` HEADLINE WITH A YEAR STAMP AND A
   4PX INK UNDERLINE. LEFT: A LARGE BORDERED EDITORIAL PORTRAIT WITH A NAME
   TAG CHIP. RIGHT: A NUMBERED TABLE-OF-CONTENTS LIST (01–06) WHERE EACH ROW
   HAS A MONO INDEX, AN UPPERCASE TITLE THAT SLIDES RIGHT ON HOVER, A SUBTITLE
   THAT FADES IN, AND A HAIRLINE THAT DARKENS — EACH ROW SCROLLS TO ITS PAGE.
3. **INTRO (WHITE):** A WHITE PAPER PAGE WITH A CRIMSON TOP BORDER. A BIG
   UPPERCASE MANIFESTO HEADLINE WITH ONE ITALIC-SERIF CRIMSON ACCENT WORD,
   THEN TWO MONO BODY COLUMNS OF FIRST-PERSON COPY.
4. **SELECTED WORKS (DARK GALLERY):** DARK CARD WITH A HUGE TITLE AND A
   BLURRED CRIMSON GLOW ORB. A 2-COLUMN STAGGERED GRID OF PROJECT CARDS
   (DIFFERENT ASPECT RATIOS, OFFSET VERTICALLY), EACH WITH A GRAYSCALE IMAGE
   THAT SCALES & A CRIMSON OVERLAY ON HOVER, A YEAR CHIP, A TITLE, A MONO
   DISCIPLINE LINE, AND AN ARROW ICON. ONE TILE IS A TEXT-ONLY "MORE ARCHIVES"
   BLOCK THAT INVERTS TO CRIMSON ON HOVER.
5. **THE METHOD (CRIMSON):** FULL CRIMSON FIELD. LEFT: A GIANT TWO-LINE
   `THE METHOD` HEADLINE WITH A 4PX INK LEFT BORDER AND A BOLD STATEMENT.
   RIGHT: FOUR BLACK PROCESS CARDS (01 AUDIT, 02 STRATEGY, 03 DESIGN,
   04 LAUNCH) WITH CRIMSON MONO HEADINGS THAT SLIDE RIGHT ON HOVER.
6. **CONTACT (PAPER):** TWO COLUMNS. LEFT: A SLIGHTLY-ROTATED BORDERED
   GRAYSCALE PORTRAIT, A `LET'S BUILD SOMETHING ICONIC` HEADLINE, AVAILABILITY
   COPY, AND TWO HARD-EDGED BUTTONS (FILLED INK + OUTLINE). RIGHT: A MINIMAL
   UNDERLINE-ONLY "QUICK QUERY" FORM (NAME / EMAIL / MESSAGE WITH A SEND ICON)
   AND RIGHT-ALIGNED SOCIAL / EMAIL LINKS PLUS A MONO COPYRIGHT BLOCK.

## HERO / COVER COMPOSITION

THE COVER IS THE HERO: CRIMSON FULL-BLEED CARD, CONCRETE/GRAIN TEXTURE,
CENTER-STACKED KICKER + COLOSSAL WORDMARK + RULE + TAGLINE, THEN THE
GRAYSCALE PORTRAIT COLLAGE GRID, THEN A PRINTED META FOOTER. IT SHOULD READ
AS A MAGAZINE FRONT COVER AT FIRST GLANCE.

## MOTION / ANIMATION / INTERACTION

- SMOOTH ANCHOR SCROLLING BETWEEN PAGES VIA THE CONTENTS LIST.
- ON SCROLL, EACH PAGE REVEALS WITH A SUBTLE FADE + RISE (INTERSECTIONOBSERVER).
- COLLAGE & PROJECT IMAGES: GRAYSCALE → COLOR AND SCALE-UP ON HOVER;
  PROJECT CARDS GET A CRIMSON OVERLAY WASH.
- CONTENTS ROWS: TITLE TRANSLATES RIGHT, INDEX TURNS RED, SUBTITLE FADES IN.
- METHOD CARDS & TOC ROWS NUDGE ON HOVER; "MORE ARCHIVES" TILE COLOR-INVERTS.
- A FIXED "BACK TO CONTENTS" CIRCULAR BUTTON APPEARS AFTER SCROLLING.
- CUSTOM CRIMSON TEXT SELECTION. KEEP MOTION TASTEFUL — NO BOUNCY EASING,
  EVERYTHING SNAPPY AND PRINT-LIKE (150–700MS).

## RESPONSIVE BEHAVIOR

- DESKTOP: TWO-COLUMN CONTENTS / METHOD / CONTACT; 7-WIDE COLLAGE; STAGGERED
  2-COL GALLERY.
- TABLET/MOBILE: COLLAPSE TO SINGLE COLUMN, 4-WIDE COLLAGE, REMOVE VERTICAL
  STAGGER, REDUCE HEADLINE SCALE, KEEP THE SPIRAL DIVIDERS AND CARD SHADOWS.
- THE FIXED "BACK TO CONTENTS" BUTTON IS ESPECIALLY USEFUL ON MOBILE.

## TECH & CONSTRAINTS

- PLAIN STATIC BUILD (HTML + CSS + A SMALL VANILLA JS FILE). NO FRAMEWORK
  REQUIRED. ICONS AS INLINE SVG. SPIRAL BINDING AS INLINE SVG.
- ALL ASSETS (FONTS, IMAGES, TEXTURES) VENDORED LOCALLY; THE PROJECT MUST RUN
  FULLY OFFLINE.
- POLISHED, DISTINCTIVE, NON-TEMPLATED — TREAT THE PRINT METAPHOR AS THE
  GUIDING CONSTRAINT FOR EVERY DECISION.