Colors

The website incorporates the following color rules from page 3 of the brand standards.

  • We used Samford's primary colors, blue and red, prominently throughout the design.
  • We used Samford's digital secondary colors, gray and sky blue as accent colors.
  • We used Pantone's official hexidecimal (#0C2340) or RGB (12, 35, 64) equivalent when representing Samford's primary blue (Pantone Matching System 289).
  • We used hexidecimal (#BD1F2D) or RGB (189, 31, 45) equivalent when representing Samford's primary red (Pantone Matching System 200).
  • We used Pantone's official hexidecimal (#64CCC9) or RGB (100, 204, 201) equivalent when representing secondary color Sky Blue (Pantone Matching System 325).

Fonts

The website incorporates the following typography rules from page 4 of the brand standards.

  • We used Chronicle Deck Bold for display text like page titles, quotes, calls to action, information graphics and headlines throughout the site.*
  • We used Whitney Book for body copy and captions throughout the site.*

*While all modern browsers on Android, iOS, Linux, MacOS and Windows support web fonts, Georgia has been substituted as a fallback font for Chronicle Deck Bold and Tahoma has been substituted as a fallback font forWhitney Book on older systems that do not support web fonts.

Logos

The website incorporates the following logo rules from pages 6-12 of the brand standards.

  • We used the horizontal wordmark in lieu of the bell tower logo (page 6).
  • We left at least 18 pixels (screen equivalent of .25") around the logo to meet the clear zone requirements (page 7).
  • We set the logo height at 72 pixels resulting in a logo width between 292 and 345-pixels wide--which is greater than the 72-pixel minimum width requirement (page 8).
  • We chose to use the white wordmark on a dark blue background (page 9).
  • We chose to use school-specific white wordmarks on a dark blue background for the school sites (page 10).
  • We did not use school or college crossover marks for electronic (page 12).

Styles

Block and Heading Styles
This is a div.

This is a paragraph.

This is a blockquote.Attribution inside a blockquote.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Buttons

Red Button Blue Button Teal Button

Content Boxes

Blue Content Box

Call attention to secondary content.

Gray Content Box

Call attention to secondary content.

Red Content Box

Call attention to secondary content.

Tables

Tables should only be used to present tabular data and may never be used for layout. All tables must contain a descriptive table caption as well as properly scoped headings that comply with WCAG 2.0 AA. If you do not understand these terms or requirements, contact web services for assistance before using tables.
Table Caption
Label 1 Label 2
Row 1 Column 1 Row 1 Column 2
Row 2 Column 1 Row 2 Column 2
Row 3 Column 1 Row 3 Column 2

Templates

Grid System

To make it as easy as possible to create pleasing layouts with a variety of content, Samford's templating system is based on a twelve-column grid arranged in rows. To use the system, simply create a row container and add column containers specifying each container's relative size by declaring the corresponding col class (i.e. onecol, twocol, threecol, fourcol, fivecol, sixcol, sevencol, eightcol, ninecol, tencol, elevencol, twelvecol). The columns in each row must add up to total of 12. The final column in the row must include the class last.

Content Design Library

In addition to providing cascading styles and the grid system, we have created a robust content design library to provide ideas for presenting your content.

View Design Library

Optional Image

Content Box Title

Call attention to secondary content; use blue-box or gray-box to add a background color.