System Design

Photo by Andrew Neel on Unsplash

System Design

System Design


2 min read


Today I would like to take you with me through the journey of styling my hashnode blog with the new custom css feature.

The goal

As I named my blog ProfOnestone's Notepad, I want it to actually look like a notepad in some way. My first thought was to go with the typical legal pad style but I simply don't like the color yellow very much... ๐Ÿคข

So I'll go with a more whiter appearance.

The main elements I need for a notepad styled blog are:

  • a header

  • lined paper

  • a stylisch vertical line

and that's basically all.

1. The color-palette

To get an idea of the colors to use I headed over to Adobe Color Explorer and search for legal pad. This tool just lists you a matching pictures with an extracted color-palette. So awesome! ๐Ÿ‘จโ€๐ŸŽจ

I adjusted a palette to my liking and got rid of the yellow. Finally I created some css variables to hold the colors of the palette.





2. Analyze the existing classes of the blog

To start adjusting the existing classes on my blog I went into the developer tab of chrome and started to analyze the elements.๐Ÿ”๐Ÿ‘€ To save you some time here are the main classes of the home-page that you probably want to adjust:



// main elements





And here you can see how they are layed out on the page:


3. Styling the lined paper-background

For a lined style I had to apply a repeating-linear-gradient as the background-image, alternating between my background-color and my lines-color. I found the typical font-size of the existing text on the blog to be 1.125rem so I decided to come up with a line height bigger than that and settled with 1.8rem.

Did you find this article valuable?

Support Rutuparna Rout by becoming a sponsor. Any amount is appreciated!