Skip to content

Latest commit

 

History

History
84 lines (57 loc) · 4.51 KB

28-styleguide.md

File metadata and controls

84 lines (57 loc) · 4.51 KB
Raw
layout title header group markdown permalink description keywords
page
Styleguide
Styleguide
Landing
true
styleguide/
Crownstone styleguide, colors, brochures, presentations, and background on vision, mission, and branding
styleguide, Crownstone, logo, colors, brochures

{% include JB/setup %}

Logo

![Crownstone Default Logo]({{ site.url }}/images/logos/crownstone_logo_text_black.svg "Crownstone Default Logo, a Crown symbol by 5 dots connected through lines"){: style="max-width:40%" .float-right}

The following logos can be downloaded (see styleguide below).

  • A black logo with text in [Adobe Illustrator format]({{ site.url }}/images/logos/crownstone_logo_text.ai).
  • A black logo with text as [svg]({{ site.url }}/images/logos/crownstone_logo_text_black.svg).
  • A white logo with text as [svg]({{ site.url }}/images/logos/crownstone_logo_text_white.svg). Use only when there is a colored background.
  • A black logo as [svg]({{ site.url }}/images/logos/crownstone_logo_black.svg). Use only when the brand name is already clearly presented.
  • A white logo as [svg]({{ site.url }}/images/logos/crownstone_logo_white.svg). Use only when the brand name is already clearly presented and there is a colored background.

Do not use a colored logo! The black logo should always be the prefered logo. Only use the white logo if its necessary.

Styleguide

![Crownstone Styleguide]({{ site.url }}/attachments/crownstone_styleguide.png "Crownstone Styleguide"){: style="width:40%" .float-right}

There are the usual considerations, just a few:

  • Use a black logo on a white background, especially on products or material that does not benefit from color.
  • Logo is white on a blue background in the case where the logo really needs to pop out.
  • Do not use the logo in any color. The logo is either black or white.
  • Use bands over the full width, do not use a circle around the logo.
  • Only use a few colors in supporting photographs and use brand colors.
  • The brand colors are a shade of blue, #003e52, and the complementary shade of orange, #ff8400.
  • Use the orange shade as an accent, e.g. for line separation, emphasis, not as a primary color.
  • Use Lato medium as a font.
  • Use the blue font on summaries or accentuated text. Use just a black font wherever possible for the primary text.
  • In case where lighter shades of colors are required. Go to the Adobe color wheel. Click on "HSB" and adjust the second row. This will only adjust the saturation of a color, not the hue.

Colors

  • Dark blue: #003e52
  • Orange: #ff8400

Brochures

For an example of a brochure that is created using the above styleguide see:

  • [Crownstone Brochure Smart Home]({{ site.url }}/attachments/brochures/Crownstone_Brochure_SmartHome.pdf)
  • [Crownstone Brochure Green Home]({{ site.url }}/attachments/brochures/Crownstone_Brochure_GreenHome.pdf)

Presentations

If you need a slide deck for a particular customer, feel free to contact us for your particular needs. Use the template from the following slide deck for example. The deck itself is not just a template, but is about technology saving us time.

Documents

If you need a document, there is a template available. Rather than a template that has an ipsem lorum text, it describes our mission, vision, slogan, legacy, and core values.

Presskit

A presskit with all kind of materials like logo, icons, product pictures, and renders can be found at the [presskit page]({{ site.url }}/presskit).

Insiders

There is additional material that forms the background of our current design decisions (you will need to ask for access).

{% include snippets/bottom-margin %}