Handbook - brand guidelines

handbook/company/brand.md

@@ -0,0 +1,233 @@
+# Brand guidelines
+
+These guidelines are for everyone at Fleet, including contributors and creative partners. Use this page to understand Fleet’s visual identity and design principles. It covers how to use the logo, typography, colors, and art assets in campaigns and media.
+
+If you have questions or feedback, contact [Head of Design](https://fleetdm.com/handbook/product-design#contact-us).
+
+> For writing guidelines, see [Writing at Fleet](http://localhost:2024/handbook/company/writing).
+
+## Logo
+
+### Primary logo
+
+![Fleet primary logo](https://raw.githubusercontent.com/fleetdm/fleet/refs/heads/handbook-brand-guidelines/website/assets/images/brand-primary-logo-720x445%402x.png)
+
+Use the primary logo whenever possible.
+
+- Use the dark-text logo on light backgrounds
+- Use the white-text logo on dark backgrounds
+- Use the mono version only when color is limited or not allowed (for example, low-color printing or clashing backgrounds)
+
+[Download primary logo](https://fleetdm.com/logos)
+
+### Fleet dots
+
+![Fleet dots](https://raw.githubusercontent.com/fleetdm/fleet/handbook-brand-guidelines/website/assets/images/brand-fleet-dots-720x445%402x.png)
+
+Use Fleet dots as a standalone mark where the full logo doesn't fit, such as profile avatars on social media and similar platforms. Avoid repeating the full logo and dots together.
+
+[Download primary logo](https://fleetdm.com/logos)
+
+> Be mindful of brand recognition. Only use Fleet dots when it is clear they represent Fleet.
+
+#### Clear space
+
+Leave a minimum clear space around logo marks equal to the height of the Fleet dots on all sides. This helps maintain clarity when placing the logo near other elements.
+
+> Less clear space may be used in certain placements, like the navigation bar on fleetdm.com and the Fleet product.
+
+![Logo clear space](https://raw.githubusercontent.com/fleetdm/fleet/refs/heads/handbook-brand-guidelines/website/assets/images/brand-logo-clear-space-720x445%402x.png)
+
+![Logo dots clear space](https://raw.githubusercontent.com/fleetdm/fleet/refs/heads/handbook-brand-guidelines/website/assets/images/brand-logo-dots-clear-space-720x445%402x.png)
+
+### Logo placement
+
+Anchor the logo to the top-left or bottom-left of the canvas.
+
+> You can make exceptions when needed. For example, center or right-align the logo on slides, videos, or swag. Default to left alignment whenever possible.
+
+![Top-left logo placement](https://raw.githubusercontent.com/fleetdm/fleet/refs/heads/handbook-brand-guidelines/website/assets/images/brand-logo-placement-top-left-720x445%402x.png)
+
+![Bottom-left logo placement](https://raw.githubusercontent.com/fleetdm/fleet/refs/heads/handbook-brand-guidelines/website/assets/images/brand-logo-placement-bottom-left-720x445%402x.png)
+
+#### Placing over imagery
+
+It may be necessary to place the Fleet logo or Fleet dots on a full-bleed image (an image that’s background color extends to the edges of the frame):
+
+- Leave enough clear space around the logo
+- Choose the correct color variant (dark, light, mono)
+- Make sure the logo is easy to read
+
+### Things to avoid
+
+Avoid the following when using the Fleet logo:
+
+- Do not stretch, squash, or distort the logo
+- Do not rotate or tilt the logo
+- Do not change the logo colors outside approved variants
+- Do not add effects such as shadows, outlines, or gradients
+- Do not place the logo on low-contrast backgrounds
+- Do not place the logo on busy or cluttered imagery
+- Do not reduce the logo below a readable size
+- Do not alter the spacing between elements in the logo
+- Do not recreate or redraw the logo
+- Do not combine the logo with other marks or text to create a new lockup
+
+When in doubt, use the original asset and choose the correct variant for the background.
+
+## Typography
+
+### Inter
+
+Inter is Fleet’s primary typeface. It is designed for screens and works well in print.
+
+[Download font family](https://fonts.google.com/specimen/Inter)
+
+### Roberto Mono
+
+Roboto Mono is mono-spaced typeface reserved for code blocks and “Kickers”.
+
+[Download font family](https://fonts.google.com/specimen/Roboto+Mono)
+
+### Line height
+
+Line height refers to the vertical space between two lines of text. To maximize readability:
+
+- Use a line height of 150% (1.5) for body text
+- Use 120% (1.2) for headings
+
+### Line width
+
+Keep line width between 50 and 75 characters.
+
+- Long line widths cause reading fatigue and make it hard to tell where a line starts and ends
+- Short line widths breaks reading flow by forcing the reader's eyes to bounce back and forth
+
+## Colors
+
+Use these core colors across all product UI and communications.
+
+<table style="width:100%; border-collapse:collapse; font-family:Inter, sans-serif; color:#515774;">
+  <thead>
+    <tr>
+      <th style="border:1px solid #C5C7D1; padding:16px; text-align:left; width:44px;"></th>
+      <th style="border:1px solid #C5C7D1; padding:16px; text-align:left; color:#192147; font-weight:600;">Name</th>
+      <th style="border:1px solid #C5C7D1; padding:16px; text-align:left; color:#192147; font-weight:600;">Value</th>
+      <th style="border:1px solid #C5C7D1; padding:16px; text-align:left; color:#192147; font-weight:600;">Usage</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td style="border:1px solid #C5C7D1; padding:0; background:#192147;"></td>
+      <td style="border:1px solid #C5C7D1; padding:16px;">Fleet Black 100</td>
+      <td style="border:1px solid #C5C7D1; padding:16px;">#192147</td>
+      <td style="border:1px solid #C5C7D1; padding:16px;">Headings</td>
+    </tr>
+    <tr>
+      <td style="border:1px solid #C5C7D1; padding:0; background:#515774;"></td>
+      <td style="border:1px solid #C5C7D1; padding:16px;">Fleet Black 75</td>
+      <td style="border:1px solid #C5C7D1; padding:16px;">#515774</td>
+      <td style="border:1px solid #C5C7D1; padding:16px;">Sub-headings &amp; body copy</td>
+    </tr>
+    <tr>
+      <td style="border:1px solid #C5C7D1; padding:0; background:#8B8FA2;"></td>
+      <td style="border:1px solid #C5C7D1; padding:16px;">Fleet Black 50</td>
+      <td style="border:1px solid #C5C7D1; padding:16px;">#8B8FA2</td>
+      <td style="border:1px solid #C5C7D1; padding:16px;">Lines &amp; strokes</td>
+    </tr>
+    <tr>
+      <td style="border:1px solid #C5C7D1; padding:0; background:#C5C7D1;"></td>
+      <td style="border:1px solid #C5C7D1; padding:16px;">Fleet Black 25</td>
+      <td style="border:1px solid #C5C7D1; padding:16px;">#C5C7D1</td>
+      <td style="border:1px solid #C5C7D1; padding:16px;">Lines &amp; strokes</td>
+    </tr>
+    <tr>
+      <td style="border:1px solid #C5C7D1; padding:0; background:#E2E4EA;"></td>
+      <td style="border:1px solid #C5C7D1; padding:16px;">Fleet Black 10</td>
+      <td style="border:1px solid #C5C7D1; padding:16px;">#E2E4EA</td>
+      <td style="border:1px solid #C5C7D1; padding:16px;">Lines &amp; strokes</td>
+    </tr>
+    <tr>
+      <td style="border:1px solid #C5C7D1; padding:0; background:#F9FAFC;"></td>
+      <td style="border:1px solid #C5C7D1; padding:16px;">Off-white</td>
+      <td style="border:1px solid #C5C7D1; padding:16px;">#F9FAFC</td>
+      <td style="border:1px solid #C5C7D1; padding:16px;">Backgrounds</td>
+    </tr>
+    <tr>
+      <td style="border:1px solid #C5C7D1; padding:0; background:#FFFFFF;"></td>
+      <td style="border:1px solid #C5C7D1; padding:16px;">White</td>
+      <td style="border:1px solid #C5C7D1; padding:16px;">#FFFFFF</td>
+      <td style="border:1px solid #C5C7D1; padding:16px;">Backgrounds</td>
+    </tr>
+    <tr>
+      <td style="border:1px solid #C5C7D1; padding:0; background:#D3E8F3;"></td>
+      <td style="border:1px solid #C5C7D1; padding:16px;">Light blue</td>
+      <td style="border:1px solid #C5C7D1; padding:16px;">#D3E8F3</td>
+      <td style="border:1px solid #C5C7D1; padding:16px;">Backgrounds</td>
+    </tr>
+    <tr>
+      <td style="border:1px solid #C5C7D1; padding:0; background:#E8F1F6;"></td>
+      <td style="border:1px solid #C5C7D1; padding:16px;">Lighter Blue</td>
+      <td style="border:1px solid #C5C7D1; padding:16px;">#E8F1F6</td>
+      <td style="border:1px solid #C5C7D1; padding:16px;">Backgrounds</td>
+    </tr>
+    <tr>
+      <td style="border:1px solid #C5C7D1; padding:0; background:#009A7D;"></td>
+      <td style="border:1px solid #C5C7D1; padding:16px;">Fleet Green</td>
+      <td style="border:1px solid #C5C7D1; padding:16px;">#009A7D</td>
+      <td style="border:1px solid #C5C7D1; padding:16px;">CTAs &amp; links</td>
+    </tr>
+  </tbody>
+</table>
+
+## Imagery
+
+Use imagery to support messaging and communicate value. Images range from hero illustrations to graphical representations of the product. Imagery should support content, not distract from it. Keep compositions simple, consistent, and purposeful.
+
+![Cloud City](https://raw.githubusercontent.com/fleetdm/fleet/refs/heads/handbook-brand-guidelines/website/assets/images/brand-cloud-city-720x445%402x.png)
+
+### Cloud City
+
+Cloud City is a symbol of openness and transparency. Its innumerable islands float gracefully among the clouds. Each independent yet interoperable as a whole. Cloud City’s beautiful, open vistas can span for miles, and its waterfalls are like no other. Never overcrowded, the small clusters of glass domains spread throughout the islands play host to communities of Fleet users – as well as an extraordinary population of swans.
+
+Cloud City scenes often include:
+
+- Floating islands
+- Glass-like structures
+- Wide, open skies
+- Waterfalls
+- Swans
+
+[Download  Cloud City artwork](https://drive.google.com/drive/folders/1G3YpTnfG-CN5iiaJXxPbk9GhJRV0WnPk?usp=drive_link)
+
+### Graphics
+
+TODO
+
+### Icons
+
+TODO
+
+### Things to avoid
+
+Avoid the following when using or creating graphics:
+
+- Do not use graphics as decoration without purpose
+- Do not overcrowd layouts with too many elements
+- Do not mix styles (for example, combining flat graphics with photorealistic elements)
+- Do not use inconsistent colors outside the approved palettes
+- Do not create overly complex or detailed illustrations
+- Do not use graphics that compete with or distract from the message
+- Do not reuse graphics in ways that feel repetitive or redundant
+- Do not stretch, distort, or resize graphics disproportionately
+- Do not introduce new visual styles that don’t match Fleet’s existing system
+
+## More resources
+
+- [Approved art assets](https://drive.google.com/drive/folders/1G3YpTnfG-CN5iiaJXxPbk9GhJRV0WnPk?usp=drive_link)
+- [Slide deck templates](https://docs.google.com/presentation/u/0/?ftv=1&folder=1xwbWPeG9zjrDyq0zdhN1klQzmlyNHlqK&tgif=d)
+- [Social media assets](https://docs.google.com/presentation/u/0/?ftv=1&folder=1xwbWPeG9zjrDyq0zdhN1klQzmlyNHlqK&tgif=d)
+- [Writing guidelines](https://fleetdm.com/handbook/company/writing)
+
+<meta name="maintainedBy" value="mike-j-thomas">
+<meta name="title" value="✨ Brand">

website/assets/styles/pages/handbook/basic-handbook.less

@@ -342,9 +342,9 @@
     }
     img {
       display: flex;
-      width: calc(100% - 32px);
+      width: 100%;
       height: auto;
-      padding: 24px 16px;
+      padding: 24px 0;
       margin: auto;
     }
     a > code:not(.hljs):not(.nohighlight):not(.mermaid) {