> For the complete documentation index, see [llms.txt](https://guide.techfleet.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guide.techfleet.org/resources/brand-guide/brand-visuals/illustrations.md).
# Illustrations
## Illustration Style
Our illustrations are one of the most distinctive parts of our visual identity. They are hand-drawn in feel, technical in precision, and warm in character. Every illustration we use must feel like it belongs to the same family. The three examples below define the rules.
## The Two Illustration Families
We use two distinct but complementary illustration styles. Both must always feel like they belong to the same brand.
### Family 1: The Sketch-Fill Style (used for icons and UI illustrations)
This style is seen in the partnership icon (three abstract human figures connected by arrows) and the world map illustration.
It has the following characteristics:
* Line quality: The outlines are hand-drawn in character, slightly organic and imperfect, never perfectly geometric. The stroke feels like a confident pen or brush stroke rather than a ruler-drawn line.
* Fill technique: Shapes are filled with parallel diagonal hatching lines rather than solid color fills. The hatching runs at approximately 45 degrees and is evenly spaced. This gives the illustration a hand-crafted, sketch-book quality.
* Stroke weight: Outlines use a medium-weight stroke (approximately 2px to 3px at standard display size). The hatching lines inside shapes are thinner (approximately 1px to 1.5px).
* Color: This family uses a single flat color for both the outlines and the hatching. There is no shading, no gradients, and no secondary colors within a single illustration. The primary color for this family is Tech Fleet Blue (#0056A7) or Action Blue (#1863DC) on white backgrounds.
* Transparency and layering: Shapes may overlap. Where they overlap, the hatching of the shape on top simply continues over the shape below, creating a layered, stacked effect.
* Human figures: When representing people, use simple, abstract silhouette-style figures. The figures are rounded and friendly, not detailed or realistic. They have no facial features. They communicate role and relationship through posture and proximity, not detail.
* Motion and connection: Use simple curved arrows to show relationships, collaboration, and flow between figures or concepts. Arrows should match the hand-drawn quality of the outlines.Family
### The Engraving Style (used for hero and section illustrations)
This style is seen in the planet illustration (a large circular planet with a habitat dome, satellite dish, and rocket ship on its surface).
It has the following characteristics:
* Line quality: This style uses a fine, precise engraving or etching technique. Lines are closely spaced, parallel, and used to build up form, texture, and volume. The overall effect resembles a vintage scientific illustration or a woodcut print.
* Texture and form: Volume is created entirely through the density and direction of parallel lines, not through color shading. Areas of shadow have more closely spaced lines. Areas of light have more widely spaced lines or no lines at all.
* Stroke weight: All lines are fine and consistent, approximately 1px to 1.5px at standard display size. There is no variation in stroke weight within a single illustration.
* Color: This family uses a single flat color for all linework on a white or transparent background.. Use any primary brand color for these.
* Subject matter: This style is reserved for larger, more conceptual illustrations that represent the world, the mission, or the journey. Subjects include planets, celestial bodies, spacecraft, habitats, and other space-exploration metaphors that speak to exploration, discovery, and building something new.
* Scale and detail: These illustrations are highly detailed and are designed to be viewed at large sizes. Do not use them at small sizes where the fine linework will become illegible.
## When to Use Each Family
| Context | Illustration Family | Example Use |
| ----------------------------------------------------------- | --------------------- | -------------------------------------- |
| UI icons, feature explanations, small diagrams | Family 1: Sketch-Fill | Partnership icon, career path diagrams |
| Hero sections, section backgrounds, large visual statements | Family 2: Engraving | Planet illustration, world map |
| Social media graphics | Family 1: Sketch-Fill | Post illustrations |
| Email headers | Family 1: Sketch-Fill | Newsletter headers |
| Landing page hero | Family 2: Engraving | Homepage hero |
## What Not to Do
| Do This | Not This |
| ----------------------------------------------------------------- | ------------------------------------------------------------------- |
| Use a single flat color per illustration. | Use gradients, shadows, or multiple colors within one illustration. |
| Keep human figures abstract and silhouette-based. | Draw realistic human faces or detailed anatomy. |
| Use hatching to fill shapes in Family 1 illustrations. | Use solid color fills in a Family 1 illustration. |
| Use fine engraving lines to build form in Family 2 illustrations. | Use bold outlines or flat fills in a Family 2 illustration. |
| Keep the hand-drawn, organic quality of the linework. | Use perfectly geometric, computer-drawn lines that feel mechanical. |
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://guide.techfleet.org/resources/brand-guide/brand-visuals/illustrations.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.