# Assets & Guidelines

> Download Ential logos, fonts, colours, and button styles. Brand guidelines for partners, clients, and team members.

Canonical page (authoritative, may be newer than this text): https://www.ential.com/brand

---

BRAND SYSTEM
Logos, fonts, colours, components, and code snippets for the Ential brand. For team members, partners, and anyone who needs our assets.
LOGOS

## Our Mark

Ember and monochrome lockups, plus the standalone bee icon
Download all
HORIZONTAL
SVG
Ember icon + black text
Ember bee, black wordmark. Primary logo for light backgrounds.
Copy URL
[Download SVG](/images/brand/ential-logo-ember-black.svg)
SVG
Ember icon + white text
Ember bee, white wordmark. Primary logo for dark backgrounds.
Copy URL
[Download SVG](/images/brand/ential-logo-ember-white.svg)
SVG
Full black
All-black logo + icon. For light backgrounds or print.
Copy URL
[Download SVG](/images/brand/ential-logo-mono-black.svg)
SVG
Full white
All-white logo + icon. For dark backgrounds or overlays.
Copy URL
[Download SVG](/images/brand/ential-logo-mono-white.svg)
ICON MARK
SVG
Bee icon (ember)
Standalone bee mark in ember. The site favicon.
Copy URL
[Download SVG](/images/brand/ential-icon-ember.svg)
SVG
Bee icon (white)
Standalone bee mark in white. Use on dark surfaces.
Copy URL
[Download SVG](/images/brand/ential-icon-white.svg)
USAGE

### Do's & don'ts

Guidelines for correct logo usage
DO
Use approved backgrounds
Only place the logo on #000000 (dark) or #FFFFFF (light) backgrounds.
Maintain clear space
Keep clear space equal to the height of the 'e' in 'ential' on all sides.
Use minimum sizes
Digital: 120px wide minimum. Print: 25mm wide minimum.
Use provided files
Always use the official logo files. Never recreate or retype the logo.
DON'T
Don't stretch or distort
Never alter the logo proportions. Always scale uniformly.
Don't recolour
Never change the logo colours. Use only the provided variants.
Don't add effects
No drop shadows, gradients, outlines, glows, or 3D effects.
Don't rotate
The logo must always appear horizontally level.
Don't place on busy backgrounds
Avoid photographs, patterns, or low-contrast backgrounds.
Don't crop or obscure
The full logo must always be visible. Never crop or hide it.
PALETTE

## Palette & Tones

One accent, two surfaces, one neutral. WCAG AAA, 7:1+ contrast.
#F74603
Ember
#F74603
rgb(247, 70, 3)
PANTONE 1665 C
Molten orange: sole UI accent; primary CTA, links, focus rings.
#DD0200
Signal
#DD0200
rgb(221, 2, 0)
PANTONE 186 C
Racing red: live / now / error indicators only.
#55100D
Cherry
#55100D
rgb(85, 16, 13)
PANTONE 1817 C
Black cherry: headline gradient end + ember hover.
#000000
Ink
#000000
rgb(0, 0, 0)
PANTONE Black 6 C
Pure black: the default page surface.
#FFFFFF
Paper
#FFFFFF
rgb(255, 255, 255)
Inverted surface; primary text on ink.
#D9D9D9
Stone
#D9D9D9
rgb(217, 217, 217)
PANTONE Cool Gray 1 C
Alabaster grey: secondary text on ink.
TYPOGRAPHY

## Type & Typefaces

