NASPA UI

Add NASPA UI to a site

Paste this into the <head> of any page. It loads Open Sans, the brand tokens and every component. Add the script before </body> if the page uses tabs, accordions, the mobile menu or dismissible alerts.

Then put class="naspa" on <body> (or a wrapper) to apply brand typography and colors to plain HTML, and use the naspa- classes below for components.

Just the tokens

Sites with their own components (WordPress themes, React apps, email builders) can load only the variables and use var(--naspa-blue), var(--type-family) and so on.

Tokens are also published as tokens.json and an ES module (tokens.js). Each component is also available on its own under /v1/components/; load tokens.css first.

Versions and caching

Which URL to use
URL	Updates	Use for
`/v1/naspa.min.css`	Gets every non-breaking fix automatically, within about an hour	Most NASPA sites. Recommended.
`/v1.0.0/naspa.min.css`	Never changes; cached for a year	Sites that need to approve every visual change, or that use Subresource Integrity

Breaking changes (renamed classes, removed components) ship under a new major path such as /v2/, so existing sites never break without warning. Pinned version with integrity hash:

Scoping and existing sites

Every component class starts with naspa-, so it won't collide with an existing theme. Base element styles (headings, links, body text) only apply inside an element with class="naspa", and they use zero specificity, so a site's own CSS still wins when the two disagree.

Do Add class="naspa" to <body> on new sites so plain HTML is on-brand by default.

Don't Override brand tokens such as --naspa-blue. Request a change to the design system instead, so every site stays consistent.

Foundations

Color

Lead with NASPA Blue and NASPA Green, use Navy as a supporting anchor, Cyan, Emerald and Mint as accents, and neutrals for structure. Never rely on color alone to communicate meaning.

primary

NASPA Blue var(--naspa-blue) #0E6BB1 · PMS 293 C CMYK 90, 57, 2, 0 White text · 5.59:1
primary

NASPA Green var(--naspa-green) #007960 · PMS 335 C CMYK 100, 27, 73, 13 White text · 5.38:1
supporting

Navy var(--naspa-navy) #043352 CMYK 100, 79, 43, 37 White text · 13.12:1
accent

Cyan var(--naspa-cyan) #00B3F0 CMYK 90, 0, 0, 0 Navy text · 5.44:1
accent

Emerald var(--naspa-emerald) #34B879 CMYK 73, 0, 72, 0 Navy text · 5.17:1
accent

Mint var(--naspa-mint) #BAF5DC CMYK 25, 0, 20, 0 Navy text · 10.74:1
neutral

White var(--naspa-white) #FFFFFF CMYK 0, 0, 0, 0 Navy text · 13.12:1
neutral

Cloud var(--naspa-cloud) #F6F6F6 CMYK 0, 0, 0, 4 Navy text · 12.14:1
neutral

Mist var(--naspa-mist) #E8EEF4 CMYK 5, 2, 0, 4 Navy text · 11.23:1
neutral

Slate var(--naspa-slate) #4A6A84 CMYK 44, 20, 0, 48 White text · 5.70:1
neutral

Ink var(--naspa-ink) #1F2D36 CMYK 43, 17, 0, 79 White text · 14.12:1

Semantic roles

Prefer role tokens in your own CSS. They describe intent, so a future palette adjustment updates every site correctly.

Role tokens
Token	Maps to	Use
`--text-heading`	Navy	Headings
`--text-body`	Ink	Body copy
`--text-secondary`	Slate	Supporting text, captions
`--surface-page`	Cloud	Page background
`--surface-card`	White	Cards, panels
`--surface-subtle`	Mist	Alternating sections
`--surface-inverse`	Navy	Dark sections, footer
`--action-primary`	Navy	Primary buttons
`--action-link` / `--action-hover`	NASPA Blue	Links, button hover
`--focus-ring`	NASPA Blue	Keyboard focus outline
`--chart-series-1…4`	Blue, Green, Navy, Slate	Data visualization, in order
`--text-on-{color}`	White or Navy	The approved text color for each brand field

Interface-only colors

Tokens named --naspa-ui-* (borders, alert backgrounds, the error red) exist only for web interface states. They are not brand colors; don't use them in graphics, print or social artwork.

Contrast pairs

A brand color isn't readable on every background. Standard text needs at least 4.5:1; large text (24px regular or about 18.7px bold) needs 3:1. Ratios below are calculated at build time, and the build fails if an approved pair stops passing.

