Visual Style | Brand Style Guide (2024)

Visit our Brandfolder

Florida State University's visual style is one of the most recognizable pieces of our identity. FSU’s Garnet and Gold prompt immediate recognition, and we endeavor to make all aspects of our university’s personality identifiable, from colors to graphics and fonts.

Primary Colors

FSU Garnet and FSU Gold should take the lead on the color ratio in any communication material and must make up at least 70% visual prominence when selecting color elements for your project.

The use of white space alleviates eye strain and makes materials more accessible and easier to read.

FSU Garnet

  • CMYK: 19/90/50/55
  • RGB: 120/47/64
  • HEX (WEB): #782F40
  • PANTONE: PMS 195 C
  • MADEIRA (EMBROIDERY): 1385

FSU Garnet should never be lightened (tinted)

FSU Gold

  • CMYK: 6/14/39/8
  • RGB: 206/184/136
  • HEX (WEB): #CEB888
  • PANTONE: PMS 7502 C
  • MADEIRA (EMBROIDERY): 1070

FSU Gold should never be darkened

White

  • CMYK: 0/0/0/0
  • RGB: 255/255/255
  • HEX (WEB): #FFFFFF
  • MADEIRA (EMBROIDERY): 1002

Tips for using color:

  • Our primary colors must be used in every communication.
  • Remember that communications must be accessible to all.
  • Garnet and Gold should be the first choice when selecting colors for any communication materials. Primary colors should make up at least 70% of color usage. While this isn't a rigid mathematical formula, it offers a sense of the relative use of colors and ensures a consistent visual for FSU.
  • Limit the use of accent colors — these should accentuate the design and allow our primary colors to shine, not overtake them.
  • Unless printing in one color, black and white should not be used without a primary brand color (FSU Garnet or FSU Gold) to represent the brand.
  • White should be used as the primary background for most communication materials, especially when the material includes small text or body copy.
  • Ensure that foreground and background color contrast passes accessibility standards, including text over images.

Secondary Colors

Our secondary palette brings depth and interest to our visual style. These colors may be used as gradients.FSU Garnet and FSU Gold must remain the key colors.

Always prioritize our primary FSU Garnet and FSU Gold as the most prominent colors. Under no circumstances should any of these colors become the predominant color for a school, center, institute or department.

Stadium Night (Black)

  • CMYK: 100/79/44/93
  • RGB: 16/24/32
  • HEX (WEB): #101820
  • PANTONE: BLACK 6C

Plaza Brick

  • CMYK: 29/82/44/73
  • RGB: 87/41/50
  • HEX (WEB): #572932
  • PANTONE: 504 C

Gulf Sands

  • CMYK: 3/5/26/2
  • RGB: 223/209/167
  • HEX (WEB): #DFD1A7
  • PANTONE: 7500 C
  • OKAY TO USE: In gradients, infographics, data visualizations, icons and accents
  • DO NOT USE: As main colors, without primary colors, on promotional products

Accent Colors

Our accent color palette brings intensity and creativity to our visual style. Use these colors sparingly.

They are not intended to take the place of the primary colors, and these colors may change over time. Accent colors must be used in conjunction with FSU primary colors and should be used as accent elements only.

Accent colors must never be:

  • Body Text
  • Headlines
  • Gradients
  • Lightened, tinted or darkened

Legacy Blue

  • CMYK: 58/32/28/54
  • RGB: 66/85/99
  • HEX (WEB): #425563
  • PANTONE: 7545 C

Westcott Water

  • CMYK: 54/0/27/0
  • RGB: 92/184/176
  • HEX (WEB): #5CB8B2
  • PANTONE: 7472 C

Gradients

Two color gradients are available for use.
FSU Garnet may never be tinted (lightened), and FSU Gold may never be darkened.

FSU Garnet to Plaza Brick

FSU Gold to Gulf Sands to White

Color Usage

Color Ratios

The usage of colors should represent FSU’s brand. The supplementary colors must complement the primary colors of FSU Garnet and FSU Gold, not distract from them.

The primary colors, FSU Garnet, FSU Gold and White must comprise at least 70% of the colors selected in any FSU material.

Visual Style | Brand Style Guide (1)

Mindful Color Parings

The addition of secondary and accent colors allows for more variation within FSU’s visual identity. However, certain color combinations must be avoided. Please be mindful of how colors pair together. Everything should feel like FSU.

Some pairings should be avoided altogether:

NO

Do not use Vault Garnet on FSU Garnet or Plaza Brick.

NO

