Brand system

Assets & Guidelines

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

Horizontal

SVG

Ember icon + black text

Ember bee, black wordmark. Primary logo for light backgrounds.

Download SVG

SVG

Ember icon + white text

Ember bee, white wordmark. Primary logo for dark backgrounds.

Download SVG

SVG

Full black

All-black logo + icon. For light backgrounds or print.

Download SVG

SVG

Full white

All-white logo + icon. For dark backgrounds or overlays.

Download SVG

Icon mark

SVG

Bee icon (ember)

Standalone bee mark in ember. The site favicon.

Download SVG

SVG

Bee icon (white)

Standalone bee mark in white. Use on dark surfaces.

Download SVG

Usage

Do's & don'ts

Guidelines for correct logo usage

	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

Molten orange: sole UI accent; primary CTA, links, focus rings.

#DD0200

Signal

Racing red: live / now / error indicators only.

#55100D

Cherry

Black cherry: headline gradient end + ember hover.

#000000

Ink

Pure black: the default page surface.

#FFFFFF

Paper

Inverted surface; primary text on ink.

#D9D9D9

Stone

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
H1Display headline	Funnel Display 300–800	Stops the scroll	600	`font-family: 'Funnel Display', sans-serif;`
H2Section title	Funnel Display 300–800	Guides the eye	600	`font-family: 'Funnel Display', sans-serif;`
H3Sub-section	Funnel Display 300–800	Adds depth	600	`font-family: 'Funnel Display', sans-serif;`
H4Card title	Funnel Display 300–800	Card titles	600	`font-family: 'Funnel Display', sans-serif;`
BodyParagraph copy	Inter 400–700	Readable paragraph copy	400	`font-family: 'Inter', sans-serif;`
SmallMeta & captions	Inter 400–700	Meta, captions, labels	500	`font-family: 'Inter', sans-serif;`
ScriptHandwritten accent	Caveat 400–600	We read every single one	400	`font-family: 'Caveat', cursive;`
WordmarkBrand wordmark	Masculin 400 / 700	Ential	400	`font-family: 'Masculin', sans-serif;`

Components

Buttons, badges, stats, pricing, and comparison — each with copy-ready code

Buttons

Default Black pill, primary CTA

Ember One per page, rationed

GhostGlass pill secondary

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)

<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

<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

<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

<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 FeaturedSave $10,00001 / 06 Guaranteed

HTML

<!-- 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

<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

<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

<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"
}

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.