Who is The Rampage? The Rampage is Bluefield University’s official student newspaper, made for students and made by students.
Get the Creative Cloud Asset LibraryLogo
The Rampage logo is a geometric ram with an Archimedean spiral as its horn. The logo should be used in all materials to generate better awareness. The logo may be used with its logotype, but generally, it will be used alone.
Do not:
- Distort the logo
- Change the color of the logo to anything other than #2f2f2f, #ffffff, or #f0f0f0
- Place the logo in a containing shape
- Place a drop shadow on the logo (exception: exponential shadows may be placed on the logo if lightly-colored)
- Crop the logo
- Outline the logo
Logotype
The Rampage logotype uses Work Sans Black. It should not be kerned, and the tracking should not be changed. The type should not be distorted.
Colors
Color should be used to highlight certain aspects of a design, or better bring those aspects to the attention of students. The Rampage uses several colors:
Category Colors
Each major category of The Rampage uses its own color to better identify itself and materials relating to it. Subcategories use the color of the parent. Category colors help users build a relationship with each category.
Category colors should be used at your discretion. They may be prominent colors in a related design, or they may be highlights.
Typography
Typography is integral to The Rampage’s visual identity. From the website to print promotions to our printed magazine, typography should remain consistent to build recognition, trust, and prevent confusion from medium to medium.
The Rampage uses the following Google typefaces:
Each font can and should be downloaded from Google Fonts and used without restriction.
Playfair Display is used almost exclusively in headings.
Poppins is used primarily for body text, but may be used in any other location as well at any weight.
Work Sans is no longer used by The Rampage, but it still exists in our logotype as a remnant of the past. Work Sans should be used only in the logotype.
Heading Hierarchy
The Rampage has an established hierarchy of heading sizes, fonts, and decorations. These are already established here on the website, but other design materials should attempt to recreate it for continuity. These heading styles are available on The Rampage‘s Adobe CC library. Note: The CC library’s “Heading 2” paragraph style does not include the custom underline. Heading 2 styles include a custom underline of a single length (see bcRampage.com for examples).
Website Link Format
The link to The Rampage website should be formatted to be human-readable on print materials. The “bc” text should be lowercase, #cc2031 red
bcRampage.com
Themes
The Rampage offers several theme guidelines to retain visual consistency between designs while allowing room for creativity.
The Angle
From our header to mobile image cards to profile photos, The Rampage uses a small slash, slant, or incline in many of its visual materials. This “angle” has become a staple to our visual identity.
Content should never match the angle of the incline to provide contrast and lead the eye deeper into the page, flyer, or other visual material.
The “angle” may be used creatively at the artist’s discretion as long as it maintains a similar identity.
The Border Radius
Rounded corners make a design feel friendlier and softer than pointed corners. They also make objects more recognizable to viewers.
An object should not have so large a border radius that its shape is no longer perceived as a rectangle.
Cards and Tiles
Repeated groups of content—such as artworks, posts, or comments—can be formatted as a card or tile to better visually group the content.
All tiles should include a border radius.
The mobile home page layout (v2.2) maintains the use of tiles.
Illustrations
The Rampage-related materials should favor illustrations over text or photographs. A variety of styles is welcomed in each of The Rampage‘s illustrations to better convey the variety of students working on the publication. There is no explicitly-required artistic style used on illustrations.
Seasonal Illustrations
Life on campus is continuous. Throughout each semester, the seasons change from summer to fall to winter to spring, and it is an important psychological feature of campus life that helps in relating events, classes, and other memories to time periods. Illustrations should follow a theme of seasons, including the small details that differentiate each time of year from the rest.
Generational Illustrations
Students identify with an array of hobbies, such as sports, video games, music, books, pop culture, and many others. Illustrations should tap in to this to better draw in the student audience.
Header Illustrations
See Illustrations.
Shadows
In contrast to minimal design, The Rampage uses comparatively realistic shadows to create a top-down, three-dimensional perspective, giving designs a layered look and feel and making them feel more human.
These shadows are different from drop (or box) shadows.
Exponential shadows consist of five iterations of drop shadows rather than only one. Each shadow iteration should translate along a single axis by 2x+1px with a blur of 2x+1px. For example, the first iteration would be 4px, the second would be 8px, the third would be 16px, the fourth would be 32px, and the fifth would be 64px.
Shadows may be of any color—even a blurred copy of an image. Shadow opacity should not be too dark (between 17% and 24% works well).
In CSS, this is represented as:
box-shadow:
0 64px 64px 0 rgba(42,42,42,0.17),
0 32px 32px 0 rgba(42,42,42,0.17),
0 16px 16px 0 rgba(42,42,42,0.17),
0 8px 8px 0 rgba(42,42,42,0.17),
0 4px 4px 0 rgba(42,42,42,0.17);Shadows are generally used on photos, tiles, cards, and buttons, but may be used at the designer’s discretion.
Icons
The Rampage uses icons to more effectively communicate ideas to users. Icons should be simple, mono-color, recognizable, and related to the referenced content. Icons should communication ideas visually to
Examples icons from The Rampage magazine:
Icons are used for a variety of categories, calls to action, and other communications.