What we need from Veronika to render the design properly

Everything in mockup/ that isn’t in her Affinity file was invented by us as a stand-in. This document lists what’s invented, why it needs to come from her instead, and how to export it. Ordered by how much each one improves the result.

How we build the booklet: she defines it, we build it

Decided 2026-07-15. The booklet is not a picture she exports; it’s a component we build in HTML/CSS to her specification, using materials she supplies.

Why not a designed image per booklet: the title, type, year, accent colour and cover drawing change per project, and the cover has to swing independently of the pages inside. As flat images she’d re-export every file whenever a title changed or a project was added, the text couldn’t be selected, translated, or read aloud by a screen reader, and it wouldn’t scale cleanly.

So the split is:

She supplies We build

Paper texture (§6)

Cover / sheets / inner page structure

The paperclip, as SVG (§1)

Title, type, year - real text

Per-project cover drawings (§2)

The accent band, driven by a colour prop

Measurements + light direction (§3, §7)

The open/close animation and all shadows

A designed example page (§5)

Layout, responsiveness, accessibility

Anything in the left column that doesn’t arrive gets faked by us - and everything below marked invented is currently faked. That’s the gap this document exists to close.

General export notes

  • SVG for anything drawn (icons, line art, the paperclip): Affinity → File → Export → SVG (for export). Set Rasterise: Nothing. If any text is part of the artwork, convert it to curves first (Layer → Convert to Curves), otherwise it will render in the wrong font on our machines.

  • PNG at @2x for anything with paper texture or photographic content, with transparency where the artwork should sit on our paper rather than carry its own.

  • Slice per element, not per page. A single tall export gets downscaled on the way to us and detail is lost. One file per thing, each roughly 1400-1600px on its longest edge.

  • Drop everything in docs/design/assets/ and tell us the filenames.

0. Colours - hers, delivered 2026-07-16. ✅ CLOSED

docs/design/farbpalette.jpg. This closes the largest invented thing in the whole build.

Her name Hex Category

Brandy

#942D10

Abschlussarbeiten (Rot)

Bronze

#CB8420

Entwurfsprojekte (Gelb)

Dark Spruce

#195326

Wahlfächer (Grün)

Deep Space Blue

#1B3B51

Praktische Arbeiten (Blau)

Soft Apricot

#F0D3B1

"neutraler Hintergrund"

Four Projektfarben, four categories, her order - a direct swap for the terracotta/ochre/ olive/slate we had mixed ourselves. In use as of this build; the tint ramps (75/50/25/10%) are transcribed into style/main.css verbatim.

Two things still open, decided provisionally (BUILD-LOG §22):

  • Soft Apricot is used for surfaces, not the page. The page stays her cream #F5EFE9. Her TIPP says the lighter steps are for "Flächen, Hintergründe", and her own Anwendungsbeispiele sit on a pale peach rather than on full #F0D3B1 - but if she meant the whole page to be apricot, that’s a one-line change. Worth asking.

  • Her brand orange #D04D12 is not in the palette and we kept it - it paints her name, the nav underline and the focus rings. The palette is headed Projektfarben, so we read it as not claiming her identity colour. Worth confirming, because if Brandy is meant to replace it, the whole site drops to one red and --orange-text (our darkened AA workaround) disappears.

1. The clips - removed 2026-07-16 on her instruction

update.odt: "Heftklammern kannst du erstmal weglassen". They are no longer rendered, on the booklets or the portrait. "Erstmal" - so the artwork stays in assets/icons.svg and the placement table is in git history; restoring them is a revert, not a redraw. The rest of this section is kept because it is what we’d restore, and because the open question below still stands if they come back.

Font Awesome’s fa-paperclip is diagonal and squat where hers is upright and elongated, and FA Free has no binder clip at all - no transform bridges either gap. So we drew both from the photo references supplied:

Symbol Reference Notes

clip-wire

silver Gem paperclip photo

one continuous stroked wire, nested U-turns

clip-binder

black foldback clip photo

hourglass handle + trapezoid body + folded feet

They live in mockup/assets/icons.svg alongside the FA UI icons. This is the one place we knowingly stepped outside the Font-Awesome-only rule - because the rule is about the icon set, and neither of these exists in it. Both are flat single-colour and recoloured in CSS.

The shelf alternates the two types with per-booklet offsets and rotations, so a row of six doesn’t read as six copies of one object. Fixed per index, not random - same SSR reasoning as the colours.

Open: the clips are currently brand orange, following her original mockup. Her references are black (binder) and silver (wire). If she wants them realistic rather than in-palette, that’s a one-line colour change per type - worth asking.

If she’d rather draw her own clip artwork, it drops straight in as a new <symbol>.

2. Per-project cover artwork - SVG or transparent PNG @2x

