sass-site/old_source/styleguide/brand.html.haml

---
title: Brand Guidelines
---

:markdown
  ## Brand Usage

  - Do not stretch or distort the logo. Use the "seal" version of the logo when
    needing to use a square image (like avatars).
  - Do not alter the color of the logo. The official logo color is
    `$sl-color--hopbush` (`#c69`).
  - If you have to put the logo on a busy/colorful background, then you can use
    one of the reversed (on white) logos, provided here.
  - When using the Sass brand and identity in your presentations, articles,
    videos, or any other media, please be respectful. The Sass brand is feminine
    and we love that. But our brand must never be used alongside sexist imagery.
    In fact, we [explicitly changed our
    logo](https://github.com/sass/sass/issues/349) for that very reason. Read
    our [community guidelines](/community-guidelines) for more information. If
    you have questions about the images you want to use, please feel free to
    contact us at:

= succeed "." do
  :javascript
    //<![CDATA[
      <!--
        var x="function f(x){var i,o=\"\",ol=x.length,l=ol;while(x.charCodeAt(l/13)!" +
        "=92){try{x+=x;l+=l;}catch(e){}}for(i=l-1;i>=0;i--){o+=x.charAt(i);}return o" +
        ".substr(0,ol);}f(\")65,\\\"#'-<6-s>,ban\\\"\\\\ldhd*uvepBxt720\\\\320\\\\t\\"+
        "\\620\\\\720\\\\620\\\\330\\\\IT)700\\\\100\\\\720\\\\520\\\\120\\\\n\\\\20" +
        "0\\\\M520\\\\730\\\\300\\\\700\\\\530\\\\n\\\\310\\\\n\\\\700\\\\C120\\\\22" +
        "0\\\\100\\\\410\\\\~84/z516;020\\\\v710\\\\o4<;'9li620\\\\&$+#r\\\\d630\\\\" +
        ";5)QKPQTy130\\\\KDWfo610\\\\FRUELX_420\\\\GF410\\\\@n\\\\200\\\\n\\\\600\\\\"+
        "D330\\\\420\\\\700\\\\620\\\\$230\\\\620\\\\010\\\\610\\\\*3038`6,;?49q610\\"+
        "\\l6*<%l*vk`)* 0*06nKPXQNYV\\\\\\\\\\\"(f};o nruter};))++y(^)i(tAedoCrahc.x" +
        "(edoCrahCmorf.gnirtS=+o;721=%y;i=+y)65==i(fi{)++i;l<i;0=i(rof;htgnel.x=l,\\" +
        "\"\\\"=o,i rav{)y,x(f noitcnuf\")"                                           ;
        while(x=eval(x));
      //-->
    //]]>

%p= link_to "Download vector logos", "/assets/img/styleguide/sass-logo.zip", class: "sl-c-button sl-c-button--primary"
%p= partial "/styleguide/brand_license"



%h3 Standard

%ul.sl-l-grid.sl-l-grid--full.sl-l-large-grid--fit.sl-l-large-grid--gutters-large.sl-l-large-grid--center
  %li.sl-l-grid__column= image_tag "styleguide/color.png", height: "80", alt: "Sass"
  %li.sl-l-grid__column= image_tag "styleguide/seal-color.png", height: "80", alt: "Sass"

%h3 White

%ul.sl-l-grid.sl-l-grid--full.sl-l-large-grid--fit.sl-l-large-grid--gutters-large.sl-l-large-grid--center.sl-background--midnight-blue
  %li.sl-l-grid__column= image_tag "styleguide/white.png", height: "80", alt: "Sass"
  %li.sl-l-grid__column= image_tag "styleguide/seal-color-reversed.png", height: "80", alt: "Sass"
  %li.sl-l-grid__column= image_tag "styleguide/seal-black-reversed.png", height: "80", alt: "Sass"

%h3 Black

%ul.sl-l-grid.sl-l-grid--full.sl-l-large-grid--fit.sl-l-large-grid--gutters-large.sl-l-large-grid--center
  %li.sl-l-grid__column= image_tag "styleguide/black.png", height: "80", alt: "Sass"
  %li.sl-l-grid__column= image_tag "styleguide/seal-black.png", height: "80", alt: "Sass"