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

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
class="color-[color name]"
Fill Color
class="fill-[color name]"
Border Color
class="border-[color name]"

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

#COLORS
<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.

A Petit Header

Some fun text for you to read, and a link too.

  • Even elements like lists

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-all
border-top
border-bottom
border-left
border-right
Border Style
border-dashed
border-solid
border-dotted
Circle
border-circle

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)

<div class="duarte-logo nano"></div>
<div class="duarte-logo micro"></div>
<div class="duarte-logo tiny"></div>
<div class="duarte-logo small"></div>
<div class="duarte-logo medium"></div>
<div class="duarte-logo large"></div>

CSS3 Logo

<div class="duarte-logo css nano"></div>
<div class="duarte-logo css micro"></div>
<div class="duarte-logo css tiny"></div>
<div class="duarte-logo css small"></div>
<div class="duarte-logo css medium"></div>
<div class="duarte-logo css large"></div>

PNG Logo

<div class="duarte-logo image nano"></div>
<div class="duarte-logo image micro"></div>
<div class="duarte-logo image tiny"></div>
<div class="duarte-logo image small"></div>
<div class="duarte-logo image medium"></div>
<div class="duarte-logo image large"></div>

Evelyn Sans Logo

<div class="duarte-logo evelyn nano"></div>
<div class="duarte-logo evelyn micro"></div>
<div class="duarte-logo evelyn tiny"></div>
<div class="duarte-logo evelyn small"></div>
<div class="duarte-logo evelyn medium"></div>
<div class="duarte-logo evelyn large"></div>

SVG Branded Logo

The SVG Logo can be extended with a site name that uses ApexNew font.

<div class="duarte-logo branded nano">Duarte</div>
<div class="duarte-logo branded micro">Duarte</div>
<div class="duarte-logo branded tiny">Duarte</div>
<div class="duarte-logo branded small">Duarte</div>
<div class="duarte-logo branded medium">Duarte</div>
<div class="duarte-logo branded large">Duarte</div>

Legacy SVG Logo

<div class="duarte-logo legacy nano"></div>
<div class="duarte-logo legacy micro"></div>
<div class="duarte-logo legacy tiny"></div>
<div class="duarte-logo legacy small"></div>
<div class="duarte-logo legacy medium"></div>
<div class="duarte-logo legacy large"></div>

Franklin

<div class="duarte-logo franklin nano"></div>
<div class="duarte-logo franklin micro"></div>
<div class="duarte-logo franklin tiny"></div>
<div class="duarte-logo franklin small"></div>
<div class="duarte-logo franklin medium"></div>
<div class="duarte-logo franklin large"></div>

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.

<i class="evelyn-loading"></i>
<i class="evelyn-loading black"></i>
<i class="evelyn-loading dark"></i>
<i class="evelyn-loading dark white"></i>

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.

<i class="evelyn-validation-required"></i>
<i class="evelyn-validation-required evelyn-validation-success"></i>
<i class="evelyn-validation-required evelyn-validation-error"></i>

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

font-family:'ApexNew Light'

ApexNew Light Italic

font-family:'ApexNew Light Italic'

ApexNew Book

font-family:'ApexNew Book'

ApexNew Book Italic

font-family:'ApexNew Book Italic'

ApexNew Medium

font-family:'ApexNew Medium'

ApexNew Medium Italic

font-family:'ApexNew Medium Italic'

GoodPro Wide Book

font-family:'GoodPro Wide Book'

GoodPro Wide Bold

font-family:'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><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>

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.

<p>

Hyperlink

<a>

Bold Text Example

<strong>

Emphasis Text Example

<em>

Underline Text Example

<u>

Strike out text

<strike>

This is super script.

<sup>

This is sub script.

<sub>

Align Left

<p class="text-left">

Align Right

<p class="text-right">

Center

<p class="text-center">
abbr
<abbr title="abbreviation">abbr</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.

Code Example <code> with inline paragraph text

<code> with <pre> wrapper
Plain text with <pre> wrapper

Code Inside Headings

Heading H1 code

Heading H2 code

Heading H3 code

Heading H4 code

Heading H5 code
Heading H6 code
<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.

eiusmod tempor incididunt ut labore Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ducimus autem accusamus necessitatibus est ipsum aliquid maiores harum eveniet voluptatem hic voluptatum iusto tempora!

eiusmod tempor incididunt ut labore Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ducimus autem accusamus necessitatibus est ipsum aliquid maiores harum eveniet voluptatem hic voluptatum iusto tempora!

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!

eiusmod tempor incididunt ut labore

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
<span class="label">Label</span>
<span class="label round">Label Round</span>
Secondary
Secondary Round
<span class="label secondary">Label</span>
<span class="label secondary round">Label Round</span>
Success
Success Round
<span class="label success">Label</span>
<span class="label success round">Label Round</span>
Alert
Alert Round
<span class="label alert">Label</span>
<span class="label alert round">Label Round</span>

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

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
  1. 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.
  2. List item
  3. List item
    1. Nested List Item
    2. Nested List Item
    3. Nested List Item
  4. List item
  5. List item
  6. 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>

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.

