APPENDIX D

Portfolio Print.

The portfolio's own design system, named for how the site is set: 42 parts in 7 groups, each with a name to use when asking for it, the file it lives in, and the rules it keeps.

START HERE

03 PAGES

Read these first.

¶ 01CHROME

9 PARTS

The frame around every page.

¶ 02OPENERS

5 PARTS

How a page and a section begin.

¶ 03PLATES & BANDS

6 PARTS

Where the ground changes.

¶ 04LISTS

6 PARTS

Rows that carry the argument.

¶ 05FIGURES

3 PARTS

Numbers drawn, not shouted.

¶ 06ARTIFACTS

6 PARTS

The work itself, mounted.

AT A GLANCE

17 MARKS

The figure marks, in one place.

SLOPE
SCALE
90 s
0306090120
TILES
LandingAccountDraw
STEPS
1. 1Build
2. 2Widen
3. 3Hold still
RANK
1. 1
2. 2
3. 3
4. 4
5. 5
FIRSTTIE-BREAK
COMPARE
Sourcing6
RFQ12
STATUS
ACTIVESeveral accounts onboarding
FANOUT
Library
App oneApp two
SWATCHES
Brand one
Brand two
BGINKSPOTR
FRACTION
STATE
Settings onlyDashboard
ZOOM
100%
200%
MONTHS
THIS MONTH
NEXT
HUB
Dashboard
Summary
Draw
Payment
GLYPH
TIMELINE
Independent2003
In-house2013
200320132026
GROUPS
Team A4 PEOPLE
Team B3

EXAMPLESTHE 17 MARKS

SLOPE
SCALE
90 s
0306090120
TILES
LandingAccountDraw
STEPS
1. 1Build
2. 2Widen
3. 3Hold still
RANK
1. 1
2. 2
3. 3
4. 4
5. 5
FIRSTTIE-BREAK
COMPARE
Sourcing6
RFQ12
STATUS
ACTIVESeveral accounts onboarding
FANOUT
Library
App oneApp two
SWATCHES
Brand one
Brand two
BGINKSPOTR
FRACTION
STATE
Settings onlyDashboard
ZOOM
100%
200%
MONTHS
THIS MONTH
NEXT
HUB
Dashboard
Summary
Draw
Payment
GLYPH
TIMELINE
Independent2003
In-house2013
200320132026
GROUPS
Team A4 PEOPLE
Team B3

CODE

JSX

import Mark from '../components/OutcomeMarks.jsx'

<Mark mark={{ kind: 'slope', after: 62 }} />
<Mark mark={{ kind: 'scale', value: 90, max: 120, unit: 's', ticks: [0, 30, 60, 90, 120] }} />
<Mark mark={{ kind: 'tiles', items: ['Landing', 'Account', 'Draw'] }} />
<Mark mark={{ kind: 'steps', items: ['Build', 'Widen', 'Hold still'] }} />
<Mark mark={{ kind: 'rank', n: 7 }} />
<Mark mark={{ kind: 'compare', items: [['Sourcing', 6], ['RFQ', 12]] }} />
<Mark mark={{ kind: 'fraction', n: 6, filled: [4] }} />
<Mark mark={{ kind: 'timeline', start: 2003, end: 2026, rows: [['Independent', 2003]], ticks: [2003, 2026] }} />
<Mark mark={{ kind: 'groups', items: [['Cane Bay', 3, 'DESIGNERS']] }} />
{/* also: status · fanout · swatches · state · zoom · months · hub · glyph */}