A mallard duck flying.

About Fowl Waters

Fowl Waters is a monthly magazine that features a different species of waterfowl in each issue. Fowl Waters provides in-depth information about the featured waterfowl, including its habitat range, behaviours, predators. Each issue will include birdwatching tips.

Headings use Amaranth for its slight curves. Body text uses Open Sans for its legibility.

Imagery will be primarily photos with bird subjects in their natural environment.

Colours

The colors of Fowl Waters consists primarily of blues to reflect the water focus of the magazine. Ripe Mango yellow accents are used to convey the joyful nature of the magazine. Color palette courtesy of Color Hunt. Color names identified by looking up the colors' hex codes on color-name.com

  • Skobeloff
  • #006778
  • rgb(0, 103, 120)
  • Used for headings and backgrounds.
  • Blue (Munsell)
  • #0093AB
  • rgb(0, 147, 171)
  • Used for headings.
  • Tiffany Blue
  • #00AFC1
  • rgb(0, 175, 193)
  • Used for buttons.
  • Ripe Mango
  • #FFD124
  • rgb(255, 209, 36)
  • Used for accents and highlights.

Interactive Elements

In-text link

CSS Selector:

.in-text-link

Sample Code:

<a href="#" class="in-text-link">a link</a>

Rendered Element:

This is a link inside some text. Clicking the link will take you to the product listings.

Navigation Link

CSS selector:

.button-nav

Sample code:

<a href="#" class="button-nav">Default Button</a>

Rendered element:

Default Button

Text Input Field with Label

CSS selector:

#input-name

Sample code:

<label for="input-name">Name</label>

Rendered Element:

Image as a Link

CSS selectors:

.image-link-anchor, .image-link-container, .image-link-text

Sample code:

<a href="https://en.wikipedia.org/wiki/Duck" class="image-link-anchor">

Rendered Element:

Wikipedia page about ducks.
Click to learn more about ducks.

A white duck stretching, by E. Vikne, 2009 (https://commons.wikimedia.org/wiki/File:White_domesticated_duck,_stretching.jpg). Copyright 2009 by E. Vikne/Wikipedia.

Typography

Typefaces

  • Amaranth
  • 5 rem
  • rgb(0, 103, 120) or #006778

Heading One

  • Amaranth
  • 3.8 rem
  • rgb(0, 103, 120) or #006778

Heading Two

  • Amaranth
  • italic
  • 3 rem
  • rgb(0, 103, 120) or #006778

Heading Three

  • Amaranth
  • 2 rem
  • rgb(0, 147, 171) or #0093AB

Heading Four

  • Open Sans
  • 1 rem
  • rgb(0, 0, 0) or #000000

Body

Paragraphs

  • Open Sans
  • Max line length: 40rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis, dui in pellentesque volutpat, purus felis malesuada ante, sed vulputate purus justo eu libero. Cras egestas, quam sit amet congue varius, velit ante blandit augue, nec facilisis nibh arcu in est. Fusce id sem vitae neque tempus efficitur. Fusce facilisis in lorem vitae dapibus. Nullam sapien nisl, ultrices hendrerit maximus sed, consequat at enim. Duis porttitor sem sem, sed laoreet erat euismod in. Sed in turpis eget dui semper aliquam. Nunc vitae risus rhoncus, scelerisque neque et, egestas elit. Curabitur egestas eu nulla eget aliquam. Pellentesque eget rutrum nibh, et consequat nisl. Nulla facilisi. Mauris ligula magna, bibendum quis dictum sit amet, posuere non ante. Sed nec porttitor ante. Morbi mattis euismod sollicitudin.

Numbered and Non-Numbered Lists

  • Open Sans
  • 1.3 rem
  • Bottom margin of list items: 16px
  • rgb(0, 0, 0) or #000000
  1. Item 1
  2. Item 2
  3. Item 3

Combined Elements

Main Navigation Bar

Product Listing

Citations