Forging a Brand Identity: From Concept to SVG

Most brand identity projects begin with mood boards and colour exploration. Ours started with constraints.

We're an engineering consultancy. Our clients are technical decision-makers — CTOs, engineering leads, founders with technical backgrounds. The brand needed to communicate three things:

1. Technical competence — we build real systems, not slide decks
2. Reliability — our work runs in production, not just demos
3. Precision — we care about the details

That ruled out playful, rounded, or overly colourful approaches. It also ruled out the generic "tech startup blue" that half the industry defaults to.

The Colour Palette

We landed on a palette anchored by what we call Ember — a deep, warm orange that sits between a forge's heat and the glow of molten metal. The name "Forge" practically demanded it.

The supporting palette is deliberately muted:

• Steel tones for text and surfaces — greys that feel industrial without feeling cold
• Alloy accents — a subtle blue for information states, red for errors, green for success
• No gradients in the base palette. Flat colour, sharp edges.

The dark mode palette inverts the surface hierarchy but keeps Ember as the accent. This was a deliberate choice: the brand colour should be recognisable regardless of the user's theme preference.

The Logo

The logo mark is minimal: a geometric form that suggests both a forge anvil and a circuit node. It works at 16px (favicon) and 512px (splash screen) without modification.

We created four variants:

• Full logo (mark + wordmark) — for headers and marketing
• Wordmark only — when the mark is already established in context
• Icon only — for favicons, app icons, and compact spaces
• Mini logo — a simplified version for very small render sizes

Every variant ships in both SVG and PNG. The SVGs are the source of truth. PNGs exist for contexts that don't support vectors — email clients, some social media platforms, and legacy systems.

Why SVG Matters

An SVG logo is resolution-independent. It looks perfect on a 4K monitor, a Retina phone, and a printed business card — all from the same file. It's also typically smaller than its PNG equivalent and can be styled with CSS.

We use Next.js Image for raster images but bypass image optimisation for SVGs. There's no point running a vector through a raster optimisation pipeline — it would convert it to a bitmap and lose the entire advantage.

This is a small detail that many sites get wrong. They'll serve SVG logos through an image CDN that rasterises them at a fixed resolution, defeating the purpose entirely.

The Typography

We pair two typefaces:

• Heading font — geometric, slightly condensed, with sharp terminals. Used for all headings, navigation, and calls to action.
• Body font — a clean sans-serif optimised for screen reading. Higher x-height, generous letter-spacing.

Both are loaded as variable fonts to minimise file size while supporting multiple weights. Font loading uses font-display: swap to prevent invisible text during load.

The Component Design Language

Every UI component follows three rules:

1. Visible borders, not shadows. Borders are crisper, more predictable across themes, and cheaper to render.
2. Consistent radius. All rounded elements use the same 8px radius. Buttons, cards, inputs, modals — everything matches.
3. State transitions at 150ms. Fast enough to feel instant, slow enough to be perceived. Every hover, focus, and active state uses the same duration.

Focus states are always visible. We use a combination of border colour, ring, and a subtle box shadow to make keyboard navigation obvious without being intrusive. Accessibility isn't a checkbox — it's a design constraint that makes the product better for everyone.

The Brand Kit Page

We built a public brand kit page at /brand-kit where anyone can download our logos in SVG and PNG format. This isn't vanity — it's practical. When a client, partner, or media outlet needs our logo, they get the correct files with the correct proportions. No more hunting through email attachments for "the one with the transparent background."

The brand kit includes:

• All logo variants in both formats
• The colour palette with exact hex values
• Download buttons for every asset

Lessons Learned

Design tokens save time. Defining colours, spacing, and typography as CSS custom properties meant every component automatically respected the design system. Changing a colour in one place changed it everywhere.

Dark mode isn't an inversion. Simply inverting colours produces a washed-out, low-contrast result. Each colour value was manually tuned for dark backgrounds. The dark palette has more saturated accents and slightly different surface tones to maintain contrast ratios.

Ship vectors when you can. The web has supported SVG for over a decade. If your logo is still a 2x PNG with a transparent background, you're serving a larger file that looks worse on half your users' screens.

Consistency compounds. When every button has the same radius, every transition the same duration, and every colour comes from the same palette — the site feels polished even if no single element is particularly remarkable. Design coherence is more impactful than design flair.

---

A brand is a promise about quality. Ours promises engineering rigour — and the visual identity needs to live up to that, down to the file format. Explore our full brand kit at /brand-kit.