> 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-foundations/design-principles.md). # Design Principles ## Design Principles Our design principles guide how we build products, create content, and shape experiences. They act as a filter for decision-making. When you are unsure if a design or piece of content is right for Tech Fleet, measure it against these six philosophies. ## Minimalist We believe in removing the unnecessary so the essential can speak. Minimalism in our design means reducing cognitive load, avoiding decorative clutter, and giving content room to breathe. How to apply it: * Use white space generously. * Limit the number of colors and fonts on a single screen. * If an element does not serve a clear purpose, remove it. | Do This | Not This | | --------------------------------------------------------------------- | ------------------------------------------------------------------------------- | | Use a single, clear call-to-action button on a page. | Clutter the page with five different buttons competing for attention. | | Group related information into one clean card with plenty of padding. | Put a heavy border around every single paragraph of text. | | Use a solid color background behind text for easy reading. | Place text over a busy, high-contrast photograph. | | Show only the three most important features on the homepage. | List all 25 features on the homepage in a dense grid. | | Use a simple, two-color icon to represent a concept. | Use a highly detailed, multi-colored illustration that looks like a photograph. | ## Universal We design for everyone, not just the average person. When we build for people with the widest range of abilities, backgrounds, and contexts, we create experiences that work better for all. Accessibility is a civil right, not an afterthought. Every person who interacts with Tech Fleet deserves a full, dignified experience, regardless of how they see, hear, move, or think.This principle goes beyond technical compliance. It means designing with empathy from the start, not retrofitting it at the end. It means asking: who might we be leaving out, and how do we bring them in? How to apply it: * Always meet WCAG 2.2 AA standards as the baseline. * Ensure high color contrast for people with low vision. * Support keyboard navigation for people who cannot use a mouse. Write descriptive alt text for people using screen readers. * Never rely on color alone to convey meaning. * Provide captions, transcripts, and audio descriptions for all media. * Design layouts that reflow cleanly on small screens and at high zoom levels. * Test your work with real assistive technology, not just automated checkers. | Do This | Not This | | ------------------------------------------------------------------------------ | ------------------------------------------------------------------- | | Use an icon and a text label together to indicate an error state. | Use only a red outline to indicate an error state. | | Ensure all text has a contrast ratio of at least 4.5:1 against its background. | Use light gray text on a white background because it looks "clean." | | Write descriptive alt text like "A woman smiling while typing on a laptop." | Write alt text like "Image 45" or leave the alt text field blank. | | Make sure every interactive element can be reached using the Tab key. | Build custom dropdowns that only work with a mouse click. | | Provide captions and a written transcript for all video content. | Post a video with only auto-generated, unedited captions. | ## Intuitive Our experiences should feel familiar and require no explanation. We respect established mental models and design patterns so people can focus on their goals, not on figuring out how our interface works. How to apply it: * Use standard icons (like a magnifying glass for search). * Place navigation where people expect it. * Use Gestalt principles to build visual relationships and help people interpret your experiences correctly. * Keep workflows linear and predictable. | Do This | Not This | | --------------------------------------------------------------------- | --------------------------------------------------------------------- | | Put the main navigation menu at the top or left side of the screen. | Hide the main navigation inside a custom, unconventional interaction. | | Use a magnifying glass icon for the search bar. | Use a pair of binoculars or a radar dish icon for the search bar. | | Make links look like links (e.g., underlined or a distinct color). | Make links the exact same color and style as regular body text. | | Put the "Next" button on the right and the "Back" button on the left. | Put the "Next" button on the left and the "Back" button on the right. | | Group form fields logically (e.g., First Name, Last Name, Email). | Mix form fields randomly (e.g., Email, City, First Name, Zip Code). | ## Purpose-Driven Every design decision must solve a specific problem for the people using our products. We do not design for design's sake; we design to empower teams and facilitate learning. How to apply it: * Before adding a feature or a visual element, ask: "What user need does this serve?" If the answer is unclear, do not add it. | Do This | Not This | | ---------------------------------------------------------------------------- | -------------------------------------------------------------------------- | | Add a progress bar to a multi-step form so people know how much is left. | Add a complex animation to a form just because it looks cool. | | Use a chart to make complex data easier to understand at a glance. | Use a chart when a simple sentence would explain the data better. | | Include a tooltip only if the term is highly technical and needs definition. | Put tooltips on common words just to add interactivity to the page. | | Design a dashboard that highlights the user's next required action. | Design a dashboard that shows every possible metric, even irrelevant ones. | | Use an illustration to explain a difficult concept visually. | Add random illustrations to a page just to fill empty space. | ## Intentional We are deliberate in our choices. From the words we use to the spacing between elements, nothing is accidental. Intentional design builds trust and shows that we care about the details. How to apply it: * Align elements to a strict grid. * Use a defined type scale. * Ensure consistent padding and margins across all screens. | Do This | Not This | | ----------------------------------------------------------- | -------------------------------------------------------------------------------- | | Use a consistent 16px margin between all cards in a layout. | Eyeball the spacing, resulting in 14px, 18px, and 15px margins. | | Stick strictly to the defined H1, H2, and H3 font sizes. | Manually adjust font sizes on every page so they look slightly different. | | Align all text to the left for easier reading. | Center-align long paragraphs of text, making them hard to read. | | Use the exact brand HEX codes for all colors. | Pick colors from a color picker that look "close enough" to the brand colors. | | Ensure all buttons on a page are the exact same height. | Have buttons of varying heights depending on the length of the text inside them. | ## Welcoming Our design must feel like an open door. We want people to feel safe, supported, and encouraged when they interact with Tech Fleet How to apply it: * Use warm, conversational copy. * Choose imagery that reflects our diverse community. * Avoid harsh, aggressive colors or intimidating error messages. | Do This | Not This | | ----------------------------------------------------------------------------- | --------------------------------------------------------------------- | | Use soft, rounded corners on UI cards to feel approachable. | Use sharp, aggressive angles that feel corporate and cold. | | Write error messages that offer a clear solution and apologize for the issue. | Write error messages in all caps that blame the user for the mistake. | | Feature photos of real community members collaborating and smiling. | Feature photos of empty, sterile office buildings. | | Use our primary blue and green colors to create a calm, inviting interface. | Use stark black and neon red as the primary interface colors. | | Include a friendly welcome message on the dashboard for new users. | Drop new users into a blank dashboard with no instructions | --- # 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, and the optional `goal` query parameter: ``` GET https://guide.techfleet.org/resources/brand-guide/brand-foundations/design-principles.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.