School Specialty Web Style Guide

A work in progress!

Brand Identity

  • Brand Mission Statement
  • Our Vision
  • Our Values
  • Brand Personality
  • Target Audiences

Brand Identity


Refer to corporate print style guide and translate for web.

Logo Usage


Palette of brand colors, hex codes/css classes, and proper applications.

Colors Guide


Our library of icons and their applications.

Icons Guide


Need a call to action? Pick your button.

Buttons Guide

Hero Images

Standard banner recommendations

Hero Guidelines

Other Images

thumbnail images, product images, responsive images... all other things jpg and png!

Image Guidelines


Sometimes a page utilizes anchor links to help a user jump back and forth between sections on the same page. We have a few ways to present anchor links on our marketing pages.



Standard web elements as they are with alternative styling options depending on application.

  • Links
  • Body <p> text
  • Font sizes & weights

Defaults Guide

Accessiblity + SEO

Guidelines on visual design and HTML formatting that ensures users of all abilities can access our content + SEO best practices.

Accessibility + SEO Tips


Default styles for H1-H6, when to use each, why ordering and semantics matter heavily here, and other style alternatives.

Headings Guidelines

Writing for the Web

Best practices, brand voice/tone across all digital marketing (web, social, email).

Writing Guidelines


Best practices for when and how to use lists + formatting options.

  • Ordered lists
  • Unordered lists

Lists Guidelines


Explain ideal spacing between elements on a page, line-height, give examples & helper classes...

Spacing Guidelines


Some page types follow a templated layout...


Brand Identity

From crayons to curriculum to comprehensive learning environments, we offer over 150,000 products thoughtfully designed to work together to elevate outcomes and transform not just schools, but students themselves.

Brand Mission Statement

School Specialty provides best-in-class products and services to transform more than classrooms.

Our Vision

To engage and inspire, with everything from crayons to curriculum to complete learning environments.

Our Values

People • Passion • Purpose

We demonstrate our values in these ways:

Clear, open communication in a place that all can access as needed

We leverage diverse talents, perspectives, and resources that challenge and push us forward as we work together on similar goals

Customer Satisfaction
Creating an effortless experience for our internal and external customers

Continuous Improvement
Lead by example and strive for excellence every day

To do your best and treat everyone with dignity and respect

Brand Personality

Helpful, approachable, trusted, proven, resource...

Target Audiences

Four key personas our customers represent

Superintendents, School Board Members, Business/Purchasing Directors

Principals, Curriculum/Instruction Directors and Coordinators, Academic Assessment Directors

Classroom Teachers, Specialty Teachers, Instructional Coaches and Aides

School Secretaries, Administrative Assistants, Finance/Purchasing Director

Back to Top


Our logo is a visual representation of our brand.

The victory logo symbolizes the success, joy, and endless possibilities that exist among educators, students, and School Specialty.

The School Specialty logo consists of the following elements:

This is the main logo and should be used whenever possible, unless size constraints prevent such use. Whenever possible, the School Specialty logo is to be used in its entirety.

The School Specialty logo must always be presented as clearly as possible. For this reason, backgrounds must be controlled to ensure proper contrast. “Busy” backgrounds must be avoided as they detract from the clarity and impact of the logo. Also the format of the logo must not be altered in any way.

Back to Top


Primary Dark Blue
HEX #0f6cb6
CMYK 94-54-0-0
RGB 15-108-182

Primary Green
HEX #72c267
CMYK 66-0-87-0
RGB 114-194-103

Primary Light Blue
HEX #00a9cc
CMYK 86-5-15-0
RGB 0-169-204

Tip: Use rgba background colors to create tints of our primary colors. This can assist in situations where easier readability and color contrast is desired.


A featured heading

Uses CSS: background-color: rgba(114, 194, 103, 0.2);

The background color uses the rbg value for our primary green, where the a (alpha) value has been adjusted to create sufficient ADA-compliant contrast.

Back to Top

