static/scss/bootstrap-4.0.0-alpha.6/docs/about/brand.md

   1 ---
   2 layout: docs
   3 title: Brand guidelines
   4 description: Documentation and examples for Bootstrap's logo and brand usage guidelines.
   5 group: about
   6 ---
   7
   8 Have a need for Bootstrap's brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. These guidelines were inspired by MailChimp's [Brand Assets](https://mailchimp.com/about/brand-assets/).
   9
  10 ## Contents
  11
  12 * Will be replaced with the ToC, excluding the "Contents" header
  13 {:toc}
  14
  15 ## Mark and logo
  16
  17 Use either the Bootstrap mark (a capital **B**) or the standard logo (just **Bootstrap**). It should always appear in Helvetica Neue Bold. **Do not use the Twitter bird** in association with Bootstrap.
  18
  19 <div class="bd-brand-logos">
  20   <div class="bd-brand-item">
  21     <div class="bd-booticon bd-booticon-lg">B</div>
  22   </div>
  23   <div class="bd-brand-item inverse">
  24     <div class="bd-booticon bd-booticon-lg bd-booticon-inverse">B</div>
  25   </div>
  26 </div>
  27 <div class="bd-brand-logos">
  28   <div class="bd-brand-item">
  29     <h1>Bootstrap</h1>
  30   </div>
  31   <div class="bd-brand-item inverse">
  32     <h1>Bootstrap</h1>
  33   </div>
  34 </div>
  35
  36 ## Download mark
  37
  38 Download the Bootstrap mark in one of three styles, each available as an SVG file. Right click, Save as.
  39
  40 <div class="bd-brand-logos">
  41   <div class="bd-brand-item">
  42     <img class="svg" src="{{ site.baseurl }}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144">
  43   </div>
  44   <div class="bd-brand-item inverse">
  45     <img class="svg" src="{{ site.baseurl }}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144">
  46   </div>
  47   <div class="bd-brand-item inverse">
  48     <img class="svg" src="{{ site.baseurl }}/assets/brand/bootstrap-punchout.svg" alt="Bootstrap" width="144" height="144">
  49   </div>
  50 </div>
  51
  52 ## Name
  53
  54 The project and framework should always be referred to as **Bootstrap**. No Twitter before it, no capital _s_, and no abbreviations except for one, a capital **B**.
  55
  56 <div class="bd-brand-logos">
  57   <div class="bd-brand-item">
  58     <h3>Bootstrap</h3>
  59     <strong class="text-success">Right</strong>
  60   </div>
  61   <div class="bd-brand-item">
  62     <h3 class="text-muted">BootStrap</h3>
  63     <strong class="text-warning">Wrong</strong>
  64   </div>
  65   <div class="bd-brand-item">
  66     <h3 class="text-muted">Twitter Bootstrap</h3>
  67     <strong class="text-warning">Wrong</strong>
  68   </div>
  69 </div>
  70
  71 ## Colors
  72
  73 Our docs and branding use a handful of primary colors to differentiate what *is* Bootstrap from what *is in* Bootstrap. In other words, if it's purple, it's representative of Bootstrap.
  74
  75 <div class="bd-brand">
  76   <div class="color-swatches">
  77     <div class="color-swatch bd-purple"></div>
  78     <div class="color-swatch bd-purple-light"></div>
  79     <div class="color-swatch bd-purple-lighter"></div>
  80     <div class="color-swatch bd-gray"></div>
  81   </div>
  82 </div>