Four Elements Brand Library

Four Elements / Brand resources

The Four Elements brand, in one place.

Logos, typography, and colors for a consistent Four Elements presence. Find the right asset, follow the guide, and make it yours.

Download brand kit View brand guide
Inside the kit
Logos, colors, and type
Ready to use
SVG, PNG, and design tokens

Logo Assets

Download-ready files for wordmarks, horizontal lockups, icon use, and lightweight app surfaces.

Preview

Primary wordmark on light surfaces

Use the full-color logo when the background stays bright, warm, or neutral.

Four Elements primary wordmark

Preview

White wordmark on dark surfaces

Use the reverse logo when the surface is dark, photographic, or heavily saturated.

Four Elements white wordmark
Four Elements primary logo

Primary Wordmark

Full-color logo for light or neutral backgrounds.

SVG Vector
Download
Four Elements white logo

White Wordmark

High-contrast version for dark surfaces, image overlays, and reverse applications.

SVG Vector
Download
Four Elements horizontal logo

Horizontal Logo

Extended horizontal lockup for headers, partner placements, and wide-format brand surfaces.

SVG + PNG
Download SVG
Four Elements horizontal white logo

Horizontal White Logo

Reverse horizontal lockup for dark headers, signage, overlays, and wide high-contrast placements.

SVG + PNG
Download SVG
Four Elements icon mark

Element Mark

Standalone icon for avatars, social crops, badges, and favicon-adjacent use.

SVG Vector
Download
Four Elements favicon

Favicon

Small-format icon export for browsers and compact app surfaces.

PNG 32x32
Download

QR Studio

Generate a Four Elements QR code with the brand mark already centered.

This flow is tuned to feel closer to QR Code Monkey: pick a destination, keep the centered watermark, preview the result instantly, and download either a print-safe SVG or quick-share PNG.

Destination Presets

Centered Watermark

Locked to the Four Elements mark

The element mark is embedded in the middle automatically on every export.

Four Elements element mark

Typography

Poppins leads. Source Sans 3 carries the rest of the voice.

The current Four Elements site files in this repo use the same pairing, so this surface now reflects that active type system directly and includes a downloadable typography token file.

Typography Tokens

Display Family

Poppins

Recommended weights: 500, 600, 700, 800

Four Elements protects property value with clarity and force.

Use for headlines, CTA labels, counters, and branded emphasis.

Body Family

Source Sans 3

Recommended weights: 400, 600, 700

Use Source Sans 3 for longer descriptions, explanatory copy, operational messaging, and supporting web content where readability matters more than visual punch.

Use for paragraphs, labels with more than a few words, and guidance copy.

Usage Rules

Simple type split

  • Poppins for headings, buttons, and high-attention UI.
  • Source Sans 3 for body copy, detail text, and descriptive notes.
  • Keep line lengths comfortable and let the color system do the extra emphasis work.

Color System

A four-element palette with utility neutrals for wordmarks, borders, and dark surfaces.

The colors below are pulled from the current brand assets staged in this repo, then packaged into both CSS and JSON token files for downstream use.

CSS Tokens JSON Tokens

Element Gold

#F4AE16 Calls attention to the brand mark and highlighted wordmark accents.

Element Blue

#0051E2 Water / clarity accent for digital emphasis and highlighted actions.

Element Green

#38AE00 Growth / earth accent used in the mark and supportive success surfaces.

Element Red

#CE1A00 Fire / urgency accent that works well for impact moments and contrast.

Wordmark Ink

#262838 Primary dark neutral for typography, anchors, and default wordmark use.

Utility Slate

#464A66 Secondary neutral for supporting wordmark tones, dividers, and UI chrome.

Kit Inventory

The local bundle is ready for direct handoff.

For now, the managed source lives in /downloads/brand/ and is mirrored into the deployable /public/downloads/brand/ path so every file on this page can be downloaded immediately.