---
layout: doc
title: Style-guide
permalink: /doc/style-guide/
---

Style Guide
===========

## Fonts

Currently Qubes OS is using the following fonts for our website, branding, and other public facing (non-OS) materials. The OS itself uses what is normal for a users desktop environment of choice.

<div class="styleguide">
{% for font in site.data.styleguide.fonts %}
  <div class="row">
  <div class="col-lg-6 col-md-6 focus">
    <div class="font {{font.class}}">Custom Qubes Font</div>
  </div>
  <div class="col-lg-6 col-md-6">
    <strong>Family:</strong> {{font.family}}<br>
  </div>
  </div>
{% endfor %}
</div>

---

## Colors

The following **grayscale** colors are currently used on the Qubes website, documentation, and will eventually match colors within the OS itself.

<div class="styleguide">
{% for color in site.data.styleguide.colors %}
  {% if color.type == "grayscale" %}
  <div class="swatch more-bottom more-right">
    <div class="color add-bottom bg-{{color.class}}"></div>
    <strong class="add-bottom">{{color.name}}</strong>
    <code>#{{color.hex}}</code>
  </div>
  {% endif %}
{% endfor %}
</div>

The following **colors** are currently being used on the Qubes website, documentation, and will eventually match the colors within the OS itself!

<div class="styleguide">
{% for color in site.data.styleguide.colors %}
  {% if color.type == "colors" %}
  <div class="swatch more-bottom more-right">
    <div class="color add-bottom bg-{{color.class}}"></div>
    <strong class="add-bottom">{{color.name}}</strong>
    <code>#{{color.hex}}</code>
  </div>
  {% endif %}
{% endfor %}
</div>

---

## Icons

Currently, all the icons on the Qubes-OS.org website are generated using [FontAwesome](http://fortawesome.github.io/Font-Awesome/).

*As more custom work is done to generate icons for the operating system itself, they will be added here!*

---

## Logos

The following is a collection of various sizes & versions of the Qubes logo used both in the OS itself and on our website. All of these files are licensed GPLv2 and the source can be [downloaded here](https://github.com/QubesOS/qubes-artwork).

<div class="styleguide">
{% for logo in site.data.styleguide.logos %}
  {% for version in logo.versions %}
  <div class="row more-bottom">
    <div class="col-lg-4 col-md-4">
      <div class="focus">
        <img class="logo" src="{{version.path}}{{logo.image}}">
      </div>
    </div>
    <div class="col-lg-8 col-md-8">
      <p>
        <strong>Image:</strong> {{logo.image}}<br>
        <strong>Size:</strong> {{version.size}}<br>
        <strong>Format:</strong> {{version.format}}<br>
        <strong>Download:</strong> <a href="{{version.path}}{{logo.image}}" target="_blank">this image</a>
      </p>
    </div>
  </div>
  {% endfor %}
{% endfor %}
</div>