Site Styles
You're a curious one! Here's a page I build for all my sites to have design decisions and styles documented.
Color
I try to keep my personal site lightweight and easy to maintain. Meaning I avoid excessively complex systems when I can, but to maintain consistency throughout I still use a basic token system to enforce more deliberate and restrained design choices.
Neutral Scale
Neutral
50
Neutral
100
Neutral
200
Neutral
300
Neutral
400
Neutral
500
Neutral
600
Neutral
700
Neutral
800
Neutral
900
Neutral
950
Brand Scale
Brand
50
Brand
100
Brand
200
Brand
300
Brand
400
Primary
Brand
500
Brand
600
Brand
700
Brand
800
Brand
900
Brand
Accent
Opacities & Overlays
Dark
Subdued
Dark
Subtle
Dark
Strong
Light
Subdued
Light
Subtle
Light
Strong
Typography Colors
Text Light
Subdued
Aa
Text Light
Subtle
Aa
Text Light
Strong
Aa
Text Dark
Subdued
Aa
Text Dark
Subtle
Aa
Text Dark
Strong
Typography
I find typography to often be the most expressive part of an interface, and with this iteration of my site, I tried to remain as restrained as possible to keep the tone and style of the site professional and neutral while presenting my work faithfully and honestly, without my personal brand interfering.
Headings
Sphinx of black quartz, judge my vow.
H1
1.75 rem
Sphinx of black quartz, judge my vow.
H2
1.25 rem
Sphinx of black quartz, judge my vow.
H3
1 rem
Sphinx of black quartz, judge my vow.
H4
1 rem
Sphinx of black quartz, judge my vow.
H5
1 rem
Sphinx of black quartz, judge my vow.
H6
1 rem
Body
Sphinx of black quartz, judge my vow.
Body
Default
Sphinx of black quartz, judge my vow.
Body
Small
Sphinx of black quartz, judge my vow.
Span
Navigation
Components
This is the area where I try to be the most efficient. If anything will be used more than once, I try to make a component to reduce the overhead of maintaining too many instances of the same design across pages.
Logo
My logo is mostly a relic of my old graphic design days. I designed it freshman year of college and to this day I still think it holds up. It's weird in a great way and quite unique, but as the years pass I find fewer and fewer reasons to continue using it since my name is really the important part of the brand.
Tags
Tags are my most reused element around the site, primarily on my case studies and other work examples.
Tag Text
Tag Text
ProjectItem
Tag
Project Title
Project short description
ShaderGradient
Repeated throughout each page on the site, it's my one fun bit of design.