Design System

This page contains my (work in progress) personal design system. The goal of this design system is to create a consistent user experience across my projects and to make it easier to reuse components between my projects.

This design system is roughly based on the Atomic Design Methodology, with my design system split into atoms and molecules (for now), I will later expand on these as I need to. Atoms are the most basic building blocks (like buttons, form inputs, etc.). Molecules combine atoms together to form useful UI elements that server a purpose (e.g. a form that comprises form inputs and buttons)

This design system is built off Tailwind CSS.

Atoms

logo

Typography

Inter is the display font I'm using, it's a very popular font at the moment. In the future I might look at something more uncommon to add some individuality.

JetBrains Mono is the monospace font.

Almost before we knew it, we had left the ground.
Almost before we knew it, we had left the ground.
Almost before we knew it, we had left the ground.
Almost before we knew it, we had left the ground.
Almost before we knew it, we had left the ground.

Iconography

Material Symbols is used for icons.

close
close
search
search
home
home
content_copy
content_copy
settings
settings
person
person

Panel

Panels are used for storing content

Hello world
p-2 m-1 rounded-md bg-zinc-default text-white

Colors

white
black
zinc-lighter
zinc-light
zinc-default
yellow-default

Buttons

px-4 py-1 font-semibold text-black transition-all rounded-md bg-yellow-default hover:bg-yellow-600

Pills

Molecules