Site Style Guide

This page describes some of the features of your WordPress-powered website.

A Cover Block, aligned full width, with optional 30% orange overlay

Styles

CSS separates content from presentation. The majority of presentation effects (e.g. background colors, borders, colors, columns, font type, font-size, layout, line height, margins, etc.) of page elements (including headers, subheaders, paragraphs, lists, links, etc.) are determined by the Theme CSS files.

Typography

The default body font is Roboto, a sans-serif font.

Heading 1: 36 pixels, 300 weight (44 pixels on large monitors; 60 pixels on extra large monitors)

All Headings should be followed by at least 1 sentence of explanatory text.
You can create a non-breaking paragraph (no bottom margin) by holding down the Shift key while pressing Enter/Return.

Huge font (28 pixels): for short lead-ins (32 pixels on large monitors; 40 pixels on extra large monitors)

Large font (24 pixels): for 1 sentence attention-getting introductions (28 pixels on large monitors; 32 pixels on extra large monitors).

Heading 2: 24 pixels, 300 weight (32 pixels on large monitors; 40 pixels on extra large monitors)

Medium size paragraph 20 pixels; (21 pixels on large monitors; 24 extra large monitors): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in imperdiet mauris, a ullamcorper risus. Aenean scelerisque arcu nec fermentum tempus. Sed ut cursus sem, vitae pellentesque ante.

Heading 3: 21 pixels, 300 weight (24 pixels on large monitors; 28 pixels on extra large monitors)

Lorem ipsum paragraph: 16 pixels; (18 pixels on large monitors; 21 pixels on extra large monitors). This is bold, or strong, text. Nullam dignissim convallis est. Quisque aliquam. This is emphasized, or italicized text. 53 = 125. Water is H2O. The New York Times (That’s a citation). Underline – do NOT ever do that because underlines are reserved for links only!

Heading 4: 18 pixels, 300 weight (20 pixels on large monitors; 21 pixels on extra large monitors)

Small size paragraph 16 pixels. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in imperdiet mauris, a ullamcorper risus. Aenean scelerisque arcu nec fermentum tempus. Sed ut cursus sem, vitae pellentesque ante.

Separators



List Types (in a 2-Column Block)

Ordered List

  1. List Item 1
  2. List Item 2
    1. Nested list item A
    2. Nested list item B
  3. List Item 3

Unordered List

  • List Item 1
  • List Item 2
    • Nested list item A
    • Nested list item B
  • List Item 3

Blockquote

As we’ve gone through our journey in philanthropy, at each stage there have been partners, friends and colleagues who are thinking the same thing: how do you go from direct service to systems change, how you focus your giving to have more impact.

—Janet Levinger, Seattle Foundation philanthropist and trustee

Pullquote

As we’ve gone through our journey in philanthropy, at each stage there have been partners, friends and colleagues who are thinking the same thing: how do you go from direct service to systems change, how you focus your giving to have more impact.

—Janet Levinger, Seattle Foundation philanthropist and trustee

Text Links and Button-Style Links

Text links are automatically underlined

Links to PDFs automatically include an icon

Although PDF documents can open in new windows, to adhere to accessibility and usability guidelines links to other sites and pages should not open in new windows.

Colors

Web Content Accessibility Guidelines (WCAG) level AA requires a minimum color contrast ratio of 4.5:1 for normal text; and 3:1 for large text (19 pixels and bold; or 24 pixels)

Black: hex #000000, rgb(0,0,0) | Color Contrast 21:1

Dark Grey: hex #323a3d, rgb(50,58,61) | Color Contrast 11.6:1
Currently, dark grey is the default color for all body text, including headers.

Grey: hex #485257, rgb(72,82,87) | Color Contrast 8:1

Blue: hex #74ccd3, rgb(116,204,212) | Color Contrast 11.3:1

Blue: hex #74ccd3, rgb(116,204,212) | Color Contrast 6.3:1

