Ariel Salminen

@arielsalminen.com

3564 Followers 187 Following

Design (systems) engineer • A girl who lost her heart somewhere in California 🧡 • Mainly posting about design systems, web components, the web platform & my road cycling adventures. 📮 https://arielsalminen.com 📍 Helsinki, Finland 👩🏻‍🦰 She/her

My view over the handlebars of a rain-soaked red road bike, water droplets covering the frame and a Garmin bike computer, wet asphalt below.
Close-up of my Wilier Verticale’s rear hub showing a red anodized Miche centerlock lockring securing a silver disc brake rotor, matched to the bike's glossy red frame.
Arielle’s red Wilier bike leaning against an underpass wall with huge graffiti that says “Girls are awesome” in white stencil-style letters on a red background.
A glossy red Wilier Verticale SLR road bike leaning against a wooden fence in summer sun, with a small house sparrow perched on the bike computer between the handlebars. Green foliage and a building behind.
A small uninhabited island in the Turku archipelago, photographed across choppy deep-blue open sea under a clear sky. The island rises from smooth granite at the waterline to a dense crown of pine forest, with more low islands faintly visible on the horizon.
Red Wilier Verticale road bike on Pirelli P Zero tires, leaning against a wooden picnic table on a grassy shore. Two pink bottles in the cages. Behind it, a marina full of sailboats and a small ferry under a clear blue sky.
A red road bike parked on a sandy beach beside calm blue water, with the photographer's legs and white cycling shoes stretched out in the foreground. Pine trees line the shore and a swan floats nearby.
Terminal screenshot of the Kesko Design System test runner, with a coral pink ASCII-art “K” logo. All 87 test files and 2,831 tests across 13 test suites passed in 42.66 seconds.
A map of Helsinki with a cycling route along the coast and a text label below saying “Distance: 54,9 km.”
Two red Wilier road bikes in a living room. The new Verticale SLR in front, the older Wilier behind it, with design books and plants in the background.
An array of new Shimano bicycle drivetrain components in their packaging on a light wood floor.
A screenshot that shows download speed of 2,98 Mbps, and upload speed of 0,35 Mbps.
A child with long hair stands on a sandy beach at dusk, tossing a handful of small stones into the air above her. The calm Baltic Sea stretches out before her, reflecting the soft pink and peach tones of the sunset sky. A forested island sits on the horizon to the left, with smooth rocks and boulders visible along the shoreline.
A screenshot of a design token visualizer that allows you to explore the full design token tree to understand how the relationships work between groups, primitives, semantics, themes, and modes.
A vintage View-Master stereoscope viewer in dark brown plastic sits on a wooden surface next to a red plastic basket filled with View-Master reels in navy blue paper sleeves. The front reel sleeve reads “One View-Master Reel: 7 Three Dimension Full Color Pictures” with a Peter Pan title visible on the reel label inside.​​​​​​​​​​​​​​​​
A screenshot of LinkedIn’s iOS app with text so large it doesn’t even fit one word into the viewport.
A dialog asking me to confirm my location. The availability options are UK or US.
A posted dated “2 April, 2026”, 3 days in the future from now
A woman with twin braids wearing a navy colored t-shirt featuring the slogan "I write alt text".
A screenshot of Google search results showing “Optimizing Webfont Performance” from https://arielsalminen.com/2025/optimizing-webfont-performance/
Roasted deer with glazed beetroot and forest berry sauce.
A photograph of a cheese shop in Töölö, Helsinki.
@scope (.test) { :scope { ... } } @scope (.test) { :scope[disabled] { ... } } @scope (.test) { :scope[variant] { ... } } @scope (.test) { :scope[type="green"] { ... } } @scope (.test) { :scope[variant="danger"] { ... } } Hover the last <div class="test" variant="danger">...</div> and it’ll work 🤷🏻‍♀️
A red Hilleberg Rogen tent set up in the middle of Arielle’s living room covering most of the space.
Elena is a project I’m working on currently. It’s basically a lightweight, opinionated library for building blazing fast progressive custom elements. "Progressive" because Elena works without JavaScript, supports partial SSR, and additionally provides full support for React/Next.js Server Components.
Figma artboard titled “Color Systems” displaying comprehensive color system research organized into six horizontal sections: Brand Architecture, Brand Assets, On Web, On Mobile, Brand Guidelines, and Existing Color Systems. Each section contains numerous screenshots showing color palettes, UI components, and design documentation across Kesko's various products and brands.
A golden-brown plush aardvark named “Muurahaiskarhu” stands on a laptop keyboard, its long snout extending toward the screen which displays the Kesko logo in orange and white. The soft toy is photographed against a minimal office setting with white pendant lights visible in the blurred background.
Baking cheese horns, 1/3.
Risotto with beetroot, feta, dill, parmesan and lemon at YesYesYes vegetarian restaurant in Helsinki.
Snow-covered evergreen trees and residential buildings in a quiet Hamburg neighborhood under an overcast winter sky.
Cheese horns, with, surprise surprise, lots of cheese inside
Importing and exporting variables: Native import and export has long been a top-requested feature in our forums. We’ve held off on adding this feature—opting instead to release an open source import/export plugin—until The Design Tokens W3C Community Group (DTCG), a community focused on creating design tokens standards, finished their 1.0 release. This was to ensure a better authoring experience across our tooling ecosystem. The community group spec is now officially at 1.0, along with native import and export support in Figma. Variables import and export will be available in November.
Npm package imports: For teams who already have a design system in their codebase, we will allow you to import your React components—whether self-built or open-source components—via public and private node package manager (npm) imports.
Included approaches: No framework: - ✅ 🔟 ⬆️ Progressive Web Components (with Split Server Parts) - ❇️ 🔟 ⬆️ Progressive Web Components - ✅ 🔟 ⬆️ Custom Elements with CSS Framework - ✅ 🔟 ⬆️ Declarative Shadow DOM - ✅ 🔟 ↕️ HTML Web Components - ✅ 1️⃣ ↕️ Split Web Components - ✅ 1️⃣ ⬇️ Isomorphic Web Components - ⚠️ 🔟 ⬇️ JavaScript Web Components - ⛔️ 🔟 ⬇️ JavaScript Web Components (without slots) With framework: - ⚠️ 5️⃣ ⬆️ Lit - ✅ 5️⃣ ⬆️ WebC - ✅ 5️⃣ ↕️ Enhance - ✅ 5️⃣ ⬇️ Stencil
Arielle wearing a white t-shirt with the following text: “you can be gay if you want to”
A photograph of a bike repair shop in Helsinki
/* Make a custom emoji font that we can adjust */ @font-face { font-family: "emoji"; src: local("Segoe UI"), local("Roboto"), local("Helvetica"), local("Arial"), local("Apple Color Emoji"), local("Segoe UI Emoji"), local("Segoe UI Symbol"); size-adjust: 250%; /* The only “real” thing you can reliably do here */ unicode-range: U+1F600-1F64F, /* Emoticons */ U+1F300-1F5FF, /* Misc symbols and pictographs */ U+1F680-1F6FF, /* Transport and map */ U+1F1E0-1F1FF, /* Regional indicator symbols */ U+2600-26FF, /* Misc symbols */ U+2700-27BF, /* Dingbats */ U+FE00-FE0F, /* Variation selectors */ U+1F900-1F9FF, /* Supplemental symbols and pictographs */ U+1F018-1F270, /* Various asian characters */ U+238C-2454, /* Misc items */ U+20D0-20FF; /* Combining diacritical marks for symbols */ } body { font-family: "emoji", sans-serif; }
Dinner with my boyfriend yesterday. Entrée in the photograph.
A screenshot of a slide deck with 108 slides on how to develop a successful design systems infrastructure.
My daughter touching a “sky blue” iPhone Air sitting in its original box, waiting to be set up.
A screenshot from Arielle’s calendar filled with Design System User Research bookings
A really confusing parking payment machine that has dozens of options that all seem to have a different user interface and no consistency whatsoever.
A photograph from Arielle’s home office showing a laptop with a draft organization chart open in FigJam.
Modern office lobby at Kesko’s main campus in Helsinki, featuring a wooden slat ceiling with geometric cutouts that reveal upper floors. The space showcases contemporary Scandinavian design with two orange upholstered swivel chairs positioned around a light wood circular coffee table in the foreground. The lobby has white walls, and a glass staircase with wooden handrail on the left.
This image shows a topographical map of the Helsinki metropolitan area in Finland. The map displays a cycling route marked with a colored line that changes from blue (lower elevation) to green, yellow, orange, and red (higher elevation) according to the elevation scale shown at the bottom. The route forms a loop that starts near Espoo in the west, travels north through areas near Oittaa, then heads east and south through locations near Vantaa and Haltiala, before returning to Helsinki and back to the starting point marked with a green play button icon near Espoo. Several waypoint markers (gray circles with mountain icons) are placed along the route.
Two red road bikes parked on a paved road in front of a traditional yellow wooden building. The building has white-trimmed windows, a dark metal roof, and sits on a stone foundation, surrounded by mature green trees and well-maintained grass.
Flat lay of office supplies arranged on a light wooden surface. Items include: a white USB wall charger, two coiled white cables, a printed document titled 'PARTS' with multiple columns of text, a pink laptop sleeve, colorful sticky notes in green and pink, several black Sharpie markers, red scissors, a sheet of small red circular stickers, and a black digital timer showing approximately 15 minutes with a red section on the dial.
A red road bike with drop handlebars and water bottles is parked next to a wooden bench on a gravel path. The bike overlooks a scenic wetland area with tall green grasses and a body of water. In the distance, Helsinki city skyline with several tall buildings is visible on the horizon. The sky is partly cloudy with blue patches and white clouds, and power lines are visible crossing the upper portion of the image.
CodePen inside a <code-pen> inside a @codepen.io
A photograph of Arielle hair open wearing a black dress and a matching black head band.
A goat eating my dress.
Photograph 1/3 of the steepest cogwheel railway in the world at Mt. Pilatus in Switzerland.
A medieval stone castle sits like a crown jewel on emerald hillsides, its ancient towers and red-tiled roofs telling stories of centuries past. A winding road curves gracefully through the lush green meadows, leading the eye toward this fairy-tale fortress. Framed by leafy branches that create a natural window, the scene opens to reveal distant blue mountains rising like gentle giants against a soft, cloud-brushed sky. The pastoral landscape breathes with timeless tranquility, where history and nature dance together in perfect harmony.
A sweeping alpine valley opens like a green amphitheater between towering limestone cliffs. Winding paths trace through the lush meadows below, while clouds drift around distant peaks. The scene captures the profound quiet of the Mt. Pilatus, a peaceful silence broken only by the rhythmic chiming of cowbells echoing through this pristine wilderness.
Apple calendar emoji with October 30th as the current date.
Arielle sitting in the Helsinki Winter Garden with her handbag and sunglasses on the table in front of her. There’re three other chairs around the table which are all empty. Behind the table and chairs, you can see a serene view of the green trees, bushes, and flowers that grow in the garden.
Arielle in a purple sleeveless shirt, holding a gymnastic ring in her right hand. Behind her you can see two beds that have been prepared for the kids.