One identity for the site, the CV and every letter.

One accent, used for the role title, section labels and proof numbers. Everything else is warm near-black and off-white. The accent has two strengths: accent for large numbers and graphics (3:1+), accent-text for small text (4.5:1+). Ratios are measured against the page background.

Source Sans 3 for everything, a humanist sans that matches the CV. Caveat only for Thinking-layer notes and the signature. System monospace for code and tiny labels (no extra download). Source Sans loads as one variable file and Caveat as a subset of only the characters the notes use: about 46 KB of fonts in total.

Caveat notes, pen-line dividers and 25 hand-drawn icons, drawn on a 32px grid with wobbly strokes and round caps. They are decorative and hidden from screen readers; the text next to them carries the meaning. All of them use theme colours, so they work in light and dark.

• pin
• knot
• target
• lens
• bulb
• hammer
• check
• rise
• arrow
• loop
• pages
• bubble
• smile
• quote
• book
• a11y
• pen
• flag
• music
• cap
• globe
• lock
• key
• phone
• medal

4px base. Sections open with a hand-drawn pen line and a label with a hand-drawn icon; on the CV, every label is a full-width row between two 1px rules. Proof numbers sit on a 1px top rule; the active timeline step gets a 2px accent rule.

A few colours never change with the theme: status, the device frames and text on orange. Error text does change: the design's red is 2.7:1 on light paper, so light mode uses a darker red. Client case studies speak in their own palette, kept as tokens too.

Every app and website screenshot sits in the same frame: a dark bezel, a slim browser bar with an address pill on desktop, rounded screens on the phone. The before/after sliders use the same frames, and the ECCO2 tenant-app drawings use the phone.

nestor-pena.ch

Logos are drawn in the ink colour so they sit quietly in both themes. Brand marks keep their colour (Comfone's flag, the red "Bern"). Hairline outlines get a fixed 1.3 px stroke so they stay legible at header size.

The Home list leads with the work, not the client: a one-line title, then client · role underneath. On desktop each row is one line and hovering shows a preview with a handwritten note; on touch screens the row carries a 64 px thumbnail and the note instead. Seven projects fit in under one screen on desktop and about one on a phone.

• Mobile tab bar. Work, About, Contact on a raised surface panel (--surface, top rule, --shadow-tabbar); the current tab gets the accent label and a 3 px accent marker.
• Language switcher. A globe and the current code (EN, ES, FR, DE) next to the profile links; it opens a small surface panel (--surface, --shadow-peek) listing each language in its own name, current one in --accent-text. It is a plain <details>, so it works without JavaScript, and it keeps you on the same page in the other language. English lives at the root, the others under /es, /fr, /de; no automatic redirect.
• Header in two groups. Page links (Work, About, Contact) as text, a hairline divider, then one quiet icon group: LinkedIn, GitHub, language and theme, each a 44 px target in --ink-2 that fills with --surface on hover. Profiles appear again in the footer and the contact blocks.
• Tooltips. Icon buttons and key actions explain themselves on hover and keyboard focus: an ink chip with --bg text, 13 px. They are visual only (the button's own name is what screen readers hear), Escape hides them and the pointer can move onto them (WCAG 1.4.13). Touch screens never show them.
• Favicon everywhere. The orange N on ink as SVG, PNG and ICO, a 180 px Apple touch icon, and a maskable icon in the web manifest for Android home screens.
• Tools and languages. Under the case studies, the tools are grouped as the same chips as Built with. A search (“type the tool you're hiring for”) lights up matches in the accent and fades the rest, then answers in plain words: where the tool was used and which case studies show it. Without JavaScript it is simply the full list. The six languages follow, each with a handwritten greeting.
• Home hero. One status line, the two-line headline, one sentence and the portrait in its accent halo. The portrait appears once per page; the About teaser below uses the Abailar teacher photo, and the About hero uses a second, everyday photo by a mountain lake in the same halo, so the two pages never open on the same face.

• One minute, measured. Every case study reads in a minute or less, in all four languages: visible words at 230 per minute plus 3 s per image, not counting the Thinking layer or interface labels. The build computes it from the finished page, prints it in the header and warns when a page goes over.
• Shape. The same five sections everywhere: context, decisions, what I built, impact, and, in the Thinking layer, what I'd do differently. Lead under 20 words, short proof labels, one line per section; the reasons live in the Thinking layer.
• Built with. Every header lists the tools and technologies as small chips under the lead, so the stack reads in a second.
• Arrows stay text. Diagonal and two-way arrows (↙︎ ↗︎ ↔︎) carry a text-presentation selector, otherwise iOS draws them as emoji.

• Sharp on every screen. Each image is generated in widths up to its own native width (480 → 2560), so retina and 3× phones get real pixels and nothing is upscaled.
• One format, one quality. WebP at quality 82; only the size each screen needs is downloaded.
• Originals, not copies. Previews use the full-resolution source; screenshots are captured at 2× (desktop) and 3× (phone).
• One grade for photos. Every photograph, mine and clients’, gets the same grade built from the tokens: shadows lean to --ink, midtones to --accent, highlights to --bg, with softer saturation (cool blues most) and a gentle S-curve. scripts/grade-photos.mjs writes it from the untouched originals.
• Loaded only when seen. Images below the fold load lazily, images above it load right away. Decorative images that only one kind of screen shows (Home peek previews, phone thumbnails, the contact avatar) are CSS backgrounds, so the other screen never downloads them. Alt text never says “image” or “photo”: screen readers already say it.
• Show the design, never the content. Documents on the site are skeletons: every line of text becomes a soft bar the length of that line, in the text's own colour, and only the name, title, status and section labels stay. Unlike a blur, there is nothing underneath to zoom into. scripts/document-shots.mjs renders the CV and letter this way.
• Screenshots stay true. Interfaces, mockups and social graphics are never graded, so the work keeps its real colours.

The CV, rebuilt with the site tokens. The name comes first, then the title in tracked accent caps and the status line from the Home hero. The portrait sits in the same ring, the contact line and every section label sit between two hairlines, and the page is the site's off-white, so the CV reads like a printed page of the site.

Nestor Peña

Design Engineer | Product Designer

Available immediately·Swiss C permit

Bern, Switzerlandwww.nestor-pena.chlinkedin.com/in/nestor-penagithub.com/npenalopez

Design Engineer with 7+ years making complex business software easy to use. I design and build, so ideas become testable prototypes in days: 30+ in four years at Comfone.

Experience

Product Designer at Comfone AG in BernAug. 2024 – Oct. 2026

Led design for Comfone's customer platform: 80+ applications, 8 product lines, reporting to the COO.

References, work certificates and diplomas: nestor-pena.ch/documents