Creating simple CSS

Styles in this CMS are managed through the style.css in the root folder. But unlike other CMS platforms, the information is not loaded with a separate site, but it is embedded in each and every HTML document created. This allows content to be rendered at page load, avoiding content displacement.

As everythinh with this CMS, CSS will be extremely minimalist. The idea is to maje it responsive with time, but I will start building it for desktop first. Only vanilla CSS will be used.

Color palette

As we just entered 2024, let's pay tribute to this new year, and use the New York Fashion Week Spring 2024 Color Palette as inspiration. I will use the official Pantone website to pick the colors:

Color Pantone HEX
Rooibos Tea 18-1355 TCX #a23c26
Orangeade 17-1461 TCX #e2552d
Watercress 17-0220 TCX #748c69
Desert Flower 15-1435 TCX #ff9687
Chambray Blue*
*due to low contrast, changed to: #d0e4ff
15-4030 TCX #9eb4d3
Pastel Lilac 14-3812 TCX #bcafcf
Marlin 18-3932 TCX #515b87
Lemon Drop 12-0736 TCX #fdd878
Mint 16-5938 TCX #00a170
Capri 15-4722 TCX #44bbca

I was using this website to translate Pantone colors to HEX.

  • Main color: Marlin
  • Main contrast color: Pastel Lilac
  • Headers color: Orangeade
  • Link colors: Mint


I will be using this Figma template for layouts and dimensions, essentially braking the responsivness in two widths: 1280px and 375px.

Desktop dimensions

  • Inner content width: 1000px (header, hero images, main titles)
  • Article width: 660px
  • Image inside article width: 660px (height 370px)


  • Logo: Arial
  • Headings: Arial
  • Navigation links: arial
  • Text: Times New Roman