Colors

This chart has been created with data created by myself, and enhanced with generative AI from Microsoft's Copilot. Clicking on any color from the chart will copy that color to the clipboard in whichever format is currently displaying.

To change the format of the colors, use the first box to the right. The second box will adjust the opacity of the colors which will be reflected in the colors output in the table.

Color System:

Opacity:

Main Colour Highlight Light to Dark Shadow Complimentary Colours

Fonts

Font-Family CSS Options Font-Variation
-Settings		 Font-Weight
Geologica
  • font-optical-sizing: auto;
  • font-style: normal;
  • "slnt" 0 - 100
  • "CRSV" 0 / 0.5 / 1
  • "SHRP" 0 - 100
  • 100 - Thin
  • 200 - Extra Light
  • 300 - Light
  • 400 - Regular
  • 500 - Medium
  • 600 - Semi Bold
  • 700 - Bold
  • 800 - Extra Bold
  • 900 - Black
League Spartan
  • font-optical-sizing: auto;
  • font-style: normal;
  • 100 - Thin
  • 200 - Extra Light
  • 300 - Light
  • 400 - Regular
  • 500 - Medium
  • 600 - Semi Bold
  • 700 - Bold
  • 800 - Extra Bold
  • 900 - Black
Mona Sans
  • font-optical-sizing: auto;
  • font-style: normal;
  • "wdth" 75 - 125,
  • 200 - Extra Light
  • 300 - Light
  • 400 - Regular
  • 500 - Medium
  • 600 - Semi Bold
  • 700 - Bold
  • 800 - Extra Bold
  • 900 - Black

Text-Styles

Style/Class Element Font-Family Font-Size Font-Weight Font-Variation
-Settings		 Gradient Used
Title <h1> Geologica 6vmax 900
  • "slnt" 0
  • "CRSV" 1
  • "SHRP"100
 conic-gradient(from 0deg at 50% 50%, #00ffff, #3108ff, #ff0faf, #ff1327, #ff8b17, #ecff1b, #69ff1e, #26ffdb);
Heading <h2> Geologica 5.5vmax 750
  • "slnt" 0
  • "CRSV" 1
  • "SHRP"100
Subheading <h3> League Spartan 4.5vmax 650 linear-gradient(135deg, #222222 0%, #808080 35%, #aaaaaa 50%, white 60%, #a9a9a9 80%)
Body <p> Mona Sans 1.75vmax 400
  • "wdth" 110