simon.fyi

Hi, I'm Simon

Freelance (Lead) Frontend Developer & Design System Specialist



I help teams build UI foundations and React platforms that scale—so product delivery speeds up rather than slows down as the organization grows. My work sits at the intersection of Design Systems, modern React platforms, and pragmatic team adoption.

With 17+ years of experience in frontend development, I’ve worked on complex products where consistency, accessibility, and maintainability matter. I created Seven Facets: my own React and styled-components design system, with 250+ components, a tiered token system, and 100+ automated accessibility and quality checks. I use it to accelerate audits, roadmap decisions, implementation, and documentation.

Focused on tomorrow’s web and today’s demands, my tools could vary by project and are carefully selected for optimal results. New tools provided by the client are easily picked up; it’s all about patterns and consistency.

I’m based in Rotterdam, the Netherlands. I’m currently on a freelance contract at Stedin and open to new projects from January 2027, for building, implementation, or support days, depending on your team's needs.
Simon profile picture

From snippets to Design Systems

Over the past decade, my work evolved from reusable UI code inside products to component libraries and, eventually, to full Design Systems. As UI complexity increased, inconsistency became costly in multi-team delivery. Also, teams and platforms simply couldn’t scale on “copy-paste consistency”.

Modular thinking helps shift the mindset from developing pages to developing systems.

Early on, I focused on pragmatic reuse—utilities, shared UI components, and conventions that sped delivery without adding process overhead. As component-driven development matured, I moved those patterns into versioned component libraries with predictable APIs, so multiple developers (and later multiple squads) could build without reinventing UI decisions.
CSS frameworks and UI kits then standardized basic UI patterns, but didn’t fully solve scale or brand flexibility. With component-based frameworks, teams could ship real component libraries: versioned packages with encapsulated logic and stable APIs.
Nowadays — Modern Design Systems go beyond components, adding tokens, documentation, governance, adoption practices, and automated quality checks so consistency becomes the default and teams ship faster without drift returning.
I use documentation (typically via Storybook-style workflows) to keep design and development aligned around a single source of truth, not interpretations. Direct communication is also key here.
The result in each of the historic phases is always the same: less design drift, tighter team alignment, and a UI platform that helps teams ship faster with confidence. Let’s see how things evolve this year!

Timeline

Detailed information can be found on my LinkedIn profile.

Self-employed contractor
2016 - now

Stedin — Frontend Developer
2026 - now

DPG Media — React / Design System Developer
2020 - 2025

Hatch Studio (PVH) — React / UI Developer
2018 - 2019

Random Studio (Tommy Hilfiger) — UI / React Developer
2016 - 2018

DEPT — Lead Frontend Developer
2016

TamTam — Senior Developer
2015

Supersteil — Senior to Lead
2009 - 2015

Private — Learning the basics
2000 - 2008

Also active as
Founder and Manager
33rd Street Coffee
2020 - now

Personal projects

Keep on learning and seeking new adventures.

Seven Facets
My own design system: 250+ React components, tiered design tokens, i18n with RTL support, and 100+ automated accessibility and quality checks. Built and reviewed by me, sped up with Claude Code.
Check out the case study .

Simon.fyi
This website, built with React and Seven Facets, serves as my personal portfolio and contact point.

Sounds.fyi
A music discovery platform that curates personalized playlists and insights. Runs on the Spotify API and gives users more control over their music experience than Spotify’s own platform. Currently offline.

33rd Street Coffee
A local coffee shop in my hometown, which I built from scratch. It’s a physical place that holds a special place in my heart and taught me valuable lessons about management, customer service, teamwork, and the importance of a good cup of coffee. Visit the website for more info: 33rdstreet.coffee.

Skills and focus

AI + Code

Extended and enhanced workflow with Claude Code.
Integrating AI into real development workflows — not as a gimmick, but with the same strict precision I apply to design systems. I work extensively with Claude Code to accelerate development, from scaffolding components to refactoring entire modules. Beyond generation, I use AI as a critical reviewer: auditing code for accessibility gaps, inconsistent naming conventions, code conventions, design token usage, and optimization opportunities. The value isn't in replacing thinking — it's in getting honest, tireless feedback that improves the output.

On my own design system, Seven Facets, Claude Code runs nightly routines with the skills and conventions I wrote, and I review every change before it is merged.

Design Systems

Scalable design systems are built to enhance team collaboration, efficiency, and consistency.
By focusing on essential elements such as design tokens, typography, spacing, color, and theming, alongside robust component architecture and clear documentation, these systems effectively eliminate UI drift. I work by governance, adoption, and versioned releases—built to scale across multiple teams.

