Grid

This repsonsive grid was created to in order to give equal divisions across the content area throughout the site. We have created a 6, 5, and 4 column grid. This provides a variety of different options for layout and design as long as the amount of columns equals to the span of the grid. The margin is equal to 30px for each column. For mobile phones the columns will stack vertically.

This grid was generated at responsivegridsystem.com, using a margin of 3.49% which is equal to 30px, the amount of padding used for the gutters on the main content area of grad.ucla.edu. The grid is licensed under a Creative Commons Attribution 3.0 License.

Six Columns

1 of 6
1 of 6
1 of 6
1 of 6
1 of 6
1 of 6

Three Columns

2 of 6
2 of 6
2 of 6

Side Bar Right

4 of 6
2 of 6

Side Bar Left

2 of 6
4 of 6

Two Columns

3 of 6
3 of 6

Four Columns

1 of 4
1 of 4
1 of 4
1 of 4

Two Side Bars with Main Content

1 of 4
2 of 4
1 of 4

Five Columns

1 of 5
1 of 5
1 of 5
1 of 5
1 of 5

Scaffolding

1 of 6
5 of 6
2 of 6
4 of 6
3 of 6
3 of 6
4 of 6
2 of 6
5 of 6
1 of 6
4 of 6
2 of 6
3 of 6
3 of 6
2 of 6
4 of 6
1 of 6
5 of 6

Color Palette

University of California, Los Angeles

Color is an important element of brand identity. Like the iconic red of Coca-Cola® and the unmistakable brown of UPS®, color helps your audience identify who you are at a glance. Blue and gold are the brand colors for every University of California campus, with variation between schools. The UCLA color palette honors this, but our variation includes “hero” colors, the vivid blue and gold hues worthy of optimists. There are primary, secondary and tertiary palettes. Correct usage of these palettes in print or digital forms is vital to upholding the visual legacy of the UCLA brand.

Primary Colors


UCLA Blue
HEX: #3284BF
RGB: (50,132,191)


UCLA Gold
HEX: #FFE800
RGB: (255,232,0)

Secondary Colors


UCLA Dark Blue
HEX: #1E4B87
RGB: (30,75,135)


UCLA Ocean Blue
HEX: #00A5E5
RGB: (1,165,235)

Tertiary Colors


UCLA BLUE TEXT ONLY (WCAG 2.0 AA)*
HEX: #347BAD


UCLA Yellow
HEX: #FFFF00
RGB: (255,255,0)


UCLA Green
HEX: #00FF87
RGB: (0,255,135)


UCLA Hot Pink
HEX: #FF00A5
RGB: (255,0,165)


UCLA Sky Blue
HEX: #00FFFF
RGB: (0,255,255)


UCLA Slate Gray
HEX: #666666
RGB: (102,102,102)


UCLA Purple
HEX: #8237FF
RGB: (130,55,255)


UCLA Orange
HEX: #FFB300
RGB: (255,179,0)

University of California, Los Angeles Graduate Division

The Graduate Division at UCLA has additional colors that are used in their color palette. They maintain the same overall blue and yellow color scheme with a slight variation. Both the main univeristy color scheme and the graduation division can be combined to create design elements.


UCLA Grad Blue
HEX: #93D3EB
RGB: (147,211,235)


UCLA Grad Link Active
HEX: #3A7BA7
RGB: (58,123,167)


UCLA Grad Heading
HEX: #287CB3
RGB: (40,124,179)


UCLA Grad Link
HEX: #1B3DAB
RGB: (27,61,171)


UCLA Grad Subtext
HEX: #3B4873
RGB: (59,72,115)


UCLA Grad Text
HEX: #404040
RGB: (64,64,64)


UCLA Grad Link Visited
HEX: #660099
RGB: (102,0,153)


Typography

The primary font is Proxmia Nova. Headings are the UCLA blue and the text color is dark gray. The base font size is 1.5em with a vertical rhythm of 1.5.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Subtext can be used to show details such as date, time, amount, etc.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading with Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading with Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Aa

Proxima Nova

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890!@#$%^&*()_+

Aa

Proxima Nova Bold


abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890!@#$%^&*()_+

Degree Header