Blue: hex #74ccd3, rgb(116,204,212) | Color Contrast 1.85:1
Fails to meet WCAG AA contrast guidelines at all font sizes

Green: hex #adc05c, rgb(174,193,92) | Color Contrast 10.5:1

Green: hex #adc05c, rgb(174,193,92) | Color Contrast 5.8:1

Green: hex #adc05c, rgb(174,193,92) | Color Contrast 2:1
Fails to meet WCAG AA contrast guidelines at all font sizes

Orange: hex #f16623, rgb(242,101,34) | Color Contrast 6.7:1

Orange: hex #f16623, rgb(242,101,34) | Color Contrast 3.7:1
Must be large text to meet WCAG AA contrast guidelines

Orange: hex #f16623, rgb(242,101,34) | Color Contrast 3.15:1
Must be large text to meet WCAG AA contrast guidelines

Yellow: hex #fba81c, rgb(251,168,28) | Color Contrast 10.7:1

Yellow: hex #fba81c, rgb(251,168,28) | Color Contrast 5.9:1

Yellow: hex #fba81c, rgb(251,168,28) | Color Contrast 1.95:1
Fails to meet WCAG AA contrast guidelines at all font sizes

Light Grey: hex #dddddd, rgb(221,221,221) | Color Contrast 5.8:1

Secondary Colors

Red: hex #FF1242, rgb(255,18,66) | Color Contrast 5.4:1

Red: hex #FF1242, rgb(255,18,66) | Color Contrast 3:1
Must be large text to meet WCAG AA contrast guidelines

Red: hex #FF1242, rgb(255,18,66) | Color Contrast 3.9:1
Must be large text to meet WCAG AA contrast guidelines

Purple: hex #800047, rgb(128,0,71) | Color Contrast 10.5:1

Blue Grey: hex #324D59, rgb(50,77,89) | Color Contrast 9:1

Structure

The site layout is mobile responsive – optimized for 1,280 pixel x resolution monitors. The site uses a custom-branded _Underscores theme. There are 2 optional Page Templates:

  • Default Page Template
    content area has a maximum width of 980 pixels
  • Full-Width Page Template
    content area has a maximum width of 1,280 pixels

Posts vs. Pages

Posts should be used for multi-relational, categorical content, as well as any time-sensitive content. Posts can be used more dynamically throughout the site than pages.

Pages should be used for ‘static‘ content that does not need to be archived.

Latest Posts Block – filtered by Blog Category

  • Year-end 2022 Through a Philanthropic Lens
    Those who work with donors must be ever mindful that their hearts don’t take a day off. Still, the head has a critical role to play in bringing tax and financial considerations to bear so that charitable benefit can be maximized. By Bill Zook, Senior Advisor, Gift Planning To paraphrase […]
  • Neighbor to Neighbor expands to SeaTac/Tukwila
    SeaTac/Tukwila communities are creating a region where residents work together so everyone thrives; N2N’s expansion aims to bolster their efforts with support and new investments. For more than 30 years, Neighbor to Neighbor (N2N) has advanced racial equity by investing in the power of place and community. This commitment continues […]
  • 2022 Annual Investment Briefing
    Annual Investment Briefing Monday, November 7, 20223:00 – 4:15 pm Join us to learn more about Seattle Foundation’s investment strategy as well as overall market trends. Representatives from Crewcial Partners, Seattle Foundation Investment Committee and our management team will discuss how our investment strategy ensures the judicious stewardship of our […]

Widgets (footer)

“Widgets” are used in the sitewide footer area.

Only site Administrators can edit Widgets via Appearance/Widgets, from within the WordPress Dashboard.

Media Library

The Media Library contains all your uploaded images and file documents (PDFs, .DOCs, etc.). Although images can be uploaded as any dimension, your custom WordPress theme provides 3 default sizes to maintain better brand consistency:

