Picture of Zeno

Hi! I'm Zeno.(You probably figured that out already)

I make experiences that make me smile, and help people be their best selves.

  • 👨🏼‍💻

    Creativity and code

    My passion is organising information in a visually striking way, and bringing complex ideas to life with technology. I am naturally curious for the world, and love exploring big ideas while collaborating across disciplines.

  • 🛠

    Invisible tools

    I love the concept of digital tools: Interfaces that help you create, work, discover, and grow in any way you find important – without being in your way.

  • Polish every pixel

    Call me a devil, cause I'm up in those details. Interfaces are so much more than just static screens: they have loading states, page transitions, edge cases and more. My favourite thing is enriching interfaces with animations and interactivity.

Activity

What I've been up to

Filter
    A picture of the five team members standing in front of a big television screen showing a slide with the Surfboard logo on it. They are holding each other’s shoulders and smiling at the camera. From left to right are myself, Leon, Rocket, Sander and Bram.

    The four phases of attending a hackathon

    The rhythm of highs, lows, and everything in-between that I encountered at the 24-hour Young Creators hackathon – from idea to (winning) solution.

    14 Jul 2023
  • +49-45

    Fix announcement banner margin

    Because of .scroll-nojump, which needed to be nested as its own div.
    27 Mar 2025
  • A guide to changing clocks this weekend ⌚

  • A close-up of the Twitter app, highlighting a birdhouse icon with a downward arrow

    Playing catch-up with the Twitter app

    A small design exploration of how Twitter could help users scroll back to where they were after scrolling to the top of their timeline

    18 Oct 2021
  • It’s an amazing weekend for rugby, in what will be an amazing month for rugby.

  • Shiplog's app icon (a white anchor on top of a blue-to-yellow gradient), displayed on top of the macOS Monterey background.

    Shiplog has shipped ⚓️🚢

    Introducing Shiplog: a menu bar app to keep track of running deploys on Vercel and Netlify

    11 Oct 2021
  • One of the things I love about working on a (partially) open source project is that I get to ask for feedback and share my work in the open.

    Today I wrote a post on the GitBook Community page asking for feedback on some design changes I spent a lot of time on: github.com/orgs/GitbookIO/disc

    If you use GitBook (Hi! Awesome!) let me know what you think :)

    📥 Feedback wanted: Updates to sidebar and header on docs sites · GitbookIO · Discussion #843

    Hey there! Over the past weeks I have made an effort to modernise the look and feel of the sidebar and header on published docs sites. This ...

  • +273-23

    Support site announcement banner

    26 Mar 2025
  • from henry ✷

    new year, new website :) with thy surest steel gathered to thy side, turn to face these new nightmares, these...True Terrors (of the New Dark Web)

    plenty to do but i'm thrilled to publish this 🤍 thanks a lot if you end up taking a look, but hark! go heedfully:

    henry.codes

    scroll with caution & with care!

    Henry From Online

    The personal site & portfolio of creative web developer Henry from Online

  • I’m late for this week, but I’d love recommendations for cool dev/design people to follow on here :)

  • Updated my with a new, simpler Activity section. It aggregates blog posts and mastodon in one big carousel, with more sources to follow soon.

    Tinkering with CSS grids and the API made for a super fun holiday project! Really happy with how it turned out 😊

    zeno.zone/#activity

    Zeno Kapitein | Portfolio

  • +119-105

    Fix alignment of `prominent` search bar on full-width pages

    Before: After:
    17 Mar 2025
  • Feeling very refreshed after the holidays! Can't wait to meet new people, learn new things, and make next year amazing :)

  • +28-16

    Restyle section group dropdown

    Before & after
    17 Mar 2025
  • from Rafa

    Seriously, getting a 3D printer was a mistake

  • +20-1

    Override tint lightness if supplied color is out of bounds

    Our colour system uses lightness values based on reference greys to generate the right shades for different situations, and the background uses the darkest shade, which is set at a value slightly above pure black for aesthetics. But sometimes you do want to go even darker, and we should support that. If the lightness value of the tint colour is lower (or higher) than the set min/max, we can use the supplied lightness instead. Additionally, at the edges of the scale the subtle lightness changes used for backgrounds and borders stop being perceptible. We add a little amplification in these cases to make elements still stand out, even when pure black is used.
    14 Mar 2025
  • Bf made too many noodles today so I was like “Oh no, what have udon”

  • Taking a break.

  • New combo: rose gold all the things!

  • +24-13

    Info hint background and link color fixes

    This PR fixes a few small issues with the hint block and links within hint blocks. The info hint block did not properly use the set info semantic colour, now it does. Links inside hint blocks should be coloured according to the semantic colour, with the exception of the info block, which uses the normal link colour. They now correctly follow this behaviour. (Fixes RND-6390) Links using the accent link style had an underline that was too thin, it's now explicitly set to 1px. Before & After
    11 Mar 2025
  • 1. Nice to see aria-labels even on stuff as extraneous as the store's hype queue.
    2. Fascinating to see Apple do alt text in the same voice as its marketing.

  • +162-79

    Display sidebar on no-TOC pages

    This PR changes the display behaviour of the left sidebar on pages that are configured to not show the table of contents. This behaviour mirrors the right sidebar, which displays the mode toggle even if the page's outline option is set to hidden. When no-toc is enabled on a page, the table of contents is hidden from the sidebar. Any other elements, like the variant selector, logo, search bar and GitBook trademark, are still shown. On no-toc pages the sidebar shrinks in width to match the right sidebar, ensuring the same centred layout that no-toc pages currently feature. On no-toc pages, the variant selector was previously shown in the header. Together with this change, the variant selector on no-toc pages now moves to the same secondary bar used for sections (if there are sections it is shown next to them, if there are no sections it is the only element in this bar). Together, these changes allow for better and more consistent landing pages. Examples Make Nexthink Pixelmator Umbraco Ordnance Survey Awalkaday
    13 Mar 2025
  • Fridge store salesman stops me as I leave the Fridge store carting out my new Fridge

    'hey can i interest you in a new fridge"

  • +134-62

    Support `prominent` search bar style

    This PR adds support for the new prominent search bar style, resulting in a bigger search bar in the middle of the header. It also reworks the the sizing and spacing of header items in general, and fixes a small layout issue in the footer. Screen.Recording.2025-03-13.at.12.10.57.Compressed.mp4
    14 Mar 2025
  • My take on those trendy call-to-action buttons. You know the ones. So shiny. Big vibes. All CSS.

    There are a few interesting parts to it, especially with the use of registered custom properties for smooth gradient rotations and hover transitions. Check out my latest post that gets into the details: ryanmulligan.dev/blog/css-prop

    CSS @property and the New Style

  • +12-7

    Adjust hint spacing

    The spacing of the redesigned hint block could use some improvement. With this PR, the padding around the block is increased a bit, while the space between blocks is decreased for a more harmonious look. Before & after
    5 Mar 2025
  • @LiftinApp Hey, my Ad-Hoc Routines carousel seems stuck, I’ve changed the routines inside that section but they’re not changing, even after I delete all of them I see the old routines there. Anything I can do?

    Liftin' version 36.5 (300)

  • Today marks the first day of my ½-month sabbatical in-between jobs. There’s a new energy in the air ⚡️

  • 🌉 Ken jij het verhaal achter de Kortjewantsbrug, Scharrebiersluis en Bullebak? Sommige bruggen in onze stad hebben bijzondere namen die eeuwen oud zijn. We gaan terug naar een tijd van schraal bier 🍺 en bulderende watermonsters 👹.

    ➡️ amsterdam.nl/nieuws/achtergron

  • +62-30

    Add link styles

    Color (default): Underline:
    26 Feb 2025
  • +284-145

    Update hint block

    When you type a heading (1, 2, or 3) as the first child of a hint block, we mark it up into a heading, displayed alongside the icon. Hints without heading are unaffected. Instead of the primary colour, info hints now default to blue. We had some comments from people with an orange primary colour that this was a bit off. A new customisation option lets you set your own 4 semantic colors for info, warning, danger, and success and generate a palette for each, like we do for tint. These semantic colours can then be used in other places like our API blocks too. Before After Semantic color options
    21 Feb 2025
  • +12-14

    Flip card logic

    From coverIsLandscape to the more specific coverIsSquareOrPortrait, which means our default can be more sensible. This fixes some bugs where cover values are undefined. Now we will only render the alternative card layout if we are certain we should, and we fall back to the normal layout.
    14 Feb 2025
  • +15-1

    Improvements to inline images in headings

    Fixes the following issues: Text with inline images in it unexpectedly gets centered Headings don't inherit the line height set on them Inline images set to line size are displayed a bit too big in relation to the line.
    13 Feb 2025
  • +22-8

    Change card layout depending on cover aspect ratio

    Cards on GBO have a different aspect ratio on mobile vs desktop. This is sometimes welcome as it decreases the size of each card, but doesn't work with all images, especially when users upload a landscape image for the card they see in the editor. Instead of always doing one of the two, we'll be a bit smarter about it and only show the alternative layout on mobile if the image actually lends itself to it. If the file has a landscape aspect ratio, we display it the same on mobile as on desktop: with the cover on top. If the file is square or portrait, we display the cover on the left with 40% of the card width. Before (and layout for square + portrait) After (layout for landscape)
    12 Feb 2025
  • +313-269

    Implement new themes

    This PR introduces four new themes that form the basis of GitBook's look in 2025. These are different from the to-be-deprecated header themes as they apply to the whole site, from the background and header down to individual elements and icons. Clean: Modern theme featuring translucency and minimally-styled elements. Muted: Sophisticated theme with decreased contrast between elements. Bold: High-impact theme with prominent colors and strong contrasts. Gradient: Trendy theme featuring colorful gradients and splashes of color. Clean, Bold and Muted are adapted from existing combinations of customisation options. We map a site's current customisation options to one of these themes, such that visual changes are minimal or non-existent. Beyond that, each theme has variants to accommodate tint and sidebar styles, with more individual styles to follow. Preview Clean Light/Dark × Sidebar default/filled × Tint on/off Muted Light/Dark × Sidebar default/filled × Tint on/off Bold Light/Dark × Sidebar default/filled × Tint on/off Gradient Light/Dark × Sidebar default/filled × Tint on/off
    12 Feb 2025
  • +37-60

    Fix header offset

    Consistent use of the (renamed) site-header: and (new) site-header-sections: Tailwind variants in TOC, PageAside, and OpenAPI block Fixes API response block overlapping header if it has sections Before: After:
    6 Feb 2025
  • +48-53

    Change link color to primary subtle

    Links are now coloured close to– or exactly matching the site's supplied primary colour. If a visitor's browser requests high contrast styles, we still show an appropriate AA/AAA-compliant colour. Before After
    5 Feb 2025
  • +127-83

    Make tint color subtler when equal to primary color

    The new tint colour system results in pretty intense looks when using the primary colour as the tint colour 1:1. To reduce this effect, we will add in 40% grey with the primary colour when exactly equal to the primary colour. This results in a more subtle tone. When the tint colour is custom-set, we give control to the user and use the chosen colour exactly.
    5 Feb 2025

