Hugo Lines — a minimal portfolio of useful graphic marks
Create a complete original portfolio for Hugo Lines, a fictional graphic designer interested in printed matter, editorial systems and wayfinding. The portfolio should feel like a small selection laid out on a table. It is not an agency pitch, a template marketplace, a software site or an effects demo. Show three substantial independent studies with original artwork, complete written reasoning and usable project navigation. The design is minimal because it removes unnecessary interface elements, not because it removes the content of the work.
Research the writing-led hierarchy of nickdilallo.com, which appears in the DesEngs minimum directory. The reference demonstrates clear section naming, restrained typography and the value of ordinary text in a personal portfolio. Hugo uses that principle in a different discipline and composition: a wide three-column print selection, a split introduction and case essays with marginal section headings. Do not reuse the reference biography, client list, career claims, wording, contact address or personal identity. All Hugo projects and visual compositions are original fictional studies.
Complete pages and architecture
Deliver index.html, fold.html, linework.html, open-address.html and about.html. Every project has a complete direct page and every visible project link works. Use static HTML and local CSS. A JavaScript framework is unnecessary because the only expanded interaction is a native details disclosure for production notes. Include local Geist, its license, original SVG sources, optimized WebP display images and a credits file. The folder must work beneath a nested demos path. Keep all case links relative and include a Collection footer link two directories upward.
The header is a simple name and two links, Work and About. It sits within a maximum width of about 1180 pixels, with 30-pixel horizontal padding and around 48 pixels above. Set Hugo Lines around 27 pixels with restrained tracking. Navigation is 14 pixels and remains visible on phones. Do not introduce a hamburger for two links, a sticky bar, a theme switch, a custom cursor, a giant monogram or a moving availability badge. The work is the visual identity of the homepage.
Visual system
Use #fbfaf7 for the page, #252522 for text, #5f615a for secondary information and #d8d8cf for rules. The interface has no colored panels; color belongs to the three original print studies. Use Geist at 16 pixels and a 1.65 line height. Section labels and captions are 14 pixels. The homepage introduction is around 24 pixels, regular weight, while case titles can be 38 pixels on desktop. Keep heading line lengths modest and avoid uppercase shouting. The portfolio should be calm without making the text so light that it becomes difficult to read.
The homepage introduction is two columns separated by a generous gap. On the left, set Graphic design for things people hold, read, and find. On the right, explain the independent studies and the interest in a line that does more than decorate. A fine rule above the section provides a clear transition from the header. Do not add a primary button. The three projects below are already the obvious next action. At mobile widths the introduction becomes one column and the work previews stack vertically.
Work selection
Use a three-column grid with approximately 28-pixel gaps. Each project consists of a portrait artwork, a title and a line of medium/year metadata. There is no rounded card background, shadow or border around the group. The art has its own paper color and fills the column. The image and title form a single accessible link. A modest upward movement on hover may give feedback, but reduced-motion preference removes it. Do not crop the typography inside the print compositions. On phones, contain each image with a reasonable maximum height so the full sheet remains visible.
The first project is Fold / unfold, a bright yellow-green printed identity study. The second is Linework, a pale blue editorial system. The third is Open address, a muted salmon wayfinding study. Their colors are different because their concepts are different, not because the same template has been recolored. Each case contains its own brief, decision, system, detail and limit. A small note below the grid explains that they are original self-initiated concepts, not client work or evidence of commercial results.
Fold / unfold
This study imagines a small book fair whose schedule works both folded in a pocket and open on a table. The central device is the fold itself: the first word appears before opening, and the second completes the thought after unfolding. The artwork uses large ordinary type and a visible fold guide. Practical information sits away from the fold. The case explains that the design depends on a physical format and needs a print dummy before production. Do not claim an event occurred or that the identity was commissioned.
The writing should distinguish a graphic gesture from a useful system. The fold logic can inform headings and table labels, but it should not be applied to every sentence. Body copy remains ordinary. Include the safety margin around the fold and the possibility of production variation. This is the important tradeoff: a beautiful flat image does not establish that a folded object will work. The supplied original narrative names this limit and should remain in the case.
Linework
Linework is a fictional journal about making and repairing objects. Its visual system uses a horizontal rule as punctuation: a short line introduces a voice, a long line changes subject and a doubled rule signals instructions. The artwork has a large title and several measured rules on a blue paper field. Do not add stock photographs of workshops merely to make the project appear real. The study is about editorial rhythm and can be communicated through the original graphic composition and specific prose.
The case explains two text measures, a stable baseline and captions returning to the nearest text edge. The system should leave room for varied article forms rather than forcing every page into one layout. The production detail concerns line thickness and ordinary printing. Do not present a screen hairline as a final press specification. The next test would be a physical issue with varied article lengths. Retain that uncertainty instead of inventing reader engagement metrics.
Open address
Open address imagines wayfinding in a shared workshop. Its central principle is that a sign should identify the destination before promoting an organization. The artwork shows Workshop, Second floor, a directional line and a clear room code. The case connects that code to a printed invitation so pre-arrival information matches the door. This is a graphic concept, not a certified building-signage system. Do not claim accessibility compliance or real installation without actual evidence.
The writing explains how door labels, floor directories and temporary notices can share hierarchy without sharing one rigid size. Color is never the only way to distinguish floors. The floor number and direction remain explicit. Temporary notices should survive an ordinary office printer. The case names the need for site measurements, user testing and appropriate local requirements before fabrication. These limits make the portfolio more credible and should not be deleted to create a stronger-sounding sales claim.
Case-page composition
Each case begins below a fine rule with a two-column header. The left contains the title and medium/year/status; the right contains the introductory paragraph. A large contained portrait artwork follows, with a useful caption below. The essay sits in a narrower block aligned to the right side of the page. Each section uses a 160-pixel marginal heading and a body paragraph. The headings are ordinary 16-pixel text rather than giant displays. This creates a different reading rhythm from the three-column homepage while retaining alignment.
After the essay, include a native details element called Production notes. Expanding it reveals a short explanation that the artwork is a digital concept, screen color is approximate, and physical proofing is needed before production. Use the browser's native keyboard behavior. Do not replace it with a custom accordion requiring JavaScript. A final row links to All work and the next project. Cycle all three projects. The footer repeats Contact, Credits and Collection, without becoming another promotional section.
About page
The About page introduces the fictional designer and the interest in useful marks and ordinary materials. Explain that a schedule should survive a late change, a sign should work on an office printer and a book should leave room for a reader's note. These are working interests, not guaranteed outcomes. Explain that all three concepts use original names, copy and vector artwork, and none represents a client commission. The example address is [email protected] and should be replaced by someone adapting the portfolio.
There is no form submission, newsletter or purchase flow. Contact information is plain text, and the page has a return link to the work. Do not invent social accounts or link to unrelated real people. Keep the page narrow enough to read, with 30-pixel side padding on desktop and 22 pixels on phones. The typography remains consistent with the rest of the portfolio. A clear About page is more useful than a fabricated resume.
Accessibility and responsive behavior
Use semantic header, nav, main, article, section, figure and footer elements. Each page has exactly one h1. Case headings follow a logical hierarchy. Images have explicit dimensions and meaningful alternative text. All links and summaries have visible keyboard focus. The disclosure works with Enter or Space through native behavior. Body copy remains 16 pixels on phones; do not shrink it to preserve a multi-column layout. At roughly 750 pixels, stack the introduction, project grid, case header and marginal essay headings.
Contain artwork without cropping, and ensure long project titles wrap. Footer links may wrap into a second line. The next-project row uses a gap so links do not collide. Respect reduced-motion preference. No animations should obscure the work or delay content. The original SVG art is intentionally simple and should not require image generation, remote media or large video files. The final site has no favicon, tracking or generator metadata.
Verification and exact reference source
Visit all five pages directly. Check every local link, image and font file. Inspect the homepage and a case at desktop width. At an actual 390-pixel viewport, measure document overflow across all routes and visually inspect stacked work previews and essay text. Expand Production notes and verify the content appears. Confirm next-project navigation reaches a complete case. Do not equate a successful build with complete visual QA, and do not claim a deployment unless the parent integration process actually publishes it.
The following original project data and implementation reference preserve the full content, artwork geometry and responsive structure. They are included to make the prompt reconstructive rather than vague. You may organize the code differently, but keep the complete pages, specific essays, native disclosure behavior and original visual identity.
data.mjs
export const projects=[{id:'fold',title:'Fold / unfold',year:'2026',medium:'Printed identity',color:'#dae653',line:'A name that changes when the paper does.',intro:'Fold / unfold is a self-initiated identity for an imaginary small book fair. The project begins with the physical action of opening a folded sheet. Instead of adding a symbol to the name, I let the fold become part of the way the words are read.',sections:[['The brief','The fair brings small publishers into a shared room. Its printed schedule needs to work as a compact object in a pocket and as an open map on a table. The identity should acknowledge those two scales without becoming a puzzle that hides essential information.'],['The decision','I split the title across the fold and kept practical information on the outside edge. When closed, the sheet reads Fold. When opened, the second word completes the thought. The gesture is simple enough to understand without instructions, but it depends on the production format.'],['The system','The same two-part structure appears in the programme headings and table labels. It is not applied to every line of text. Body copy stays ordinary and comfortably spaced. A graphic system is more useful when it knows which material to leave alone.'],['The detail','The fold line has a generous safety margin so a slight production variation does not cut through a letter. The design was drawn with the physical object in mind, even though the displayed artwork is a digital study. A real print dummy would be the next step.'],['The limit','No fair was commissioned or held. This is an original fictional print identity. The study does not claim attendance, recognition or commercial outcomes. Its success would need to be judged in use, especially by someone trying to find a table quickly.']]},
{id:'linework',title:'Linework',year:'2025',medium:'Editorial system',color:'#c1d4eb',line:'An editorial rhythm made from one repeated rule.',intro:'Linework is a fictional journal about making and repairing everyday objects. I designed an editorial system around a single horizontal rule that can separate, connect or pause a page. The exercise asks how little graphic material a publication needs to feel coherent.',sections:[['The brief','The journal contains interviews, short instructions and photographs of processes. These forms need different reading rhythms. A system that makes them all look identical would erase useful distinctions, while a new design for every article would make the issue feel fragmented.'],['The decision','I used the rule as a punctuation mark. A short rule introduces a voice, a long rule marks a change in subject and a doubled rule begins practical instructions. The differences are small but consistent. Readers do not need to memorize a legend to feel the change in pace.'],['The system','The grid has two text measures and a stable baseline. Images can cross the measures, but captions return to the nearest text edge. This gives the designer flexibility without making alignment arbitrary. The system is designed for a small editorial team rather than a large production department.'],['The detail','The rule thickness was chosen to survive ordinary printing. Very fine hairlines can disappear or become uneven. The screen version is therefore not the final authority on the weight of the marks. The study keeps that production uncertainty visible.'],['The limit','Linework is an independent editorial concept, not a published magazine. All sample titles and graphic compositions are original. A physical issue with varied article lengths would be necessary to test whether the system remains useful beyond the first attractive spread.']]},
{id:'open-address',title:'Open address',year:'2024',medium:'Wayfinding study',color:'#efc8bd',line:'A sign that says where, before it says who.',intro:'Open address imagines a shared workshop in a converted building. The wayfinding study prioritizes rooms, directions and opening hours over a large institutional mark. The identity appears as a quiet supporting element rather than the first thing someone must decode.',sections:[['The brief','A visitor entering an unfamiliar building needs a destination and a route. A beautiful name on the wall is not enough. I began by listing the questions asked at the entrance: which floor, which room, whether the space is open and where to wait.'],['The decision','The signs use a large room name, a plain directional line and a small address code. The code is repeated on the printed invitation, connecting the information someone receives before arrival with what they see at the door.'],['The system','The design uses a small set of sign proportions rather than one rigid size. Door labels, floor directories and temporary notices share alignment and type hierarchy. Temporary signs can be made on an ordinary printer without losing the central information order.'],['The detail','I avoided using color as the only distinction between floors. The floor number remains explicit and the direction is expressed in words as well as a line. A person should not need to remember a color palette to find a room.'],['The limit','The workshop and address are fictional. This is a graphic concept, not a tested accessibility or building-compliance system. A real installation would require site measurements, user testing and appropriate local requirements before fabrication.']]}];
site.css
@font-face{font-family:Geist;src:url('assets/geist-variable.woff2') format('woff2');font-weight:100 900;font-display:swap}*{box-sizing:border-box}body{margin:0;background:#fbfaf7;color:#252522;font:16px/1.65 Geist,Arial,sans-serif}a{color:inherit;text-underline-offset:4px}h1,h2,p{margin:0}h1,h2{font-weight:450}header{max-width:1180px;margin:auto;padding:48px 30px 30px;display:flex;justify-content:space-between;align-items:baseline;gap:25px}header a{text-decoration:none}header .name{font-size:27px;letter-spacing:-.8px}header nav{display:flex;gap:28px;font-size:14px}.home{max-width:1180px;margin:auto;padding:0 30px 70px}.intro{display:grid;grid-template-columns:1fr 1fr;gap:55px;padding:45px 0 60px;border-top:1px solid #d8d8cf}.intro h1{font-size:24px;line-height:1.5;max-width:360px}.intro p{max-width:450px;color:#5f615a}.works{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.work a{text-decoration:none}.work img{display:block;width:100%;height:auto;transition:transform .2s}.work a:hover img{transform:translateY(-4px)}.work h2{font-size:18px;margin:19px 0 4px}.work p{font-size:14px;color:#5f615a}.home-note{max-width:520px;margin:60px 0 0;font-size:15px}.case{max-width:1180px;margin:auto;padding:35px 30px 70px;border-top:1px solid #d8d8cf}.case-head{padding:0;max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:55px;margin-bottom:45px}.case-head h1{font-size:38px;line-height:1.2;letter-spacing:-1px}.case-head .meta{font-size:14px;margin-top:18px;color:#5f615a}.case-head p{max-width:520px}.figure{margin:0 0 50px}.figure img{display:block;width:100%;height:auto;max-height:760px;object-fit:contain;background:#eae9df}.figure figcaption{font-size:14px;color:#5f615a;margin-top:13px}.reading{max-width:760px;margin-left:auto}.reading section{display:grid;grid-template-columns:160px 1fr;gap:30px;margin:35px 0}.reading h2{font-size:16px}.reading p{font-size:16px}.colophon{border-top:1px solid #d8d8cf;padding-top:22px;margin-top:45px;font-size:14px}.colophon summary{cursor:pointer;text-decoration:underline;text-underline-offset:4px}.colophon p{margin-top:18px;max-width:600px}.next{display:flex;justify-content:space-between;gap:25px;margin-top:60px}.about{max-width:760px;margin:45px auto 85px;padding:0 30px}.about h1{font-size:30px;margin-bottom:30px}.about h2{font-size:19px;margin-top:40px;margin-bottom:18px}.about p{margin-bottom:22px}footer{max-width:1180px;margin:auto;padding:25px 30px;border-top:1px solid #d8d8cf;display:flex;justify-content:space-between;gap:30px;font-size:14px;color:#5f615a}footer nav{display:flex;gap:22px;flex-wrap:wrap}.skip{position:absolute;top:-80px;background:white;padding:12px}.skip:focus{top:10px}a:focus-visible,summary:focus-visible{outline:2px solid #42483b;outline-offset:5px}@media(max-width:750px){header{padding:28px 22px}header .name{font-size:24px}header nav{gap:20px}.home{padding:0 22px 50px}.intro{display:block;padding:28px 0 38px}.intro h1{font-size:23px;margin-bottom:20px}.works{grid-template-columns:1fr;gap:40px}.work img{max-height:480px;object-fit:contain;background:#eeeee6}.case{padding:30px 22px 50px}.case-head{display:block}.case-head h1{font-size:32px}.case-head>p{margin-top:25px}.reading section{display:block}.reading h2{margin-bottom:14px}.about{margin:30px auto 50px;padding:0 22px}footer{display:block;padding:25px 22px}footer nav{margin-top:15px}.next{font-size:14px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
build.mjs
import fs from'node:fs';import sharp from'sharp';import{projects}from'./data.mjs';const src='scripts/hugo-lines',out='public/demos/hugo-lines';function art(p){const body=p.id==='fold'?'<text x="60" y="230" font-size="175" letter-spacing="-12">fold</text><line x1="400" y1="50" x2="400" y2="950" stroke="#1c2115" stroke-dasharray="5 7"/><text x="60" y="730" font-size="160" letter-spacing="-10">unfold</text><text x="65" y="885" font-size="22">A small book fair / an independent study</text>':p.id==='linework'?'<text x="60" y="170" font-size="90" letter-spacing="-5">Linework</text>'+[300,340,470,620,660,820].map((y,i)=>`<line x1="65" y1="${y}" x2="${i%2?510:735}" y2="${y}" stroke="#253245" stroke-width="${i===3?8:3}"/>`).join('')+'<text x="65" y="920" font-size="22">Making / repairing / beginning again</text>':'<text x="60" y="190" font-size="105" letter-spacing="-6">Workshop</text><text x="65" y="295" font-size="42">Second floor</text><path d="M70 465H670M580 375L670 465 580 555" fill="none" stroke="#4d2720" stroke-width="12"/><text x="65" y="760" font-size="130">02 / B</text><text x="65" y="890" font-size="22">Open address / a wayfinding study</text>';return`<svg xmlns="http://www.w3.org/2000/svg" width="800" height="1000"><rect width="800" height="1000" fill="${p.color}"/><g font-family="Arial,sans-serif" fill="#252522">${body}</g></svg>`;}function shell(title,body){return`<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>${title} — Hugo Lines</title><meta name="description" content="Hugo Lines, original minimal graphic-design portfolio of print, editorial and wayfinding studies."><link rel="stylesheet" href="site.css"></head><body><a class="skip" href="#main">Skip to content</a><header><a class="name" href="index.html">Hugo Lines</a><nav aria-label="Main"><a href="index.html">Work</a><a href="about.html">About</a></nav></header><main id="main">${body}</main><footer><span>Independent graphic studies / 2024–26</span><nav aria-label="Footer"><a href="about.html#contact">Contact</a><a href="assets/CREDITS.txt">Credits</a><a href="../../">Collection ↗</a></nav></footer></body></html>`;}export async function buildHugoLines(){fs.mkdirSync(`${out}/assets`,{recursive:true});fs.copyFileSync(`${src}/site.css`,`${out}/site.css`);for(const p of projects){const svg=art(p);fs.writeFileSync(`${out}/assets/${p.id}.svg`,svg);await sharp(Buffer.from(svg)).webp({quality:95}).toFile(`${out}/assets/${p.id}.webp`);}fs.copyFileSync(`${out}/assets/fold.webp`,`${out}/assets/hero.webp`);fs.writeFileSync(`${out}/index.html`,shell('Work',`<div class="home"><section class="intro"><h1>Graphic design for things<br>people hold, read, and find.</h1><p>A small selection of independent studies in print, editorial systems and wayfinding. I’m interested in a line that does more than decorate a page.</p></section><section class="works" aria-label="Selected work">${projects.map(p=>`<article class="work"><a href="${p.id}.html"><img src="assets/${p.id}.webp" width="800" height="1000" alt="${p.line}"><h2>${p.title}</h2><p>${p.medium} / ${p.year}</p></a></article>`).join('')}</section><p class="home-note">These are original self-initiated concepts. Each case follows a graphic idea into its use, its production questions, and the things that remain untested.</p></div>`));projects.forEach((p,i)=>fs.writeFileSync(`${out}/${p.id}.html`,shell(p.title,`<article class="case"><header class="case-head"><div><h1>${p.title}</h1><p class="meta">${p.medium} / ${p.year} / Independent concept</p></div><p>${p.intro}</p></header><figure class="figure"><img src="assets/${p.id}.webp" width="800" height="1000" alt="${p.line}"><figcaption>${p.line}</figcaption></figure><div class="reading">${p.sections.map(([h,t])=>`<section><h2>${h}</h2><p>${t}</p></section>`).join('')}<details class="colophon"><summary>Production notes</summary><p>Original vector artwork. The displayed color is a screen approximation. This is a concept, not a press-ready specification. Confirm paper, ink, trim, folds and type reproduction with a physical proof before adapting it for production.</p></details></div><nav class="next" aria-label="Project navigation"><a href="index.html">← All work</a><a href="${projects[(i+1)%3].id}.html">${projects[(i+1)%3].title} →</a></nav></article>`)));fs.writeFileSync(`${out}/about.html`,shell('About',`<article class="about"><h1>Useful marks, ordinary materials.</h1><p>Hugo Lines is a fictional graphic designer created for this original portfolio. The work explores how a small set of marks can organize information without making the reader decode a visual performance.</p><p>I like a design system that leaves room for the person using it. A schedule should survive a late change. A sign should still make sense on an office printer. A book should offer a place for the reader’s note.</p><h2>About the studies</h2><p>Fold / unfold, Linework and Open address are self-initiated concepts with original names, copy and vector artwork. They are not client commissions or claims of real-world results. Each case states where a physical proof or further testing would be necessary.</p><h2>Working across formats</h2><p>The portfolio moves from a folded sheet to a journal to a building sign. The visual treatment changes because the reading situation changes. The common concern is making the important information easy to find.</p><h2 id="contact">Contact</h2><p>Example address: [email protected].<br>Replace this with your own details when adapting the template.</p><p><a href="index.html">Back to the work →</a></p></article>`));fs.writeFileSync(`${out}/assets/CREDITS.txt`,'Hugo Lines — original fictional graphic practice, copy and vector artwork. Minimal writing-led hierarchy studied at https://nickdilallo.com via https://desengs.com/minimum/. No reference client claims or content reused. Geist font license included.');const prompt=fs.readFileSync(`${src}/PROMPT.md`,'utf8');fs.writeFileSync(`${out}/PROMPT.md`,prompt);fs.writeFileSync('public/prompts/hugo-lines.md',prompt);return{prompt};}if(process.argv[1]?.endsWith('/hugo-lines/build.mjs'))await buildHugoLines();