UI Kit

About

Building my own user interface design system is an incredible and rewarding experience.

Beyond stimulating creativity, it's a subtle balance to find the desired artistic direction.

It teachs me many aspects of front-end development: responsive design, BEM naming conventions, browser compatibility, accessibility, and dark patterns.

On the coding aspect, the component-based approach is highly recommended by all modern frameworks. It respect the 'DRY principle' (Don't Repeat Yourself) to have easily maintainable code over time.

In addition to Rails, I used the 'Viewcomponent' gem created and maintained by the Github team.

This UI kit is obviously neither complete nor perfect. I cannot pretend to be a full-time great webdesigner

Colors

Fonts

Handlee

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Heebo

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Press start 2P

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Titles

h1 title

h2 title

h3 title

h3 title

Texts

Design is not just what it looks like and feels like. Design is how it works.

STEVE JOBS

Buttons

Cards

Collapsed Card
Team strenghs

teamplay

attack

defense

freekick

spirit

Team strenghs

teamplay

attack

defense

freekick

spirit

New project

2025

describe your project

E=mc²

EINSTEIN

Neon Card
Dizzy Card

Lists

2024

Supercopa de España, Liga, Supercopa de Europa, Mundiales de clubes, Champion's league

Copa del rey,

2023

2022

Supercopa de España, Liga, Supercopa de Europa, Mundiales de clubes, Champion's league