Do not use Vault Gold on FSU Garnet or Plaza Brick.

NO

Do not use Vault Gold on Stadium Night.

Implementation

The FSU color palette offers design flexibility, but some restraint is necessary to fit within our brand visual identity. Color palettes can be unique and exciting by using one or two colors. Below are examples of how the colors can be used to match the mood of a communication piece.

Examples shown use the FSU color palette appropriately and showcase how the colors portray different moods. Please review our templates for more examples and tools to assist in building FSU materials.

Visual Style | Brand Style Guide (2)

Visual Style | Brand Style Guide (3)

Visual Style | Brand Style Guide (4)

Visual Style | Brand Style Guide (5)

Color Accessibility

FSU is committed to being accessible for all. This includes the way we use our colors in our products and materials. Below is a chart intended to show how colors can be combined to ensure that our materials are accessible while fitting within the university’s brand.

Background ColorBlack TextWhite TextFSU Garnet TextFSU Gold Text
FSU Garnet #782F40Visual Style | Brand Style Guide (6)Visual Style | Brand Style Guide (7)Visual Style | Brand Style Guide (8)Visual Style | Brand Style Guide (9)
FSU Gold #CEB888Visual Style | Brand Style Guide (10)Visual Style | Brand Style Guide (11)Visual Style | Brand Style Guide (12)Visual Style | Brand Style Guide (13)
White #FFFFFFVisual Style | Brand Style Guide (14)Visual Style | Brand Style Guide (15)Visual Style | Brand Style Guide (16)Visual Style | Brand Style Guide (17)
Stadium Night #101820Visual Style | Brand Style Guide (18)Visual Style | Brand Style Guide (19)Visual Style | Brand Style Guide (20)Visual Style | Brand Style Guide (21)
Plaza Brick #572932Visual Style | Brand Style Guide (22)Visual Style | Brand Style Guide (23)Visual Style | Brand Style Guide (24)Visual Style | Brand Style Guide (25)
Gulf Sands#DFD1A7Visual Style | Brand Style Guide (26)Visual Style | Brand Style Guide (27)Visual Style | Brand Style Guide (28)Visual Style | Brand Style Guide (29)
Legacy Blue #425563Visual Style | Brand Style Guide (30)Visual Style | Brand Style Guide (31)Visual Style | Brand Style Guide (32)Visual Style | Brand Style Guide (33)
Westcott Water #5CB8B2Visual Style | Brand Style Guide (34)Visual Style | Brand Style Guide (35)Visual Style | Brand Style Guide (36)Visual Style | Brand Style Guide (37)
Vault Garnet #A6192EVisual Style | Brand Style Guide (38)Visual Style | Brand Style Guide (39)Visual Style | Brand Style Guide (40)Visual Style | Brand Style Guide (41)
Vault Gold #FFC72CVisual Style | Brand Style Guide (42)Visual Style | Brand Style Guide (43)Visual Style | Brand Style Guide (44)Visual Style | Brand Style Guide (45)

Visual Style | Brand Style Guide (46) Acceptable | Visual Style | Brand Style Guide (47) Do not use | Visual Style | Brand Style Guide (48) Large text only

ADA Compliance with Color

Ensuring sufficient contrast between text and other visual elements is essential for improving the accessibility of content, particularly for individuals with visual impairments. This is especially important in web-based communications, due to the significance of contrast ratios. Use high-contrast color combinations between text and background. The Web Content Accessibility Guidelines specifies contrast ratios for text based on its size and weight. For standard text, a contrast ratio of at least 4.5:1 is recommended. Tools like WebAIM provide a contrast checker to compute contrast ratios.

Additional Brand Elements

Arch

This iconic arch can be seen all around our beautiful campus. Its classic shape can be used on a variety of materials to bring emphasis and cohesion to a university design. The arch figure is available as concentric lines or a filled-in shape.

Visual Style | Brand Style Guide (49)

Visual Style | Brand Style Guide (50)

Visual Style | Brand Style Guide (51)

Examples:

Visual Style | Brand Style Guide (52)

Visual Style | Brand Style Guide (53)

Usage Tips

Resizing

The pointed end of the arch should always maintain the same proportion.

  1. To scale the banner appropriately, hold down SHIFT and drag in Adobe Illustrator or other vector-based software.
  2. To shorten or lengthen the banner without changing the proportion of the arch, drag the two anchor points on the flat end of the arch with the Direct Selection Tool (A).

Visual Style | Brand Style Guide (56)

Photo Container

