Huejar - Brand Design System · v1.0
The single source of truth for how Huejar looks, speaks, and shows up across every surface.
01 - Brand Identity
The Huejar mark is a jar containing five stacked colour bars - a direct expression of what the product does. Always use supplied SVG files. Never recreate the mark.
02 - Voice and Tone
Every word is part of the brand. Write like a smart colleague - not a press release, not a chatbot.
Write with purpose. Say less, mean more.
That's the product promise. It's also the writing rule. If a sentence could be shorter without losing meaning, cut it. If a word could be plainer, swap it. Huejar is confident without being arrogant, direct without being cold, and design-led without being pretentious.
Clear
Say what you mean. Lead with the most important idea. Avoid jargon - if you have to explain what a word means, don't use it.
Write this
"Add your logo. We'll do the rest."
Not this
"Upload your visual identity assets to our platform."
Confident
Don't hedge. State things plainly. Trust that the reader is smart - they don't need everything over-explained.
Write this
"Your brand, always on."
Not this
"We help ensure that your brand guidelines can potentially be accessed more easily."
Human
Write for a person, not an audience. Use contractions. Avoid passive voice. If you'd sound weird saying it out loud, rewrite it.
Write this
"Something went wrong. Let's try that again."
Not this
"An error has been encountered. Please retry your submission."
03 - Typography
One typeface across all weights. Poppins handles display, headlines, body, and labels - consistent and clear at every size.
04 - Colour
Huejar's palette reflects the product - a full spectrum held inside a structured container. In practice, restraint is the rule. The accent colours earn their space.
05 - Ink Tints
All grey values are derived from Ink (#0F172A) as opacity steps on white. This keeps the palette coherent - greys stay cool and never turn muddy.
06 - Approved gradients
Three brand gradients approved for hero sections, divider slides, and social covers. Never use on body copy or UI components.
07 - Office theme
The Huejar Office theme maps brand colours to Microsoft's 12 fixed colour slots. Apply via Huejar-Office-Theme.xml. Never override theme colours with custom hex on individual elements.
| Slot | Colour | Brand name | Hex | Usage |
|---|---|---|---|---|
| Dark 1 | Ink | #0F172A | Primary text, dark backgrounds | |
| Light 1 | White | #FFFFFF | Primary background, reversed text | |
| Dark 2 | Navy | #1E3A8A | Secondary dark surfaces, callouts | |
| Light 2 | Mist | #F4F5F7 | Slide backgrounds, section fills | |
| Accent 1 | Magenta | #E93D82 | Primary accent, CTAs, highlights | |
| Accent 2 | Amber | #F5A524 | Data series 1, warm accents | |
| Accent 3 | Fern | #15A36B | Success states, data series 2 | |
| Accent 4 | Sky | #0EA5E9 | Links, info states, data series 3 | |
| Accent 5 | Iris | #8B5CF6 | Data series 4, creative accents | |
| Accent 6 | Plum | #9D174D | Data series 5, deep accents | |
| Hyperlink | Sky | #0EA5E9 | All hyperlinks | |
| Followed link | Iris | #8B5CF6 | Visited hyperlinks |
08 - Design systems
Huejar operates across three distinct contexts. Each has its own rules - but all draw from the same brand foundation.
The full Huejar brand expression. Poppins, the complete palette, bold layouts. This is where the brand personality shows up at full volume.
Monochrome-first, with a single swappable accent colour. Clean, functional, fast to scan. Each client deployment replaces the default Magenta accent with their own primary brand colour.
The structural shell is almost invisible - neutral grey borders, off-white surfaces, no Huejar colours anywhere. The client's own fonts, colours, and brand language take complete ownership. The example below uses a fictional client "Acme Corp" with their own typeface (Playfair Display), navy, and coral palette - nothing from the Huejar brand appears inside the content areas.
09 - Format rules
The brand adapts to each format. These are the non-negotiables for each context.
10 - Dos and don'ts
11 - Quick reference
| Element | Value | Notes |
|---|---|---|
| Primary brand colour | #0F172A Ink | Default text, dark backgrounds, structural elements |
| Primary accent | #E93D82 Magenta | CTAs, highlights, primary interactive elements |
| Background | #FFFFFF White | Primary canvas; #F4F5F7 Mist for secondary areas |
| Display typeface | Poppins ExtraBold 800 | Google Fonts - free, open licence |
| Body typeface | Poppins 300 / 400 / 500 | Google Fonts - free, open licence |
| Logo minimum width | Full lockup: 200px · Icon: 32px | Below these sizes, quality degrades |
| Clearspace | 1× mark height on all sides | Non-negotiable in all contexts |
| Approved gradients | Midnight Arc · Spectrum Warm · Spectrum Cool | Hero and social use only - never on body text |
| Office theme file | Huejar-Office-Theme.xml | Single source of truth for all Office documents |
| Photoshop swatches | Huejar.aco | Load via Edit → Presets → Preset Manager |
| Adobe swatches | Huejar.ase | Compatible with Illustrator, InDesign, Photoshop |
| Admin UI accent | One colour per client instance | Default is Magenta; clients swap to their own primary |
| Client output chrome | Ink tints 05–20 only | No Huejar accent colours in client-facing portal UI |
| Social format | 1080×1080 · 1080×1920 | Max 12 words per image; one gradient max |
| Email max width | 600px | White background only; Magenta CTAs |