--- sidebar_position: 9 --- # Applications ## Purpose This section translates the brand system into repeatable real-world layouts and placements. If a team can follow the visual rules but still produce inconsistent assets, the application layer is incomplete. Use these patterns to standardize day-to-day output. ## Primary Browsing Surface The main browsable applications catalog now lives at `site/index.html`. The guided usage page lives at `site/using-the-brand.html`. Grouped family detail pages live under `site/families/`. Use that site surface when the immediate need is: - finding the right approved template quickly - checking whether an export-ready asset already exists - browsing application families without reading the full brand book first - following the practical usage path before creating a new variation Use this chapter when the need is about application rules, hierarchy, and usage judgment rather than file selection. Use `docs/brand-book/brand-operations-workbench.html` when the need is about unresolved operational choices such as download-pack manifests, personalized business-card details, QR/vCard behavior, banner copy, capabilities-deck framing, proposal boilerplate, and publish-readiness gates. ## Website Header - Default to the primary lockup. - Place the lockup on a calm light header field, not directly over a busy hero image. - Keep navigation typography in `Inter` and never mimic the logo wordmark styling. - Use Brand Green only for selected active states and CTA emphasis, not for every navigation item. - If the header is dark ink, switch to the inverse lockup rather than recoloring the standard SVG. ## Homepage Hero - Use a short, outcome-first headline. - Pair one operational promise with one proof-oriented support line. - If the descriptor is used here, treat it as a secondary supporting line, not the headline itself. - Prefer operator, workflow, planning, or team-execution imagery over generic software abstractions. - CTA language should point to action and outcome: `Book an operations review`, `See workflow examples`, `Start a transformation audit`. Recommended structure: - headline - one supporting paragraph - one primary CTA - one secondary CTA - one grounded visual or operational diagram ## Presentation Covers - Use the primary lockup at the top-left or top-center with generous margin. - Keep cover headlines short and explicit. - Use `Inter Tight` for the main title and `Inter` for subtitle or context lines. - Avoid decorative subtitle stacks, glossy 3D effects, and dense icon clutter. - Use one strong field image or diagram, not a collage. Recommended starting templates: - `templates/pitchdeck/techops-pitchdeck-cover-template.html` - `templates/pitchdeck/techops-slide-system-template.html` ## Proposal Covers - Use the primary lockup, proposal title, client name, and date/version. - Keep the visual tone calm, credible, and structured. - The descriptor `Operator-Trusted Digital Transformation Partner` may appear here because this is a high-context surface. - Prefer paper or paper-warm backgrounds with ink typography. - Use Brand Green as a controlled accent for dividers, chips, or section markers. - Do not turn proposals into marketing posters. The tone should stay executive and operational. ## Social Tiles - Use icon-only or short lockup compositions depending on available space. - Keep copy to one clear statement or one short title plus subline. - Use gradients sparingly for campaign-style announcements, not for every post. - Favor strong contrast, simple composition, and obvious hierarchy over decorative density. - Export square and portrait variants if the message is likely to be reused across platforms. ## Social Banners - Use banner-specific layouts rather than stretching a square social tile. - Keep the lockup or headline clear of profile-photo overlays and mobile crop zones. - Default to one operational promise and one supporting line at most. - The descriptor may appear in banner graphics when the layout is spacious enough to carry it cleanly. - Use the icon-only mark as a secondary anchor, not as a competing hero object. - Keep banner fields open. Social headers lose clarity quickly when they are packed like posters. Recommended starting templates: - `templates/social/techops-linkedin-personal-banner-template.html` - `templates/social/techops-linkedin-company-banner-template.html` - `templates/social/techops-facebook-cover-template.html` - `templates/social/techops-x-header-template.html` - `templates/social/techops-linkedin-carousel-template.html` ## Email Signature - Keep the signature restrained. - Use either the wordmark-only asset or the primary lockup once. - Include name, role, contact details, and one company URL. - Avoid large banners, stacked badges, multiple logos, or animated GIF clutter. - Do not place the descriptor as if it were a second company name. ## Business Cards - Use the primary lockup once on the front or the back, not on both sides at equal emphasis. - Keep the front biased toward name, role, and contact clarity. - Use the back for one short value statement, a QR code, or a restrained descriptor treatment. - If a QR code is used, make it a support element for contact capture rather than the front-side focal point. - Prefer uncoated or matte stock over glossy finishes. - Use one-color or inverse print variants only when a printer or finishing method requires them. ## One-Pagers and PDFs - Use the primary lockup on the cover and a simpler footer mark inside. - Keep long-form reading surfaces on paper or white backgrounds with ink text. - Use section dividers, chips, and callout boxes consistently across pages. - Keep charts, diagrams, and tables aligned to the same color hierarchy defined in the color system. Recommended starting templates: - `templates/documents/techops-letterhead-template.html` - `templates/documents/techops-sow-template.html` - `templates/documents/techops-invoice-cover-template.html` - `templates/one-pager/techops-one-pager-template.html` ## Footer and Attribution Pattern - Preferred footer contents: small logo, page title or document label, page number, and date or version if needed. - Keep footer marks small and quiet. - Avoid repeated full lockups on every page when a wordmark or icon-only mark is enough. ## Favicon and App Icon - Derive from the approved icon-only vector artwork. - Center the symbol cleanly in a square field. - Do not use the full lockup, endorsement line, or gradient as the favicon default. - Export at `16`, `32`, `48`, `180`, `192`, and `512` sizes from one approved source. ## Merchandise and Print - Keep merchandise simple and logo-led rather than slogan-heavy. - Prefer one-color, inverse, or restrained green-and-ink treatments that survive embroidery and screen print. - Use the wordmark on fronts and the lockup or descriptor sparingly on backs when the print area supports it. - Build print layouts from approved exports rather than rebuilding the logo in vector tooling downstream. - Prepare embroidery-safe and one-color variants alongside any full-color merch concept. Recommended starting template: - `templates/merch/techops-tshirt-template.html` ## Quick Selection Rules - Use the primary lockup for headers, covers, and branded documents. - Use the wordmark-only asset when horizontal space is limited but the brand is already established. - Use the icon-only asset for avatars, app surfaces, favicons, and square social crops. - If the layout feels crowded, reduce supporting decoration before reducing logo clear space. - If the question is primarily “which file should I use?”, go to `site/index.html` first. - If the question is “how should I apply the system without drift?”, go to `site/using-the-brand.html`.