Brand color pairs
Pair	Ratio	Status	Guidance
Aa Navy on White	13.12:1	Approved	Body copy on light backgrounds.
Aa White on NASPA Blue	5.59:1	Approved	Text on a NASPA Blue field.
Aa White on NASPA Green	5.38:1	Approved	Text on a NASPA Green field.
Aa White on Navy	13.12:1	Approved	Primary buttons, with NASPA Blue on hover.
Aa Navy on Mint	10.74:1	Approved	Text on a Mint field.
Aa Navy on Emerald	5.17:1	Approved	Text in an Emerald callout or accent field.
Aa Emerald on Navy	5.17:1	Approved	Accent text or icons on Navy, with a clear text label.
Aa White on Emerald	2.54:1	Avoid	Use Navy text on Emerald instead.
Aa Cyan on White	2.41:1	Avoid	Use NASPA Blue or Navy for text on White.
Aa Mint on White	1.22:1	Avoid	Use Navy text on Mint instead.
Aa NASPA Blue on Navy	2.35:1	Avoid	Use White text on Navy instead.

Gradients

Five approved gradients, always at 135°. They are decorative fields: check text contrast at every point. White text works on the two Navy gradients and Navy text on Emerald→Mint→White; Blue→Cyan and Green→Emerald should not carry text.

var(--gradient-navy-blue-to-naspa-blue)
var(--gradient-emerald-to-mint-to-white)
var(--gradient-naspa-green-to-emerald)
var(--gradient-naspa-blue-to-cyan)
var(--gradient-navy-blue-to-naspa-green)

Typography

Open Sans for everything: web, graphics, reports and correspondence. Do not use Lato.

Extra Bold 800 · headlines

Elevate student success

Bold 700 · section headings

Transform lives

Semi-Bold 600 · subtitles, buttons

Learning, community and advocacy

Regular 400 · body

NASPA and its members lead student-centered practice and advance professional growth in higher education.

Italic 400 · quotes, citations

Journal of Student Affairs Research and Practice

Tokens: --type-family --type-regular --type-semibold --type-bold --type-extrabold

Spacing and corners

Use the 8px rhythm: keep related items closer and separate new ideas with more space. Corners are square. If a platform can't produce square corners, use 5px or less. No decorative shadows or pill shapes.

--spacing-8

--spacing-16

--spacing-24

--spacing-32

Tokens: --radius-square (0) --radius-fallback (5px)

Logos

Use the full-color logo on white or light backgrounds and the white logo on dark or photo backgrounds. Keep clear space equal to the "S" in Student on every side. Every logo below is hosted on this CDN, so any site can embed it directly. Never redraw, recolor or stretch the logo; print-ready originals are on the Brand Portal logo page.

PrimaryStandard lockup for light backgrounds.

Primary, whiteDark or photo backgrounds.

HorizontalWhen horizontal space allows; with or without tagline.

Horizontal, whiteHeaders and footers on Navy.

VerticalWhen horizontal space is restricted.

Vertical, whiteDark or photo backgrounds, limited width.

Logo URLs

Use these in an <img> tag on any site. The _No_Tagline versions drop "Student Affairs Administrators in Higher Education".

Components

Each example below is live. The code under it is generated from the example itself, so it's always exactly what you see.

Text hierarchy

Establish one reading order: eyebrow, headline, lead, body, supporting text.

.naspa-eyebrow .naspa-headline .naspa-lead .naspa-subtitle .naspa-small .naspa-list

Student Success

Build belonging by design.

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

Body copy uses Open Sans Regular in Ink. Keep paragraphs short and put the main message and action before background information.

Lead with the value or action
Explain acronyms the first time

Supporting text for captions, dates and notes.

Buttons and links

Navy with White text is the primary action, turning NASPA Blue on hover. Use one primary action per view. Link text must describe the destination ("Review the accessibility checklist", not "Click here"). Never put White text on Emerald.

.naspa-btn --secondary --outline --inverse --sm --lg --block --no-arrow .naspa-btn-group .naspa-link .naspa-link--arrow

Read usage guidance · See all events

Callouts

Use a callout only when information deserves extra attention. Name the purpose in the heading and keep it brief.

.naspa-callout --tip --warning --brand

Alerts and tags

Status messages pair color with a text label. Use role="status" for confirmations and role="alert" only for errors that need immediate attention. Add data-naspa-dismiss to a button to make an alert dismissible (requires the script).

.naspa-alert --success --warning --error .naspa-alert__body .naspa-alert__dismiss .naspa-tag --blue --green --mint --navy

Heads up: Registration closes October 15.

Success: Changes saved.

Warning: Your session expires in 5 minutes.

Error: Add a descriptive link.

Draft Webinar Approved New Members only

Cards

Square corners, a one-pixel Mist border and 24px padding. When a card leads somewhere, put .naspa-card__link on the title link and the whole card becomes clickable.

.naspa-card --accent-top --accent-left --green --fallback .naspa-card__media .naspa-card__title .naspa-card__link .naspa-card__meta

Annual Conference

Join colleagues from across higher education for learning and connection.

Sample date · Event

