# 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.
Example source
```
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
Example source
```
Primary
NASPA Blue var(--naspa-blue)
NASPA Green var(--naspa-green)
Supporting + accents
Navy var(--naspa-navy)
Cyan var(--naspa-cyan)
Emerald var(--naspa-emerald)
Mint var(--naspa-mint)
```
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.
Example source
```
Square by default
```
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.
Example source
```
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](https://form.asana.com/?k=k1BnCnePXlzQij2ev89Ecw&d=40073271502809) before publication.
Rendered HTML example
Light background
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
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.
Example source
```
Partner Logo
```
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 + White**Approved starting pair
**White + NASPA Green**Approved starting pair
**Mint + Navy**Approved starting pair
**NASPA Blue + White**Approved starting pair
Example source
```
Navy + WhiteApproved
White + NASPA GreenApproved
Mint + NavyApproved
NASPA Blue + WhiteApproved
```
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.
**Do**Use one background treatment at a time.
**Don’t**Place 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**
Example source
```
Lines 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
Example source
```
Square standard
24px internal spacing
5px fallback
Only when required
```
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](#design-system-guidance)
**Success:** Changes saved.
**Error:** Add a descriptive link.
Example source
```
```
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
Dashed line shows the recommended safe area.
**Do**Keep the focal point and essential content comfortably inside the frame.
**Don’t**Place a logo, face, or headline against an edge that may be cropped.
**Mobile check:** preview at approximately 320px wide before publishing.
Example source
```
Keep essential text and logos inside the safe area.
```
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
#### Note
Use this pattern for helpful context that supports the main task.
#### Tip
Offer a practical shortcut without making it a requirement.
#### Important
State a required step plainly and explain what to do next.
Example source
```
```
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.
Example source
```
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.
#### Keep related information together
Use a second panel when the content is useful but not needed by everyone.
#### End with a clear action
State what happens next and use one primary action.
Example source
```
Start with the main point
Give readers the essential context first.
```
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.
####
Update the message and approved imagery. Keep the logo, type, colors, spacing, and required notices intact.
####
Contact [MarComm](https://form.asana.com/?k=k1BnCnePXlzQij2ev89Ecw&d=40073271502809) when the work is co-branded, changes an approved treatment, or will have broad public visibility.
Example source
```
NASPA staff and approved partners may use it for authorized communications.
Update the message and approved imagery. Keep brand elements intact.
```
## 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
Example source
```
“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.
Example source
```
Section opener
Primary ideaSupporting idea
```
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.
Email address
Example source
```
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 class**Mock 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.
Example source
```
Favorite fruit in a fictional class Mock data · share of 18 responses
Apples
50%
Bananas
33%
Takeaway: Apples received the most selections. Mock data only - not NASPA 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 weeks**Mock classroom data
**Takeaway:** The fictional class read more books each week.
Mock data for layout demonstration. This data is not affiliated with NASPA’s Research.
Example source
```
Books read during four imaginary weeks Mock classroom data
Takeaway: The fictional class read more books each week. Mock data only.
```
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 class**Mock share of responses
48%
- Tag**48%**
- Chalk drawing**32%**
- Jump rope**20%**
**Takeaway:** Tag represents nearly half of the mock responses.
Mock data for layout demonstration. This data is not affiliated with NASPA’s Research.
Example source
```
Favorite playground activities in a fictional class
Tag48%
Chalk drawing32%
Jump rope20%
Mock data only - not NASPA 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
| Item | Starting | Sold | Remaining |
| --- | --- | --- | --- |
| Cupcakes | 24 | 18 | 6 |
| Cookies | 36 | 27 | 9 |
| Brownies | 18 | 12 | 6 |
Mock data for layout demonstration. This data is not affiliated with NASPA’s Research.
Example source
```
Mock bake sale inventory
Item
Starting
Sold
Remaining
Cupcakes
24
18
6
Cookies
36
27
9
Brownies
18
12
6
Mock data only - not NASPA 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 question | Use | Why |
| --- | --- | --- |
| Which is larger? | Bar chart | Lengths are easy to compare |
| How did it change? | Line chart | Shows direction over time |
| What are the exact values? | Table | Supports lookup and detail |
| How is one whole divided? | Proportion chart | Use only with a few categories |
Example source
```
Choose the display that matches the question
Question
Use
Why
Which is larger?
Bar chart
Lengths are easy to compare
How did it change?
Line chart
Shows direction over time
What are the exact values?
Table
Supports lookup and detail
How is one whole divided?
Proportion chart
Use only with a few categories
```
Last updated: 2026-10-08
Live page: https://brand.naspa.org/design-system
Partner Logo
