Skip to main content
University of North Dakota
University of North Dakota
    • Email
    • Employee Self-Service (HRMS)
    • Finance (PeopleSoft)
    • Campus Connection
    • Flex Spending
    • Starfish
    • Faculty Success (formerly Digital Measures)
  • Calendar
  • Directory
  • Scope of this search:
Campus Services
  • Employee Resources
    • Job Openings
    • Benefits
    • Equal Opportunity
    • Staff Senate
    • TTaDA (Professional Development)
    • UCLC (Childcare)
    • University Council for Women+
    • University Senate
    • Work Well (Employee Wellness)
  • Financial Services
    • Shared Service Center
    • Grants & Contracts
    • Procurement & Payment Services
    • Resource Planning & Allocation
    • Treasury
  • Operations
    • Facilities Management
    • Parking & Transportation
    • Policy Office
    • Records Management
    • Safety
  • Communication Services
    • Brand and Identity
    • Campus Postal Services
    • Duplicating
    • Marketing & Communications
    • Telecommunications
    • University Information Technology
    • Web Support
University of North Dakota
  • Employee Resources
    • Job Openings
    • Benefits
    • Equal Opportunity
    • Staff Senate
    • TTaDA (Professional Development)
    • UCLC (Childcare)
    • University Council for Women+
    • University Senate
    • Work Well (Employee Wellness)
  • Financial Services
    • Shared Service Center
    • Grants & Contracts
    • Procurement & Payment Services
    • Resource Planning & Allocation
    • Treasury
  • Operations
    • Facilities Management
    • Parking & Transportation
    • Policy Office
    • Records Management
    • Safety
  • Communication Services
    • Brand and Identity
    • Campus Postal Services
    • Duplicating
    • Marketing & Communications
    • Telecommunications
    • University Information Technology
    • Web Support
Scope of this search:
Scope of this search:
  • Home
  • Campus Services & Resources
  • Web Support
  • Web Elements & Styles
Skip Section Navigation
  • Web Support
  • Directory Instructions
  • Web Policy
  • CMS Support Show/hide children
    • Accordions/Tabs
    • Alerts
    • Analytics
    • Assets and Forms
    • Images
    • Snippets
  • Web Elements & Styles
  • Content Standards
  • Blogs & E-Newsletters
  • Events Calendar
  • Digital Signs
  •  

Web Elements & Styles

Accessibility

Web content that is themed with UND styles should follow UND's accesesibility policies.

  • UIT Digital Accessibility
  • UND Digital Accessibility

Focus Styles

All elements need appropriate focus styles. The following focus style is UND's standard focus treatment.

  outline: 2px dashed;
  outline-offset: .25rem;

Accessible Color Contrast

This Text Color Contrast Grid for UND can help prevent the common issue of low contrast due to the usage of our brand green on white which only satisfies accessible color contrast at large text sizes (18px and bold or 24px).

The darker green #00662c should only be used to meet contrast requirements for green text on white or light gray backgrounds at sizes 24px and under. Our brand green #009A44 should be used in all other cases.

Basic Typography

UND uses rem based on a 16px root size.

  • Body text links should be underlined and #00662c.
  • The underline can be removed on :hover.

Text Alignment

Text alignment guidance for UND is in line with guidance from Typography | U.S. Web Design System (USWDS)

  • Left align text in almost all cases. Left aligned text is easier to read because it gives the eye a constant starting point.

Headings

Most headings use the following margins: margin: 1.2em 0 0.5em;. Be aware that some headings (like the h1) have different margins.

Example Heading 1

h1 = is a fluid font size, 43px to 72px, and #000.

The following CSS can be used to achieve fluid type for the h1 element.

h1 { margin: 0 0 0.67em 0; font-size: 43px; }

@media ( min-width: 320px ) {
  h1 { font-size: calc(43px + 29 * (100vw - 320px) / 1120); }
}

@media ( min-width: 1440px ) {
  h1 { font-size: 72px; }
}

Example Heading 2

h2 = 2.25rem, #009a44

Example Heading 3

h3 = 1.625rem, #009a44

Example Heading 4

h4 = 1.25rem, #000

Example Heading 5

h5 = 1.125rem, #000

Example Heading 6

h6 = 1rem, #000

CSS Font Stacks

Trade Gothic 'Trade Gothic', 'Oswald Medium', 'Oswald', Arial, sans-serif
Sentinel Medium 'Sentinel SSm A', 'Sentinel SSm B', 'Trocchi', 'Georgia', serif
Helvetica Neue 'Helvetica Neue', 'Helvetica', Arial, sans-serif

Fallback Fonts

UND's fallback fonts, Oswald Medium and Trocchi, are available from Google Fonts and typography websites like FontSquirrel. Arial is a websafe font that does not need to be imported.

Official Font Fallback Font

Trade Gothic

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Oswald Medium

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Sentinel Medium

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Trocchi Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Helvetica Neue

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Arial

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Other Typography and Common Elements

Marketing/Serif Jumbo text (1.75rem, #009a44)

Intro Paragraph—Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et tellus vel lacus dapibus dignissim. Nam non commodo lacus, id.

Integer faucibus ipsum vel elementum placerat. In a ipsum ornare, venenatis nibh vitae, hendrerit mi. Nulla pharetra dictum laoreet. Pellentesque interdum nisl eu orci tempor feugiat. Vestibulum nisl erat, feugiat quis turpis ut, commodo semper metus. Vestibulum volutpat arcu in sem iaculis bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer malesuada elit non mi aliquam, ut feugiat nulla tincidunt. Maecenas iaculis, tortor id ultrices molestie, nisl lorem pulvinar odio, at molestie lorem odio vitae dolor. In hac habitasse platea dictumst. Aliquam in maximus tortor. In non purus quis diam elementum sollicitudin. Sed sit amet mauris urna.

Lists

Phasellus orci justo, cursus id tincidunt vitae, egestas id risus. Nam tempor diam id mi placerat tristique et at lacus. Donec id maximus dolor, ut sodales justo. Integer faucibus ipsum vel elementum placerat. In a ipsum ornare, venenatis nibh vitae, hendrerit mi. Nulla pharetra dictum laoreet. Pellentesque interdum nisl eu orci tempor feugiat.

  • List Item A
  • List Item B
  • List Item C
  1. List Item A
  2. List Item B
  3. List Item C

Decorative Links & Buttons

Decorative Underline Link

Outline CTA Button Link

File Types

  • Excel
  • PDF
  • Powerpoint
  • Mail
  • Word

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse maximus tempor neque, Example PDF Document et accumsan mi rhoncus sed. Nunc sit amet fringilla risus.

Example PDF Document

Help Ticket

    We use cookies on this site to enhance your user experience.

    By clicking any link on this page you are giving your consent for us to set cookies, Privacy Information.

    UND.info@UND.edu  |  701.777.3000
    • YouTube
    • Instagram
    • Facebook
    • TikTok
    • Twitter
    • LinkedIn
    • Campus Map
    • Employment
    • Vector Solutions Training
    • UND Today
    • U Letter
    • Report Safety Concern
    University of North Dakota

    © 2023 University of North Dakota - Grand Forks, ND - Member of ND University System

    • Accessibility & Website Feedback
    • Terms of Use & Privacy
    • Notice of Nondiscrimination
    • Student Disclosure Information
    • Title IX
    ©