Resource

Accessibility checklist

Practical checks for websites, documents, email and social posts.

Static card

Cards without a link stay quiet on hover.

Feature cards

For four equally important pathways. Keep titles parallel and descriptions similar in length.

.naspa-feature-card inside .naspa-grid.naspa-grid--4.naspa-grid--tight

Events

Find upcoming learning opportunities.

Resources

Browse practical tools and guidance.

Networks

Connect with communities of practice.

Awards

Recognize work and contributions.

Tabs

For a small set of closely related sections. Requires the script: click, Arrow Left/Right, Home and End switch tabs.

.naspa-tabs with role="tablist", role="tab", role="tabpanel"

Start with the main point

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

Accordion

For supporting questions not every reader needs. Never hide the primary message. The native <details> version works without JavaScript; the button version needs the script.

.naspa-accordion --quiet .naspa-accordion__trigger .naspa-accordion__panel

Who may use this template?

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

What may I change?

Update the message and approved imagery. Keep the logo, type, colors, spacing and required notices intact.

Contact MarComm when work is co-branded, changes an approved treatment, or will have broad public visibility.

Approved templates are in the NASPA Brand Kit in Canva.

Forms

Every field has a visible label. Hints sit between label and field. Errors are stated in text, set aria-invalid="true", and are linked with aria-describedby.

.naspa-field .naspa-label .naspa-hint .naspa-input .naspa-select .naspa-textarea .naspa-check .naspa-fieldset .naspa-error-message .naspa-input-group

Breadcrumbs

.naspa-breadcrumbs

Pagination

.naspa-pagination

Tables

Use a visible caption, mark row and column headers, keep units in headers, and wrap wide tables so they scroll on small screens.

.naspa-table-wrap .naspa-table --quiet .naspa-num

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 only.

Charts

Label values directly, use series colors in order (Blue, Green, Navy, Slate), cite the source and state the takeaway in words. Set each bar's length with the --value custom property.

.naspa-figure .naspa-bar-chart __row __track __bar __bar--2…4 __value .naspa-legend .naspa-takeaway .naspa-source

Favorite fruit in a fictional classMock data · share of 18 responses

Apples50%
Bananas33%
Oranges17%

Apples received the most selections.

Mock data for layout demonstration. Not NASPA research.

Page patterns

Site header

Logo on the left, primary navigation on the right. Below 768px the navigation collapses behind a Menu button (requires the script; without it, the menu simply stays open). Mark the current page with aria-current="page". Use --inverse with the white logo for a Navy header.

.naspa-header --inverse .naspa-header__inner .naspa-header__brand .naspa-nav-toggle .naspa-nav .naspa-nav__list .naspa-nav__link

Hero

A page opener with one message and at most two actions. Default uses the Navy→NASPA Blue gradient; --light is a quieter white version.

.naspa-hero --light

Sample event

Elevate student success, transform lives.

One sentence on who it's for and why it matters. Put the date and place here.

Long-form content

.naspa-quote .naspa-contact .naspa-rule

"Sample quotation text can highlight one idea without interrupting the page."

Sample attribution, Vice President for Student Affairs

Marketing & Communications Brand questions and approvals brand.naspa.org

Color fields and backgrounds

Each .naspa-bg-* class sets the background and its approved text color together. Patterns pick up the text color, so pair them with a field. Use one treatment at a time and never behind long text.

.naspa-bg-{blue|green|navy|cyan|emerald|mint|white|cloud|mist|slate|ink} .naspa-gradient-{navy-blue|navy-green|emerald-mint|green-emerald|blue-cyan} .naspa-pattern-{lines|crosshatch|diamond-grid|diamond-dots}

Crosshatch

Lines

Diamond grid

Diamond dots

Navy → Blue

Navy → Green

Emerald → Mint

Mint field

Co-branding

NASPA logo first, partner logo optically balanced, divider spaced by the width of the "N" in NASPA. Submit every co-branded lockup through the MarComm request form before publication.

.naspa-cobrand --inverse .naspa-cobrand__divider

Layout

A centered container (1200px max, 16px gutters on phones), section spacing, responsive grids that collapse to one column on small screens, and a content-plus-sidebar layout.

.naspa-container --narrow .naspa-section --subtle --card --inverse .naspa-grid --2 --3 --4 --tight .naspa-with-sidebar .naspa-stack --sm --lg .naspa-skip-link .naspa-visually-hidden

Writing for NASPA sites

Components only look consistent when the words do too. Write in a clear, welcoming, credible voice.

Before and after
Instead of	Write
Applications must be received no later than…	Apply by October 15.
Click here for more.	Review the accessibility checklist.
Applicants will be notified.	We will email applicants Friday.

Full guidance: Voice best practices and Accessibility on the Brand Portal.