React platforms

High-quality user interfaces are built on modern React platforms, such as Next.js.
Most often delivered through a Design System. Design patterns address real product complexities such as routing, performance, accessibility, and component-driven development, resulting in a flexible frontend foundation that is easy to extend and maintain across teams.

TypeScript

The use of TypeScript ensures a reliable, scalable shared codebase.
Through strict typing and predictable component contracts, this approach significantly improves developer experience, enabling faster feature delivery with fewer issues—especially in collaborative environments where multiple teams work in a shared codebase.

State Management

Predictable state is the foundation of a stable UI and data flow.
Whether the right answer is local component state, a lightweight Zustand store, or Redux Toolkit in a large codebase, the choice follows the problem — not the trend. Clear boundaries between client state, server state, and URL state keep applications maintainable as they scale. It differs per project and use case; the solution is always tailored to the problem.

Testing

Testing is part of the workflow, so teams can move fast without introducing UI drift.
Unit tests cover component logic, variants, and shared utilities to keep behavior predictable. Integration tests validate real user flows. Visual testing catches layout shifts, spacing/typography changes, theming issues, and responsive breakpoints. Regression testing protects what’s already in production—especially during refactors and migrations.

Dev ~ Des alignment

Bridging the gap between design and engineering
I work closely with design teams to ensure that design systems and React platforms are built to meet real product needs. This leads to practical systems that enhance usability. Implementing shared naming conventions and comprehensive documentation fosters alignment with team workflows. Removing that unintentional “design drift” and focusing on a Design System that inspires trust among designers, encourages adoption among developers, and adapts seamlessly as product teams evolve.

Tools and knowledge

Frameworks & Libraries

  • React – Component-based UI library for the modern web
  • Next.js – Hybrid SSR/SSG framework for fast, SEO-friendly apps
  • Redux / Redux Toolkit – Structured state management for complex UIs
  • React Query (TanStack Query) – Server-state caching and data sync
  • Axios – Promise-based HTTP client for APIs
  • React Hook Form – Performant, type-friendly form handling
  • i18next / react-intl – Internationalization and localization tooling

Styling & Design Systems

  • CSS – 15+ years of hands-on CSS, from float-era layouts to modern Flexbox/Grid, responsive design, and advanced architecture (BEM, utility-first, theming)
  • Styled Components / Emotion – Component-scoped styling with theming
  • Storybook – Isolated component development and documentation hub
  • Radix UI / Headless UI – Accessible unstyled primitives for design systems
  • Design tokens (Figma Tokens, Style Dictionary) – Single source of truth for themes
  • Tailwind CSS – Utility-first styling for rapid interface development

Build & IDE

  • TypeScript – Static typing for safer, self-documenting code
  • Vite – Fast dev server and bundler for modern React apps
  • Webpack – Mature bundler for advanced build scenarios
  • ESLint – Linting to enforce consistent code quality
  • Prettier – Opinionated formatter for clean, uniform code
  • npm / pnpm / Yarn – Package management and workspace tooling
  • Husky / lint-staged / Commitlint – Git hooks and commit standards

Testing, Quality & Accessibility

  • Jest – Unit and integration testing framework
  • React Testing Library – Tests focused on user-facing behavior
  • Cypress – End-to-end and integration testing in the browser
  • Playwright – Cross-browser E2E testing at scale
  • Lighthouse – Automated checks for performance, SEO, and accessibility
  • Web Vitals – Field metrics for real user performance
  • axe DevTools / Storybook A11y addon – Automated accessibility auditing

DevOps, Monitoring & Collaboration

  • Git CLI / GitHub – Version control and collaborative workflows
  • CI/CD – Automated testing and zero-config deployments
  • Sentry / LogRocket – Error and session monitoring in production
  • Bundle Analyzer – Insight into bundle size and performance budgets
  • Jira / Notion / Linear – Project and issue tracking for product teams

Ready to work together!?

I could be the React / Design System Specialist your team needs.
Connect and discuss how I can help you succeed.

Contact me

Want to know more?

Work

View a selection of my work. More info on request, for confidentiality reasons, I can't share everything online.

Seven Facets

A portfolio project turned into product: Seven Facets. A complete design system built with React, TypeScript, and Storybook, now with 250+ components.

Services

Discover my range of services, including consultancy, hands-on development, and ongoing support for your team's needs.

Contact

Reach out if you have any questions, want to discuss a project, or just want to say hi.
Feel free to visit my LinkedIn profile for more details on my experience and background.