Style Guide
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.
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.
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.
Nina Chanel Abney
Nina Chanel Abney's large-scale paintings and murals take on some of today’s most pressing social justice issues. During her stint as Nannerl O. Keohane Visiting Professor at Duke and UNC-Chapel Hill, she will be in residence at the Rubenstein Arts Center.
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.
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.
-
Women in Leadership
Featured / Perkins Library 217 — 10:00 AM – 11:00 AMFeb 133rd Annual African Film Festival: Children of the Mountain
Featured / Rubenstein Library Holsti-Anderson Family Assembly Room 153 — 7:00 PM – 9:00 PMFeb 13Open Mindfulness Meditation at the Student Wellness Center
Other / Student Wellness Center — 11:00 AM – 12:00 PMFeb 13
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.
The Duke Arts Web Style Guide
This style guide is a great resource for anyone who is looking to become familiar with how to update the arts.duke.edu site.
view the style guide
The Duke Arts Web Style Guide
This style guide is a great resource for anyone who is looking to become familiar with how to update the arts.duke.edu site.
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.
This is an Image Gallery
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!News by Tag Component
Below should be a callout to the latest News post tagged “Music.”
Announcing the return of Music in the Gardens
Duke Performances is thrilled to announce the return of Music in the Gardens, now FREE to all. This long-running concert series is held outdoors at Sarah P. Duke Gardens and will include a five-concert showcase of nationally-renowned artists. View the 2023 line-up below!