After adding the intro to the site, the plaintext <h1> felt strange—too much text of the same style without much variation in hierarchy. I’ve been planning to replace it with something else, but nothing screamed out to me. Then, I revisited the existing version of my site, which uses a simple square “DT” logo.

Honestly, I still really like this little tag—especially how its color continues above the page when you pull it down. Instead of spinning my wheels trying to think of another option, I decided to keep the logo. Redesigning a site doesn’t mean you need to start from scratch with everything. If a part of the previous design still holds up, use it.

When carrying over the logo from the other codebase, I did find a couple ways to improve it. For one, the SVG didn’t have a <title> tag, so the logo wouldn’t be described well for screen readers, or display a tooltip when hovered. I also took this opportunity to make use of CSS variables to assign the color of the logo and background above the fold. Now, when I want to specify a different color, I simply need to set --accentColor on the :root selector. For now, I hardcoded the value as blue to add any sort of accent color to the page. I refrained from picking a really nice color upfront because I want to encourage myself to replace it when I’m ready to consider all of the site’s colors at once.