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.
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.
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.
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.
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.
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.
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.
Featured / Perkins Library 217 — 10:00 AM – 11:00 AMFeb 13Featured / Rubenstein Library Holsti-Anderson Family Assembly Room 153 — 7:00 PM – 9:00 PMFeb 13Other / 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.
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.
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.
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.
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.
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.
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 FormUse 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.”