square thumbnail image, aligned right, rounded style applied
  1. Thumbnail: 150 pixels wide x 150 pixels tall (cropped square, not proportional)
  2. Medium: 300 pixels wide x 300 pixels tall (max)
  3. Large: 1024 pixels wide x 768 pixels tall (max)
  4. Featured (panorama header) Images, for Cover Blocks and full-width Images: recommend custom crops from 16:9 ratio (standard) to 2:1, but 3:1 to 4:1 can also work, depending on the image subject matter. Taller images, e.g. 16:8 (2:1), often work better for Cover Blocks where the focal point can be selected from a larger area.
    1,600 pixels is a moderate width that fits a majority of desktop resolutions; this width generally scales up well for larger monitors without having an undue impact on page load speed. By default, Cover Blocks display panorama images with a height of 430 pixels
    1600 pixels x 430 pixels = 3.7:1 aspect ratio
    1600 pixels x 800 pixels = 2:1 aspect ratio
    1600 pixels x 400 pixels = 4:1 aspect ratio

A Cover Block, aligned wide, with optional 30% blue overlay

Seattle skyline

A Media & Text Block, with optional background color, aligned full width

A Media & Text Block, with optional background color

Seattle skyline
Seattle skyline

A Media & Text Block, with optional background color, and outline button link for darker backgrounds

Image settings can be configured by site Administrators via Settings/Media within the WordPress Dashboard.

The Media Library includes a Title and Alt Text associated with each image. The Alt Text is what screen readers and search engines ‘see.’

It’s important to use semantic naming conventions for both the Title and Alt Text. For example, an appropriate Title might be: headshot: FirstName LastName; and appropriate Alt Text might be: FirstName LastName, headshot. That method allows all of your headshots to display in order in the Media Library, under headshot, instead of by name – making them easier to find.

Embedded Video

Site Information

Domain Registrar: Network Solutions
Domain Registrant: anonymous
Domain Expiration: Nov 17, 2025
Domain Web Host: WPEngine
Domain Email Host: Office 365

SeattleFoundation.org is hosted on a LAMP (Linux Apache MySql PHP) web server, running PHP 7.4, that meets WordPress requirements.

Site Statistics (effective October 2022)

Note: HTML tables should be used only for tabular data – not for layout purposes. Because tables are not optimized for smaller mobile devices, when necessary, use as few columns as possible and keep table cells fluids (i.e. no “fixed widths”)

Performance Metriclive Sitecore CMS homepage (October 2022)New WordPress homepage (October 2022)
Google Lighthouse: Accessibility87/100100/100
Google Lighthouse: Best Practices75/10092/100
Google Lighthouse: Mobile Speed46/10079/100
Google Lighthouse: Desktop Speed60/10087/100
Google Lighthouse: Search Engine Optimization83/10077/100
WebPageTest Speed Index9.4682.771
Total Homepage File Size5.733 Mb (3.01 Mb Images + 2.2 Mb Scripts + 398Kb CSS + 162 Kb Fonts + 67 Kb HTML)1.08 Mb (865 Kb Images + 9 Kb Scripts + 69 Kb CSS + 150 Kb Fonts + 13 Kb HTML)
Total Web Server Requests59 (24 Images + 19 Scripts + 8 CSS + 7 Other + 1 HTML)21 (7 Images + 3 Scripts + 9 CSS + 1 Fonts + 1 HTML)
Total Homepage Load Time~9.5 seconds~2.8 seconds
WebPage Test Speed Index: median = ~3.591; top 10% = <1.388
In 2021, the average page size = ~2.4 Mb and median page size = ~2.1 Mb.
Database-driven websites, like WordPress, are more performance optimized when server requests are < 40 – 60.

Site Credits

WordPress Theme Development: Scott Marlow

SeattleFoundation.org is powered by WordPress – an award-winning, open source, semantic Content Management System (CMS) used by over 80 million sites. WordPress powers 1 of every 5 new websites.

Software Updates

Periodically, Automatic (the makers of WordPress) release feature updates. Site Administrators can update WordPress.

Help & Support

You can find support at wordpress.org (NOT wordpress.com, the free blog hosting platform). The most recent WordPress for Dummies book is a good resource.