icons content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In placerat vel nibh eu dignissim. In hac habitasse platea dictumst. Nulla id elit molestie leo varius tincidunt eu sit amet nulla. Integer vel sem purus. Sed condimentum nunc vel vestibulum congue. Sed eget ex vehicula, tristique risus gravida, commodo neque. In hac habitasse platea dictumst. Nullam vestibulum elit et mi lobortis venenatis. In hac habitasse platea dictumst. Praesent id urna ornare, finibus purus id, tristique lectus. Nam condimentum aliquet metus, sit amet feugiat massa venenatis non. Donec at aliquet ex. Quisque in massa sit amet massa sodales accumsan. Maecenas eget lorem ultrices, feugiat massa a, hendrerit elit. Phasellus sit amet rhoncus libero. Pellentesque sagittis lorem purus, ac tempus augue mattis sed.

Nulla facilisi. Ut nec tortor placerat, vulputate justo volutpat, vulputate magna. Vivamus vitae nibh et massa ornare iaculis. Curabitur consequat in ipsum sit amet maximus. Integer fermentum vestibulum purus, a dictum purus pharetra ac. Aliquam dignissim, turpis id bibendum pulvinar, ligula tellus congue nisl, efficitur rhoncus purus augue eleifend massa. Nulla facilisi. Ut in magna vel diam porttitor faucibus eget at dolor. Suspendisse porttitor est nec nisi bibendum, quis pharetra justo fermentum. Donec vitae lobortis risus, ac iaculis ex. Cras in felis ac purus placerat laoreet vel eu elit.

Back to Top

Buttons + Links

Button Styles

Primary Button

Secondary Button

Small Primary Button

Small Secondary Button

Naming Best Practices

Sometimes a call to action may be an actual action such as "submit," shop now" or "next." In other cases, link text should be descriptive rather than imprecise words such as "click here" or "learn more."

Keeping links descriptive makes our website more accessible, helps search engines crawl our content effectively, and assures the user of what's happening next.

Visually-impaired users need to hear links' meanings, and many non-visually impaired users may skip reading paragraphs and quickly scan links/buttons looking for definitive links that help them find what they need.

Link text should be short and concise, ideally 2-3 words. Examples: "Explore Sax products" or "Read the blog."

Back to Top

Hero Banner Style

Classic Rectangular Stock Photo Banner

This banner style is inherited as the standard heading of a marketing page. Proper usage should be considered. There are concerns about accessibility, such as text over images not being ADA compliant in most situations. High contrast is important to ensure legibility. Further reading

Open Shapes

An "open" look and feel for page hero allows for large typography and tying in SSL shapes branding.

Hybrid Shapes

This banner styles incorprates circles into the traditional retangular banner.

Back to Top

Other Images

Alt Text

Images should always contain alt text. Most importantly this contributes to an accessible web, and it also helps search engines better understand our content. Example: "smiling elementary student painting at school" or "yellow math dice with black numbers" or "Champion Rhinoskin PE Balls." More on Accessibility + SEO

Lifestyle v. Product Photos

website marketing images should be comrpised of a combination of lifestyle and product images. It's important to consider which type of image best tells our story on the website. Generally, product images should be used when the content block is able to be represented by a singular product. When a page or a section incorporates more than one category, and can't be adequately represented by a product image, you may prefer to choose a lifestyle image.

Lifestyle Photo Style

Child or adult has natural expression, gently visceral, caught in the moment — not staged or forced. The student may be involved in an activity related to subject matter, either with props, be in an identifiable environment or implied. Background helps create dimension without competing with the subject’s face.

Lifestyle Photo Examples

Product Image Guidance

When choosing a product to feature, priority should be given to proprietary brands first, or strategic vendor partner brands. Avoid product photos that are overly complicated - the products we feature should be simple, easy to identify and visually appealing.

Product Block Examples

Different content needs - for example: available space and numvber of product/category blocks - may dictate a need for different styles. Here are a few examples.

large product block with additional copy and/or link content

medium product block

small product block with thumbnail

Back to Top

Back to Top

Accessibility + SEO

Best Practices