The arch can be used as a photo container. To do this in Adobe products, position the shield on top of an image. Select both the shield and image, right-click and select "make clipping mask" (CMD/CTRL + 7).

Visual Style | Brand Style Guide (57)

Design Element

Use the arch to add visual interest to a design as a separator, highlighter or background element.

Visual Style | Brand Style Guide (58)

FSU Digital Sticker Pack

Show your Florida State pride in all your communications with our vibrant FSU Digital Stickers!

Visual Style | Brand Style Guide (59)

Hand-Drawn Icons

Enhance your digital content with our unique hand-drawn icons, designed to add a personal and creative touch that reflects FSU’s spirit! Use these on websites, printed materials or presentations for a quality that is uniquely FSU.

Examples:

  • Visual Style | Brand Style Guide (60)
  • Visual Style | Brand Style Guide (61)
  • Visual Style | Brand Style Guide (62)
  • Visual Style | Brand Style Guide (63)
  • Visual Style | Brand Style Guide (64)
  • Visual Style | Brand Style Guide (65)
  • Visual Style | Brand Style Guide (66)
  • Visual Style | Brand Style Guide (67)
  • Visual Style | Brand Style Guide (68)
  • Visual Style | Brand Style Guide (69)
  • Visual Style | Brand Style Guide (70)
  • Visual Style | Brand Style Guide (71)
  • Visual Style | Brand Style Guide (72)
  • Visual Style | Brand Style Guide (73)
  • Visual Style | Brand Style Guide (74)
  • Visual Style | Brand Style Guide (75)
  • Visual Style | Brand Style Guide (76)
  • Visual Style | Brand Style Guide (77)
  • Visual Style | Brand Style Guide (78)
  • Visual Style | Brand Style Guide (79)
  • Visual Style | Brand Style Guide (80)
  • Visual Style | Brand Style Guide (81)
  • Visual Style | Brand Style Guide (82)
  • Visual Style | Brand Style Guide (83)
  • Visual Style | Brand Style Guide (84)
  • Visual Style | Brand Style Guide (85)
  • Visual Style | Brand Style Guide (86)
  • Visual Style | Brand Style Guide (87)
  • Visual Style | Brand Style Guide (88)
  • Visual Style | Brand Style Guide (89)
  • Visual Style | Brand Style Guide (90)
  • Visual Style | Brand Style Guide (91)
  • Visual Style | Brand Style Guide (92)
  • Visual Style | Brand Style Guide (93)
  • Visual Style | Brand Style Guide (94)
  • Visual Style | Brand Style Guide (95)
  • Visual Style | Brand Style Guide (96)
  • Visual Style | Brand Style Guide (97)
  • Visual Style | Brand Style Guide (98)
  • Visual Style | Brand Style Guide (99)

If you cannot find what you are looking for in our robust library of icons, you can request additional icons. We review icon requests quarterly.

Request Additional Icons

Typography

The selection of fonts and typography plays an important role in appropriately conveying our brand to our audience. This ensures the maintenance of a professional and cohesive identity.

Primary Typeface

Visual Style | Brand Style Guide (100)

Our primary typeface is Open Sans.

Arial may be used as a substitute font if Open Sans is not available.

Visual Style | Brand Style Guide (101)

Secondary Typeface

Visual Style | Brand Style Guide (102)

Our secondary typeface is Garamond Premier Pro. This is the “legacy” font of FSU. Garamond has been used for many years and is associated with the brand primarily because of its use in the university seal.

Garamond should never appear as body text on a website or in digital content.

Download Garamond Premier Pro through Adobe Fonts.

Times may be used as a substitute font for programs that don’t allow Adobe fonts such as Microsoft Apps (Outlook, PowerPoint, Word and Excel).

Visual Style | Brand Style Guide (103)

Script Typefaces

Occasionally, script typefaces may be necessary to enhance style or variety. Scripts should be reserved for titles, headlines and accents within designs. They should never be used in body copy or paragraphs.

We have chosen a formal option and a casual option to fulfill various needs, and both can be downloaded from Google Fonts.

The formal option is Parisienne – this option is more suited for formal invitations or events.

* The commencement ceremony may select their preferred script typeface.

The casual option is Playwrite England (GB) – this option is more suited for social media, flyers or other casual designs.

Visual Style | Brand Style Guide (104)Visual Style | Brand Style Guide (105)

Paragraph Styles

