Quercus-Alba Website Style Guide

COLORS

Color Theory: Color Theory Fundamentals Every Web Designer Should Know: Color Theory Fundamentals.

Primary Colors (Yellow, Blue, and Red):

Yellow

#FFFF00

rgba(255, 255, 0, 1)

Yellow

Transparency

at 75%

Yellow

Transparency

at 50%

Yellow

Transparency

at 25%


Blue

#0000FF

rgba(0, 0, 255, 1)

Blue

Transparency

at 75%

Blue

Transparency

at 50%

Blue

Transparency

at 25%


Red

#FF0000

rgba(255, 0, 0, 1)

Red

Transparency

at 75%

Red

Transparency

at 50%

Red

Transparency

at 25%


Secondary Colors (Green, Violet, and Orange):

Green

#00FF00

rgba(0, 255, 0, 1)

Green

Transparency

at 75%

Green

Transparency

at 50%

Green

Transparency

at 25%


Violet

#8F00FF

rgba(143, 0, 255, 1)

Violet

Transparency

at 75%

Violet

Transparency

at 50%

Violet

Transparency

at 25%


Orange

#FFA500

rgba(255, 165, 0, 1)

Orange

Transparency

at 75%

Orange

Transparency

at 50%

Orange

Transparency

at 25%

Color Contrast for Better Readability and Accessibility: As shown above, some text that occurs on colored backgrounds is easier to read than others. To improve text readability, the background and font color must contrast enought to be clearly visible. This contrast is measured as a contrast ratio and should be at least 4.5:1 to meet Web Content Accessibility Guidelines (WCAG). See the Color Resources below for more information.

Color Resources:

  1. To find colors, color codes (Hex, RGB and CMYK), and complementary colors see Color Codes.
  2. To determine hex, rgb, or hsl values see HTML Color Picker.
  3. To mix any two colors together for resulting color see HTML Color Mixer.
  4. Designing for Readability – A Guide to Web Typography Font Readability.
  5. To measure the contrast ratio between background and font color see Adobe Contrast Checker.
  6. WebAIM Web Accessibiity Contrast Checker WebAIM Contrast Checker.
  7. Web Content Accessibility Guidelines WCAG 2.1 Guidelines.
  8. How to Meet WCAG (Quick Reference) WCAG Quick Reference.

Back to Topic List

COLOR SCHEMES

Selecting Color Schemes: Primary and secondary colors can be mixed and combined into color schemes – multiple colors that work together in a web design – using various methods or rules (Monochromatic, Analogous, Complementary, Split Complementary, Triad, and Tetradic) as shown below:

Methods for selecting color schemes
Figure shows Monochromatic, Analogous, Complementary, Split Complementary, Triad, and Tedradic color scheme selection methods.

Color Scheme Exampes: Below are examples of color schemes based on the selection methods shown above. See the Color Scheme Resources at the bottom of this section to find color scheme generators that can be use to create new color schemes.

Color scheme examples
Figure shows examples of Monochromatic, Analogous, Complementary, Split Complementary, Triad, and Triad color schemes.

