<commit_before>---
title: Brand Guidelines
---
<h1>Brand Guidelines</h1>
<h2>Logo Usage</h2>
<div class="row">
  <div class="small-12 large-12 columns">
    <h3>A Logo is Worth a Thousand Words</h3>
  </div>
</div>
<div class="row">
  <div class="small-12 large-6 columns">
    <p>
      The Chef logo means a lot of things to a lot
      of people. It is a seal of quality and a stamp
      of approval from the company. Therefore it
      should be used proudly, consistently, and with
      great meaning.
    </p>
    <p>
      The Chef logo is always vertical. Even in
      horizontal layouts, such as banners or
      headers, the logo remains in the vertical
      layout. Additionally, the circular logo and the
      name must always appear together.
    </p>
    <p style="font-size: .7rem;">
      * In rare occasions the horizontal logo is needed.
      For these instances please contact <%= link_to "<EMAIL>}", "mailto:<EMAIL>@#{chef_<EMAIL>}" %> for a request.
    </p>
  </div>
  <div class="small-12 large-6 columns">
    <div class="row example" style="text-align:center;">
      <div class="small-6 large-6 columns">
        <h6>The Logo</h6>
        <br/>
        <%= image_tag "example/logo-tm.svg", :width => 100 %>
      </div>
      <div class="small-6 large-6 columns">
        <h6>Not The Logo</h6>
        <br/>
        <%= image_tag "example/not-logo-text.png", :width => 140 %>
        <hr>
        <%= image_tag "example/not-logo-horizontal.png", :width => 140 %>
        <hr>
        <%= image_tag "example/not-logo-symbol.png", :width => 50 %>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="small-12 large-12 columns">
    <h3>Acceptable Subtitles</h3>
  </div>
</div>
<div class="row">
  <div class="small-12 large-6 columns">
    <p>
      There are two options for the messaging
      under the logo: CHEF.IO or blank. Under
      no circumstances may something else be
      displayed in that area.
    </p>
    <p>
      If you see the logo with something else
      written beneath Chef, please alert someone
      on the marketing team immediately.
    </p>
  </div>
  <div class="small-12 large-6 columns">
    <div class="row example" style="text-align:center;">
      <div class="small-6 large-6 columns">
        <h6>No Subtitle</h6>
        <br/>
        <%= image_tag "example/logo-tm.svg", :width => 100 %>
      </div>
      <div class="small-6 large-6 columns">
        <h6><em>CHEF.IO</em> Subtitle</h6>
        <br/>
        <%= image_tag "example/logo-with-io.svg", :width => 100 %>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="small-12 large-12 columns">
    <h3>Alternative Styles</h3>
  </div>
</div>
<div class="row">
  <div class="small-12 large-6 columns">
    <p>
      The inverse logo cannot be used on an orange
      background. If possible, please only use this
      logo on darker colors. The title must be white
      and the subtitle must be orange in the inverse
      logo. An all white logo is acceptable in some
      situations.
    </p>
  </div>
  <div class="small-12 large-6 columns">
    <div class="row example" style="text-align:center;">
      <div class="small-6 large-6 columns">
        <h6>Regular Logo</h6>
        <div style="padding:22px;">
          <%= image_tag "example/logo-tm.svg", :width => 100 %>
        </div>
      </div>
      <div class="small-6 large-6 columns">
        <h6>Inverse Logo</h6>
        <div style="background-color:#3f5364;padding:22px;">
          <%= image_tag "example/logo-inverse.svg", :width => 100 %>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="small-12 large-12 columns">
    <h3>Required Whitespace</h3>
  </div>
