PUXL /ˈpʌksl/ — [pak-sl]
Build the accessible Web.
Save energy.

PUXL is a free and open-source and eco-friendly library to create front-end Web interfaces.
It helps you build accessible and responsive sites with lightweight HTML.

  • Live accessibility errors detection: mark the elements that fail and include the solution ready to copy, paste and solve.
  • Automatically calculates the perfect color tone that passes the accessible contrast tests.
  • Simple and short class names to build Webs intuitively and with less HTML and divitis.
Documentation Download v1-beta


Accessibility prevention

As you build your interfaces, it guides you and prevents common accessibility errors. It is fully customizable (including the appearance of select and checkbox) and perfect for heavily loaded HTML sites.
PUXL detects accessibility errors automatically and shows them in the browser, describing the error and providing a solution in a copy-paste-solve way.

Automatic color contrast

Load the colors you want in the palette, compile and let PUXL handle the heavy work in colors for buttons, backgrounds, text, borders... all over your site.
Achieving an accessible color contrast will no longer be a problem thanks to the integrated color algorithms.

Easy to use

Class names use industry conventions so you can start using PUXL in no time. We have detached ourselves from the names of long classes and unnecessarily nested nodes that overpopulate HTML.
A simple and semantic structure improves search engine indexing and makes your SEO easier.


PUXL elements are written with the minimum necessary code. Compounds that use JavaScript do not require external libraries to function.
You can compress your styles and SVG icons in a single CSS stylesheet, and avoid having to load an entire font.

Save energy

The less code your sites have, the lower the load for your servers and the lower their consumption. People can also navigate using less data.
Reduce the cost of data and electricity bills for the pocket and our Mother Earth.

The latest Web technologies

Dynamic layouts with calc(), CSS custom properties (or CSS variables, they get along really well with JavaScript!), flexbox, grid, animation and many others have come to stay.
We also wanted to include support for ltr/rtl and PUXL icons. We could not leave them out of the party.

Modular and extensible

PUXL is written in SASS and pure JavaScript. Its modular architecture allows you to select just the code you need for your Webs, and not one more byte. Choose which elements and compounds to load with _setup.scss for your next project or create your own extensions.



We help you build your career, reduce development time and add more value to your Web developments. With our practical training plan, based on the use of PUXL, we can offer accessible interfaces in a very short time.


We provide you access to our experts and support services, which will help you create the interfaces of any Web project.
Our approach is open and collaborative. It gives you direct access to our specialists, to the latest updates on the product and advice on the most recommended practices.


Our themes are designed as an extension of PUXL, and created for specific needs. This means that PUXL adapts to your project, adding completely new components, utilities and complements.