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
Three Columns
Side Bar Right
Side Bar Left
Two Columns
Four Columns
Two Side Bars with Main Content
Five Columns
Scaffolding
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.
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.
Badge
Favorites Count
Recommendations Count
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:
aster's DegreeHorizontal 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
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
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
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
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
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
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