Website Design System

Colors

Css colors can be specified in different ways:

DarkBlue HEX#00008B RGB(0,0,139) MediumBlue HEX#0000CD RGB(0,0,205) DodgerBlue HEX#1E90FF RGB(30,144,255) CornflowerBlue HEX#6495ED RGB(100,149,237) SkyBlue HEX#87CEEB RGB(135,206,235) LightSkyBlue HEX#87CEFA RGB(135,206,250)

The CSS opacity property sets the opacity for the whole element (both background color and text will be opaque/transparent). Opacity can be applied with HSLA, RBGA or opacity property. The opacity property value must be a number between 0.0 (fully transparent) and 1.0 (fully opaque).

CSS color can be set on any HTML element e.g. background color, text color, border color

Fonts

Font Selection is Important

Choosing the right font has a huge impact on how the readers experience a website. The right font can create a strong identity for your brand. Using a font that is easy to read is important. The font adds value to your text. It is also important to choose the correct color and text size for the font.

Generic Font Families

In CSS there are five generic font families:

  1. Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance.
  2. Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic look.
  3. Monospace fonts - here all the letters have the same fixed width. They create a mechanical look.
  4. Cursive fonts imitate human handwriting.
  5. Fantasy fonts are decorative/playful fonts.

All the different font names belong to one of the generic font families.

Aboreto font family, normal font style Dancing Script font family, normal font style Merriweather font family, italic font style Poppins font family, normal bold font style

Font Style

The font-style CSS property sets whether a font should be styled with a normal, italic, or oblique face from its font-family.

H1 Main page:

  • font-family: Josefin Sans
  • text-align: center
  • font-size: 80px
  • font-weight: 900
  • text-shadow: 2px 2px 8px black

H2 Subheading:

  • font-family: Merriweather
  • text-align: center
  • font-size: 50px
  • font-weight: 700
  • text-shadow: 1px 1px 4px black

H3 Subheading:

  • font-family: Poppins
  • text-align: center
  • font-size: 35px
  • font-weight: 600
  • text-shadow: 1px 1px 2px black