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
  • +61-28

    Header button styling

    Decreases the gap between header links and adds new styling for primary and secondary buttons, in line with new theming. Comparisons (Before → After)
    14 Jan 2025
  • 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 ...

  • 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
  • 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
  • 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

  • +57-52

    Start using tint in more places: TOC and PageAside

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

  • +25-1

    Fix variant dropdown styling in header

    Before and after
    14 Jan 2025
  • 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

  • +140-13

    Vertical orientation for sections list on sites without header

    This PR adds a vertical display component for sections, useful for sites that have the header turned off (and might become an opt-in choice for sites with sections). When there are more than 5 sections we display a scrollview (and scroll to the active section if needed). Preview Screen.Recording.2025-01-09.at.18.42.20.mov Screen.Recording.2025-01-10.at.14.02.21.mov
    10 Jan 2025
  • Feeling very refreshed after the holidays! Can't wait to meet new people, learn new things, and make next year amazing :)

  • from Rafa

    Seriously, getting a 3D printer was a mistake

  • +185-351

    Restyle `PageAside` to use sidebar list styles

    This PR adds support for the new sidebar list styles introduced in #2645 to the right sidebar, along with improved top margin and visual cleanup of the right sidebar as a whole. New list styles Same as left sidebar: default, pill, and line (using the same user customisation setting). default.mov pill.mov line.mov In addition to the three styles, when a user's system reports wanting more contrast, all three styles get more borders and thicker text: default-contrast.mov API blocks Before & After
    9 Jan 2025
  • Bf made too many noodles today so I was like “Oh no, what have udon”

  • +24-1

    Fix variant selector for non-default themes

    Before After
    19 Dec 2024
  • Taking a break.

  • New combo: rose gold all the things!

  • 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.

  • +11-5

    Fix header logo margin

    Before After
    16 Dec 2024
  • 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"

  • 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

  • +74-4

    Add breadcrumbs to page header

    If a page is nested within a page group or other pages, we can put breadcrumbs above the page title. It adds a sense of hierarchy to the page, and provides a nice touch of colour. Preview
    13 Dec 2024
  • @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)

  • +411-305

    Update header styling

    This PR updates the site header with a new, modernised look featuring translucency and a new search bar. The header has been refactored for a more flexible layout across screen sizes, and especially on small and tiny screens. New look with slight translucency on default themes. Non-default themes still showcase a full color without translucency. New search bar design and hover/active styles for a more lively look. Tweaks to search modal to make the transition from/to search smoother. New internal layout for header top bar, using flex box instead of grid. Elements truncate and shrink automatically on small screens. Update visual tests to deal with multiple variant selectors on page Before After Screen.Recording.2024-12-11.at.17.43.18.mov
    13 Dec 2024
  • Today marks the first day of my ½-month sabbatical in-between jobs. There’s a new energy in the air ⚡️

  • +242-189

    Add tint color

    This PR adds support for the new tint colour customisation setting. It is meant as an additional way to theme your docs by subtly colouring various elements of your theme, such as the background or header. The primary-color remains in use for primary navigation elements such as links and buttons. This first PR aims to swap the properties used in colour calculations without introducing big visual changes. In future PRs will propose new ways of using tint in various places. There are no changes for sites that have not opted into the Tint setting. Create tint-color and contrast-tint CSS variables Use tint-color to set base colour palette (light-* and dark-* variables) Use tint-color for the header colour of Bold. When Custom is used, the set "Header background" and "Link color” settings take precedence over tint colour. Deprecate plain-background Tailwind variant in favour of tint and no-tint variants. Deprecate primary-base variable in favour of tint-color Preview Without tint: same as current Background: plain Primary tint: same as current Background: match Custom tint: new functionality Default No changes with tint off. If tint is enabled, we colour the bg slightly with the tint color (primary color or custom color) Bold No changes with tint off. If tint is enabled, we colour the bg slightly and header strongly with the tint color. The links are always set to a contrast of the tint color. Contrast No changes with tint off. If tint is enabled, we colour only the bg slightly. Header stays contrasting. Custom No changes with tint off – we use the custom-set headerBackgroundColor and headerLinkColor. If tint is enabled, we colour only the bg slightly. The custom header colours stay in place. We aim to eventually clean up these options, favouring tint over custom-set header colours. Resolves RND-5670
    9 Dec 2024
  • 🌉 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

  • PIIPP

  • +63-121

    Restyle hint block

    Change colours of Hint Set border colors on CodeBlock, which can optionally be enabled (by conditional style within Hint). Fix Stepper and StepperStep to handle passed-on style classes correctly Adds can-override-bg and can-override-text classes to let Hint conditonally set the right colors for components within its boundaries. Preview Left is current, right is proposed
    26 Nov 2024
  • we out here*

    *speculating wildly about public UI controls as they show off screenshots

  • +186-141

    Improve styling of search & ask AI box

    Fixes RND-5521 and RND-5519 Preview (Left is current, right is proposed)
    20 Nov 2024
  • +101-65

    Update header styling of sections, variant selector, and button links

    Change position of variant selector depending on context By default: shown next to logo With sections: shown in table of contents With sidebar-only view: shown in table of contents Without sidebar: shown next to logo Update styling of variant selector, remove kind prop since we’re always showing the same styling now. Update section tab styling and animation Make header buttons smaller with a new medium button size Preview
    22 Oct 2024
  • +195-19

    Update ogimage with new design

    Our current OpenGraph / social / link preview images are very basic. Let’s make them nicer. Current Proposed Default themes (90% of sites) By default, we use the site’s primary colour to generate a gradient background. We use the site’s default theme mode (light or dark) to invert the colour scheme if desired. Bold and custom themes (10% of sites) When a site has the Bold or Custom header theme, we need to change the background of the image to make sure it always works with the site’s logo and colour. Instead of the primary colour on white or black, we use the site’s header.backgroundColor as the basis for the background, and overlay the site’s header.linkColor on top. To make sure body text is legible, we employ the same colorContrast() check as we perform in the header to pick form white or black text. Caveats and next steps Fonts: In order to load a custom font into the satori renderer, we need to supply an ArrayBuffer of font data by fetching the font file and passing it to ImageResponse. Ideally we’d use the already loaded and cached fonts from next/font/google for this, but this doesn’t expose the cached font files, and thus can’t be passed along. We now colocate two weights of the Inter font in this repo to make it available as a static asset. Ideally we would use the site’s chosen font in the ogimage, but for the above reason this is difficult to do unless we add all fonts to the repository (definitely doable, but perhaps not worth the effort). Emoji and icons: It’s difficult (but not impossible) to add custom icon fonts and emojis to the renderer, but it’s probably too much effort to be worth it for now. Emojis are supported by default in the renderer but with a different font (Twemoji instead of Emojione)
    15 Oct 2024
  • +37-12

    Add automatic color contrast in site header, restyle search button

    Using the same color contrast function introduced with #2511, we can automatically choose the right linkColor to match the site nav's background color. This only applies to the Bold theme, where the user’s primary color is used as the site nav's background. In other themes, the linkColor is predetermined or explicitly set by the user. This PR also reworks SearchButton to use the linkColor when used in the site top nav, instead of derivatives of the header-background color. Default blue, stays the same (Left current, right proposed) Orange, swaps color to be more contrasting (Left current, right proposed) Pure black, currently broken (Left current, right proposed) Pink, key hint uses wrong color (Left current, right proposed) Additionally, SearchButton now features more contrasting styling for users who opt into it using the prefers-contrast: more media query. High contrast styling (Left current, right proposed) Finally, on Mac we simplify the ⌘ + K key hint into ⌘ K to match the operating system and other websites using this pattern. On Windows we still use Ctrl + K in full to match that OS’s convention.
    15 Oct 2024
  • +67-51

    Update Checkbox component

    The Checkbox component was broken in some instances, particularly inside tables. It also used a low contrasting checkmark and light background. This PR gives Checkbox a brighter spot of colour, and introduces a new way to always use the right text colour on top of the primary colour using the contrast-primary colour classes. Make Checkbox component slightly bigger Change sizing of Checkbox so it's shown correctly in tables Make Checkbox use user-supplied primary color (primary-500) Add extra contrasting bg color and border using contrast-more (bg only in light mode, dark is contrasting enough) Add contrast-primary variables to provide white or black text for each shade of color-primary Preview Current Proposed Works with all theme colours
    8 Oct 2024

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.