myNorthridge Portal Style Guide and Glossary

Header

Content and style

All links and banner artwork must be approved by the student portal and mobile app planning committee.

Tab style

Typography

Use Verdana Bold 15/18 pixels. Text should be white and all caps.

Round corner adjustment

Each tab must have round corners. When scaling or resizing tabs in Adobe Illustrator, use the direct selection tool to move the points that make the tab larger or smaller. This will maintain the curve of the corners. The radius of the round corner is 12 pixels. Start and end of the tab navigation bar should prescribe to the following layout.

Padding

Padding between the top and bottom, and left and right, of the text should be equal.

Style

The tab that is currently open must be black. The rest of the tabs should be the gray gradient indicated in the section Color Theme under Branding.

Buttons

Legend

Add content

Hide content

Logout

Ask Matty

Diagram

Pagelet anatomy

Each pagelet features eight key elements, which the style guide has divided into two categories: Typography and Graphic Elements.

Typography consists of headers, subheaders, subheader headlines, body copy and links. Graphic elements consist of header bars, subheader bars and buttons.

Round corner adjustment

Each pagelet must have round corners. When scaling or resizing tabs in Adobe Illustrator, use the direct selection tool to move the points that change the size of the tab. This will maintain the curve of the corner. The round corner radius is 15 pixels.

Padding

As a general rule, padding around all pagelet elements should be 15 pixels except between the left edge of the pagelet and the subheader bar. For example, text should have 15 pixels of padding from the edge of the pagelet or the left side of the scroll bar. There should be 10 pixels of padding around the image or text.

Buttons

Legend

Refresh
 

Expand

Minimize
 

Close or delete

Expand subheader bar

Minimize subheader bar

Tab style

Typography

Use Verdana Bold 12/12 pixels.

Alignment

Tab navigation bar and content must be flush left.

Padding

Padding between the top and bottom should be equal.

Style

The tab that is currently open must be CSUN Red. The rest of the tabs must be black. For examples, see the section Color Theme under Branding.

Typography

Header

Use Verdana Regular 12/14.4 pixels.

Subheader

Use Verdana Regular 12/14.4 pixels.

Subheader headline

Use Verdana Bold 12/16 pixels.

Body copy

Use Verdana Regular 12/16 pixels.

Hyphenation

Avoid hyphenation. Instead move to the next line.

Alignment

This may vary with each pagelet. As a general rule, subheaders and body copy should be flush left. Sometimes, for aesthetic reasons, the body copy under a subheader bar is indented. For example, see the following pagelet on the right, My Announcements.

Links

Standard link

Use Verdana Bold 11/14 pixels. Links must be unlined and CSUN Red, see the section Color Theme under Branding.

Rollover link

When rolling over a link, the font should not change. However, the color will change from CSUN Red to the rollover color. For examples, see the section Color Theme under Branding.

Visited link

After a link is visited, the font weight should change from Bold to Regular. The color will also change from CSUN Red to the visited link color. For examples, see the section Color Theme under Branding. The link should also remain underlined.

Typography

Use Verdana Bold 12/20 pixels for the body copy. Text should be black.

Use Verdana Regular 10/12 pixels for the Dismiss button in the top right corner. The color of the text in the Dismiss button should be gray. See the section Color Theme under Branding.

Padding

Padding from the top edge of the rollover to the text should be 30 pixels. Padding from the left, right and bottom edge of the rollover should be 20 pixels. If there is a paragraph break, there should be 30 pixels between the paragraphs.

There should be 7.5 pixels of padding between the Dismiss button and the top and right edges of the rollover and 5 pixels between the text Dismiss and the X.

Style

The rollover must be white and set at 90 percent opacity. Stroke size of the border must be 0.75 pixels. Use the X icon to accompany the text for the Dismiss button.

Style

Refer to Student Portal.

Size

The width of the video must be no smaller than 200 pixels.

Padding

There should be at least 30 pixels around the video.

Style

Refer to Pagelet Elements. The background color behind the lightbox should be black and set at 50 percent opacity.

Size and resolution

Portal images must be 81 pixels by 54 pixels at 72 dots per inch (DPI).

Content

Portal images must be approved by Student Marketing & Communications (SM&C). SM&C reviews each image to ensure that it meets publication requirements and represents the scholarship, price and diversity of the university and its students. 

Do not use clip art of any kind. If you cannot find the image you need, please contact SM&C.

Border

Portal images with round corners also must have a border. The stroke color is #5F5F5D and stroke size should be 0.75 pixels.

Student highlights

Typography

Pagelet header

Use Verdana Bold 12/11.4 pixels.

Headline

Use Verdana Bold 12/17 pixels.

