Visual Elements Guidelines

Colors

Learn how we use colors on Datadog Corpsite

Download Sketch File

Full list of colors that are being used in corpsite can be found here

Primary Colors

$brand-primary: #632CA6;
$brand-neue: #7700FF;
$gray-base: #000000;
$white-base: #ffffff;

Secondary Colors

$brand-success: #5cb85c;
$brand-info: #3399cc;
$brand-warning: #f0ad4e;
$brand-danger: #d9534f;
$brand-yellow: #fbc906;

Grayscale

$gray-darker: #333333;
$gray-dark: #555555;
$gray: #888888;
$gray-light: #c7c7c7;
$gray-lighter: #eeeeee;
$gray-lightest: #f6f6f6;

Transparency

Opacity Variables

$opacity-base: 0.07;
$opacity-light: $opacity-base * 2.15; // 0.15
$opacity-med: $opacity-base * 3.57142857; // 0.25
$opacity-btn:	$opacity-base * 10;	// 0.70

Buttons

Learn how to style buttons using SCSS / SaSS

Download Sketch File

Basic corpsite button styles can be appied to <button> tag by adding .btnas a base class name. Color / Style variations of basic button can be found in Sass Map in _buttons.scss file.

$buttoncolors

$buttoncolors:
(
   black:$gray-base,
   white:$white-base,
   primary:$brand-primary,
   gradient:gradient
);

Here are basic corp-site buttons rendered on a page:

Tags

Shadows

Learn how to style box-shadow using SCSS / SaSS

Drop shadow / Box shadow is a graphic device, and can be applied to a field of visual elements. Corp-site has 3-preset opacity values for box-shadow which can be found inside global variable scss file:

shadows variables

$shadow-nav: 0px 8px 10px 0 rgba(0,0,0,.07);
$shadow-tile-default: 0 4px 10px rgba(0,0,0,.2);
$shadow-tile-hover: 0 8px 20px rgba(0,0,0,.25);

List

List style mixin function

@mixin dash-list{
  margin-right: 0px;
  list-style-type: none;
  padding-left: 30px;
  li {
    &:before {
      content: "–";
      margin-right: 5px;
      margin-left: -16px;
    }
    p {
      display: inline;
    }
  }
}

Helper class

.dash-list{
  @include dash-list;
}