Foundations¶

Brand Colors¶

The Dataverse Project uses a particular color palette to help users quickly and easily identify the different types of objects: Dataverse collections, datasets, and files.

We use our brand color, a custom burnt orange {color:#C55B28;}, which is set in our CSS stylesheet, “structure.css”. There is also a set of blue “dataset” classes and grey “file” classes, used to help identify those objects when searching and navigating the application.

/* structure.css */
.bg-dataverse {
  background:#C55B28;
}
.bg-dataset {
  background:#337AB7;
}
.bg-file {
  background:#F5F5F5;
}

#navbarFixed .navbar-brand {
  color: #C55B28;
}
#navbarFixed .icon-dataverse {
  color: #C55B28;
}

<div class="bg-dataverse">...</div>
<div class="bg-dataset">...</div>
<div class="bg-file">...</div>

/* structure.css */
.text-dataverse {
  color:#C55B28;
}
.text-dataset {
  color:#31708F;
}
.text-file {
  color:#F5F5F5;
}

<p class="text-dataverse">...</p>
<p class="text-dataset">...</p>
<p class="text-file">...</p>

Text Colors¶

Text color is the default setting from Bootstrap CSS.

/* bootstrap.css */
body {
  color: #333;
}

<p>...</p>

Link Colors¶

Link color is the default setting from Bootstrap CSS. The hover state color is set to 15% darker.

Please note, there is a CSS override issue with the link color due to the use of both a Bootstrap stylesheet and a PrimeFaces stylesheet in the UI. We’ve added CSS such as .ui-widget-content a {color: #428BCA;} to our stylesheet to keep the link color consistent.

/* bootstrap.css */
a {
  color: #337AB7;
}
a:hover {
  color: #23527C;
}

/* structure.css */
.ui-widget-content a {
  color: #337AB7;
}
.ui-widget-content a:hover, .ui-widget-content a:focus {
  color: #23527C;
}

<a>...</a>

Contextual Classes¶

Contextual classes from Bootstrap CSS can be used to style background and text colors. Semantic colors include various colors assigned to meaningful contextual values. We convey meaning through color with a handful of emphasis utility classes.

<div class="bg-primary">...</div>
<div class="bg-success">...</div>
<div class="bg-info">...</div>
<div class="bg-warning">...</div>
<div class="bg-danger">...</div>

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

Bootstrap Glyphicons¶

There are over 250 glyphs in font format from the Glyphicon Halflings set provided by Bootstrap. We utilize these mainly as icons inside of buttons and in message blocks.

<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-user"></span>
<span class="glyphicon glyphicon-lock"></span>

FontCustom Icon Font¶

With the use of FontCustom we were able to generate our own custom icon webfonts. We use these in the search result cards to help distinguish between Dataverse collection, dataset and file results.

<span class="icon-dataverse text-dataverse"></span>
<span class="icon-dataset text-dataset"></span>
<span class="icon-file text-file"></span>

Socicon Icon Font¶

We use Socicon for our custom social icons. In the footer we use icons for Twitter and Github. In our Share feature, we also use custom social icons to allow users to select from a list of social media channels.

<span class="socicon socicon-github" title="Dataverse Project On GitHub"></span>
<span class="socicon socicon-twitter" title="Dataverse Project On Twitter"></span>
<span class="socicon socicon-facebook" title="Dataverse Project On Facebook"></span>