</div>
<div class="row">
  <div class="small-12 large-6 columns">
    <p>
      Whitespace surrounding the logo must be at
      least the height and width of the CHEF “CH” in
      all directions.
    </p>
  </div>
  <div class="small-12 large-6 columns">
    <div class="row example" style="text-align:center;">
      <div class="small-6 large-6 columns">
        <div style="border: 1px solid #d4d7d9; width: 70px;height: 70px; box-sizing: initial; padding: 30px;">
          <%= image_tag "example/logo-tm.svg", :width => 100 %>        
        </div>
      </div>
      <div class="small-6 large-6 columns">
        <%= image_tag "example/logo-ch-whitespace.png", :width => 132, :style => "vertical-align:top;" %>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="small-12 large-12 columns">
    <h3>Size</h3>
  </div>
</div>
<div class="row">
  <div class="small-12 large-6 columns">
    <p>
      In print, the Chef logo must be used at a <em>minimum</em> size of
      .75” wide with spacing around it equaling at least 1.5”.
    </p>
  </div>
  <div class="small-12 large-6 columns" style="padding-top:1em;">
    <div class="row example" style="text-align:center;">
      <div class="small-6 large-6 columns">
        <%= image_tag "example/logo-size-min.png", :width => 150 %>
      </div>
      <div class="small-6 large-6 columns">
        <%= image_tag "example/logo-size-max.png", :width => 150 %>
      </div>
    </div>
  </div>
</div>
<h2>Download a Logo</h2>
<br/>
<div class="row" style="text-align:center;">
  <div class="small-12 large-6 columns">
    <p>
      <%= image_tag "example/logo-tm.svg", :width => 100, :style=>"padding-top:22px; padding-bottom:12px;" %>
    </p>
    <a href="/assets/images/downloads/Chef_Regular.eps" title="Chef logo regular EPS" class="button secondary">
      <i class="fi-download"></i>
      eps
    </a>
    <a href="/assets/images/downloads/Chef_Regular.svg" title="Chef logo regular SVG" class="button secondary">
      <i class="fi-download"></i>
      svg
    </a>
    <a href="/assets/images/downloads/Chef_Regular.png" title="Chef logo regular PNG" class="button secondary">
      <i class="fi-download"></i>
      png
    </a>
  </div>
  <div class="small-12 large-6 columns">
    <div style="background-color:#3f5364;padding:22px; width: 144px; margin: 5px; display: inline-block; box-sizing: initial">
      <%= image_tag "example/logo-inverse.svg", :width => 100 %>
    </div>
    <br/>
    <a href="/assets/images/downloads/Chef_Inverse.eps" title="Chef logo inverse EPS" class="button secondary">
      <i class="fi-download"></i>
      eps
    </a>
    <a href="/assets/images/downloads/Chef_Inverse.svg" title="Chef logo inverse SVG" class="button secondary">
      <i class="fi-download"></i>
      svg
    </a>
    <a href="/assets/images/downloads/Chef_Inverse.png" title="Chef logo inverse PNG" class="button secondary">
      <i class="fi-download"></i>
      png
    </a>
  </div>
</div>
<br/>
<div class="row" style="text-align:center;">
  <div class="small-12 large-6 columns">
    <p>
      <%= image_tag "example/logo-with-io.svg", :width => 100, :style=>"padding-top:22px; padding-bottom:12px;" %>
    </p>
    <a href="/assets/images/downloads/Chef_IO_Regular.eps" title="Chef IO logo EPS" class="button secondary">
      <i class="fi-download"></i>
      eps
    </a>
    <a href="/assets/images/downloads/Chef_IO_Regular.svg" title="Chef IO logo SVG" class="button secondary">
      <i class="fi-download"></i>
      svg
    </a>
    <a href="/assets/images/downloads/Chef_IO_Regular.png" title="Chef IO logo PNG" class="button secondary">
      <i class="fi-download"></i>
      png
    </a>
  </div>
  <div class="small-12 large-6 columns">
    <div style="background-color:#3f5364;padding:22px; width: 144px; margin: 5px; display: inline-block; box-sizing: initial">
      <%= image_tag "example/logo-with-io-inverse.svg", :width => 100 %>
    </div>
    <br/>
    <a href="/assets/images/downloads/Chef_IO_Inverse.eps" title="Chef IO logo inverse EPS" class="button secondary">
      <i class="fi-download"></i>
      eps
    </a>
    <a href="/assets/images/downloads/Chef_IO_Inverse.svg" title="Chef IO logo inverse SVG" class="button secondary">
      <i class="fi-download"></i>
      svg
    </a>
    <a href="/assets/images/downloads/Chef_IO_Inverse.png" title="Chef IO logo inverse PNG" class="button secondary">
      <i class="fi-download"></i>
      png
    </a>
  </div>
