Design System

Use this design system to make NASPA communications consistent, accessible, and easy to recognize across websites, presentations, reports, social media, and other formats. Each example is rendered as working HTML. Select View Source to inspect or copy the HTML and CSS.

One source of truth: The Brand Portal contains the approved rules. Canva, PowerPoint, document templates, and code-based components should follow this guidance rather than introduce new colors, fonts, or treatments.

Core design rules

Keep these choices consistent in every channel, even when the layout or scale changes.

Guideline

Typography

Use Open Sans for every communication. Establish a clear order with an eyebrow, headline, lead, body, and supporting text. Do not use Lato.
Rendered HTML example

Student Success

Build belonging by design.

Use a clear hierarchy so readers can find the message, understand it, and act.

Guideline

Color

Build color in a clear order: lead with NASPA Blue and NASPA Green, use Navy as a supporting anchor, use Cyan, Emerald, and Mint as accents, and use neutrals for structure and readability. Use Navy text on Emerald or Emerald details on Navy. On light backgrounds, Emerald is a decorative accent, not essential text or a meaningful icon. Never rely on color alone to communicate meaning.
Rendered HTML example

Primary

NASPA Blue#0E6BB1
NASPA Green#007960

Supporting + accents

Navy#043352
Cyan#00B3F0
Emerald#34B879
Mint#BAF5DC

Neutrals

White
Cloud
Mist
Slate
Ink
Guideline

Geometry

Use square corners and straight edges. If a platform cannot produce square corners, keep the radius at 5px or less. For graphic accents, use only the approved outlined diamond artwork or one of the two approved three-triangle groupings. Do not isolate, rotate, rearrange, or recolor the shapes.
Rendered HTML example

Square by default

Use only supplied shape artwork; keep it secondary to the message.

Guideline

Spacing & hierarchy

Use one clear reading order, consistent alignment, and generous whitespace. Adapt scale to the format while preserving the same content roles.
Rendered HTML example
01

Start with the outcome.

Group related information and let spacing show the relationship.

Brand guidance in practice

Use these examples when making common design decisions. Each one explains what to protect and what to avoid.

Guideline

Logo and co-branding

Place the full NASPA logo first and keep the partner logo optically balanced. Preserve the NASPA “S” clear space around the logo. Between each logo and the divider, leave space equal to the width of the “N” in NASPA.

Approval: Submit every proposed co-branded lockup through the MarComm request form before publication.

Rendered HTML example

Light background

NASPA
Partner
Logo

Example only. Keep clear space equal to the width of the “N” in NASPA on both sides of the divider, and preserve both organizations’ other clear-space requirements.

Dark background

NASPA
Partner
Logo

Example only. Keep clear space equal to the width of the “N” in NASPA on both sides of the divider, and preserve both organizations’ other clear-space requirements.

Guideline

Approved color combinations

Start with approved high-contrast pairs. Check contrast whenever text size, weight, opacity, or background changes; never treat a palette color as automatically accessible in every combination.

Accessibility note: Body text should meet at least WCAG 2.2 AA contrast. Labels and icons must not rely on color alone.

Rendered HTML example
Navy + WhiteApproved starting pair
White + NASPA GreenApproved starting pair
Mint + NavyApproved starting pair
NASPA Blue + WhiteApproved starting pair
Guideline

Backgrounds and graphic elements

Crosshatch, lines, diamond grid, and diamond dots are background treatments. Keep them secondary to the message and protect text legibility. Use approved diamond and triangle artwork separately from these background patterns.

DoUse one background treatment at a time.

Don’tPlace detailed patterns behind long text or combine several graphic elements in one small area.

Rendered HTML example
Crosshatch background
Lines background
Diamond grid background
Diamond dots background
Guideline

Corners, borders, and spacing

Use square corners, one-pixel neutral borders, and spacing increments that create a clear reading rhythm. If a platform prevents square corners, use the smallest available radius up to 5px.

Keep related items closer together and separate new ideas with more space. Avoid decorative shadows and large pill-shaped containers.

Rendered HTML example
Standard

Square corners

24px internal spacing

Fallback

Maximum 5px

Only when required

8px16px24px32px
Guideline

Buttons, links, and interface states

Use Navy with White text for the primary action and NASPA Blue on hover. Use a quieter secondary action and descriptive text links. Every control needs visible hover and keyboard-focus states. Keep Emerald for accents, not White-text buttons.

Pair status colors with text and icons. Disabled controls must remain readable and should only be used when the user can understand how to enable them.

Rendered HTML example
Read usage guidance
Success: Changes saved.
Guideline

Images and social content

Choose one clear focal point, protect safe margins, and review the final design at mobile size. Crop intentionally; do not place essential faces, logos, or text against likely cropping edges.

Accessibility note: Provide useful alternative text for informative images. Use empty alt text for decorative images, and include captions or transcripts for time-based media.

Rendered HTML example
Example NASPA resource announcement template
Dashed line shows the recommended safe area.
DoKeep the focal point and essential content comfortably inside the frame.
Don’tPlace a logo, face, or headline against an edge that may be cropped.
Mobile check: preview at approximately 320px wide before publishing.
Guideline