Right now one house sketch, cut out of her own PNG export, is repeated on all four booklets and again on the open page. It’s also degraded: we recovered it from a flattened export, so it’s a resampled copy of a copy.

Needed: each project’s cover drawing as its own file.

  • SVG if the drawing is vector - it’ll be sharp at every size and is the ideal case.

  • Otherwise PNG @2x with a transparent background (no paper baked in - our booklet supplies the paper). If she can only give us ink-on-paper, say so and we’ll cut the paper out, but the result is worse than a clean export.

  • Consistent crop/margins across projects, or they’ll sit at different sizes on the covers.

3. Booklet cover specification

We reverse-engineered the cover from pixels. Confirm or correct:

Thing Our guess Needs confirming

Cover proportion

335 × 455 (≈ 1 : 1.36)

Is there an intended ratio? A5?

Accent band height

11% of cover height

Exact value

Cover paper

flat #EFE9E1

She has a texture - we don’t. See §6

Title / type / year

EB Garamond + Inter, our sizes

Her actual sizes, weights, spacing

Inner margins

13% top, 11% sides

Exact values

Accent colours - answered by doc.odt. Colour is a property of the category, not the project, and it repeats:

Category Colour Our hex Projects

Abschlussarbeiten

Rot

#B5502F terracotta

1

Entwurfsprojekte

Gelb

#C8912F ochre

3

Wahlfächer

Grün

#6F8452 olive

1

Praktische Arbeiten

Blau

#566B87 slate

1