</div>
<p>
  For more ways to include and use the Chef logo, see the
  <%= link_to "Logo component documentation", "/guide/logo/" %>.
</p>
<h2>Trademark</h2>
<p>
  Trademarks must be used properly in Chef materials.
  If a trademark is used improperly, it can weaken
  the brand, making it generic or unenforceable.
  Please visit
  <%= link_to "our trademark policy page", "#{chef_www_url}/trademark-policy" %>
  for a list of the latest Chef
  trademarks for the Chef brand.
<p>
  These guidelines are intended for use by Chef licensees, authorized
  resellers and distributors, and third parties who have received explicit
  permission to use certain Chef trademarks. No right, license or
  permission, express or implied, to use Chef trademarks is provided
  by these guidelines. Further, any uses of Chef trademarks that are not
  covered by any of the examples in these guidelines requires Chef’s
  express written consent.
</p>
<h2>Fonts</h2>
<h3>Headings</h3>
<p>
  Headings and titles should use
  <%= link_to "Gotham Bold", "http://www.typography.com/fonts/gotham/webfonts/gotham-bold/" %>
  or
  <%= link_to "Gotham Book", "http://www.typography.com/fonts/gotham/webfonts/gotham-book/" %>.
  On the web, these fonts are only available on .<%= chef_domain %> domains, and
  cannot be used in software installed on-premises.
</p>
<p>
  If Gotham is not available,
  <%= link_to "Montserrat", "https://www.google.com/fonts/specimen/Montserrat" %>
  can be used, but <em>not</em> for the CHEF text in the Chef logo.
</p>
<p>
  The logo text may only be written in Gotham Bold.
</p>
<h3>Body Text</h3>
<p>
  Body text should prefer Helvetica, but fall back to Arial when Helvetica is
  not available. The string in CSS should look like
  <code>Helvetica, Arial, sans-serif</code>.
</p>
<h3>Font Colors</h3>
<p>
  The logo text may only be written
  in white or dark blue. For content text, black
  or dark blue are preferred. White text is required on
  dark backgrounds.
</p>
<h2>Colors</h2>
<p>
  The colors we use are specified in the
  <%= link_to "Color component documentation", "/guide/color/" %>.
</p>
<h2>Terminology</h2>
<p>
  We use the following names for our products. Note capitalization:
</p>
<ul>
  <li>
    Chef Server, the Chef server
  </li>
  <li>
    Chef Manage, the Chef management console
  </li>
  <li>
    ... you get the idea.
  </li>
</ul>
<h2>Boilerplate</h2>
<h3>About Chef</h3>
<p>
  We are Chef &ndash; the leader in high-velocity IT automation. We give you a model 
  for automating IT infrastructure and applications that drive self-reliance across your development 
  and operations teams. We are the Chef community. We are tens of thousands strong. We are helping 
  your businesses become faster, safer and more flexible, so you win in today's 24&times;7 digital 
  economy. Join our movement today. <%= link_to "www.#{chef_domain}", chef_www_url %>
</p>
<h2>Questions?</h2>
<p>
  Contact <%= link_to "<EMAIL>}", "mailto:<EMAIL>}" %>.
</p><commit_msg>adding anchor tags for easy bookmarking.<commit_after>---
title: Brand Guidelines
---
<h1>Brand Guidelines</h1>
<a name="logo-usage"></a>
<h2>Logo Usage</h2>
<div class="row">
  <div class="small-12 large-12 columns">
    <h3>A Logo is Worth a Thousand Words</h3>
  </div>
