Homesite Style Tile
This style tile includes common, base styles determined as part of the University of Minnesota Twin Cities homepage redesign in 2014. Please contact firstname.lastname@example.org with any questions.
A light color palette is used. The foreground and background color combinations listed meet or exceed WCAG 2.0 level AA conformance for large text sizes, defined as 18px or larger (18px being the base text size in this style tile; only code examples are smaller). All combinations listed also meet or exceed WCAG 2.0 level AA conformance for normal text sizes except for the sunny and medium gray background colors.
The default text color is “stormy” (#404d5b). Third-level headings and down (
h3–h6) use “medium gray” (#8a8a8a).
- maroon (#7a0019) with white for foreground/text color
- light gold (#ffd75f) with stormy for foreground/text color
- stormy (#404d5b) with white for foreground/text color
- sunny (#0095b6) with white for foreground/text color
- med. gray (#8a8a8a) with white for foreground/text color
- light gray (#d5d6d2) with stormy for foreground/text color
- lighter gray (#f0efee) with stormy for foreground/text color
- off-white (#f9f7f6) with stormy for foreground/text color
We use Raleway as the primary typeface throughout the site, using a single font stack (excluding
<pre> and similar elements/styles that may call for monospaced fonts). We rely on the full range of
font-weight levels (100-900) available for Raleway (using only 400–600 in this style tile) along with
letter-spacing to work with a single typeface. Common, sans-serif fonts follow in the stack; there is no serif or alternative stack.
font-family: 'Raleway', Helvetica, 'Helvetica Neue', 'Futura', Verdana, 'Geneva', sans-serif
font-size ranges from
18–36px). All headings use
letter-spacing: 0.025em, and have
font-weight: 400 unless otherwise specified.
- Heading 1 (36px)
- Heading 2 (27px)
- Heading 3 (24.75px)
- Heading 4 (22.5px)
- Heading 5 (20.25px
- Heading 6 (18px,
For standard body text we use a large base
font-size of 18px (
font-size: 112.5%). Body text—and text in general—use
line-height: 1.35em and