About
I have over a decade of experience in design and coding, specialising in CSS, cross-platform human interface design, and design systems.
In 2022, I won the Figma Award and have been recognised twice by Adobe. I’m also a certified by Google and a YouTube content creator, creator of the popular open-source icon library CSS.GG, which has over 46k stars on Figma, 9k+ stars on GitHub, and 20k+ weekly NPM installs.
I’ve worked with notable clients such as Google, Absolut Vodka, Aimo, Kronfagel, and Biersdorf in Switzerland, the United States, Kosovo, and Sweden.
Currently, I work as Design Engineer at SEB Bank in Stockholm, Sweden.
Consistently experimenting with the latest CSS/Web features to gain a deeper understanding of their limitations is what I am passionate about.
Stack: Vercel, Next, Sanity and Stitches
Tools: Code, Figma, Raycast, Arc, Linear, Spline, Warp and Craft
Projects
A three.js experience for Nämdöskärgården, one of the larges island on the Stockholm archipelago.
A handpicked selection of glyphs for daily use, Copy & Paste SVG, PNG and Figma variable
Portfolio for Sunny at Sea the company where I work at, featuring the projects like Google, Fading Stories, Max etc.
Nors UI helps developers to build a better web experience. Accessible low level elements and components that are as easy to customize as HTML. Zero restrictions. Access markup at a granular level.
A collection of minimal 700+ Pure CSS, SVG Figma & Adobe XD UI Icons Available in SVG Sprite, styled-components, NPM & API
· Figma Community Award winner for 2022
· 46,000 duplicates on Figma
· 9,000 stars on Github
· 4mil+ visitors
· Nr.1 in Google for CSS icons
· Pure CSS version, SVG and PNG
· Easy integrate using open API endpoints available with all icon details including style, markup, SVG Sprite, SVG Encoded etc.
· Preview icons for all details, copy as SVG and CSS, Markup and all details on each icon page
· Pure CSS, you can apply the style to any class and they are designed to stand alone without breaking your layout meanwhile inheriting the colour using `currentColor`
· CSS.GG is also available on @react-icons
Personal portfolio, at the time built using WP and custom structure with no plugins, camera gesture and voice control features as an experiment.
Side Projects
A tutorial I did on youtube using some of the most unique features of CSS like position sticky, blend mode, custom scrollbars all in pure CSS.
A CSS experiment on simulating a blackhole on deep space with audio, using backdrop and animations only.
Speaking
I talked about SEB:s Green Design System at Dun & Bradstreet Europe HQ in Stockholm, Sweden
Me and Marwin Brandt delved into the intricacies of building a robust and efficient design system.
Showcased some rad #CSS techniques and how we fuse them into our web components, delivering inclusive, user-centric banking design experiences and how we take advantage of Figma API:s for a streamlined process between two worlds <code/> and deƨign.
Big thanks to Hana Yusof for extending the invitation! It was a privilege to share insights and connect with fellow design enthusiasts.
I had the chance to talk CSS and how we leverage adaptable techniques within the Green Design System, also demonstrated how to deliver inclusive and user-centric banking design experiences.
Later on alongside exceptional colleagues Vilhelm Sjölander and Joacim Magnusson, we engaged in insightful 1:1 sessions, addressing questions related to Green.
I talked about the latest and most noteworthy advancements in CSS.
Furthermore, I provided a comprehensive overview of SEB's Green Design System and delved into our strategy for creating a dependable and inclusive design system tailored to user preferences.
My presentation encompassed a broad range of topics, including color-mix, container queries, @media features like reduced motion, contrast, typography, specificity and @layer rule, View Transitions API, and many other essential elements of modern web design.
Writing
In this detailed and personal exploration, I will discuss the color-mix() function from my perspective, delving into various color spaces, such as HSL, RGB, LCH, and sRGB, and providing in-depth examples to showcase the versatility and potential of this innovative addition to the CSS specification. Furthermore, we will explore the benefits of incorporating the color-mix() function into design systems with tokens, along with examples showcasing how to work with colors and their alpha values, as well as using CSS custom properties on the :root element.
Awards
Work Experience
-
Developed a user-focused and inclusive web design system using React, Lit, Next JS, and other web technologies.
-
Launched the initiative seb.io to improve our Green and open-source software (OSS), creating a more user-friendly experience and a centralized hub for OSS.
-
Created an advanced Figma plugin that enhances design workflows and boosts productivity for our team.
-
Took a forward-thinking approach to front-end development by incorporating the latest CSS features and prioritizing accessibility and user preferences.
-
Integrated Figma variables into our design workflow to improve consistency and automate processes.
-
Presented as a speaker at industry events, sharing knowledge and representing SEB.
-
Emphasize celebrating successes, learning from mistakes, and having a passion for work.
III — The umbrella brand for my freelance projects
Development:
React, Next, Vue, Vite, Stencil, Stitches, AWS, Digital Ocean, Vercel, VS Code, Git, Emotion, Framer, Typescript, Web Components, E-Commerce, WordPress, Webflow, Gulp, Tailwind, Sass, PHP, Svelte, NPM, Yarn, Docker, Sanity
Design
Cross-platform human interface design and design systems, UI ( Mobile, Web ), Wireframing, User Experience, research, prototyping, interaction design and user testing.