Brand system / Downloads
Downloads & Resources
Instant access to production-ready SVG vector logos, design tokens (CSS & JSON), and the quick-reference brand cheat sheet.
Asset Library Overview
Official brand assets calibrated for production use. Do not recreate logos from raster screenshots—always use the official scalable vectors below.
Scalable Vectors
Infinite resolution SVGs suitable for responsive web applications, high-resolution print submittals, and architectural site signage.
Machine-Readable Tokens
Standardized tokens.css and tokens.json files ready for immediate integration into front-end build pipelines.
Fast Offline Reference
Compact cheat sheet tables providing immediate access to exact hex codes, font rules, and spacing multipliers.
Official Vector Logo Files
Click any item to download the official vector SVG file.
| Asset Name | Format | Tonal Profile | Primary Use Case | Direct Download |
|---|---|---|---|---|
| Master Horizontal Logo | Scalable Vector (.SVG / .PDF) | Full Colour (Navy, Sky, Lime) | Default website header, white proposals, invoices | SVG PDF |
| Horizontal Colour (On Dark Navy) | Scalable Vector (.SVG) | Full Colour + White SMART | Brand Navy hero headers, dark footers, high-contrast displays | Download SVG |
| Horizontal White Inverted | Scalable Vector (.SVG) | White (#FFFFFF) | Dark navy section headers, footers, vehicle livery | Download SVG |
| Horizontal Navy Monochrome | Scalable Vector (.SVG) | Brand Navy (#003375) | Two-tone print, stamps, technical blueprints | Download SVG |
| Horizontal Black Mono | Scalable Vector (.SVG) | Black (#000000) | Laser engraving, thermal tags, single-color fax | Download SVG |
| Master Vertical Logo | Scalable Vector (.SVG / .PDF) | Full Colour | Square profile pictures, mobile splash, vertical banners | SVG PDF |
| Vertical Colour (On Dark Navy) | Scalable Vector (.SVG) | Full Colour + White SMART | Mobile splash on Brand Navy, vertical dark video intros, event banners | Download SVG |
| Vertical White Inverted | Scalable Vector (.SVG) | White (#FFFFFF) | Dark vertical banners, mobile splash on navy | Download SVG |
| Vertical Navy Monochrome | Scalable Vector (.SVG) | Brand Navy (#003375) | Vertical single-color navy documents and technical sheets | Download SVG |
| Standalone Shield Emblem | Scalable Vector (.SVG / .PDF) | Full Colour | App icons, browser favicons, badge plates | SVG PDF |
| Shield Emblem Colour (On Dark Navy) | Scalable Vector (.SVG) | Full Colour (Over Navy) | App icons on Brand Navy, dark theme headers, splash badges | Download SVG |
| Shield Emblem White | Scalable Vector (.SVG) | White (#FFFFFF) | Workwear embroidery, dark UI icons | Download SVG |
| Shield Emblem Navy | Scalable Vector (.SVG) | Brand Navy (#003375) | Single-color brand stamps, architectural blueprints | Download SVG |
Design Tokens (CSS & JSON)
Incorporate the Holistic Smart design system directly into web projects, React/Vue frameworks, and Figma token managers.
CSS Design Tokens
Ready-to-use CSS Custom Properties file containing all color tokens, typography scales, spacing multipliers, shadows, and radius variables.
Download tokens.cssJSON Design Tokens
Standardized JSON token file for Figma Tokens Studio, Style Dictionary, Tailwind configs, and mobile application styling engines.
Download tokens.jsonBrand Quick Reference Cheat Sheet
Essential rules, color codes, and typographic parameters at a glance.
| Category | Standard Specification | Usage Rule |
|---|---|---|
| Brand Tagline | "Smarter Infrastructure. Seamless Operations." | Primary value proposition. Always punctuated with two sentences. |
| Brand Navy (Blue 1/3) | #003375 (RGB 0, 51, 117) |
Dominant authority, wordmark anchor, inner shield, primary dark UI. |
| Cerulean Blue (Blue 2/3) | #069EEA (RGB 6, 158, 234) |
Infrastructure flow, outer shield contour, mid-tone data highlights. |
| Holistic Sky (Blue 3/3) | #11A7FF (RGB 17, 167, 255) |
Digital connectivity accent, ICT highlights, interactive glowing states. |
| Holistic Lime (Green 1/2) | #99CC00 (RGB 153, 204, 0) |
Active vitality, "HOLISTIC" wordmark, primary checkmark core, ELV status. |
| Deep Lime (Green 2/2) | #78B023 (RGB 120, 176, 35) |
Kinetic dimension, checkmark facet shading, high-contrast accessible green. |
| Display Typeface | Outfit (Bold 700 / SemiBold 600) | All major headlines, H1, H2, H3. |
| Body Typeface | Plus Jakarta Sans (Regular 400 / Medium 500) | Prose, user interface, table data. |
| Technical Font | Space Mono (Bold 700 / Regular 400) | Tokens, parameters, code blocks, port specs. |
| Grid & Container | 1200px max width, 24px gutters, 12 columns | Center-aligned container on desktop. |
| Exclusion Zone | 1.5X Clearspace around all logo boundaries | X equals height of the "SMART" pill badge. |