</div>
<div class="row">
  <div class="small-12 large-6 columns">
    <p>
      The Chef logo means a lot of things to a lot
      of people. It is a seal of quality and a stamp
      of approval from the company. Therefore it
      should be used proudly, consistently, and with
      great meaning.
    </p>
    <p>
      The Chef logo is always vertical. Even in
      horizontal layouts, such as banners or
      headers, the logo remains in the vertical
      layout. Additionally, the circular logo and the
      name must always appear together.
    </p>
    <p style="font-size: .7rem;">
      * In rare occasions the horizontal logo is needed.
      For these instances please contact <%= link_to "<EMAIL>@#{chef_<EMAIL>}", "mailto:<EMAIL>@#{chef_domain}" %> for a request.
    </p>
  </div>
  <div class="small-12 large-6 columns">
    <div class="row example" style="text-align:center;">
      <div class="small-6 large-6 columns">
        <h6>The Logo</h6>
        <br/>
        <%= image_tag "example/logo-tm.svg", :width => 100 %>
      </div>
      <div class="small-6 large-6 columns">
        <h6>Not The Logo</h6>
        <br/>
        <%= image_tag "example/not-logo-text.png", :width => 140 %>
        <hr>
        <%= image_tag "example/not-logo-horizontal.png", :width => 140 %>
        <hr>
        <%= image_tag "example/not-logo-symbol.png", :width => 50 %>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="small-12 large-12 columns">
    <h3>Acceptable Subtitles</h3>
  </div>
</div>
<div class="row">
  <div class="small-12 large-6 columns">
    <p>
      There are two options for the messaging
      under the logo: CHEF.IO or blank. Under
      no circumstances may something else be
      displayed in that area.
    </p>
    <p>
      If you see the logo with something else
      written beneath Chef, please alert someone
      on the marketing team immediately.
    </p>
  </div>
  <div class="small-12 large-6 columns">
    <div class="row example" style="text-align:center;">
      <div class="small-6 large-6 columns">
        <h6>No Subtitle</h6>
        <br/>
        <%= image_tag "example/logo-tm.svg", :width => 100 %>
      </div>
      <div class="small-6 large-6 columns">
        <h6><em>CHEF.IO</em> Subtitle</h6>
        <br/>
        <%= image_tag "example/logo-with-io.svg", :width => 100 %>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="small-12 large-12 columns">
    <h3>Alternative Styles</h3>
  </div>
</div>
<div class="row">
  <div class="small-12 large-6 columns">
    <p>
      The inverse logo cannot be used on an orange
      background. If possible, please only use this
      logo on darker colors. The title must be white
      and the subtitle must be orange in the inverse
      logo. An all white logo is acceptable in some
      situations.
    </p>
  </div>
  <div class="small-12 large-6 columns">
    <div class="row example" style="text-align:center;">
      <div class="small-6 large-6 columns">
        <h6>Regular Logo</h6>
        <div style="padding:22px;">
          <%= image_tag "example/logo-tm.svg", :width => 100 %>
        </div>
      </div>
      <div class="small-6 large-6 columns">
        <h6>Inverse Logo</h6>
        <div style="background-color:#3f5364;padding:22px;">
          <%= image_tag "example/logo-inverse.svg", :width => 100 %>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="small-12 large-12 columns">
    <h3>Required Whitespace</h3>
  </div>
</div>
<div class="row">
  <div class="small-12 large-6 columns">
    <p>
      Whitespace surrounding the logo must be at
      least the height and width of the CHEF “CH” in
      all directions.
    </p>
  </div>
  <div class="small-12 large-6 columns">
    <div class="row example" style="text-align:center;">
      <div class="small-6 large-6 columns">
        <div style="border: 1px solid #d4d7d9; width: 70px;height: 70px; box-sizing: initial; padding: 30px;">
          <%= image_tag "example/logo-tm.svg", :width => 100 %>        
        </div>
      </div>
      <div class="small-6 large-6 columns">
        <%= image_tag "example/logo-ch-whitespace.png", :width => 132, :style => "vertical-align:top;" %>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="small-12 large-12 columns">
    <h3>Size</h3>
  </div>