Callout boxes

Use a callout only when information deserves extra attention. Name the purpose in the heading, keep the message brief, and do not use color as the only signal.
Rendered HTML example
Guideline

Four-column feature cards

Use this pattern for four equally important pathways. Keep titles parallel, descriptions similar in length, and the whole card clickable when it leads to a destination.
Rendered HTML example

Events

Find upcoming learning opportunities.

Resources

Browse practical tools and guidance.

Networks

Connect with communities of practice.

Awards

Recognize work and contributions.

Guideline

Tabs

Use tabs for a small set of closely related sections when readers benefit from switching without leaving the page. Keep labels short, preserve keyboard access, and show the active tab clearly.
Rendered HTML example

Start with the main point

Give readers the essential context before asking them to choose a path.

Guideline

Accordion

Use an accordion for supporting questions or instructions that readers may not all need. Write descriptive headings, allow every section to be reached by keyboard, and avoid hiding the primary message.
Rendered HTML example

NASPA staff and approved partners may use it for authorized NASPA communications.

Ready-to-use patterns

Start with these patterns instead of rebuilding common layouts from scratch.

Guideline

Long-form content

Use section labels, lead paragraphs, pull quotes, statistics, captions, and attribution to make reports and articles easier to scan.

  • Eyebrows and section labels
  • Lead paragraphs and body copy
  • Pull quotes and attributions
  • Stat callouts and contact blocks
Rendered HTML example
“Sample quotation text can highlight one idea without interrupting the page.”
Sample attribution
Guideline

Page layouts

Use familiar structures - section openers, accent banners, columns, cards, sidebars, and report tables - so readers know where to look next.

  • Hero and section openers
  • Banners and accent blocks
  • Two- and three-column layouts
  • Cards, callouts, and sidebars
Rendered HTML example

Annual Report

Section opener

Primary idea

Lead with the most important message.

Supporting idea

Add context without competing.

Guideline

Interactive content

Use descriptive links, clear buttons, accessible alerts, labeled forms, breadcrumbs, pagination, and consistent resource cards.

  • Buttons and descriptive links
  • Alerts and notifications
  • Forms and validation states
  • Breadcrumbs and pagination
Rendered HTML example
Application saved. You can return before the deadline.

Presenting data clearly

Use clear titles, direct labels, units, enough contrast, source notes, and a plain-language takeaway. Avoid 3D effects and differences shown by color alone.

Mock data for layout demonstration. This data is not affiliated with NASPA’s Research. Every chart and table below uses fictional, everyday scenarios to demonstrate presentation patterns.
Guideline

Accessible bar chart

  • Label values directly and keep units clear.
  • Use brand color consistently, with labels as a second cue.
  • Cite the source and explain the most important takeaway.
Rendered HTML example
Favorite fruit in a fictional classMock data · share of 18 responses
Apples
50%
Bananas
33%
Oranges
17%

Takeaway: Apples received the most selections.

Mock data for layout demonstration. This data is not affiliated with NASPA’s Research.

Guideline

Accessible trend chart

  • Use a line only when the horizontal axis has a meaningful sequence, such as time.
  • Label the first, last, minimum, or maximum values directly instead of making readers decode the line.
  • Describe the direction and provide the underlying values in text or a table.
Rendered HTML example
Books read during four imaginary weeksMock classroom data
Books read increased from 8 to 18Four points show 8 books in week 1, 11 in week 2, 14 in week 3, and 18 in week 4.8Week 111Week 214Week 318Week 4

Takeaway: The fictional class read more books each week.

Mock data for layout demonstration. This data is not affiliated with NASPA’s Research.

Guideline

Part-to-whole chart

Use a proportion chart only when the categories make up one meaningful whole and add to 100%. Limit the number of segments so the message remains clear.

Accessibility note: The chart is decorative; the adjacent labels and values carry the information without relying on color.

Rendered HTML example
Favorite playground activities in a fictional classMock share of responses
  • Tag48%
  • Chalk drawing32%
  • Jump rope20%

Takeaway: Tag represents nearly half of the mock responses.

Mock data for layout demonstration. This data is not affiliated with NASPA’s Research.

Guideline

Accessible data table

  • Use a visible caption that explains what the table contains.
  • Mark column and row headers so assistive technology can identify relationships.
  • Align numbers consistently, keep units in the headers, and allow horizontal scrolling on small screens.
Rendered HTML example
Mock bake sale inventory
ItemStartingSoldRemaining
Cupcakes24186
Cookies36279
Brownies18126

Mock data for layout demonstration. This data is not affiliated with NASPA’s Research.

Guideline

Choosing the right display

Start with the reader’s question. Use a chart when the pattern matters and a table when exact lookup, comparison, or detail matters. Do not turn every number into a chart.
Rendered HTML example
Choose the display that matches the question
Reader’s questionUseWhy
Which is larger?Bar chartLengths are easy to compare
How did it change?Line chartShows direction over time
What are the exact values?TableSupports lookup and detail
How is one whole divided?Proportion chartUse only with a few categories

Last updated