Aenean accumsan, tortor vel ornare consectetur, ex urna eleifend erat, iaculis tempus nisi magna non arcu. Etiam vitae facilisis velit. Donec malesuada tortor dolor, a semper quam mattis ut. Nulla placerat, elit a finibus malesuada, velit nulla pellentesque lacus, ac dignissim risus lacus eget tortor. Aliquam erat volutpat. Sed vulputate aliquam vestibulum. Mauris condimentum ultrices justo, nec tincidunt nunc ullamcorper eu. Etiam ac imperdiet metus. Nunc vitae feugiat neque, eu pretium orci.

Back to Top


In this section: Style Examples & Best Practices

Heading Style Examples

Numerous heading classes or styling options are available in primary blue, charcoal, or white in various sizes. These 3 colors are best practice for readability and high contrast over light or dark backgrounds.

Giant Blue

Giant Grey

Giant White

Big Blue

Big Grey

Big White

Medium/Large Blue

Medium/Large Grey

Medium/Large White

Medium Blue

Medium/Large Grey

Medium/Large White

Small Blue

Small Grey

Small White

Also see: When you would like to increase the font size of a paragraph beyond the standard "ssi-type__body" class, for example on the "intro text" contained in a hero or featured area, you may use the class "intro-paragraph"

This is an example of an intro paragraph. The text is a bit larger and the line-height is a little roomier. The goal is to the set the text apart from the rest, and give search engines a description of what this page or section is going to be all about.

Heading Best Practices

Headings should describe the page or section's main topic. It is important to make headings meaningful for both users and search engines.

Ex: "Phonics Books for Struggling Readers" vs "Open up their world with the right reader"

The first example above explains to a search engine what kind of content will follow on that page, therefore increasing visibility in search results and site traffic. This is also best practice for keeping our website accessible. Also see Writing Guidelines

Designating a heading as level 1, 2, 3, 4, 5, or 6 should done for semantics, not strictly visual presentation. (i.e. Don't make text into a heading just because you want it to be big and bold.) For example, there may be a one off case where the h1 at the top of the page is not the largest text, and an h3 lower down may be styled more dominantly. Or, if you want to highlight important text, use the <strong> element to make text bold rather than using a heading. Style (use CSS) for presentation, write code (HTML) for semantics.

Example Page Heading Structure: diagram of heading hierarchy

Back to Top

Writing for the Web

Best Practices

Content is king.

Keep content short and concise. Reducing text ensures the important information is most prominent for both humans and machines. Headings should outline the subject of a page in a hierarchy of up to 6 levels (h1-h6.)

Content on the web should answer questions for quick-skimming users and should be considered differently than writing for printed literature. Breaking down information into lists can be helpful. The introductory paragraph is the ideal place to help users and search engines understand what a page is about. Use keywords.

Avoid links that say “click here,” “learn more,” or anything non-descriptive. Some links or buttons may be read out of context, and should make sense to stand on their own in 2-3 words. Also see Links + Buttons

Keep content current and do not copy/paste content from one page to another. Websites with content repeated across multiple pages may rank lower in search results.

Brand Voice and Tone

Copy Voice

Copy voice allows us to create a relationship with our customer. It’s how we build trust, Customers know who we are and what to expect from the products we offer, so they feel comfortable in our brands and their buying decisions.

Our voice is a reflection of how we want our customers to see us: as a knowledgeable, trusted source of information, products, lesson plans and curriculum. We are approachable, passionate about education, the success of students as our top priority, proven, reliable, current trends and issues, updates in standards... xxxxxxx

xxxx straightforward, relatable, authentic, conversational, we use copy that explores and explains the benefits and value of the breadth and depth of our products.

Copy Tone

Copy tone changes based on who we are speaking to. We adjust our copy to meet the needs of the customer, just like in normal conversation.

Based on your audience and subject matter... - celebrating holidays and awards will have a less formal tone, as compared to a straightforward and fact-based tone for subjects like funding, curriculum standards, or literacy.

Web Copy Tone
We speak to the customer like we’re a team. We are here to help them navigate purchasing products that provide the best possible educational solutions for their students and classroom.

Email Copy Tone
Do not use we or us/ speak directly to the customer/teacher as a resource to help them teach ?

Social Copy Tone
Conversational, a helpful informative source for ideas, teacher resources, and lesson plans.

Back to Top