Skip to main content

Welcome to Your Style Guide!

This page serves as a reference for the color palette, typographic styles, components, and original design considerations of your site. You will find an instance of every component along with a brief description of it’s recommended use.

Typographic Styles

All type on this site is set in the font families EB Garamond and Open Sans, both families are served by and available for free at Google Fonts.

h1. Heading 1: EB Garamond, 36px, #001A57

h2. Heading 2: EB Garamond, 30px, #001A57

h3. Heading 3: Open Sans Bold, 16px, #993399, All-Caps

h4. Heading 4: Eb Garamond, 24px, #4A5167

This is paragraph text. It is set in Open Sans at 16px with a color of #4A5167. Inline links are styled with an underline and color of #001A57. The WYSIWYG also supports bold and italic text.

Color Palette

The color palette used on this site is designed to fit within Duke’s brand guidelines, while being presented in a way that feels fresh and engaging. Some hues have been shifted an incremental amount to support proper text contrast for accessibility of all types of sighted users.

The hex codes for the colors are as follows: Dark Blue: #001A57 Purple: #993399 Orange: #F79E05 Teal: #12B0B0 Blue: #0F8FDF Light Blue: #EDF8FF

Text Component

Your Text component is also known as the WYSIWYG editor. This workhorse component is where you’ll add in the bulk of the text content on your site and style it accordingly. You may use any of the above-listed type styles, including smaller inline images and links if necessary.

A caption displays off to the side to provide additional context or other related info. It is set in Open Sans Bold at 16px with a color of #0f8fdf.

Featured Content

This component is used to direct attention to a specific piece of content that exists on the site from the following post types: Visiting Artist, Project, News. You may choose to style it in 1 of 4 colors: Orange, Purple, Blue and Teal.

Media Component

The Media component is where you will place larger images that need a little more room. This component accepts image files and youtube links only. You may place images to be constrained by the width of the body text, or choose to make it full-width if you need something larger.

Young woman dragging a squeegee on a silk screen
This is default-width image with a caption display of 'default'. Use the default option if you've got a particularly busy image or lots of text to squeeze into the caption.
This is full-width image with a caption display of 'inset'. Use the inset option when you've got only a small amount of text, or a minimal image that may need a little more visual interest.

Events Component

The Events component is used to feature 3-5 events of your choosing. Any calendar.duke.edu event will validate, however within a single instance of this component, we recommend keeping the events related to one another.

Duke Events

Call-to-Action (CTA) Component

The CTA component is a versatile component whose job is to do one thing: drive traffic throughout the site. The CTA component has 3 display options: Button, Text, & Text with Image. Each serves a specific purpose. The Button acts an unobtrusive, yet clear click area for folks already looking to take a specific action (e.g. Sign up for the Newsletter, Book a Study Room, Submit an Application, etc). The Text option allows for slightly more complex actions that might require a little more explanation. The Text with Image acts as full-featured callout, typically used to draw attention to a specific page or piece of content that folks might otherwise overlook. Each provides a clear click area to direct users where they need to go.

Each display option can be set in 1 of 4 colors: Orange, Purple, Teal, & Blue

Image Gallery Component

Use the Image Gallery component when you need to get lots of images on a page without being visually overwhelming, yet easily accessible. When clicked, images open in a lightbox; each may have it’s own caption. Chronicling an event or showcasing a body of work are some examples where this may be necessary.

Two-Column Component

In general the Two-Column component should be used to compare two pieces of text (e.g. Left side: text in Latin, right side: English translation), however it is a very versatile and useful component.  It is essentially a double-WYSIWYG… You can place images and text in either side and type styles can be changed at will, but be careful! Using too many styles, different sized images or inconsistent type formatting can make this component look wonky fast.

Latin

Hoc autem est circa omnes quomodo fabula,
Flipped evasit, inverso vitae,
Et ego youd ‘amo ut minutam, tantum fas non sit,
Et ego dico tibi quomodo factus est princeps de oppido nomine Bel Aerem.

Philadelphiae, in Occidentem, et erexit natus est
In qua plurimum est in oculis capti fodere exegi diebus vitae meae.
Chillin, e, maxin ‘, relaxin omnes frigus, Et omnia shootin, alii pila, B extra scholam.

Cum duobus guys qui ad bonum Coepi makin ‘tribulatio proxima mea. EGO got in unum modicum meum, et pugna vix obtinuit,
Et dixi: “Tu es movin ‘Gellius audierat patruum tuum Aeris in Bel”.

Et sibilavit in advectus, et cum prope accessit,
Licentiam laminam dicitur “nova” cui talos speculum.
Quod si aliquid dicere quod non possent cabi stercoris est rara,
Sed putavit “obliviscatur ejus Nahum, Yo in domum suam ut Bel Aerem.”

Et extraxerunt et ascendere de domo septem vel octo,
et dederunt vocem suam ad Cabby “Yo domos: Puer olfacies postea”.
Respexit ad regnum, ut tandem non esset,
Ad sedentem in solio meo sicut Prince of Bel Aerem.

English

Now this is the story all about how,
My life got flipped-turned upside down,
And I’d like to take a minute, just sit right there,
I’ll tell you how I became the prince of a town called Bel Air.

In West Philadelphia, born and raised
On the playground is where I spent most of my days.
Chillin’ out, maxin’, relaxin all cool,
And all shootin’ some B-ball outside of the school.

When a couple of guys who were up to no good,
Started makin’ trouble in my neighborhood.
I got in one little fight and my mom got scared,
And said “You’re movin’ with your auntie and uncle in Bel Air.”

I whistled for a cab, and when it came near,
The license plate said “fresh” and it had dice in the mirror.
If anything I could say that this cab was rare,
But I thought “Nah forget it, Yo home to Bel Air.”

I pulled up to the house about seven or eight,
and I yelled to the cabby “Yo homes, smell ya later.”
Looked at my kingdom, I was finally there,
To sit on my throne as the Prince of Bel Air.

Supporters Component

The Supporters component is a specialized component that allows you to bring attention to supporters. There are 2 display options: a ‘Thank You’ option which displays that text behind the paragraph, and a default option which contains the text in a light blue box.

SUPPORTED BY

Choose which supporters deserve recognition from the dropdown list and say 'thanks' by choosing the 'Thank You' option

SUPPORTED BY

Sometimes thanking folks isn't appropriate. In this case you'll still choose supporters from the dropdown, but leave the 'default' option active. This will keep this area more open-ended for use in a variety of situations.

Gravity Form Component

The Gravity Form component is used any time you need to get information from a user. Build a form in the backend and place it on whichever page you wish. This component supports lots of different types of fields including radio buttons, checkboxes, dropdowns, and text areas.

Sample Form

Use this text area to provide helpful information to the user. You could explain why you need certain info, reassure their information's security, or describe the process of with which you will contact them. A little context goes a long way in insuring a good experience for the user!
  • Choose one or more.
  • This field is for validation purposes and should be left unchanged.

News by Tag Component

Below should be a callout to the latest News post tagged “Music.”