Graduate degree's that can be earned at UCLA. This element provides an easy way to indicate the different degrees offered with in a particular area of study the various programs for prosepective and current students. This elements combines the new grid system with the current styles to narrow and center within the main content area.

Key:

Doctorate
Master’s Degree
Master’s Degree (on path to Doctorate)
Certificate

A-Z Anchors

The graduate school at UCLA consists of many degrees and programs. The A-Z Anchors allow the user to quickly navigate to the desired program of interst.

ABCDEFGHILMNOPSTUW


Badge

Favorites Count

Recommendations Count

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Circle Only Title

This stylized letter is used at the begining of the legend for the degree key as shown above. It provides a visual cue for the user to identify the degree type for example:

M
aster's Degree

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z

Horizontal Rule


Responsive Tables

Responsive tables will allow users to view data within the table on smaller screen sizes. It allows for horizontal scrolling.

Deadline Amount Description
02-28-2018 $45,000 Science & Technology Policy Fellows
The California Council on Science and Technology (CCST) offers 10 science policy fellowships for postdoctoral scholars to work in Sacramento, CA for 1 year.
02-28-2018 $45,000 Science & Technology Policy Fellows
The California Council on Science and Technology (CCST) offers 10 science policy fellowships for postdoctoral scholars to work in Sacramento, CA for 1 year.
02-28-2018 $45,000 Science & Technology Policy Fellows
The California Council on Science and Technology (CCST) offers 10 science policy fellowships for postdoctoral scholars to work in Sacramento, CA for 1 year.


Buttons

Toggle Swtich


The toggle swtich is designed to turn on/off settings or parameters. The state of the toggle is determined by the color. Gray is off or disabled while blue is on or active.



Button


There are two variations of buttons. They differ based on the interaction type.

Social Login


The UCLA login button allows users to login with their UCLA ID. Users that would like to use their social media account to sync their profile data may also do so with linkedin or facebook.

Vertical Menu


The vertical menu's purpose is to provide a way of navigating from one page to the next while staying under the same section. It can also refered to as a side navigation.

Thumbnails

Thumbnail Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Thumbnail Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Thumbnail Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Iconography

Circle Icon

The circle icon is used to provide visual cues for the user. There are three different sizes small, medium, and large.

Small

Medium

Large



List Icon

  • Sort By
  • Bookmarks
  • Amount
  • Division School
  • Academic Level
  • Award Type
  • Awards Exclusive To

Visual Language

  • Sort By
  • Bookmarks
  • Amount / Award
  • Division School
  • Academic Level
  • Award Type
  • Awards Exclusive To



  • Citizenship
  • Updated Recently
  • Event
  • User
  • Notification
  • Close

Cards

Recommendations Card

Funding Opportunity

Bookmark Remove

Berlin Program for Advanced German and European Studies

The German Studies Association (GSA) supports 1 year of research for PhD students and recent postdoctorals to research, present, and study in Berlin, Germany.

$24,000

12/1/2017

Academic Enrollment

Bookmark Remove

Leave of Absence Request

If you are planning to apply to request a leave of absence please make sure to do before the deadline.

11/1/18

Deadline

Event Opportunity

Bookmark Remove

2017 Big Data Conference

The Easton Technology Management Center & Center for Management in Entertainment and Media Enterprise Presents with Guest Speakers Bill Duff (CFO, Microsoft Windows & Devices) and more!

11/1/18

Date



Grapes Search Card

Berlin Program for Advanced German and European Studies

Bookmark

The German Studies Association (GSA) supports 1 year of research for PhD students and recent postdoctorals to research, present, and study in Berlin, Germany.

$120,400

12/1/2017

Berlin Program for Advanced German and European Studies

Bookmark

The German Studies Association (GSA) supports 1 year of research for PhD students and recent postdoctorals to research, present, and study in Berlin, Germany.

$120,400

12/1/2017

Berlin Program for Advanced German and European Studies

Bookmark Remove

The German Studies Association (GSA) supports 1 year of research for PhD students and recent postdoctorals to research, present, and study in Berlin, Germany.

$120,400

12/1/2017


Feature Card Simple Header

Funding


Your Funding opportunities

Enrollment


Your Academic Enrollment

Calendar


Your Academic Calendar


Feature Card Small

Your funding opportunities

Your Academic Enrollment

Your Academic Calendar