# Metria design system

Metria · June 2024
URL: https://www.edgarlr.com/work/metria-design-system
Site: https://geo.metria.so/components/button

A personal design system in three packages: components, icons and a Tailwind theme. Two sites document them, Geo for the components and Icono for the icons.

<Wide
  src="https://cdn.edgarlr.com/metria-design-system/geo-cover.png"
  width={2708}
  height={1528}
  preload
  alt="The Geo docs open on the Dropdown component — an open menu with a submenu above the code that produces it."
/>

Metria is the design system behind my side projects. I kept hitting the same
problem with them: either they looked like every other project, or they were
missing polish and interaction. So I started pulling the pieces I had built into
one place to reuse, first only the logic and later the design as well. It began
with dropdowns and buttons and grew into modals and accordions.

When Radix primitives came out, I replaced my handmade logic with them. That
gave me a high-quality core and let me spend the time on the design instead:
corners, button effects and the other details.

Today it is about 31 components and around 50 icons, both still growing, plus a
Tailwind theme. I designed the components and icons in collaboration with a
friend, and I built them in code, including optimizing the icons and adapting
them for JSX. Bloques is built with it, and so was Lapsso.