Highlighted Projects

Crisp

Crisp is a grocery store app for locally sourced fresh food. Its mission is to improve the food system by effortlessly bringing better food to more people.

As Product Designer I help make the app look good and work smoothly, with involvement in the entire product chain: conducting user research, feature discovery, designing iterations in Figma, speccing tickets for developers, testing implementation, building and releasing to users, and monitoring adoption by writing SQL and dashboards.

My biggest achievement is the newly-launched Weekbox, our take on mealkits and a whole new paradigm for Crisp. I have designed every flow, from onboarding to cancellation, helped tailor the core proposition, and helped steer the rollout to production.

Beyond that I have contributed dozens of new features to the app, helped solve hundreds of bugs, set up the design system from scratch, regularly shipped the app to alpha / beta / production, led internal team meetings, and presented inspiration sessions to the whole company.

Created with code!
Riverside

As the first Design Engineer at online recording platform Riverside, I bridged the gap between the design and development teams by designing new features and creating prototypes, animations and code examples that would enhance the product further. I also set up and maintained the Riverside Design System.

The feature I'm most proud of is the Media Board, which lets you upload, preview, and record audio and video in your online studio. Small details such as the design of the Preview/Live toggle and the Grid View inspired by Launchpads were a delight to work on.

From the moment he joined, Zeno played an important role in shaping Riverside’s UI and UX. He brought structure to our new design team by independently conducting user research, collaborating across teams, and setting up an extensive component library in Figma. He thinks like a developer when he needs to, which has made implementation a breeze and made our product shine.
Nadav Keyson, CEO and Co-Founder at Riverside.fm