The size ramp and the four typefaces behind it, in one table.
STYLE	FONT	PREVIEW	WEIGHT	CSS
H1	[Funnel Display](https://fonts.google.com/specimen/Funnel+Display)
300–800
Stops the scroll	600
font-family: 'Funnel Display', sans-serif;
Copy
H2	[Funnel Display](https://fonts.google.com/specimen/Funnel+Display)
300–800
Guides the eye	600
font-family: 'Funnel Display', sans-serif;
Copy
H3	[Funnel Display](https://fonts.google.com/specimen/Funnel+Display)
300–800
Adds depth	600
font-family: 'Funnel Display', sans-serif;
Copy
H4	[Funnel Display](https://fonts.google.com/specimen/Funnel+Display)
300–800
Card titles	600
font-family: 'Funnel Display', sans-serif;
Copy
Body	[Inter](https://fonts.google.com/specimen/Inter)
400–700
Readable paragraph copy	400
font-family: 'Inter', sans-serif;
Copy
Small	[Inter](https://fonts.google.com/specimen/Inter)
400–700
Meta, captions, labels	500
font-family: 'Inter', sans-serif;
Copy
Script	[Caveat](https://fonts.google.com/specimen/Caveat)
400–600
We read every single one	400
font-family: 'Caveat', cursive;
Copy
Wordmark	Masculin
400 / 700
Ential	400
font-family: 'Masculin', sans-serif;
Copy
COMPONENTS

## Components

Buttons, badges, stats, pricing, and comparison — each with copy-ready code
BUTTONS
Default
Black pill, primary CTA
Ember
One per page, rationed
Ghost
Glass pill secondary
Get in touch
The glass system's default link affordance: underlined label + ember rounded-square arrow that tints cherry on hover.
HTML & CLASSES
Default — black pill (primary CTA)
Copy
<button class="group inline-flex items-center gap-2 rounded-full font-medium cursor-pointer transition-all duration-300 bg-ink text-paper border border-white/10 shadow-[0_8px_24px_rgba(0,0,0,.18)] hover:scale-[1.02] hover:border-white/30 px-8 py-4 text-base">Get started</button>
Ember — one per page, rationed
Copy
<button class="group inline-flex items-center gap-2 rounded-full font-medium cursor-pointer transition-all duration-300 bg-ember text-paper shadow-[0_8px_28px_rgba(247,70,3,.35)] hover:bg-cherry px-8 py-4 text-base">Start the audit</button>
Ghost — glass pill, secondary
Copy
<button class="group inline-flex items-center gap-2 rounded-full font-medium cursor-pointer transition-all duration-300 text-ink border border-black/[.06] bg-white/70 shadow-[0_1px_2px_rgba(0,0,0,.04)] hover:scale-[1.02] px-8 py-4 text-base">Learn more</button>
Square-arrow link — underlined label + ember arrow
Copy
<button class="group flex items-center gap-3">
<span class="text-sm font-semibold underline decoration-[1.5px] underline-offset-4">Get in touch</span>
<span class="flex h-[42px] w-[42px] items-center justify-center rounded-[13px] bg-ember text-paper shadow-[0_6px_16px_rgba(247,70,3,.35)] transition-all group-hover:bg-cherry group-hover:scale-105">
<!-- lucide arrow-up-right -->
</span>
</button>
BADGES & PILLS
Live now
FEATURED
Save $10,000
01 / 06
Guaranteed
HTML
Copy
<!-- Live now (pulsing) -->
<span class="glass inline-flex items-center gap-2 rounded-full px-4 py-2 text-[13px] font-semibold">
<span class="dot pulse"></span> Live now
</span>
<!-- Featured -->
<span class="inline-flex items-center gap-2 rounded-full bg-ember/[.08] px-4 py-1.5 text-[12px] font-semibold uppercase tracking-[0.04em] text-ember">Featured</span>
<!-- Save chip -->
<span class="rounded-full bg-ember px-2.5 py-0.5 text-[11px] font-bold text-paper">Save $10,000</span>
<!-- Count -->
<span class="rounded-full border border-black/[.12] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.1em] text-black/55">01 / 06</span>
<!-- Guarantee -->
<span class="inline-flex items-center gap-2 rounded-full border border-ember/45 px-4 py-1.5 text-[12px] font-semibold text-ember">Guaranteed</span>
STAT TILES
14 days
TO LAUNCH
$100K+
OPS SAVINGS FOUND
4.9/5
CLIENT RATING
180+
AUTOMATIONS SHIPPED
HTML
Copy
<div class="glass grid grid-cols-2 gap-6 rounded-[1.5rem] p-8 md:grid-cols-4">
<div class="text-center">
<div class="font-display text-[clamp(28px,4vw,40px)] leading-none text-ember">14 days</div>
<div class="mt-2 text-[12px] font-semibold uppercase tracking-[0.1em] text-black/50">To launch</div>
</div>
<!-- one div per stat -->
</div>
PRICING CARD
THE DEEP DIVE

### Everything Included

Full operations audit
$4,000
Automation opportunity map
$3,000
Custom build blueprint
$5,000
90-day rollout plan
$3,000
YOU PAY
$15,000
$5,000
Save $10,000 today
HTML
Copy
<div class="glass max-w-md overflow-hidden rounded-[1.5rem] p-8">
<div class="mb-1 text-[11px] font-semibold uppercase tracking-[0.14em] text-ember">The Deep Dive</div>
<h4 class="mb-5 font-display text-2xl text-ink">Everything Included</h4>
<ul class="mb-6">
<li class="flex items-center gap-3 border-t border-black/[.06] py-3">
<span class="flex h-5 w-5 items-center justify-center rounded-full bg-ember"><!-- check --></span>
<span class="flex-1 text-[15px] text-black/75">Full operations audit</span>
<span class="text-sm font-semibold text-black/35 line-through">$4,000</span>
</li>
<!-- one li per feature -->
</ul>
<div class="rounded-[1.25rem] bg-ink px-6 py-6 text-center">
<div class="text-[11px] font-semibold uppercase tracking-[0.14em] text-stone">You pay</div>
<div class="mt-2 flex items-end justify-center gap-3">
<span class="text-lg text-white/35 line-through">$15,000</span>
<span class="font-display text-[50px] font-bold text-paper">$5,000</span>
</div>
<span class="mt-3 inline-flex rounded-full bg-ember px-3.5 py-1 text-[12px] font-bold text-paper">Save $10,000 today</span>
</div>
</div>
COMPARISON TABLE
FEATURE	Ential	Typical agency	DIY
Custom-built to your ops
Best
Limited
Yes
Live in 14 days
Best
No
No
Fixed price, no retainer
Best
No
Yes
Ongoing optimisation
Yes
Yes
No
Money-back guarantee
Best
No
No
HTML
Copy
<div class="relative px-2 py-3">
<!-- elevated white panel behind the Ential column -->
<div class="absolute top-1 bottom-1 z-0 rounded-[1.5rem] bg-white shadow-[0_20px_50px_-16px_rgba(247,70,3,0.3)]"
style="left:calc(.5rem + (100% - 1rem)*.28); width:calc((100% - 1rem)*.24)"></div>
<table class="relative z-10 w-full table-fixed text-left">
<colgroup><col style="width:28%"><col style="width:24%"><col style="width:24%"><col style="width:24%"></colgroup>
<thead>
<tr class="border-b border-black/[.08]">
<th class="px-5 py-4 text-xs uppercase text-black/45">Feature</th>
<th class="px-3 py-4 text-center text-sm font-bold text-ember">Ential</th>
<th class="px-3 py-4 text-center text-sm text-black/55">Typical agency</th>
<th class="px-3 py-4 text-center text-sm text-black/55">DIY</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-black/[.06]">
<td class="px-5 py-4 text-sm font-medium text-ink">Live in 14 days</td>
<td class="px-3 py-4 text-center font-semibold text-ember">Best</td>
<td class="px-3 py-4 text-center text-black/35">No</td>
<td class="px-3 py-4 text-center text-black/35">No</td>
</tr>
<!-- one tr per feature -->
</tbody>
</table>
<!-- spinning liquid-metal ring hugging the Ential column -->
<div class="liquid-metal-ring top-1 bottom-1 z-20"
style="left:calc(.5rem + (100% - 1rem)*.28); width:calc((100% - 1rem)*.24)"></div>
</div>
ICONOGRAPHY & IMAGERY

## Icons & Imagery

Three treatments: molten ember 3D icons, blog cover art, and AI-generated flat icons
MOLTEN EMBER ICONS
The default icon treatment for prominent cards.
Glossy #F74603 lava-glass objects on a transparent background. Reach for these whenever an icon anchors a larger card, a feature or step, or an element that breaks up the page. Render at 48–56px with a soft ember drop-shadow. Keep flat lucide icons for small inline affordances only.
Landscape
Light
Lens
Steady
Generate new ones with the
ember-molten-asset
skill · assets in
/images/testimonial/icons/
BLOG POST IMAGERY
Cinematic cover art for every article.
Each blog post ships a full-bleed hero image plus a 4-second ambient video loop, generated through the blog-hero skill. Dark, atmospheric, ember-lit — never stock photography.
Building the Company Brain
Freedom Inside Guardrails
Eight-Minute Review
AI ICON GENERATION
Example output
For flat vector icons, use the JSON prompt template below with ChatGPT image generation to create consistent icons for the Ential design system.
Replace [SUBJECT] with your icon description.
"prompt": "Create a flat vector icon on a solid dark background (#000000). The icon should depict [SUBJECT]. Style: minimalist, clean lines, limited colour palette using amber (#F74603) as the primary accent with white (#ffffff) for secondary elements. No gradients, no shadows, no 3D effects. The icon should be centred with generous padding. Output as a square PNG at 512x512px.",
"style": "flat-vector",
"background": "#000000",
"accent_colour": "#F74603",
"size": "512x512",
"format": "PNG"
Copy prompt
Which treatment?
Molten ember icons anchor prominent cards. Blog heroes cover articles. Flat AI icons fill small, functional slots. For one-off illustrations, use the blog-imagery or skill-cover-image skills.

---

Ential Pty Ltd (ABN 30 408 729 275) · hello@ential.com · https://www.ential.com