Marketing
Shadow #DD3900
Orange 1655 CP
tint · callouts
The hiilite.ai brand system · second cut · light
Everything on the table.
Nothing left to guess.
The working reference for the hiilite.ai brand: the AI and product-forward face of Hiilite. One living system, sixteen chapters. Five colors, one lockup system, a calm motion language, and the full UI kit, with code tables, do/don'ts, and the download shelf. Built to be searched, not scrolled.
01
Foundation & Values
Why the brand exists, and its organizing principle: one living system with a calm charcoal core and five brand-colored signals in motion. Each core value owns one color and one department.
#
Mission
"Find purpose. Work together. Effect growth."
Three verbs. Purpose, Collaboration, Growth: they echo through the five core values below.
#Positioning
#
Performance marketing that turns spend into measurable revenue.
Accountable, data-led, and delivered like an extension of your team. We say what works and back it with results. Tone in three words: Vibrant, positive, professional.
#Five values, five colors
The brand's organizing principle: each core value owns one brand color AND one department. Colors are not interchangeable. Pull the value and color that match what a piece is about.
| Value | Color | Department | Descriptor | Definition |
|---|---|---|---|---|
| Collaboration | Orange | Marketing | Approachable · Empowering · Respectful | We create better products by working together. |
| Purpose | Purple | Design | Effective · Impactful · Strategic | We find meaning in all that we do. |
| Positivity | Yellow | Content | Optimistic · Persevering · Encouraging | We have perspective. |
| Badassery | Cyan | Tech / Dev | Authentic · Bold · Unconventional | We live outside the box. |
| Growth | Green | Leadership | Ambitious · Curious · Driven | We continually develop ourselves. |
02
Voice & Language
How the brand sounds and how it writes. Short punchy sentences. Active voice. Second person. No fluff, no jargon, no vague promises.
#The one-line capture
"We say what works — and back it with results."
Hiilite · the one canonical capture line · Cardo, pull-quotes only#Four traits, always present
#ConfidentSpeaks with authority and clarity.
#BoldChallenges conventional marketing thinking.
#StraightforwardAvoids fluff and jargon.
#Results-drivenFocused on outcomes and ROI.
#Tone shifts by context
| Surface | Tone |
|---|---|
| Website | Polished, assertive |
| Sales | Persuasive, energetic |
| Social | Conversational, sharp |
| Client comms | Clear, professional, collaborative |
#
"Most marketing wastes money. We don't. Every strategy we build is designed to drive measurable growth. No fluff. No guesswork. Just results."
The manifesto paragraph#How we write
Do
- ✓Be direct and confident.
- ✓Focus on results and value.
- ✓Talk like a human, not a textbook.
- ✓Short sentences. Active voice. Use "you."
Don't
- ✕Over-explain or ramble.
- ✕Use corporate jargon or buzzwords.
- ✕Sound formal or stiff.
- ✕Make vague promises.
#Weak vs Hiilite
| Weak | Hiilite |
|---|---|
| "We leverage synergistic solutions to optimize engagement." | "We turn your marketing into real revenue." |
#Sample lines
Marketing that actually works.
No guesswork. Just growth.
Built to convert.
03
Logo System
The combomark is the default. When in doubt, use the combomark. Reach for a variant only when the field demands it, and maintain shape, colour, and proportions exactly as shipped. Every mark here is a real asset file.
#Default lockup · the combomark
Combomark · color · first choice for headers, decks, mastheads, sign-offs
Download SVG
#The variation matrix
CombomarkDefault · horizontal lockup
StackedVertical / square spaces
WordmarkIcon nearby / oversized type
Wordmark · whiteReversed on dark fields
'Hii' iconFavicons · avatars · tight spaces
Mono fallbackblack on light · white on dark
#
Earn the icon.
Use the 'Hii' icon in isolation only once its association with Hiilite is established. Until then, use the combomark. On social the icon must be Hiilite Orange, white, or an approved variant, sized equal to neighbouring icons.
#Clear space · the "H" rule
Take the height of the "H" letterform in the wordmark and keep that exact amount clear on all four sides (the cyan band). Nothing invades it: no text, no other logo, no graphic. For a header combomark that is ≈16% of the total logo height; at 32×32 favicon size keep a 4px buffer.
#Minimum sizes · screen + print
| Mark | Min on screen | Min in print |
|---|---|---|
| Combomark | 80px wide | 0.75″ (19mm) |
| Wordmark | 60px wide | 0.5″ (12mm) |
| Hii icon | 24px (16px favicons only) | 0.25″ (6mm) |
Below the minimum sizes, switch to a larger variant.
#Correct variant per field
Light field · color combomark on white / light grey
Dark field · white wordmark (or white icon) reversed
#
Match the mark to the field.
On a light surface use the color combomark. On a dark surface use the white wordmark or white icon, never the color combomark on charcoal. If technical limits stop you rendering brand color at all, revert to black on light / white on dark. Never silently substitute a different color.
#Do / Don't
Do
- ✓Keep shape, colour, proportions exactly as shipped.
- ✓Hold the H-height clear space on all four sides.
- ✓Use the approved colour variants only (orange, cyan, yellow, green, purple, black, white).
- ✓Default to the combomark whenever the association isn't already made.
- ✓Represent Hiilite with the approved files only, never a stand-in icon or image.
Don't
- ✕Modify the design or color of any asset: no stylizing, warping, or recoloring outside approved variants.
- ✕Stretch, rotate, embellish, or attempt to recreate any mark.
- ✕Re-typeset the wordmark in Lato or anything else.
- ✕Deconstruct the Hii icon on social channels.
- ✕Place Multicolore type near the wordmark at a similar size.
- ✕Place the brand in a negative or misrepresentative context.
04
Color
Five brand colors. Each owns one department and one core value; they are not interchangeable. Orange leads; the rest support. Body copy and surfaces stay on the five neutrals.
#The five brand colors
Tech / Dev
Shadow #06B7B7
Cyan 319 CP
tint · callouts
Content
Shadow #EF970A
Yellow 7549 CP
tint · callouts
Leadership
Shadow #80B720
Green 376 CP
tint · callouts
Design
Shadow #6627C9
Purple 266 CP
tint · callouts
#The official five neutrals
Official interface neutrals (Web Guidelines, Dec 2020). Body text, surfaces, borders. Never long-form copy in a brand color.
White
Light grey
Mid grey
Dark grey
Charcoal
#Callout tints · pair each with its accent
Orange
Cyan
Yellow
Green
Purple
On dark surfaces, brand-tint callouts flatten to a dark well and keep their accent border (see Theming).
#Orange leads · the 60/30/10 split
#
Lead with orange. Always.
Orange #FF4D00 is the primary brand color: every primary CTA, accent bar, and key callout. For any general-purpose Hiilite artifact where no department owns it, orange is the default. A monochrome Hiilite layout is undercooked: use the lead plus at least one secondary.
60 neutral ground30 secondary surface10 orange accent
Rough proportion: a dominant neutral canvas, the lead brand color for emphasis, one secondary accent for support.
#Using color · Do / Don't
Do
- ✓Lead with Orange on general-purpose pieces and primary CTAs.
- ✓Pick the accent by department or topic: Dev→Cyan, Content→Yellow, Leadership→Green, Design→Purple.
- ✓Use at least two colors. Hiilite is a multi-color brand.
- ✓Body text in dark-grey / charcoal on white or light-grey.
Don't
- ✕Ship a monochrome Hiilite layout. It's undercooked.
- ✕Use brand colors for long-form body text.
- ✕Introduce off-palette colors (the Word-default amber is the classic offender).
- ✕Treat the colors as interchangeable. Each owns a meaning.
#Live WCAG contrast lab
Aa, sample copy
Confident. Bold. Straightforward. Results-driven.
…AA
AA needs 4.5:1 for body text, 3:1 for large/UI. White on orange is the canonical CTA pair.
#Full code table
| Color | Web hex | Shadow | RGB | CMYK | Pantone | Department | Value |
|---|---|---|---|---|---|---|---|
| Orange | Marketing | Collaboration | |||||
| Cyan | Tech / Dev | Badassery | |||||
| Yellow | Content | Positivity | |||||
| Green | Leadership | Growth | |||||
| Purple | Design | Purpose |
Shadow hexes are the darker variants for hovers and depth. Pantone swatches are Coated (CP) for print.
05
Typography
Lato is primary: everything, ten weights. Cardo is the secondary serif, used sparingly for editorial gravity. The wordmark is a customized Multicolore. Never re-typeset it.
#Lato + Cardo
Primary · Lato
Weights: Thin 100 · Light 300 · Regular 400 · Bold 700 · Black 900, plus italics. Bundled by @font-face; also on Google Fonts. No fake bold: use the real weight.
Secondary · Cardo
Pull-quotes and editorial moments only. Loaded from Google Fonts, tagged preview-only in this manual. No third typeface, ever. Multicolore exists only inside the shipped wordmark files.
#Specimen ladder
Lato Black
Lato Bold
Lato Regular · Light · Thin · Italic
Cardo, the secondary serif for editorial moments.
#The hierarchy
H1 · Black 56pt/1.05
Marketing that works
H2 · Black 36pt/1.10
Chapter heading
H3 · Regular 26pt/1.25
Section heading
H4 · Bold 17pt/1.30
Card and block titles
H6 · Bold 10pt caps
Eyebrow labels · all-caps · +0.10em
Body · Regular 11pt/1.6
Body copy sets in Lato Regular, charcoal on white. Line-height 1.55 to 1.65 for long-form, 1.4 for dense tables.
#Body + links
#
Links are orange, bold, underline on hover.
Body text stays on the neutrals; the link color is the orange lead. Like this. Never set long-form paragraphs in a brand color.
06
Photography
Recommended · not yet canonProposed, on-brand direction; photography is not in the 2020 guide. Vibrant, positive, professional. Real people and real work over generic stock.
#The direction
#
One accent per frame.
Let one brand color punctuate a neutral scene: a prop, a screen, a wall. Bright, clean light. Energetic but never chaotic. Replace this direction with approved shoot references when they exist.
#Do / Don't
Do
- ✓Real teams, candid collaboration, work-in-progress.
- ✓Bright, clean light; energetic but not chaotic.
- ✓One brand color punctuating a neutral scene.
- ✓Crops with breathing room; charcoal or white fields.
Don't
- ✕Sterile handshake / lightbulb "innovation" stock.
- ✕Heavy filters that fight the palette.
- ✕Muddy, low-energy, or "moody" treatments.
- ✕Rainbow overload. One accent per frame.
07
Iconography
Recommended · not yet canonFor interface icons, distinct from the Hii brand mark. A recommended system aligned to the brand's clean, geometric feel. No official UI icon library has shipped yet.
#The style
Line icons at 1.5 to 2px, rounded joins, one filled cell showing the active/selected treatment.
#The rules
- Style: a single consistent set. Line/stroke, ~1.5 to 2px, rounded joins, on a 24px grid.
- One weight per layer. Don't mix thin and heavy strokes at the same level.
- Filled vs outline: pick one per hierarchy level; filled marks the active or selected state.
- Color: charcoal / dark-grey by default. A brand color only to signal state or category.
- Never emoji as structural or UI icons. SVG only, crisp at every size.
- Touch target ≥44px even when the glyph is small.
- The Hii mark (chapter 03) is the brand icon, not a UI glyph.
08
Motifs & Graphics
The signature graphic device: brand-colored nodes and energy moving around a calm charcoal core. The Sense → Seize → Transform growth loop and the 3R / 3P / Growth-Map diagrams are the canonical motifs.
#The living-system loop
#Motif rules
#
Colors move. Neutrals hold.
The five brand colors are the moving parts; neutrals (the charcoal core, the light field) stay still. Official hexes only, no off-palette colors in any diagram.
Canonical diagrams
- The Sense → Seize → Transform growth loop (above).
- The 3R / 3P / Growth-Map diagrams from the platform.
- The orbit system hero (chapter 10) at the top of hiilite.ai.
09
Data Viz
Recommended · not yet canonA recommended data-viz system on the five-color palette: a natural fit for a performance-marketing brand. Pair with the platform's semantic status tokens for success / warning / error.
#Chart palette · series order
Categorical series follow the palette order: Orange → Cyan → Yellow → Green → Purple.
#Chart rules
- Never rely on color alone. Add labels, patterns, or direct labelling (colorblind-safe).
- Grid lines low-contrast mid-grey; data text at ≥4.5:1 contrast.
- Emphasize the trend over decoration: no heavy gradients or shadows.
- Always show a legend and tooltips, plus a text summary for screen readers.
10
Motion
The hiilite.ai brand moves like a calm system: lightweight animated SVG, crisp at any size. The five colors are the moving parts; the neutrals stay still. Loops are eased and ambient, never bouncy, never fast.
#The principles
#
The five colors are the moving parts. Nodes, beads, and vectors travel. Neutrals, the charcoal core, greys, surfaces, stay still.
#
Energy flows calmly. Five-to-twelve-second loops, eased, seamless. Never fast, never bouncy, never elastic.
#
The charcoal core is the goal. A glossy sphere carrying the five-color signature: the calm center everything orbits.
#
Always ship a static fallback. Respect prefers-reduced-motion wherever the technique allows; the composed frame must read complete on its own.
#The orbit system
#
Colors orbit. The core holds.
Five brand-colored nodes travel tilted 8 to 12 second orbits around a glossy charcoal core. The orbit rings are neutral #d6dadd and never move; only the colored beads travel. This home-page hero is the canonical reference for the whole system.
Source asset: home-atom.svg · a self-contained SMIL loop, no JS, degrades to a static composed frame with reduced motion.
#The charcoal core gradient
#
Glossy charcoal, three stops.
The core is a radial gradient from #191919 → #2c2c2c → #4a4a4a with a soft top-left highlight, carrying the five-color spectrum bar. It stays still while the colors move: the calm center of every hiilite.ai motion piece.
#The equalizer motif
The equalizer is the same law at a different altitude: colored bars breathe on a still neutral ground. Cadence stays in the 5-12s calm band, eased. Use it for voice, activity, and "the Hii is working" states.
#The Signal-Map logo
The Signal-Map is the primary motion mark. The wordmark boots on the charcoal core: a CSS-drawn equalizer of the five brand-color bars spikes, a scan cursor sweeps, the glossy core settles, and three brand-color dots "install" over the wordmark. On the live site, hover drives a live signal-response. Colors move in; the core is still. With reduced motion it renders the booted end-state: no animation, fully legible.
11
Layout
RecommendedThe recommended spatial system for digital work. Hierarchy comes from size, spacing, and contrast, not from color alone.
#The 12-column grid
37576810241440
breakpoints
#Spacing + measure
- Grid: 12-column responsive; breakpoints 375 / 768 / 1024 / 1440.
- Spacing scale: a 4 / 8px rhythm; section spacing 16 / 24 / 32 / 48.
- Measure: 60 to 75 characters on desktop, 35 to 60 on mobile.
- Hierarchy via size, spacing, and contrast, not color alone.
- Give async and media blocks fixed aspect ratios to block layout shift (CLS).
12
UI System
Buttons, dynamic states, and tokens (Web Guidelines, page 3, plus the orbit async-state spec). Radius 4px, Lato Bold, +0.02em, 120ms transitions. One primary CTA per screen.
#Buttons · the five canonical styles
Primary
Secondary
View More
Book a call
Text link
Specimen pinned to the light field. Artwork wells stay light (see Theming, chapter 16).
- Primary · solid orange, white text: the "ship it" CTA. Hover deepens to #DD3900 with a soft shadow.
- Secondary · white surface, orange border and text. Hover inverts to solid orange.
- Tertiary · light-grey surface, charcoal text, mid-grey border ("View More").
- Charcoal · solid #282828, white text ("Book a call").
- Text link · orange, bold, underline on hover.
- Radius 4px · Lato Bold · letter-spacing +0.02em · 120ms transitions · one primary CTA per screen.
#Dynamic states · the async standard
When an action is working or resolving, the button reports it in place, never with a full-page spinner. A spinning cyan-to-orange orbit border signals loading; the shape then resolves to green success or red error. Geometry never changes between states.
Lifecycle · text button
Default
Loading
Success
Error
Lifecycle · icon button
Default
Loading
Success
Error
#Live demo · click to run the lifecycle
Each click runs idle → loading (orbit border) → result, then auto-reverts. With reduced motion the orbit does not spin; the state still resolves.
| State | Border | Surface · text | Rules |
|---|---|---|---|
| Default | Orange, solid 1.5px | Surface white · orange | Interactive; hover inverts to solid orange |
| Loading | Cyan → orange orbit, spins 1s | Surface · muted grey | disabled + aria-busy="true"; label ends in "…" |
| Active | Inherits state border | Inherits | Presses down 1.5px on :active. Try any button. |
| Success | Green gradient | #F1F8E1 · green | Holds ~2s, then returns to default |
| Error | Red → yellow gradient | #fdecec · red | Stays interactive so the user can retry |
- One in-flight action per button. Never stack a loading state onto a disabled one.
- The orbit spin appears only while genuinely waiting on the network. Don't fake it for feedback under 300ms.
- Timing: 120ms press · 1s orbit rotation · 200ms state cross-fade.
#The orbit exact-shape spec
The uploaded "Orbit Exact Shapes" export is the source spec for the treatment above. Geometry: a ::before border plate plus a ::after surface inset; loading swaps the border for a conic gradient that rotates once per second. Class API: .is-loading / .is-success / .is-error with disabled + aria-busy="true" while loading; refresh glyphs carry .orbit-refresh-icon and spin at 0.92s. Shape modifiers: wide Test (256px), wide Configure (448px), square icon (128px), and a red danger tint. In the platform this ships as OrbitButton driven by useAsyncAction with the global .orbit-loading utility (the "aiorbit" system).
| Export token | Export value | Brand adaptation |
|---|---|---|
| --orbit-exact-cyan-light | brand cyan | |
| --orbit-exact-cyan-dark | brand cyan | |
| --orbit-exact-orange | brand orange | |
| --orbit-exact-green (+soft) | success pair on brand green | |
| --orbit-exact-red (+soft) | platform status token (no brand red) | |
| --orbit-exact-radius-shape | 4px on standard buttons; keep the export radius for exact-shape tiles |
Export values are spec data, shown as labeled specimens only. Page chrome never uses them.
#Design tokens
Reference the variables, never hand-type hex. The full token set (all 5 brand colors + shadows + neutrals + tints + @font-face) ships in hiilite-ai-brand/colors.css.
| Token | Value | Use |
|---|---|---|
| Primary accent / CTA | ||
| Text / dark surface | ||
| Body text | ||
| Surface / canvas | ||
| All text | ||
| Editorial serif | ||
| Buttons / inputs |
13
Applications
The system applied: decks, email signatures, and social avatars. Same colors, same marks, same voice everywhere the brand shows up.
#Deck / slide title
Hiilite Creative Group
Marketing that actually works.
Charcoal cover, 5-color spectrum bar, orange eyebrow, Lato Black headline, white wordmark. Body slides invert to white with charcoal text.
#Email signature
First LastTitle · Hiilite Creative Group hiilite.ai · [email protected]
#
Keep it to one or two lines.
Lato throughout, charcoal text, orange links, and the Hii icon (not the full combomark) at small size. No image-heavy banners.
#Social + avatar
#
The Hii icon is the social-avatar mark.
Hiilite Orange, white, or an approved variant, sized equal to neighbouring icons. Maintain shape, proportions, and clear space at every size, and never deconstruct the icon on social. Profile-image files ship in assets/favicon/.
14
Sonic
Placeholder · not yet canonSound is not yet defined. This chapter is reserved for a future audio identity as the brand scales into video and product. No sonic assets exist yet.
#Sound (to define)
#
Author it when video and product surfaces need it.
Until then, nothing here is canon. Treat every direction below as a recommendation waiting for sign-off.
#Future directions
- An audio logo keyed to the "signal" motion mark: a short rising motif echoing the five signals resolving into one.
- Music for video: energetic, modern, optimistic. It matches Vibrant / positive / professional.
- VO tone: confident, direct, results-driven. It mirrors the verbal voice.
15
Assets & Ownership
Where the approved files live, what rights govern them, and who owns each slice of the brand.
#Asset library + rights
- Source of truth: the hiilite-ai-brand skill (logos, fonts, colors, motion) plus the live guide at hiilite.ai/brand-guidelines/.
- Logos: combomark (color / stacked / PNG), wordmark (color / black / white), Hii icon (7 colors). Only the shipped files are approved.
- Fonts: Lato (10 weights, bundled) + Cardo (Google Fonts). Multicolore only for the wordmark, never re-typeset.
- Print: Pantone Coated CP swatches per color (1655 / 319 / 7549 / 376 / 266).
- Rights: abide by Hiilite's Terms of Service and Privacy Policy for any brand asset; never place the brand in a negative context.
#Downloads
CombomarkSVG · vector
Stacked combomarkSVG · vector
Wordmark · whitePNG · reversed
Wordmark · colorPNG
'Hii' icon · orangeSVG · vector
Orbit motionSVG · animated
#Who owns the brand
The five core values map to the five departments that own their slice of the brand: Marketing (Orange), Design (Purple), Content (Yellow), Tech (Cyan), Leadership (Green). Brand questions and asset requests route through the owning department; Design holds final say on visual identity.
| Guideline source | hiilite-ai-brand skill · hiilite.ai/brand-guidelines/ |
| Authoritative spec | Hiilite · Web Guidelines (Dec 2020) |
| Contact |
Version this guideline as the brand evolves; log changes so partners always work from the current system.
#Version history
If it is not in the changelog, it is not the brand. This page is Brand Guide v2.0.0; every deploy adds a dated row.
| 2.0.0 | 2026-07-23 | Field Manual redesign: the full 16-chapter guide from the approved v8b direction. Native Impreza sections on the page plus the interactive manual embedded; content imported from the Hiilite AI Brand Guidelines design project. |
| 1.0.2 | 2026-07-20 | Changelog version and date cells no longer wrap mid-date; the change column absorbs the width. |
| 1.0.1 | 2026-07-20 | Fixed the Charcoal preview in The Mark: the swapped white wordmark kept the combomark's box and rendered skewed; marks now keep their true proportions on every field. |
| 1.0 | 2026-07-19 | hiilite.ai guide launched. Inherits the Web Guidelines (Dec 2020); adds the motion language, tokens, and accessibility ratings. |
16
Theming
The system ships in two surfaces. Light and Dark force a mode; Auto follows the viewer's operating system and switches live when it does. This manual is authored for both. The control in the top bar is the real thing.
#Light / Dark / Auto · live demo
Showing: Light
The same control lives in this manual's top bar. Auto maps to the OS setting via prefers-color-scheme and flips live, no reload.
hiilite.ai
Marketing that works.
One living system, two surfaces. The accents never change.
Artwork wells stay light
#Surface tokens · this manual's dual set
| Role | Light | Dark |
|---|---|---|
| Page | ||
| Surface / card | ||
| Ink (primary text) | ||
| Secondary text | ||
| Hairline / border | ||
| Accents (all five) | unchanged: fully vivid on both surfaces | |
All roles resolve to the official five neutrals. The design-project viewer uses its own near-neutral wrapper values; this manual normalizes them to canon.
#Theming rules
- Auto follows the OS. Light / Dark are a manual override that persists (this manual stores it in localStorage.bgMode; its native field is light).
- Two triggers, one look. Dark styles fire from prefers-color-scheme and from the mode attribute, so the viewer control and the OS both drive them.
- Accents never invert. The five brand colors stay fully saturated; only neutrals flip.
- Artwork stays on light plates. Logos, the motion hero, charts, and photography keep a light well so nothing inverts or disappears.
- Brand-tint callouts flatten to a dark well on dark and keep their accent border.
- Contrast targets: body text ≥7:1, secondary ≥4.5:1 on both surfaces. Charcoal is the brand's calm core: dark mode is the system at rest, with the five signals doing the talking.