</div>
<div class="row">
  <div class="small-12 large-6 columns">
    <p>
      In print, the Chef logo must be used at a <em>minimum</em> size of
      .75” wide with spacing around it equaling at least 1.5”.
    </p>
  </div>
  <div class="small-12 large-6 columns" style="padding-top:1em;">
    <div class="row example" style="text-align:center;">
      <div class="small-6 large-6 columns">
        <%= image_tag "example/logo-size-min.png", :width => 150 %>
      </div>
      <div class="small-6 large-6 columns">
        <%= image_tag "example/logo-size-max.png", :width => 150 %>
      </div>
    </div>
  </div>
</div>
<a name="downloads"></a>
<h2>Download a Logo</h2>
<br/>
<div class="row" style="text-align:center;">
  <div class="small-12 large-6 columns">
    <p>
      <%= image_tag "example/logo-tm.svg", :width => 100, :style=>"padding-top:22px; padding-bottom:12px;" %>
    </p>
    <a href="/assets/images/downloads/Chef_Regular.eps" title="Chef logo regular EPS" class="button secondary">
      <i class="fi-download"></i>
      eps
    </a>
    <a href="/assets/images/downloads/Chef_Regular.svg" title="Chef logo regular SVG" class="button secondary">
      <i class="fi-download"></i>
      svg
    </a>
    <a href="/assets/images/downloads/Chef_Regular.png" title="Chef logo regular PNG" class="button secondary">
      <i class="fi-download"></i>
      png
    </a>
  </div>
  <div class="small-12 large-6 columns">
    <div style="background-color:#3f5364;padding:22px; width: 144px; margin: 5px; display: inline-block; box-sizing: initial">
      <%= image_tag "example/logo-inverse.svg", :width => 100 %>
    </div>
    <br/>
    <a href="/assets/images/downloads/Chef_Inverse.eps" title="Chef logo inverse EPS" class="button secondary">
      <i class="fi-download"></i>
      eps
    </a>
    <a href="/assets/images/downloads/Chef_Inverse.svg" title="Chef logo inverse SVG" class="button secondary">
      <i class="fi-download"></i>
      svg
    </a>
    <a href="/assets/images/downloads/Chef_Inverse.png" title="Chef logo inverse PNG" class="button secondary">
      <i class="fi-download"></i>
      png
    </a>
  </div>
</div>
<br/>
<div class="row" style="text-align:center;">
  <div class="small-12 large-6 columns">
    <p>
      <%= image_tag "example/logo-with-io.svg", :width => 100, :style=>"padding-top:22px; padding-bottom:12px;" %>
    </p>
    <a href="/assets/images/downloads/Chef_IO_Regular.eps" title="Chef IO logo EPS" class="button secondary">
      <i class="fi-download"></i>
      eps
    </a>
    <a href="/assets/images/downloads/Chef_IO_Regular.svg" title="Chef IO logo SVG" class="button secondary">
      <i class="fi-download"></i>
      svg
    </a>
    <a href="/assets/images/downloads/Chef_IO_Regular.png" title="Chef IO logo PNG" class="button secondary">
      <i class="fi-download"></i>
      png
    </a>
  </div>
  <div class="small-12 large-6 columns">
    <div style="background-color:#3f5364;padding:22px; width: 144px; margin: 5px; display: inline-block; box-sizing: initial">
      <%= image_tag "example/logo-with-io-inverse.svg", :width => 100 %>
    </div>
    <br/>
    <a href="/assets/images/downloads/Chef_IO_Inverse.eps" title="Chef IO logo inverse EPS" class="button secondary">
      <i class="fi-download"></i>
      eps
    </a>
    <a href="/assets/images/downloads/Chef_IO_Inverse.svg" title="Chef IO logo inverse SVG" class="button secondary">
      <i class="fi-download"></i>
      svg
    </a>
    <a href="/assets/images/downloads/Chef_IO_Inverse.png" title="Chef IO logo inverse PNG" class="button secondary">
      <i class="fi-download"></i>
      png
    </a>
  </div>