Previous/Back

<a class="button prev"></a>

Next

<a class="button next"></a>

Up

<a class="button up"></a>
<a class="button up-right"></a>

Down

<a class="button down"></a>
<a class="button down-right"></a>

Dot

<a class="button dot"></a>
.tiny

.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

.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.inactive

.button.inactive:hover

.button.inactive:active

.medium

.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.inactive

.medium.inactive:hover

.medium.inactive:active

Button Element





<button class="button">button</button>
<button class="button up">button</button>
<button class="button down">button</button>
<button class="button next">button</button>
<button class="button prev">button</button>
                                
<button class="button success">button.success</button>
<button class="button success up">button.success</button>
<button class="button success down">button.success</button>
<button class="button success next">button.success</button>
<button class="button success prev">button.success</button>
<button class="button secondary">button.secondary</button>
<button class="button secondary up">button.secondary</button>
<button class="button secondary down">button.secondary</button>
<button class="button secondary next">button.secondary</button>
<button class="button secondary prev">button.secondary</button>
<button class="button alert">button.alert</button>
<button class="button alert up">button.alert</button>
<button class="button alert down">button.alert</button>
<button class="button alert next">button.alert</button>
<button class="button alert prev">button.alert</button>
<button class="button clear">button.clear</button>
<button class="button clear up">button.clear</button>
<button class="button clear down">button.clear</button>
<button class="button clear next">button.clear</button>
<button class="button clear prev">button.clear</button>
<button class="button inactive">button.inactive</button>
<button class="button inactive up">button.inactive</button>
<button class="button inactive down">button.inactive</button>
<button class="button inactive next">button.inactive</button>
<button class="button inactive prev">button.inactive</button>

Buttons With Color Classes

Vogue color classes also will work on buttons.

hot-orange hot-orange-light hot-orange-dark
<a class="button fill-hot-orange">hot-orange</a>
<a class="button fill-hot-orange-light">hot-orange-light</a>
<a class="button fill-hot-orange-dark">hot-orange-dark</a>
marigold marigold-light marigold-dark
<a class="button fill-marigold">marigold</a>
<a class="button fill-marigold-light">marigold-light</a>
<a class="button fill-marigold-dark">marigold-dark</a>
olive olive-light olive-dark
<a class="button fill-olive">olive</a>
<a class="button fill-olive-light">olive-light</a>
<a class="button fill-olive-dark">olive-dark</a>
fancy-blue fancy-blue-light fancy-blue-dark
<a class="button fill-fancy-blue">fancy-blue</a>
<a class="button fill-fancy-blue-light">fancy-blue-light</a>
<a class="button fill-fancy-blue-dark">fancy-blue-dark</a>
bright-blue bright-blue-light bright-blue-dark
<a class="button fill-bright-blue">bright-blue</a>
<a class="button fill-bright-blue-light">bright-blue-light</a>
<a class="button fill-bright-blue-dark">bright-blue-dark</a>
midnight midnight-light midnight-dark
<a class="button fill-midnight">midnight</a>
<a class="button fill-midnight-light">midnight-light</a>
<a class="button fill-midnight-dark">midnight-dark</a>
black
<a class="button fill-black">black</a>
white
<a class="button fill-white color-bright-blue">white</a>

Special Buttons

These are special cases of the button class.

<nav><a rel="prev">Previous</a></nav>
<nav><a rel="top">Top</a></nav>
<nav><a rel="next">Next</a></nav>
Double Down
<a class="button double-down expand">Double Down</a>
Text Left
<a class="button expand text-left"></a>
<a class="button expand next text-left"></a>
<a class="button expand prev text-left"></a>
Clear Text Left
<a class="button expand clear text-left"></a>
<a class="button expand next clear text-left"></a>
<a class="button expand prev clear text-left"></a>
Text Right
<a class="button expand text-right"></a>
<a class="button expand prev text-right"></a>
<a class="button expand next text-right"></a>
Clear Text Right
<a class="button expand clear text-right"></a>
<a class="button expand prev clear text-right"></a>
<a class="button expand next clear text-right"></a>

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

Simple Tab 1
Simple Tab 2
Simple Tab 3
  • 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. ×
<div class="alert-box">
This is a success alert. ×
<div class="alert-box success">
This is an alert. ×
<div class="alert-box alert">
This is a secondary alert. ×
<div class="alert-box secondary">

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.

Legend
<fieldset>
    <legend>Legend</legend>
    <label>Label</label>
    <input type="text" />
</fieldset>

Select

Radio Buttons

Checkboxes

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>
<i class="evelyn-search search-icon"></i>
$('.duarte-finder').trigger('toggle');
$('.duarte-finder').trigger('show');
$('.duarte-finder').trigger('hide');
$('.duarte-finder').trigger('showPartial');

.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.

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.