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.
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
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.
This PR is a comprehensive rewrite of the colour system used on GitBook Open. The way colours are generated, as well as the naming convention across the code, has been changed in favour of a Radix-like system.
Key benefits
A better colour palette defined in terms of perceived LCH instead of RGB. This gives us more control over each shade and lets us mix colours together easily.
Guaranteed accessible colour contrasts, no matter which colour you throw at it.
A much stronger use of tint across the app, as it colours every single element instead of only the background. This can result in very striking looks, and can be dialled back into very subtle details. Even without tint, we mix a tiny bit of the primary colour into every neutral.
The visual changes are quite slight for most sites. The only sites that will see a more pronounced change are the ones that have tint enabled and set to a strong (primary) colour.
Secondary benefits
Consistency: unified (text/background/border/...) colours across the app — before we had many different text colours because we used different shades and opacity. Now we have 2: low contrast and high contrast.
A better contrast calculation function based on perceptual brightness will result in "the right colour" being chosen in many more cases, and reduces 1 package dependency.
Semantic colour classes — bg-primary text-primary will turn into different shades, as the classes are mapped to colour that should be used in that context.
This will also make it a lot easier to implement the 4 different themes in an easier way, as we don't need to worry about contrasts and clashes between elements.
Main changes
colors.ts serves as the source of all colour logic, it contains the main colour scale definition, translation functions between colours spaces, functions for colour mixing and colour contrast checks.
CustomisationRootLayout.tsx and tailwind.config.ts implement the colour scales in a similar way as before, using CSS variables on the <html>.
There are three colour scales available:
primary: Based on the primary color, used for links and interactive elements.
tint: The main color scale for non-interactive elements. Will either be a (slightly tinted) gray scale or a user-set value through Customisation.
neutral: Will always be a neutral gray scale, without any tinting or overrides. Use only when tint somehow clashes.
We also generate contrast-* colors for each of the shades in each of these scales, for example contrast-primary-1 and contrast-tint-12. These will be set to black or white depending which has the strongest contrast with the matching shade.
Each shade is available in Tailwind as its step number (primary-1…primary-12). But for most use cases, the utility color classes (bg-primary, text-primary, border-primary-hover, ...) are much preferred because they map the function (bg, text, border, ...) to the right step in the color scales.
These new (utility & generic classes) have been used to replace all color classes across the app.
Examples
http://docs.gitbook.com/ vs https://pr2783.gitbook-open.pages.dev/docs.gitbook.com
https://docs.umbraco.com/umbraco-cms vs https://pr2783.gitbook-open.pages.dev/docs.umbraco.com/umbraco-cms
https://docs.whereby.com vs https://pr2783.gitbook-open.pages.dev/docs.whereby.com
https://docs.keycloakify.dev/ vs https://pr2783.gitbook-open.pages.dev/docs.keycloakify.dev
docs.lenses.io/latest vs https://pr2783.gitbook-open.pages.dev/docs.lenses.io/latest
Screen.Recording.2025-01-23.at.13.48.34.mov
To do
Hook up API and typing to accept comment prop (in trackEvent() and createSitesPageFeedback() – marked with // TODO @Samy in the code.
Serverside validation and escaping of user input. The only check I've built so far is a client side maxLength, but I don't escape the value in any way right now.
Add some tests?
Updated my #portfolio 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 #mastodon API made for a super fun holiday project! Really happy with how it turned out 😊
Tweak card background, better margins for card headings
Cards stand out slightly more on tinted and dark mode sites, and have better support for headings inside them.
Preview
Background
Tinted (Before → After)
Dark mode (Before → After)
Headings (Before → After)
Update the footer to a brand new design
Increase logo size to the same dimensions as header logo (fixes RND-5860)
Support >4 link groups by distributing groups across (max) 4 columns (fixes RND-5024)
Restyle every component inside the footer, including the mode selector.
Styling examples
GitBook (Before → After)
Audacity (Before → After)
Make.com (Before → After)
Snyk (Before → After)
Digit (Before → After)
Automatic columns
To distribute groups across columns, first we determine how many groups need to be placed per column, favouring the left columns first. Then we fill each column vertically in the order defined by the user. Example: if there are 10 groups, the first column will contain 3 groups (1, 2, 3), the second will contain 3 groups (4, 5, 6), and the last two columns will also contain 2 groups (7, 8 and 9, 10). On mobile, groups are shown underneath each other.
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.
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: https://ryanmulligan.dev/blog/css-property-new-style/
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
@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?
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
🌉 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 👹.
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
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
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
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
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.
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.
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.
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.
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.
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.
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.
