# OKELIS Corporate Portfolio

Draft v1 · A4 (210 × 297 mm) · 28 pages

## Review link

```bash
python3 serve.py
```

Opens `http://localhost:8080/review/`. The review app carries all 28 pages plus the four
cover options, with:

- **Click** anywhere on a page to pin a comment
- **Click and drag** to mark a rectangular region
- **Cover** selector, four options, swaps live
- **Type** selector, five pairings, restyles all 28 pages at once
- **Zoom**, comments panel, and Export to a text file

Comments save to `review/comments.json` through the server, and to the browser's
localStorage as a fallback.

### Hosting it on cPanel

Upload the whole `portfolio/` folder and point people at `/portfolio/review/`.
`review/api.php` replaces `serve.py` there and writes to the same `comments.json`, so make
the `review/` directory writable (755, and 644 on `comments.json`). If PHP is unavailable
the app still works, but comments then live only in each reviewer's own browser and have to
be sent back with the Export button.

**Note on fonts:** the type switcher relies on faces installed on the *viewer's* machine.
SF Pro, Neue Haas Grotesk and Beatrice are on this Mac. On a machine without them the pages
fall back to Helvetica, so the PDFs are the reference for typography, not the web link.

## Deliverables

| File | What it is |
|---|---|
| `dist/OKELIS-Design-Direction-v1.pdf` | 6pp. Direction, colour, typography, grid, structure, infographic programme, next steps. Send this first. |
| `dist/OKELIS-Corporate-Portfolio-DRAFT-v1.pdf` | 28pp. The full portfolio draft. |

## Building

```bash
./build.sh          # portfolio with cover A
./build.sh c        # portfolio with cover C
./build-dd.sh       # design direction document
./build-review.sh   # regenerate review/pages.html after editing any page
```

Requires Google Chrome at `/Applications/Google Chrome.app` and SF Pro Display / SF Pro Text
installed.

## Structure

```
css/okelis.css      Design system: brand tokens, type scale, grid, components
covers/             Four cover options, a to d
src/p02…p28*.html   One file per portfolio page
src2/d1…d6*.html    One file per design-direction page
gen/gfx.py          Charts and technical figures      → assets/gfx/
gen/gfx2.py         Diagrams and icon sets            → assets/gfx/
gen/covers.py       Cover artwork                     → assets/gfx/
review/             Review app (index.html, review.js, review.css, api.php)
serve.py            Local review server
dist/               Built HTML and PDF output
```

Regenerate artwork after editing a generator:

```bash
python3 gen/gfx.py && python3 gen/gfx2.py && python3 gen/covers.py
```

### Figure text sizes

Each figure is drawn at its own canvas scale, so `write(..., fscale=N)` multiplies every
`font-size` in that figure to land near 7 pt on the printed page. If you change a figure's
placement width in the HTML, adjust its `fscale` to match.

## House rules applied to this document

These were applied deliberately and should be held to in future revisions:

- **No em dashes.** Commas, colons and full stops instead.
- **No tracked all-capital kicker labels** above headings. Section labels are sentence case
  with no added tracking, marked by a short accent rule.
- **No coloured left border** on callout blocks. A rule above the text instead (`.stmt`).
- **No two-beat slogan constructions** in headings or body copy.
- **No green** anywhere in the palette.

## Outstanding before publication

- **Photography.** All image slots are designed, sized and captioned placeholders.
- **Simulation captures.** IES VE and eQUEST output for pages 16 and 17.
- **Project register (page 24).** Gross floor area, client name and photography per entry.
  Entries 24 and 25 in the supplied list are both "Al Riyad School RD79" with identical
  scope, so one may be a duplicate. Both are shown as supplied, pending confirmation.
- **Amazon Data Center** is named on page 24. Client naming approval needed before
  publication.
- **Certification marks** omitted pending trademark review, per §7 of the brief.
- **Contact block** (page 28) needs registered address, email and website.
- **Print-ready output.** Current PDFs are digital. The print version needs 3 mm bleed and
  crop marks. Headless Chrome writes the page at 594.96 × 841.92 pt (209.89 × 297.03 mm),
  tagged A4 and inside print tolerance, but the production file should be imposed at exact
  A4 plus bleed.
- **Copy approval.** All narrative text is proposed and written to the brief's tone.
