2013-10-09 12:30:53 +02:00
|
|
|
---
|
|
|
|
|
title: Brand Guidelines
|
|
|
|
|
---
|
|
|
|
|
|
2013-10-13 01:26:11 +02:00
|
|
|
%h2 Logo Usage
|
|
|
|
|
|
2014-04-20 01:03:34 +02:00
|
|
|
:markdown
|
|
|
|
|
* Do not stretch or distort the logo. Use the "seal" version of the logo
|
|
|
|
|
when needing to use a square image (like avatars).
|
2014-04-20 01:00:12 +02:00
|
|
|
|
2014-04-20 01:03:34 +02:00
|
|
|
* Do not alter the color of the logo. The official logo color is `$hopbush`
|
2014-04-20 01:00:12 +02:00
|
|
|
(`#c69`).
|
2013-10-13 01:26:11 +02:00
|
|
|
|
2014-04-20 01:03:34 +02:00
|
|
|
* If you have to put the logo on a busy/colorful background, then you can
|
2014-04-20 01:00:12 +02:00
|
|
|
use one of the reversed (on white) logos, provided here.
|
2013-10-13 01:26:11 +02:00
|
|
|
|
2013-10-25 02:40:35 +02:00
|
|
|
%p= link_to "Download vector logos", "/assets/img/styleguide/sass-logo.zip", class: "button primary"
|
2013-10-17 00:06:57 +02:00
|
|
|
%p= partial "/styleguide/brand_license"
|
2013-10-13 01:26:11 +02:00
|
|
|
|
|
|
|
|
.logos
|
|
|
|
|
%h3 Standard
|
|
|
|
|
%ul.list-columns
|
|
|
|
|
%li= image_tag "styleguide/color.png", height: "80"
|
|
|
|
|
%li= image_tag "styleguide/seal-color.png", height: "80"
|
|
|
|
|
|
|
|
|
|
%h3 White
|
2013-10-14 21:52:40 +02:00
|
|
|
%ul.list-tiled
|
2013-10-13 01:26:11 +02:00
|
|
|
%li.swatch-color-background-shade= image_tag "styleguide/white.png", height: "80"
|
2013-10-14 21:52:40 +02:00
|
|
|
%li.swatch-color-background-shade= image_tag "styleguide/seal-color-reversed.png", height: "80"
|
2013-10-13 01:26:11 +02:00
|
|
|
%li.swatch-color-background-shade= image_tag "styleguide/seal-black-reversed.png", height: "80"
|
|
|
|
|
|
|
|
|
|
%h3 Black
|
|
|
|
|
%ul.list-columns
|
|
|
|
|
%li= image_tag "styleguide/black.png", height: "80"
|
|
|
|
|
%li= image_tag "styleguide/seal-black.png", height: "80"
|
|
|
|
|
|
