sharick.xyz Home Blog Projects Directory Misc Contact

Design

This page outlines the design elements I use to create the website's look. I have it here both for my own reference, and for anyone else who wants to learn about my design without digging into developer tools. This is a living document, which will be updated regularly whenever I change aspects of the site.

Fonts

The primary font I use on this website is Inter by Rasmus Andersson, which is available under the SIL Open Font License 1.1. For monospaced text, I use Fira Mono by Mozilla, which is also under the SIL Open Font License 1.1. Currently, all non-monospaced text uses Inter, although in the future I might change parts of the UI to use another font instead.

Colors

In light mode, the background is composed of mild yellows #fdf6e3 and #faeecf, with orange #fdb445 for borders and emphasis, in order to create a "solarized" look. Links use toned-down blue #26a2db and purple #c24ada, with a highlight on hover in bright green #c3fada, in order to fit better with the color scheme and create a unique look.

In dark mode, the background is instead dark gray #6b6b6b and #646363, and near-black #292929 for borders and emphasis. Links use an even more washed-out blue #98c2d6 and purple #eb88ff than in light mode, and the highlight on hover is dark green #59886c. The text color is a slightly off-white #fff3e5.

Logos

My favicon, and the current only logo for this site, is the text s.d in size 192 Inter Semi Bold, inset into a black circle of line width 20px and inner radius 240px. "s.d" represents my initials in reverse order, as well as the domain name sharick.dev that I plan to transition towards in the future. I'm not super satisfied with this logo, so I might change it.