Her constraint: "alle Farben sollten erdig und kräftig sein." The hexes above are ours - we picked earth pigments because the tints sampled from her mockup (#E18667 #E0B566 #8CA473 #818AA6) read pastel rather than kräftig. She should confirm or replace these four values. That’s the only colour decision left; the mapping itself is settled.

Per-project nuance - tried and reverted (2026-07-16). Each booklet was briefly shifted off its category colour so three Entwurfsprojekte wouldn’t read as three identical bands. Veronika didn’t want it: one colour per category, flat. Don’t reintroduce it.

If it ever comes back: derive the shift from the project title, never Math.random() - the colour has to be stable across reloads, and identical on server and client once this is Leptos-SSR’d, where a random value is a hydration mismatch.

The accent band carries the paper grain, multiplied over the colour - ink printed on kraft is darkened by the fibres it sits on. Verified: 20 distinct values across one band, 7.7 luminance spread, i.e. genuinely textured rather than flat.

4. The inside of the booklet - no longer needed, unless the opening widens

Nothing needed here right now. Worth reading anyway, because it’s a live trade-off.

The swing is 24° under a short perspective - the setting Veronika picked because it reads as a hard cover. (A wider, flatter 42° version read as a limp soft cover and was rejected.) At 24°, measured in the browser: the revealed strip is 11px wide, and anything printed on the inner page sits ~30px behind the cover’s edge. You never see inside the booklet. You see a sliver of page edge, which is exactly right for a barely-opened hard cover.

So inner-page artwork would be invisible, and we’re not asking for it. We had built a placeholder interior; it has been deleted as dead weight.

The trade-off, if she wants it: seeing inside means opening wider, and opening wider is what made it read as a soft cover. She can have a rigid hard cover or a visible interior, not both. Currently: hard cover. If she’d rather show the interior, we revisit the angle and she supplies inner-page artwork.

Still worth confirming: does the cover open left (spine on the left, as we assumed) or right?

5. The A4 page - structure known, content needed

The Kritzl concept picture (pics/…_003.jpg) answers the layout question. Its panel 3 ("Inhalt erkunden - vertikal scrollen, die Inhalte sind wie eine Präsentation aufgebaut") gives a running order we should follow:

  1. Title block - title, subtitle, and a metadata list (Leistungen / Ort / Jahr / Größe)

  2. Hero image - full-bleed photograph

  3. Konzept - short text beside concept sketches

  4. Grundriss - floor plan

  5. Schnitt - section

  6. Materialität - a row of material swatches

  7. Impressionen - a photo grid

Our current page (uppercase eyebrow, title, sketch, one paragraph) is a placeholder that predates this reference and does not follow it.

Needed per project: the metadata values (Leistungen, Ort, Jahr, Größe), the hero photo, concept sketches, plan, section, material swatches, and impression photos. That’s a lot - one fully populated project is enough to build and validate the component; the rest can follow.

6. Paper texture - her scan is in use (2026-07-16)

docs/design/pics/kraftpapier.jpg replaced our procedural feTurbulence stand-in. It is real fibre now, not synthetic noise.

What we did to it, and why:

  • Mirror-tiled to 384px. Her scan is 474px and not seamless (edge delta 62 vs a 60 noise floor - i.e. opposite edges are uncorrelated). Mirroring makes it seamless by construction; verified 0.00 edge delta. For fine grain the mirror symmetry is invisible. Repeat distance now exceeds a booklet, so no pattern shows on one cover. 20 KB.

  • Flattened to luminance and multiplied over her cream - NOT used at its own brown. This is the important one. Measured against real kraft #BA9572:

    ratio verdict

    her orange titles

    1.61

    unreadable (needs 4.5)

    the darkened orange

    2.07

    unreadable

    ochre accent band vs the paper

    1.01

    invisible

    The ochre band is four of her eight booklets. On brown paper it disappears, and the whole category-colour system from doc.odt stops working. So the site keeps her cream and takes her fibre.

  • Compressed to a near-white band (mean 245, stddev 4) so multiply only whispers, with every paper base lifted to compensate. Rendered blank cover measures #EFEAE2 against her #EFE9E1 target, grain stddev 2.64 on screen. A stronger first pass turned the covers into grey felt.

  • Each booklet offsets the tile (--gx/--gy, deterministic from index) so eight covers don’t show the identical patch of her scan.

If she actually wants brown kraft booklets, that is a real option - but it means re-picking the four accent colours and the title colour, because the current ones do not survive it. Her call, and worth asking.

7. Light direction - one sentence

Every shadow we drew (booklet covers, loose sheets, the open cover’s cast shadow, the A4 page) is our invention. We assumed light from the upper left, because her mockup’s shadows fall down and slightly right.

Needed: confirmation, or her intended direction. It’s one sentence and it makes every shadow on the site consistent instead of plausible.

7b. New asks (added after the portfolio research)

  • CV content. The Lebenslauf is now on the page in full (Ausbildung / Praxis / Sprachen), not just a download. Every date, institution and entry in it is a placeholder - the only real facts are the project years from doc.odt and the Abschlussarbeit title. Needed: Hochschule, Abitur year + school, internships (Zeitraum, Büro, Ort, what she did, which Leistungsphasen), language levels.

  • Lebenslauf as PDF → mockup/assets/lebenslauf.pdf. The download card still links to it and currently 404s. The page version is for reading; the PDF is what firms keep on their servers.

  • Her actual software list. The Software block is live on the page and every entry in it is our guess - Revit/Rhino/Grasshopper etc. Practices filter on software before they look at design, so a wrong list is worse than none. Grouped, no rating bars (a "Photoshop 87%" bar is a claim nobody can cash). Note Vectorworks matters more in the DACH market than Anglo listicles suggest - include it if she uses it.

  • A downloadable PDF portfolio, and per-project PDFs. Strong, consistent finding: the site must not replace a PDF - firms want a file they can keep on their own servers. Ceiling ~15 MB. This fits her concept exactly: the booklets are PDFs. A print stylesheet exists but does not substitute for this.

  • Per project: individual or group work, and her specific role. Ambiguity here reads as concealment.

  • Process work and technical drawings, not only finished renders - the most common student mistake is all polish, no reasoning. Wall sections and details are specifically watched for.

  • A portrait photo. Conventional and expected in Germany. Warm-toned to sit in the palette. ⚠️ It should not be the OG image - use a project image, or every shared link previews her face instead of her work. If she isn’t the photographer she needs usage rights (§ 13 UrhG credit).

8. Still open

  • "Das bin ich" is not designed yet. Both inspiration pictures are now in (04-dasbinich-inspiration-mariana.jpg, 05-dasbinich-inspiration-amelia.jpg). Design still to come; her brief is "minimalisiert und passend zum Rest".

  • The four accent hexes (§3) - mapping settled, values ours, hers to confirm.

  • Does the cover open left or right? We assumed left.

  • The font. Bradley Hand is the original and is not shipping. Kalam 400 is a stand-in. When picking the replacement: match at weight 400, not bold - Bradley Hand’s stroke is thin, and any handwriting font’s Bold reads as a cartoon beside her design.

  • "Lass uns in Kontakt treten" has no design yet, and we still don’t know what the button does (mailto, form, modal) - that’s the one thing on the site needing a real backend.

  • Mobile. There’s no mobile design. The prototype is desktop-first and will need one.

  • 3D models. Planned. We’d need to know the format she exports from (glTF/GLB is what we want) and roughly how heavy the models are.

9. Decisions we took that she may want to overrule

  • Six booklets on one shelf. doc.odt lists six (excluding the (?) entry). Her mockup drew four at 335px wide; six at that size don’t fit a 1920 row, so booklets are now ~230px. The alternative was wrapping to a second row, which split 5+1 and looked broken.

  • Earth-pigment accents rather than her mockup’s tints - see §3.

  • The Kritzl concept contradicts our booklet. Its panel 2 shows the folder opening flat into a two-page spread (metadata left, photo right). Our cover opens 24° and shows no interior - the hard-cover look she chose. Told to keep our version, so the content page below now has to carry what that spread was carrying. Flagging because the reference and the build disagree by design.