Invisible
Interface

Carried out in the scope of the MA Digital Experience Design at Hyper Island UK, my graduation thesis examines flow in digital tools, and aims to provide a new model to help digital designers create interfaces that cause (more) flow.

Check out the 15-minute summary video below

Check out the full thesis

I tried my hardest to make it anything but dry

This is a very valuable piece of work with a clear deep understanding of the issue in the area and a realistic, understandable model delivered in a very professional and academically robust manner.
Mick Stockton, Assessor at Teesside University
The flow funnel is giving me and the team a better understanding and a handle to talk about the difference in skill/experience levels of our users. It was a revelation to see this mapped.
Davey van der Woert, Senior Front End Engineer at The Engineering Company

Dutch Coding Company

Dutch Coding Company is a web & app studio based in Eindhoven. I have had the pleasure of working with them on multiple projects, from mobile apps to animation-enriched websites. As part of their website redesign, I got to add animations and page transitions in numerous places.

To accompany the beautiful videos they made, I created a number of 3D device components that would spin- or flip around as you scrolled the page. In places where a handmade video couldn't be made, the device frame could be filled with a screen recording, and it would mirror the 3D transforms made by the device. Another highlight is the website's main menu, which includes staggered animations and a smoothly rippling wave at the bottom.

Zeno works end-user focussed, with a critical, introspective attitude and tremendous work ethic. However, the secret sauce is his attention for detail - the little animations and micro interactions - that elevates everything to a blissful experience.
Glenn Bergmans, Business Director at Dutch Coding Company