Three typographic themes have been developed for headings and paragraph styles: Institutional, Bold and Creative. They use different combinations and sizes of our brand fonts to create hierarchy in designs. These styles are especially helpful for creating a cohesive look in long-form designs such as annual reports or magazines. Additionally, this type of hierarchy is helpful for conveying meaning in all design.

As a rule, body copy should never be centered. We recommend left-justification or left-alignment. If you need help with paragraph justification settings, see this article: My Secret to Setting a Balanced Block of Copy.

Download Paragraph Styles

Visual Style | Brand Style Guide (106)

Photography

Photography helps us enhance storytelling and connect with people in ways that words cannot. An entire story can be told through photographs when the right images are used. Our images should tell the FSU story, convey the spirit of the university and inspire a connection with FSU.

Our photography should convey the following things:

  • Authenticity: Photos should be natural and evoke emotion. Feature the FSU spirit and the dynamic nature of our community.
  • People-Focus: Highlight students, faculty and staff that embody the core values of FSU. Capture candid moments and genuine expressions to create compelling images that tell a story.
  • World-Class Academics: Showcase scholarly excellence and notable research. Convey the significance of academic exploration, research endeavors and valuable contributions to the world.

Visual Style | Brand Style Guide (107)

Best Practices

  • Involve real people. Involve the audience by creating an engaging visual experience that encourages viewers to feel connected. Avoid using stock photography.
  • Photograph people in their environment. Convey a narrative by capturing an individual’s personality and revealing a glimpse into their lifestyle.
  • Pay attention to detail.
    • Incorporate FSU’s brand through apparel and colors.
    • Remove distracting elements and other logos.
    • Avoid clutter and distracting elements.
    • Choose lighting wisely. Ensure the area is well-lit. Avoid distracting shadows or highlights.

Visual Style | Brand Style Guide (108)

Submitting photos

We encourage and welcome image submissions to our central digital asset manager from all departments and entities on campus. We have a beautiful, vibrant campus with over 40,000 students, and we want to showcase as much of FSU as we can.

Because photos convey messages both consciously and subconsciously, we must maintain a high standard of photography to represent the elite nature of our university. Because of this, all images submitted for the FSU Digital Asset Library are reviewed by marketing and must follow these guidelines:

Photos should have vibrant colors and good contrast.
Muted and/or off-color photos can have a negative emotional impact and do not showcase the beauty of our campus.

Visual Style | Brand Style Guide (109)

Visual Style | Brand Style Guide (110)

Muted Examples

Photos should always have a point of focus.
Images that are soft (or blurry) without a sharp point of focus may also have a negative emotional impact.

Visual Style | Brand Style Guide (111)

Visual Style | Brand Style Guide (112)

Soft Examples

Photos should have proper exposure.
Images that are over-exposed will have bright areas that can distract the viewer’s attention from the subject. Under-exposed images will be dark and may obscure details, as well as have a negative emotional impact.

Visual Style | Brand Style Guide (113)

Over Exposed Example

Visual Style | Brand Style Guide (114)

Under Exposed Example

Photos should be high resolution.
Low resolution images may appear blurry or pixelated when reproduced. Remember, resolution can easily be reduced for uses such as websites but cannot be increased without visual distortion.

Avoid cell phone photos.
Cell phone photos are typically of insufficient quality for most uses except social media and will not be accepted into the FSU Digital Asset Library.

Photography Tips

Don’t be afraid to try different angles of view or use wide or zoom lenses. These can add valuable visual impact.

Leaving negative space in a photo is a great way to allow a variety of uses. Often called “copy space,” it allows text to be overlayed on the image without covering the subject.

Office Hours:

Tuesdays, Wednesdays, Thursdays
9 - 11 a.m.
Mondays
2 - 4 p.m.
Teams or in-person (WES 415A)
Make an Appointment

Training Dates:

Visual Style | Brand Style Guide (2024)

References

Top Articles
Latest Posts
Recommended Articles
Article information

Author: Lilliana Bartoletti

Last Updated:

Views: 5451

Rating: 4.2 / 5 (73 voted)

Reviews: 80% of readers found this page helpful

Author information

Name: Lilliana Bartoletti

Birthday: 1999-11-18

Address: 58866 Tricia Spurs, North Melvinberg, HI 91346-3774

Phone: +50616620367928

Job: Real-Estate Liaison

Hobby: Graffiti, Astronomy, Handball, Magic, Origami, Fashion, Foreign language learning

Introduction: My name is Lilliana Bartoletti, I am a adventurous, pleasant, shiny, beautiful, handsome, zealous, tasty person who loves writing and wants to share my knowledge and understanding with you.