Welcome to my design page

This page shows off some of the design elements used on this page. The "boxy" style is copied from Heydon Pickering & Andy Bell every-layout.dev. That is also where the .stack, .center, and some other classes come from. I highly suggest to check it out.

Text colors

Simple color palette that gets inverted for dark mode. The brand color stays across both color modes.

.text-gray-50 .text-gray-100 .text-gray-200 .text-gray-300 .text-gray-400 .text-gray-500 .text-gray-600 .text-gray-700 .text-gray-800 .text-gray-900 .text-brand

Text styles

Minimal text styles too allow some highlighting but keep a focus on simolicity and clarity.

This is normal text

This is using .text-center

This is using .text-lighter

This is using

.uppercase
This is </code >

Spacing

A perfect fifth spacing scale, here applied to margin-left for demonstration. All margins and paddings are based on the scale below to give a consistent clean look.

--s-5

--s-4

--s-3

--s-2

--s-1

--s0

--s1

--s2

--s3

--s4

--s5

.stack-small

The based on the .stack from every-layout.dev but with a vertical space of --s1

Child
Child
Child

.stack

The larger of the two stacks, using --s3 to give separated items more empty space.

Child
Child
Child

.horizontal .space-evenly

Used space out the social networkling icons evenly on a line.

Child
Child
Child

.horizontal .space-between

Used to space the navbar out, ensuring there is an item on each edge

Child
Child
Child