Quercus-Alba Color Scheme: The color schemes below are a combination of both Analogous and Monochromatic colors based on three Analogous colors (#A69176, #76B739, and #FCC101). The other colors are Monochromatic variations of these three colors. Quercus Alba is the scientific name for a White Oak tree. Hence, the three Analogous colors were inspired by the various parts of the tree (bark-branch [#A69176], summer leaf [#76B739], and autumn leaf [#FCC101]).

Quercus-Alba Color Schemes
Figure shows Quercus-Alba color schemes based on Analougus and Monochromatic colors

Color Scheme Resources:

  1. Seven rules about color palettes that everyone (including non-designers) should know Rules About Color.
  2. Adobe Color Wheel Adobe Colors.
  3. Paletton Color Scheme Generator Pelatton Color Scheme.
  4. Coolors Color Schemes Generator Coolers Color Scheme.
  5. Color Palette Generator by Muzil Colors Muzil Color Scheme.
  6. Largest collection of official brand colors Brand Colors.
  7. Website Color Scheme Ideas and Examples Color Scheme Ideas.
  8. Best Web Design Companies & Web Designers Web Design Examples.

Back to Topic List

FONTS

Font Families – Serif, Sans Serif, and Monospace: Serif fonts have decorative end strokes and are often used in smaller font size because they are easy to read. For example, Serif fonts are used in the body of newsprint, magazines, and books. Sans Serif fonts do not have decorative end strokes and appear plainer than Serif fonts. Sans Serif fonts are typically used in headers and titles and usually appear in larger font size. Monospace fonts have the same horizontal space for each letter or character and appear as an older more traditional font used before the graphic era of computers and typewriters. There are also other font families besides these three such as cursive and fantasy. In addition, fonts are categorized as Web Safe Fonts or Web Based Fonts such as Google Fonts. See the Font Resources list below for more information on font families, web safe fonts, and web based fonts.

Serif Fonts: Use serif fonts to project brand characteristics such as being more traditional, historical, trustworthy, elegant, confident, established, or reputable. Below are examples of some popular serif fonts.

Times New Roman(Web Safe Font)

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Garamond(Web Safe Font)

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Georgia(Web Safe Font)

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Libre Baskerville (Google Font)

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Sans Serif Fonts: Use sans serif fonts to project brand characteristics such as being more modern, casual, informal, friendly, youthful, relatable, trendy, or cutting edge. Below are examples of some sans serif fonts.

Arial(Web Safe Font)

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Calibri(Web Safe Font)

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Helvetica(Web Safe Font)

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Nunito Sans(Google Font)

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Monospace Fonts: Use Monospace Fonts to recreate typewriter or computer print presentations or to create a unique appearance.

Courier News(Web Safe Font)

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Font Resources:

  1. Font Family List Font Families.
  2. MDN Web Docs: font-family use in CSS Using Font Families in CSS.
  3. Sans Serif vs Serif Font: Which Should You Use & When? Sans Serif vs Serif Font.
  4. Typography 101: How to Choose the Fonts for your Brand Choosing Fonts.
  5. Best Monospaced Fonts & Typefaces For Designers Monospace Fonts.
  6. A complete collection of web safe CSS font stacks Web Safe Fonts.
  7. How to use Google Fonts in your next web design project Using Google Fonts.
  8. Google Fonts Google Fonts Website.

Back to Topic List

COMBINING FONT FAMILIES AND TEXT STYLES

Combining Fonts and Styles: Not all font pairings work well together and finding a good combination can be elusive. Below are some examples of font family pairings that work well together. To learn more about font pairings, refer to this article titled Better Together. Also, see Combining Fonts and Text Styles Resources at the bottom of this section for more helpful information.

Font and Style Combinations:

Libre Baskerville(28 pt - Libre Baskerville - Mixing Styles)

FAMOUS QUOTE EXAMPLE(18 pt - Libre Baskerville Uppercase)

“No matter how short or long your journey to your accomplishment is, if you don't begin you can't get there. Beginning is difficult, but unavoidable!” (16 pt - Libre Baskerville Normal)

― Israelmore Ayivor, The Great Hand Book of Quotes(14 pt - Libre Baskerville Bold Italic)

Helvetica & Garamond(28 pt - Helvetica - Mixing Fonts & Styles)

FAMOUS QUOTE EXAMPLE(18 pt - Helvetica)

“No matter how short or long your journey to your accomplishment is, if you don't begin you can't get there. Beginning is difficult, but unavoidable!” (16 pt - Garamond Normal)

― Israelmore Ayivor, The Great Hand Book of Quotes(14 pt - Libre Garamond Bold Italic)

Roboto & Lora(28 pt - Roboto Bold - Mixing Fonts & Styles)

FAMOUS QUOTE EXAMPLE(18 pt - Roboto Regular)

“No matter how short or long your journey to your accomplishment is, if you don't begin you can't get there. Beginning is difficult, but unavoidable!” (16 pt - Lora Regular)

― Israelmore Ayivor, The Great Hand Book of Quotes(14 pt - Lora Bold Italic)

Montserrat & Courier News(28 pt - Montserrat Bold - Mixing Fonts & Styles)

FAMOUS QUOTE EXAMPLE(18 pt - Montserrat Regular)

“No matter how short or long your journey to your accomplishment is, if you don't begin you can't get there. Beginning is difficult, but unavoidable!” (16 pt - Lora Regular)

― Israelmore Ayivor, The Great Hand Book of Quotes(14 pt - Lora Bold Italic)

Quercus-Alba Font and Style Combinations: Below is an example of the font combinations used by Quercus-Alba.

Nunito Sans, Verdana, & Georgia(28 pt - Nunito Sans Bold)

Famous Quote Example(16 pt - Verdana bold)

“No matter how short or long your journey to your accomplishment is, if you don't begin you can't get there. Beginning is difficult, but unavoidable!” (16 pt - Georgia Regular)

― Israelmore Ayivor, The Great Hand Book of Quotes(14 pt - Georgia Bold Italic)

Combining Fonts and Text Styles Resources:

  1. Fifty Perfect Font Combinations to Kickstart Your Next Design Font Combinations.
  2. Free typography for your next creative project Typography for Next Project.
  3. Tips for Combining Different Typefaces in Web Design Mix and Match Fonts
  4. The Art of Mixing Fonts in Web Design Examples of Mixing Fonts.
  5. Thirty-six Font Pairings Font Pairings.
  6. To test readability of text layout at various sizes use Grid Lover.

Back to Topic List