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-500


                        .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

`.stack`

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

Child

`.horizontal .space-evenly`

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

Child

`.horizontal .space-between`

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

Child