Carlos deArtola monogramCARLOS DE ARTOLA
APPENDIX D · 01

A system for one site.

Portfolio Print is the design system this portfolio is built from: a small set of named parts. This is the book of those parts: what each is called, where it lives, and what it must keep doing.

01WHAT IT IS

A print specimen, kept honest.

The site is set like a specimen book: a contents page, six chapters, and the back matter. Portfolio Print is named for that setting. Everything on the site is built from its 42 parts in 7 groups. The parts are few on purpose. Restraint is the system's first rule, and every part earns its place by being used more than once.

One spot ink carries the whole thing: oxblood, on the chrome, the chapters, and the back matter alike. Type is four faces with fixed jobs. Motion is one personality on three curves. When something looks off, it is almost always because one of these small sets was extended by accident.

02HOW TO USE IT

Ask for a part by name.

Every part has a name and a handle. Say the name and what should happen to it: "put a Numeral Plate on the About page", "switch the second Pull Quote to accent", "the Ledger Row labels feel heavy". The name is enough; the registry knows the file, the props, and the rules.

  1. 01NAME

    The word to use in conversation. Title case, two words at most.

  2. 02HANDLE

    The lowercase id in the registry and the URL of its page.

  3. 03LIVES IN

    The file that defines it. Page files compose parts; they do not define new ones.

  4. 04USED ON

    Where it appears today, so a change can be checked everywhere it lands.

  5. 05PROPS

    What can be set without changing the part.

  6. 06RULES

    What must stay true. The deck of every part page repeats them.

03THE GROUPS
7 GROUPS

Seven groups, in reading order.

  1. 01FOUNDATIONS

    7 parts, on one page: Tokens, Type, Eyebrow, Hairline, Grounds, Motion, Icons.

  2. 02CHROME

    9 parts: Masthead, Rail, Folio, Footer, Contents, Example Panel, Pager, Code Block, Peek.

  3. 03OPENERS

    5 parts: Breadcrumb, Page Opener, Section Opener, Chapter Section, Spec.

  4. 04PLATES & BANDS

    6 parts: Plate, Prototype Plate, Numeral Plate, Pull Quote, Note Band, Fleuron.

  5. 05LISTS

    6 parts: Ledger Row, Titled Entries, Contact Sheet, Chapter Nav, Design Notes, Annotations.

  6. 06FIGURES

    3 parts: Figure, Mark, Brand Band.

  7. 07ARTIFACTS

    6 parts: Project Artifact, Prototypes, Screens, Flow Chart, Screens Walkthrough, Diagrams.