Color Names and Values
Several colors have alias names for the academy
- fancy-blue
twodvs - bright-blue
resonate - olive
ecourse - marigold
onedvs - hot-orange
slideology - black
- midnight
- very-dark
- dark
- taupe
- light
- legacy-gray
- very-light
- white
Light Tint 20% Lighter
Add the suffix -light
to the color class to get a lighter tint.
class="color-fancy-blue-light"
- fancy-blue-light
- bright-blue-light
- olive-light
- marigold-light
- hot-orange-light
- taupe-light
- warm-gray-light
- midnight-light
Dark Tint 20% Darker
Add the suffix -dark
to the color class to get a darker tint.
class="color-fancy-blue-dark"
- fancy-blue-dark
- bright-blue-dark
- olive-dark
- marigold-dark
- hot-orange-dark
- taupe-dark
- warm-gray-dark
- midnight-dark
Deprecated Color Names
These names are not recommended for use, but are still here to support older pages built using the early version of Vogue.
- ash
- bandicoot
- gulf-stream
- chocolate
- sycamore
- bondi-blue
- terracotta
Color Classes
You can apply vogue colors to text, fills, and borders on any element by using color classes provided. The syntax is simple, just use the right prefix for the attribute you want to style and append the name of the color you want to use.
Text Color |
|
Fill Color |
|
Border Color |
|
Text Color
Somewhere over the rainbow.
<span class="color-marigold">Somewhere</span>
<span class="color-bright-blue">over</span>
<span class="color-olive">the</span>
<span class="color-hot-orange">rainbow</span>
Combining Color Classes
<div class="color-white fill-bright-blue-light border-all border-bright-blue">#COLORS</div>
Auto Colors Inside Dark Fill
If you choose a dark fill, vogue will automatically change the text color of elements inside that element to white. Links are preserved as blue.
Border Classes
These classes can help you quickly apply a border to an object with a specific style and color. There are no classes for border width, so border is always defaulted to 1px.
Border Position |
|
Border Style |
|
Circle |
|
Logos
A collection of logos are available at different sizes. The default logo is an SVG which provides the sharpest quality on hi-resolution screens. It does not allow for color classes, except for a white version. All logos will automatically switch to the white version in the dark theme. Support for the CSS logo is limited in some browsers. Old browsers such as IE 8 and lower will automatically default to the PNG Logo instead of SVG.
SVG Logo (Default)
|
|
|
|
|
|
|
|
|
|
|
CSS3 Logo
|
|
|
|
|
|
|
|
|
|
|
PNG Logo
|
|
|
|
|
|
|
|
|
|
|
Evelyn Sans Logo
|
|
|
|
|
|
|
|
|
|
|
SVG Branded Logo
The SVG Logo can be extended with a site name that uses ApexNew font.
Duarte
|
Duarte
|
Duarte
|
Duarte
|
Duarte
|
Duarte
|
Legacy SVG Logo
|
|
|
|
|
|
Franklin
|
|
|
|
|
|
|
|
|
|
|
EvelynSans Icons
EvelynSans is a font-face containing a collection of vector icons. These icons are endlessly scalable and can easily be colored using simple color classes.
<i class="evelyn-[icon name]"></i>
Duarte Icons
Loading Indicators
This loading indicator icon is an animated gif. It comes in four different styles depending on the background and the color of the indicator. Because animated gifs don't have alpha the edges have some matte bleed so be sure to match the right icon to the background.
|
|
|
|
|
|
|
Validation Icons
Validation icons can be added next to form fields to show validation status. The required icon is intended to be subtle so as not to be a distraction until the user has succeeded or failed the validation.
|
|
|
|
|
Fonts
These fonts are included as part of Vogue and are made available to you with font-family. ApexNew is the primary brand font and is available in three weights at all sizes. Apex is also provided with every web font format to ensure maximum coverage across browsers. GoodPro is not intended for use outside Duarte internal sites, and it does not have full web font format support.
ApexNew Light |
|
ApexNew Light Italic |
|
ApexNew Book |
|
ApexNew Book Italic |
|
ApexNew Medium |
|
ApexNew Medium Italic |
|
GoodPro Wide Book |
|
GoodPro Wide Bold |
|
Headers (ApexNew Book)
h1 Header | 47px |
h2 Header | 37px |
h3 Header | 29px |
h4 Header | 23px |
h5 Header | 18px |
h6 Header | 14px |
Headers with Secondary Text
Use the <small>
tag inside of headers when you need a tagline or a subtitle on the same line.
h1 Header Secondary | 28px |
h2 Header Secondary | 22px |
h3 Header Secondary | 17px |
h4 Header Secondary | 14px |
h5 Header Secondary | 14px |
h6 Header Secondary | 14px |
<h1>h1 Header <small>Secondary</small></h1>
Light Header
A majority of the top level headings across the Duarte brand rely on the light style for headings. It is a good idea to use light whenever you are using a h1
or h2
size heading.
h1 Header light | 47px |
h2 Header light | 37px |
h3 Header light | 29px |
h4 Header light | 23px |
h5 Header light | 18px |
h6 Header light | 14px |
<h1 class="light">
Emphasis Header
h1 Header emphasis | 47px |
h2 Header emphasis | 37px |
h3 Header emphasis | 29px |
h4 Header emphasis | 23px |
h5 Header emphasis | 18px |
h6 Header emphasis | 14px |
<h1><em></em></h1>
Light Emphasis Header
h1 Header light emphasis | 47px |
h2 Header light emphasis | 37px |
h3 Header light emphasis | 29px |
h4 Header light emphasis | 23px |
h5 Header light emphasis | 18px |
h6 Header light emphasis | 14px |
<h1 class="light"><em></em></h1>
Strong Header
h1 Header strong | 47px |
h2 Header strong | 37px |
h3 Header strong | 29px |
h4 Header strong | 23px |
h5 Header strong | 18px |
h6 Header strong | 14px |
<h1><strong></strong></h1>
Strong Emphasis Header
h1 Header strong emphasis | 47px |
h2 Header strong emphasis | 37px |
h3 Header strong emphasis | 29px |
h4 Header strong emphasis | 23px |
h5 Header strong emphasis | 18px |
h6 Header strong emphasis | 14px |
<h1><em><strong></strong></em></h1>
<h1><strong><em></em></strong></h1>
Linked Headers
h1 Link | h1 Light Link |
h2 Link | h2 Light Link |
h3 Link | h3 Light Link |
h4 Link | h4 Light Link |
h5 Link | h5 Light Link |
h6 Link | h6 Light Link |
<h1><a></a></h1>
<h1 class="light"><a></a></h1>
Header Group
When hierarchical headers are adjacent use a header group
Resonate
Present Visual Stories That Transform Audiences
<hgroup>
<h2>Resonate</h2>
<h3>Present Visual Stories That Transform Audiences</h3>
</hgroup>
Paragraphs
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, enim, maxime voluptas quibusdam saepe autem dolor aliquam iusto asperiores sunt officiis assumenda a soluta velit commodi fuga eum ratione quisquam. |
|
|
|
Bold Text Example |
|
Emphasis Text Example |
|
Underline Text Example |
|
|
|
This is super script. |
|
This is sub script. |
|
Align Left |
|
Align Right |
|
Center |
|
abbr |
|
Code and Preformatted Text
Code examples are useful for showing example text, as demonstrated here on this page. The mono-spaced font is very readable because every letter has the same width. The benefit of this kind of font is that it minimizes mistakes when a user is reading or copying the text by sight.
The <pre>
tag is for preformatted text. This means that all spaces and returns in the HTML code are represented on the rendered page. The <code>
tag is for bits of code or special reserved names such as classes or variables. For blocks of code use <pre><code></code></pre>
as a container.
|
|
Plain text with <pre> wrapper |
Code Inside Headings
Heading H1 |
Heading H2 |
Heading H3 |
Heading H4 |
Heading H5 |
Heading H6 |
<h1>Heading H1 <code>code</code></h1>
Inline Quotes
Inline quotes are useful for calling out a short excerpt from a body of text. This style will automatically apply the quote tags for you so you don't have to include them in the HTML.
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ducimus autem accusamus necessitatibus est ipsum aliquid maiores harum eveniet voluptatem hic voluptatum iusto tempora corporis eos a odit id neque!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ducimus autem accusamus necessitatibus est ipsum aliquid maiores harum eveniet voluptatem hic voluptatum iusto tempora corporis eos a odit id neque! |
<q class="left">quote</q>
<q class="right">quote</q>
<q>quote</q>
Blockquote
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Thomas Jefferson Third President of the United States of America
<blockquote>
<p>quote text</p>
<cite><strong>Name</strong> Title</cite>
</blockquote>
Labels
Labels are inline elements useful for tagging or highlighting a word. Generally labels should be short—either one or two words in length.
Label Label Round |
|
Secondary Secondary Round |
|
Success Success Round |
|
Alert Alert Round |
|
Tables
Vogue provides many different table styles. All tables should contain thead
and tbody
elements, but there is a backup style for tables that omit these (see the last table entry). To achieve the best formatting these tags are highly recommended. Because Vogue overrides the base table
tag you will find it very difficult to use tables for structure, but there is a reset
class provided for situations like that.
Default Table
Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
<table>
Striped Table
Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
<table class="striped">
Condensed Table
Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
<table class="condensed">
Vertical Table
Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
<table class="vertical">
Vertical Condensed Table
Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
<table class="vertical condensed">
Vertical Striped Table
Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
<table class="vertical striped">
Vertical Condensed Striped Table
Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
<table class="vertical condensed striped">
Grid
Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
<table class="grid">
Grid Condensed
Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
<table class="grid condensed">
Grid Striped
Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
<table class="grid striped">
No Head
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
<table class="nohead">
Reset
Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
<table class="reset">
Table without thead
or tbody
tags
Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Data | Data | Data | Data | Data |
Lists
Unordered Lists
Disc
- List item with enough content to cause the text to wrap to the second line, which can cause issues if the list style is not setup to handle this elegantly.
- List item
- List item
- Nested List Item
- Nested List Item
- Nested List Item
- List item
- List item
- List item
<ul class="disc">
Circle
- List item with enough content to cause the text to wrap to the second line, which can cause issues if the list style is not setup to handle this elegantly.
- List item
- List item
- Nested List Item
- Nested List Item
- Nested List Item
- List item
- List item
- List item
<ul class="circle">
Square
- List item with enough content to cause the text to wrap to the second line, which can cause issues if the list style is not setup to handle this elegantly.
- List item
- List item
- Nested List Item
- Nested List Item
- Nested List Item
- List item
- List item
- List item
<ul class="square">
None
- List item with enough content to cause the text to wrap to the second line, which can cause issues if the list style is not setup to handle this elegantly.
- List item
- List item
- Nested List Item
- Nested List Item
- Nested List Item
- List item
- List item
- List item
<ul class="none">
Ordered List
- List item with enough content to cause the text to wrap to the second line, which can cause issues if the list style is not setup to handle this elegantly.
- List item
- List item
- Nested List Item
- Nested List Item
- Nested List Item
- List item
- List item
- List item
<ol >
Definition Lists
- Title
- Definition text, you can add as many of these as you need. The line-height matches paragraphs.
<dl>
<dt>Title</dt>
<dd>Definition</dd>
</dl>
Buttons
Vogue comes with a solid button that you can use for many situations. This button will automatically be applied to any <button>
tag. To create a hyperlink button add the button
class to any <a>
tag.
.tiny:hover
.tiny:active
.tiny.secondary
.tiny.secondary:hover
.tiny.secondary:active
.tiny.success
.tiny.success:hover
.tiny.success:active
.tiny.alert
.tiny.alert:hover
.tiny.alert:active
.tiny.inactive
.tiny.inactive:hover
.tiny.inactive:active
Previous/Back
<a class="button prev"></a>
.tiny:hover
.tiny:active
.tiny.secondary
.tiny.secondary:hover
.tiny.secondary:active
.tiny.success
.tiny.success:hover
.tiny.success:active
.tiny.alert
.tiny.alert:hover
.tiny.alert:active
.tiny.clear
.tiny.clear:hover
.tiny.clear:active
.tiny.inactive
.tiny.inactive:hover
.tiny.inactive:active
.button:hover
.button:active
.button.secondary
.button.secondary:hover
.button.secondary:active
.button.success
.button.success:hover
.button.success:active
.button.alert
.button.alert:hover
.button.alert:active
.button.clear
.button.clear:hover
.button.clear:active
.button.inactive
.button.inactive:hover
.button.inactive:active
.medium:hover
.medium:active
.medium.secondary
.medium.secondary:hover
.medium.secondary:active
.medium.success
.medium.success:hover
.medium.success:active
.medium.alert
.medium.alert:hover
.medium.alert:active
.medium.clear
.medium.clear:hover
.medium.clear:active
.medium.inactive
.medium.inactive:hover
.medium.inactive:active
Next
<a class="button next"></a>
.tiny:hover
.tiny:active
.tiny.secondary
.tiny.secondary:hover
.tiny.secondary:active
.tiny.success
.tiny.success:hover
.tiny.success:active
.tiny.alert
.tiny.alert:hover
.tiny.alert:active
.tiny.clear
.tiny.clear:hover
.tiny.clear:active
.tiny.inactive
.tiny.inactive:hover
.tiny.inactive:active
.button:hover
.button:active
.button.secondary
.button.secondary:hover
.button.secondary:active
.button.success
.button.success:hover
.button.success:active
.button.alert
.button.alert:hover
.button.alert:active
.button.clear
.button.clear:hover
.button.clear:active
.button.inactive
.button.inactive:hover
.button.inactive:active
.medium:hover
.medium:active
.medium.secondary
.medium.secondary:hover
.medium.secondary:active
.medium.success
.medium.success:hover
.medium.success:active
.medium.alert
.medium.alert:hover
.medium.alert:active
.medium.clear
.medium.clear:hover
.medium.clear:active
.medium.inactive
.medium.inactive:hover
.medium.inactive:active
Up
<a class="button up"></a>
<a class="button up-right"></a>
.tiny:hover
.tiny:active
.tiny.secondary
.tiny.secondary:hover
.tiny.secondary:active
.tiny.success
.tiny.success:hover
.tiny.success:active
.tiny.alert
.tiny.alert:hover
.tiny.alert:active
.tiny.clear
.tiny.clear:hover
.tiny.clear:active
.tiny.inactive
.tiny.inactive:hover
.tiny.inactive:active
.button:hover
.button:active
.button.secondary
.button.secondary:hover
.button.secondary:active
.button.success
.button.success:hover
.button.success:active
.button.alert
.button.alert:hover
.button.alert:active
.button.clear
.button.clear:hover
.button.clear:active
.button.inactive
.button.inactive:hover
.button.inactive:active
.medium:hover
.medium:active
.medium.secondary
.medium.secondary:hover
.medium.secondary:active
.medium.success
.medium.success:hover
.medium.success:active
.medium.alert
.medium.alert:hover
.medium.alert:active
.medium.clear
.medium.clear:hover
.medium.clear:active
.medium.inactive
.medium.inactive:hover
.medium.inactive:active
Down
<a class="button down"></a>
<a class="button down-right"></a>
.tiny:hover
.tiny:active
.tiny.secondary
.tiny.secondary:hover
.tiny.secondary:active
.tiny.success
.tiny.success:hover
.tiny.success:active
.tiny.alert
.tiny.alert:hover
.tiny.alert:active
.tiny.clear
.tiny.clear:hover
.tiny.clear:active
.tiny.inactive
.tiny.inactive:hover
.tiny.inactive:active
.button:hover
.button:active
.button.secondary
.button.secondary:hover
.button.secondary:active
.button.success
.button.success:hover
.button.success:active
.button.alert
.button.alert:hover
.button.alert:active
.button.clear
.button.clear:hover
.button.clear:active
.button.inactive
.button.inactive:hover
.button.inactive:active
.medium:hover
.medium:active
.medium.secondary
.medium.secondary:hover
.medium.secondary:active
.medium.success
.medium.success:hover
.medium.success:active
.medium.alert
.medium.alert:hover
.medium.alert:active
.medium.clear
.medium.clear:hover
.medium.clear:active
.medium.inactive
.medium.inactive:hover
.medium.inactive:active
Dot
<a class="button dot"></a>
.tiny:hover
.tiny:active
.tiny.secondary
.tiny.secondary:hover
.tiny.secondary:active
.tiny.success
.tiny.success:hover
.tiny.success:active
.tiny.alert
.tiny.alert:hover
.tiny.alert:active
.tiny.inactive
.tiny.inactive:hover
.tiny.inactive:active
Button Element
|
|
|
|
|
|
|
|
|
|
|
Buttons With Color Classes
Vogue color classes also will work on buttons.
hot-orange hot-orange-light hot-orange-dark |
|
marigold marigold-light marigold-dark |
|
olive olive-light olive-dark |
|
fancy-blue fancy-blue-light fancy-blue-dark |
|
bright-blue bright-blue-light bright-blue-dark |
|
midnight midnight-light midnight-dark |
|
black |
|
white |
|
Special Buttons
These are special cases of the button class.
|
|
|
|
|
|
Double Down |
|
Text Left |
|
Text Left |
|
Text Left |
|
Clear Text Left |
|
Clear Text Left |
|
Clear Text Left |
|
Text Right |
|
Text Right |
|
Text Right |
|
Clear Text Right |
|
Clear Text Right |
|
Clear Text Right |
|
Button in a Fill Test
Button Text Color Test
Button Group
<ul class="button-group">
<li><a class="button">Button</a></li>
...
</ul>
<ul class="button-group even two-up">
<ul class="button-group even three-up">
<ul class="button-group even four-up">
<ul class="button-group even five-up">
Dropdown Buttons
By default the menu items on click will follow the link href. If you want to cancel that behavior then add the attribute data-default="false"
to the dropdown
element.
<div class="button dropdown black">
<span>Dropdown Button</span>
<ul class="no-hover">
<li><a href="#link">Dropdown Item</a></li>
<li><a href="#link">Another Dropdown Item</a></li>
</ul>
</div>
Tabs
- Tab 1 Contents
- Tab 2 Contents
- Tab 3 Contents
<dl class="tabs">
<dd class="active"><a href="#simple1">Simple Tab 1</a></dd>
<dd><a href="#simple2">Simple Tab 2</a></dd>
<dd><a href="#simple3">Simple Tab 3</a></dd>
</dl>
<ul class="tabs-content">
<li class="active" id="simple1Tab">Tab 1 Contents</li>
<li id="simple2Tab">Tab 2 Contents</li>
<li id="simple3Tab">Tab 3 Contents</li>
</ul>
Alerts
This is a standard alert.
×
|
|
This is a success alert.
×
|
|
This is an alert.
×
|
|
This is a secondary alert.
×
|
|
Forms
Basic Form
Label Alignment
Sometimes you want a form with labels to the left of your inputs. Piece of cake. You can add a class of .right
to a label to have it align to the right, and if your label is next to an input (in another column) adding a class of .inline
will have it vertically center against an input.
<form>
<div class="row unpadded">
<div class="two mobile-one columns">
<label class="right inline">Address Name:</label>
</div>
<div class="ten mobile-three columns">
<input type="text" placeholder="e.g. Home" class="eight">
</div>
</div>
</form>
Fieldsets
Use a fieldset to group inputs together with a legend to name the group. This is useful for related inputs like address, city, state, postal code.
<fieldset>
<legend>Legend</legend>
<label>Label</label>
<input type="text" />
</fieldset>
Select
Radio Buttons
Checkboxes
Duarte Finder
Add a search panel that reveals itself from the top of the page. Place this element in the root of the page inside of body
.
<div class="duarte-finder">
<div class="row">
<div class="eight columns centered">
<form>
<div class="row collapse">
<div class="ten mobile-three columns">
<input type="text" placeholder="What are you looking for?" name="search">
</div>
<div class="two mobile-one columns">
<button class="button expand postfix search">Search</button>
</div>
</div>
</form>
<a href="#" class="button black up" rel="close-finder">Close</a>
</div>
</div>
</div>
Finder Methods
|
|
|
|
|
|
|
|
|
.global-search
is a HTML snippet to provide a search icon for opening and closing the finder
.duarte-finder
is a revealed searchbox that slides down from the top of the window.
Page Structure
A basic page that implements Vogue should look something like this:
<body>
<header>
<div class="row">
<div class="twelve columns"><div class="duarte-logo"></div></div>
</div>
</header>
<section role="main">
<div class="row">
<div class="four columns"><!-- Sidebar --></div>
<article class="eight columns"><!-- Content --></article>
</div>
</section>
<footer>
<div class="row">
<div class="twelve columns"><!-- Footer --></div>
</div>
</footer>
</body>
header.nofill
will not use a filled background.
Adding <section role="main" >
will give it a 400px min-height and a 3em bottom margin
Adding class="row"
to any of the structure elements will constrict the background fill to the 12 column grid width. By default these elements will expand to fill the width of the window.