Deck

Use Verdana Bold Italic 12/17 pixels.

Body copy

Use Verdana Regular 12/17 pixels.

Hyphenation

Avoid hyphenation. Instead move word to the next line.

Links

Standard link

Use Verdana Bold 11/17 pixels for tracking. Links must be underlined and CSUN Red. For example, see section Color Theme under Branding.

Rollover link

When rolling over a link, the fond should not change. However, the color should change from CSUN Red to the rollover link color. For example, see section Color Theme under Branding.

Visited link

After a link is visited, the font weight should change from Bold to Regular. The color will also change from CSUN Red to the visited link color. For example, see section Color Theme under Branding. However, the link should remain underlined. 

Photo standard

Size and resolution

Portal images must be 92 pixels by 92 pixels at 72 dots per inch (DPI).

Content

Portal images must be approved by Student Marketing & Communications (SM&C). SM&C reviews each image to ensure that it meets publication requirements and represents the scholarship, pride and diversity of the university and its students.

Do not use clip art of any kind. If you cannot find the image you need, please contact SM&C.

Border

Portal images for the student highlight pagelets do not have round corners, strokes or decorative edges.

To establish a consistent vocabulary for the current-student myNorthridge Portal

banner

A feature dedicated to sharing campus events

click

To comply with Web accessibility guidelines, do not use when referring to the usage of a cursor or a mouse to access features or links on the portal. Some alternatives include choose, select or go to.  

CSUN email 

Use when referring to the official university email for CSUN students.

cursor or mouse

Do not use. See definition for click.

departments

Follow the preference of each department. If not listed, please call the unit to confirm name.             

­­­Admissions and Records
Alumni Association
Associated Students
Athletics
Career Center
Delmar T. Oviatt Library  
Department of Police Services
Disability Resources and Educational Services
Educational Opportunity Program  
Financial Aid & Scholarship Department
Graduate Studies
International and Exchange Student Center
IT Help Center
Klotz Student Health Center
Learning Resource Center
Matador Involvement Center
National Center on Deafness
Office of Government and Community Relations
Office of Institutional Research
Office of Student Involvement and Development
Office of the Vice President for Student Affairs
Parking and Transportation Services
Student Housing
Student Marketing & Communications
Student Outreach and Recruitment
Testing Center
The Tseng College
The University Corporation
University Advancement
University Cash Services
University Counseling Services
University Student Union
Veterans Affairs             

FAFSA

Upon first reference, the Free Application for Federal Student Aid (FAFSA). In subsequent references, shorten to FAFSA.

lightbox

A content box (see the definition for pagelet) that pops up on the portal either to push vital safety information in case of an emergency, or maximize a video or text for better viewing

links

Should always be CSUN Red, underlined and bold. See the section Pagelet Elements under Student Portal. When mentioning a department, campus resource or organization, always include a link. For actionable items, always include a link to a website and a due date.

My Announcements

A content box (see definition for pagelet) dedicated to sharing the latest information about campus resources and news, academic policies, fees and portal outages. 

My Checklist

A content box (see definition for pagelet) dedicated to a checklist of actionable items, such as fee payment reminders, enrollment and advising appointments

MyNorthridge Portal or portal

Do not use myNorthridge, Portal or MyNorthridge Portal

myNorthridge Prospective Student Portal

Features its own set of style standards. Not to be confused with the current-student portal.

online learning or e-learning

Use when referring to online courses

pagelet

Boxes — comprising text, hyperlinks and images — located on each tab. Users can personalize boxes by adding, deleting or minimizing, with the exception of My Announcements and My Checklist.

pagelet titles

Should not exceed three words. The pagelet title should succinctly describe the content of the pagelet.

pagelet content

Should be clear and concise. Ideally, pagelets should only highlight and direct users to resources found on another website without rehashing information. Sometimes, this is done with just a hyperlink. Some content may require a definition (example: Disability Resources and Educational Services serves CSUN students with disabilities.)

SOLAR

Upon first reference, the SOLAR Student Center. In subsequent references, shorten to SOLAR.

student ID

A unique, nine-digit number that matches a student’s identity to his student ID or her academic record

register or enroll

Use interchangeably when referring to signing up for a class.

tab

One of the following dividers on the navigation bar: Home, Academics, Services, Activities, Financial Matters, Mobile and Add Page 

user ID

An alphanumeric name that is used along with a password to log in to CSUN websites. 

Use EBSuite to request new portal content and changes (e.g., hyperlinks, images, pagelets and text). After you log in, go to Create a new case, select myNorthridge Portal as the Product/Category, and direct the request to Student Affairs IT/Student Marketing & Communications in Case Details.