MarketingShadow #DD3900
Orange 1655 CP
tint · callouts
The hiilite.ai brand system
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 family, a calm motion language, and the full UI kit, with the interactive manual embedded below.
Brand Guide v2.0.0
The interactive manual
Light, Dark and Auto themes, instant search, the live orbit and motion demos, the WCAG contrast lab, and one-click hex copy. Everything on this page, alive. The Light / Dark / Auto control themes this entire page, not just the manual. Open the manual in a new tab.
Foundation and 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. Colors are not interchangeable: pull the value and color that match what a piece is about.
Vision
“To become the best most badass marketing agency in the world.”
Mission
“Find purpose. Work together. Effect growth.”
Three verbs. Purpose, Collaboration, Growth: they echo through the five core values below.
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.
Voice and language
How the brand sounds and how it writes. Short punchy sentences. Active voice. Second person. No fluff, no jargon, no vague promises.
“We say what works — and back it with results.”
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. And the manifesto: “Most marketing wastes money. We don’t. Every strategy we build is designed to drive measurable growth. No fluff. No guesswork. Just results.”
Logo system
The combomark is the default. When in doubt, use the combomark. Reach for a variant only when the field demands it, and keep shape, colour and proportions exactly as shipped. Every mark below is a real asset file: never redrawn, never re-typeset.
Combomark · color · the default lockup. First choice for headers, decks, mastheads and sign-offs.
Stacked combomark · vertical and square spaces: social avatars, square cards.
Wordmark · white · reversed on dark fields. On charcoal use this, never the color combomark.
The Hii icon · favicons, avatars and tight spaces. Earn the icon: use it alone only once the association with Hiilite is established.
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. Nothing invades it: no text, no other logo, no graphic. For a header combomark that is about 16% of the total logo height; at 32px favicon size keep a 4px buffer.
Minimum sizes
| Mark | Minimum on screen | Minimum 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.
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 or white on dark. Never silently substitute a different color.
Do
- Keep shape, colour and 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 is not 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.
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.
Tech / DevShadow #06B7B7
Cyan 319 CP
tint · callouts
ContentShadow #EF970A
Yellow 7549 CP
tint · callouts
LeadershipShadow #80B720
Green 376 CP
tint · callouts
DesignShadow #6627C9
Purple 266 CP
tint · callouts
The full code table
| Name | Hex | RGB | CMYK | Pantone | Shadow | Department | Core value |
|---|---|---|---|---|---|---|---|
| Orange | #FF4D00 | 255 · 77 · 0 | 0 · 84 · 100 · 0 | 1655 CP | #DD3900 | Marketing | Collaboration |
| Cyan | #00CEC8 | 0 · 206 · 200 | 67 · 0 · 29 · 0 | 319 CP | #06B7B7 | Tech / Dev | Badassery |
| Yellow | #FFAA00 | 255 · 170 · 0 | 0 · 38 · 100 · 0 | 7549 CP | #EF970A | Content | Positivity |
| Green | #80CC1D | 128 · 204 · 29 | 54 · 0 · 100 · 0 | 376 CP | #80B720 | Leadership | Growth |
| Purple | #7E29ED | 126 · 41 · 237 | 68 · 79 · 0 · 0 | 266 CP | #6627C9 | Design | Purpose |
Shadow hexes are the darker variants for hovers and depth. Pantone swatches are Coated (CP) for print.
The official five neutrals
| Neutral | Hex | Use |
|---|---|---|
| White | #FFFFFF | Canvas; button text on saturated backgrounds |
| Light grey | #F7F7F7 | Alternating table rows; subtle section dividers |
| Mid grey | #DDDDDD | Rules, borders, disabled states |
| Dark grey | #393939 | Muted body text, secondary labels |
| Charcoal | #282828 | Primary body text; dark surfaces |
Callout tints: pair each with its accent
Never set long-form copy in a brand color; tints are for callout backgrounds only.
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. The rough proportion is 60/30/10: a dominant neutral ground, a secondary surface, the orange lead as the accent.
Do
- Lead with orange on general-purpose pieces and primary CTAs.
- Pick the accent by department or topic: Dev leans cyan, Content leans yellow, Leadership leans green, Design leans purple.
- Use at least two colors. Hiilite is a multi-color brand.
- Body text in dark grey or charcoal on white or light grey.
Don’t
- Ship a monochrome Hiilite layout. It is 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.
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, and never add a third typeface.
Lato Black
Lato Bold
Lato Regular · Light · Thin · Italic
Cardo, the secondary serif, reserved for editorial pull quotes.
The weights
Thin 100 · Light 300 · Regular 400 · Bold 700 · Black 900, plus true italics for each. No fake bold and no faux italic: use the real weight.
Cardo loads from Google Fonts for pull quotes and editorial moments only. Multicolore exists only inside the shipped wordmark files.
The hierarchy
| Level | Spec | Use |
|---|---|---|
| H1 | Lato Black · 56pt · 1.05 line height | Page titles |
| H2 | Lato Black · 36pt · 1.10 | Chapter headings |
| H3 | Lato Regular · 26pt · 1.25 | Section headings |
| H4 | Lato Bold · 17pt · 1.30 | Card and block titles |
| H6 | Lato Bold · 10pt · all caps · +0.10em tracking | Eyebrow labels |
| Body | Lato Regular · 11pt · 1.6 | Long-form 1.55 to 1.65; dense tables 1.4 |
Links are orange, bold, underline on hover.
Body text stays on the neutrals; the link color is the orange lead. Never set long-form paragraphs in a brand color.
PhotographyRecommended · not yet canon
A proposed, on-brand direction; photography is not in the 2020 guide. Vibrant, positive, professional. Real people and real work over generic stock.
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
- 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 or lightbulb innovation stock.
- Heavy filters that fight the palette.
- Muddy, low-energy or moody treatments.
- Rainbow overload. One accent per frame.
IconographyRecommended · not yet canon
For 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.
- Style: a single consistent set. Line and stroke, 1.5 to 2px, rounded joins, on a 24px grid.
- One weight per layer. Never 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 or 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 of 44px or more, even when the glyph is small.
- The Hii mark (see Logo system) is the brand icon, not a UI glyph.
Data vizRecommended · not yet canon
A recommended data-viz system on the five-color palette: a natural fit for a performance-marketing brand. Pair it with the platform’s semantic status tokens for success, warning and error.
Categorical series follow the palette order: Orange → Cyan → Yellow → Green → Purple.
- Never rely on color alone. Add labels, patterns or direct labelling (colorblind-safe).
- Grid lines in low-contrast mid grey; data text at 4.5:1 contrast or better.
- Emphasize the trend over decoration: no heavy gradients or shadows.
- Always show a legend and tooltips, plus a text summary for screen readers.
The live chart demos run in the interactive manual above; this page keeps the rules.
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 Sense → Seize → Transform growth loop: a canonical motif, alongside the orbit hero and the 3R, 3P and Growth-Map diagrams.
Colors orbit. The core holds.
The Signal-Map combomark is the primary motion mark, and the equalizer is the same law at a different altitude: colored bars breathe on a still neutral ground. The live versions, the orbit hero included, run in the interactive manual above.
LayoutRecommended
The recommended spatial system for digital work. Hierarchy comes from size, spacing and contrast, not from color alone.
| Rule | Value |
|---|---|
| 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 |
| Layout shift | Give async and media blocks fixed aspect ratios to block CLS |
UI system
Buttons, dynamic states and tokens, from the Web Guidelines plus the orbit async-state spec. Radius 4px, Lato Bold, letter-spacing +0.02em, 120ms transitions. One primary CTA per screen.
The five canonical buttons
PrimarySecondaryView MoreBook a callText link
- 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. The neutral View More.
- Nav: thin orange border on a transparent field, for header CTAs like Book a call.
- Text link: orange, bold, underline on hover, for inline CTAs.
- 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. Run the lifecycle right here: each click goes idle, then loading, then the result, and auto-reverts.
Idle → loading (orbit border) → result. With reduced motion the orbit does not spin; the state still resolves.
| State | Border | Surface and text | Rules |
|---|---|---|---|
| Default | Orange, solid 1.5px | White surface, orange label | Interactive; hover inverts to solid orange |
| Loading | Cyan-to-orange orbit, spins once per second | Muted grey label | Disabled with aria-busy true; the label ends in an ellipsis |
| Active | Inherits the state border | Inherits | Presses down 1.5px while pressed |
| Success | Green gradient | Green tint #F1F8E1 surface, green label | Holds about two seconds, then returns to default |
| Error | Status-red gradient (a platform status token; there is no brand red) | Status-red tint surface | 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. Never fake it for feedback under 300ms.
- Timing: 120ms press · 1s orbit rotation · 200ms state cross-fade.
Design tokens
Reference the variables, never hand-type hex. The full token set (all five brand colors, shadows, neutrals, tints and the Lato @font-face set) ships in the hiilite-ai-brand package as colors.css and colors.json. Write to [email protected] for the current bundle.
| Token | Value | Use |
|---|---|---|
| –hi-orange | #FF4D00 | Primary accent and CTA |
| –hi-charcoal | #282828 | Text and dark surfaces |
| –hi-dark-grey | #393939 | Body text |
| –hi-light-grey | #F7F7F7 | Surface and canvas |
| –hi-font-body | Lato | All text |
| –hi-font-serif | Cardo | Editorial pull quotes |
| radius | 4px | Buttons and inputs |
Applications
The system applied: decks, email signatures and social avatars. Same colors, same marks, same voice everywhere the brand shows up.
SonicPlaceholder · not yet canon
Sound 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: author them when video and product surfaces need them, and treat every direction below as a recommendation waiting for sign-off.
- An audio logo keyed to the signal motion mark: a short rising motif, five signals resolving into one.
- Music for video: energetic, modern, optimistic. It matches vibrant, positive, professional.
- Voiceover tone: confident, direct, results-driven. It mirrors the verbal voice.
Assets and ownership
Where the approved files live, what rights govern them, and who owns each slice of the brand.
Downloads and rights
Every approved file downloads from the interactive manual above: the combomark (color and stacked), the wordmarks (color and white), the Hii icon set in all seven colors, and the animated orbit motion asset. Fonts ship with the brand package: Lato in ten weights, Cardo from Google Fonts. For print-grade vectors, Pantone swatches or the full bundle, write to [email protected].
Abide by Hiilite’s Terms of Service and Privacy Policy for any brand asset, and never place the brand in a negative or misrepresentative context. Only the shipped files are approved.
Who owns the brand
The five core values map to the five departments that own their slice of the brand. Brand questions and asset requests route through the owning department; Design holds final say on visual identity.
| Department | Color | Core value |
|---|---|---|
| Marketing | Orange | Collaboration |
| Design | Purple | Purpose |
| Content | Yellow | Positivity |
| Tech / Dev | Cyan | Badassery |
| Leadership | Green | Growth |
| Reference | Where |
|---|---|
| Guideline source | The hiilite-ai-brand package and this page, hiilite.ai/brand-guidelines/ |
| Authoritative spec | Hiilite · Web Guidelines (Dec 2020) |
| Contact | [email protected] |
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.
| Version | Date | Change |
|---|---|---|
| 2.0.0 | 2026-07-23 | Field Manual redesign: full 16-chapter guide, imported from the approved v8b direction; native Impreza sections + embedded interactive manual. |
| 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. |