</div>
<p>
  For more ways to include and use the Chef logo, see the
  <%= link_to "Logo component documentation", "/guide/logo/" %>.
</p>
<a name="trademark"></a>
<h2>Trademark</h2>
<p>
  Trademarks must be used properly in Chef materials.
  If a trademark is used improperly, it can weaken
  the brand, making it generic or unenforceable.
  Please visit
  <%= link_to "our trademark policy page", "#{chef_www_url}/trademark-policy" %>
  for a list of the latest Chef
  trademarks for the Chef brand.
<p>
  These guidelines are intended for use by Chef licensees, authorized
  resellers and distributors, and third parties who have received explicit
  permission to use certain Chef trademarks. No right, license or
  permission, express or implied, to use Chef trademarks is provided
  by these guidelines. Further, any uses of Chef trademarks that are not
  covered by any of the examples in these guidelines requires Chef’s
  express written consent.
</p>
<a name="fonts"></a>
<h2>Fonts</h2>
<h3>Headings</h3>
<p>
  Headings and titles should use
  <%= link_to "Gotham Bold", "http://www.typography.com/fonts/gotham/webfonts/gotham-bold/" %>
  or
  <%= link_to "Gotham Book", "http://www.typography.com/fonts/gotham/webfonts/gotham-book/" %>.
  On the web, these fonts are only available on .<%= chef_domain %> domains, and
  cannot be used in software installed on-premises.
</p>
<p>
  If Gotham is not available,
  <%= link_to "Montserrat", "https://www.google.com/fonts/specimen/Montserrat" %>
  can be used, but <em>not</em> for the CHEF text in the Chef logo.
</p>
<p>
  The logo text may only be written in Gotham Bold.
</p>
<h3>Body Text</h3>
<p>
  Body text should prefer Helvetica, but fall back to Arial when Helvetica is
  not available. The string in CSS should look like
  <code>Helvetica, Arial, sans-serif</code>.
</p>
<h3>Font Colors</h3>
<p>
  The logo text may only be written
  in white or dark blue. For content text, black
  or dark blue are preferred. White text is required on
  dark backgrounds.
</p>
<a name="colors"></a>
<h2>Colors</h2>
<p>
  The colors we use are specified in the
  <%= link_to "Color component documentation", "/guide/color/" %>.
</p>
<a name="terminology"></a>
<h2>Terminology</h2>
<p>
  We use the following names for our products. Note capitalization:
</p>
<ul>
  <li>
    Chef Server, the Chef server
  </li>
  <li>
    Chef Manage, the Chef management console
  </li>
  <li>
    ... you get the idea.
  </li>
</ul>
<a name="boilerplate"></a>
<h2>Boilerplate</h2>
<h3>About Chef</h3>
<p>
  We are Chef &ndash; the leader in high-velocity IT automation. We give you a model 
  for automating IT infrastructure and applications that drive self-reliance across your development 
  and operations teams. We are the Chef community. We are tens of thousands strong. We are helping 
  your businesses become faster, safer and more flexible, so you win in today's 24&times;7 digital 
  economy. Join our movement today. <%= link_to "www.#{chef_domain}", chef_www_url %>
</p>
<h2>Questions?</h2>
<p>
  Contact <%= link_to "<EMAIL>}", "mailto:<EMAIL>}" %>.
</p>
{'fraction_non_alphanumeric': 0.1557782290103293, 'fraction_numerical': 0.02074688796680498, 'mean_word_length': 2.9710780017528484, 'pattern_counts': {'":': 0, '<': 613, '<?xml version=': 0, '>': 651, 'https://': 2, 'lorem ipsum': 0, 'www.': 12, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 51, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2099068', 'n_tokens_mistral': 8151, 'n_tokens_neox': 7624, 'n_words': 2328}