Eurostory

In 2015 I was approached by a group of authors to collaborate on a special project: a website about the serious side of the Eurovision Song Contest.

Everything about Eurostory is custom-built with attention to detail: a specialised block editor, a rich database of contest info, SEO optimisations, and a sleek design.

To top it off, during the Song Contest itself I get to make short vlogs about my experiences, finding my way as a videographer.

Zeno is the perfect example of a multifaceted designer. He is perfectly able to translate our wishes into a well functioning, beautiful interface, but he also comes up with ideas we didn't know we wanted to incorporate – but we do. It's been a constant joy to work with him.
Edward van de Vendel, author

DebaTable

DebaTable is a technologically enhanced meeting table that mediates discussions and stimulates time-efficient debates.

It works by measuring and then visualising each participant’s speaking time within the past minutes. Additionally, a slowly expanding circle in the middle shows the discussion time left per topic, as voted on by each participant.

In his Final Bachelor Project, Zeno clearly demonstrated his time at the University shaped him into a skilled designer with an eye for detail and one who is never afraid to learn new things. I very much appreciated his 'making approach’ in this project and have always been impressed with his professional attitude and his reflective stance.
Joep Frens, assistant professor at Eindhoven University of Technology, Department of Industrial Design

Other Projects

Gloei

I had the honour of being interviewed by Edward van de Vendel in a book about LGBTQ+ youth called "Gloei". After a successful book launch, we started an interview podcast with the same name: "Gloei, the podcast".

Edward interviews a member of the LGBTQ+ community about their life. Afterwards, he reads a poem inspired by that person. Each episode is accompanied by custom art work. I was in charge of the audio and hosting.

Hackathons

Every now and then I partake in a 48 hour coding challenges, for example at Junction. Past challengers included Spotify and BlackRock – both of whom awarded our projects with a prize.

I have detailed the various projects over on my Blog.

Board Year

Wervingsdagen is responsible for organising the largest career events of the Eindhoven University of Technology, helping 160 companies with 3700 students. I learned to collaborate with my fellow board members, work with 9 study associations, and maintain professional attitude towards client companies.

Light Art

Intermedia is an interactive light installation made for light art festival GLOW Eindhoven 2016. I programmed its 3 visualisations using a pretty complex technology stack (Kinect sensors, local networking, beamers, adaptive soundtrack). The result was a wonderful experience, with many strangers connecting with each other through a screen.

Get in touch

I'm @zenoachtig (It's funny in Dutch) pretty much everywhere.