The mark, the palette, the rules.

01 — Wordmark & logomark

Six marks. Source SVG + 2× PNG.

The mark is built from a four-tile glyph (navy / orange / peach / muted-grey, with an off-white centre dot) and the Elofyn wordmark set in brand navy. Every variant below ships as a hand-authored SVG and a 2× PNG export — pick the right format for the surface: SVG for browser / print / vector tools, PNG for Slack, social, and anywhere SVG is rejected.

on cream · #F5F5ED

Wordmark · horizontal

Default mark — logomark + Elofyn wordmark on a single horizontal line. Use in site headers, email signatures, OG cards, partner decks.

SVG

logo-horizontal.svg

PNG · 2048 × 1217

logo-horizontal.png

SVG↓PNG · 2×↓

on canvas · #0A0F1A

Wordmark · horizontal · cream tile

Pre-mounted on the legacy cream tile. Use when the host surface is dark or photographic and a tile is preferred over inverting the mark.

SVG

logo-horizontal-with-bg.svg

PNG · 2048 × 1217

logo-horizontal-with-bg.png

SVG↓PNG · 2×↓

on cream · #F5F5ED

Logomark + wordmark · square

Square composition for avatar slots that crop to 1:1 (GitHub org, Crunchbase, podcast art). Wordmark sits under the logomark.

SVG

logo-square.svg

PNG · 1024 × 1024

logo-square.png

SVG↓PNG · 2×↓

on canvas · #0A0F1A

Logomark + wordmark · cream tile

Square with the legacy cream tile baked in. Preferred for any avatar slot rendered on a dark or photographic backdrop.

SVG

logo-square-with-bg.svg

PNG · 1024 × 1024

logo-square-with-bg.png

SVG↓PNG · 2×↓

on cream · #F5F5ED

Logomark · favicon

Logomark only — four-tile glyph, no wordmark. Use at ≤ 48px (favicons, app icons, in-line monograms).

SVG

favicon.svg

PNG · 512 × 512

favicon-512.png

SVG↓PNG · 2×↓

on canvas · #0A0F1A

Logomark · favicon · cream tile

Logomark on the cream tile. Preferred favicon for browser chrome that paints a dark theme (Safari, Chrome dark).

SVG

favicon-with-bg.svg

PNG · 512 × 512

favicon-with-bg-512.png

SVG↓PNG · 2×↓

02 — Color tokens

Dark canvas. One signature orange. Hairline everything else.

All UI hex values live in src/app/globals.css under the @theme block. Components reference semantic Tailwind utilities — never hard-coded hex. The brand-mark SVGs use the original #E07B3A orange; the UI --accent token matches it on the dark canvas (≈ 5.5:1 — clears WCAG AA).

Single source of truth → src/app/globals.css :root

03 — Typography

Geist Sans for everything. Geist Mono for the proof.

Geist Sans carries every display + body slot at weights 400–700. Geist Mono is sprinkled visibly — eyebrows, version chips, metric rows, code — because mono signals “technical product.” Instrument Serif italic is reserved for one accent phrase per page, max. No Inter, no Roboto, no system-ui, no weights below 400.

04 — Do & don't

Six rules. Memorise them before mock-ups go to print.

The mark is locked geometry in a locked palette. If a partner deck or a campaign visual breaks any of the six rules below, push back before it ships. When in doubt, send the mock-up to hello@elofyn.com for a 24-hour turnaround review.

Do

Preserve clearspace equal to the height of the four-tile mark.

Treat the logomark height as a unit of measure (the four-tile grid). Reserve at least 1× of that height as clearspace on every side — no copy, no UI chrome inside the box.

Don't

Don't recolor the four-tile mark.

The tile palette (navy / orange / peach / muted-grey + the off-white centre dot) is locked. Don't tint the marks to match a host product, season, or campaign.

Do

Use the cream-tile variant on dark or photographic surfaces.

The wordmark is set in brand navy. On the dark canvas, reach for the cream-tile variant (`logo-horizontal-with-bg.svg`) so the navy still reads. Don't manually invert.

Don't

Don't drop the mark directly onto the dark canvas.

Without the cream tile, the navy wordmark fades into `#0A0F1A` (≈ 1.7:1 contrast — fails WCAG AA). Either use the cream-tile variant, or use the logomark-only favicon at small sizes.

24px

32px

48px

64px

Do

Use the logomark alone below ~96px.

Below ~96px wide the wordmark stops being legible. Switch to `favicon.svg` (or the cream-tile favicon on dark) so the brand glyph still carries.

Don't

Don't skew, rotate, outline, or drop-shadow the mark.

The mark ships in its locked geometry, in its locked palette, with no border or shadow. No 3D, no glow, no embossed-style filter, no rotation beyond 0°.