The Brand, in Full View.

The Wordmark.

Pure typographic logo: FoyerFlow set in Fraunces, lowercase, weight 460, with a trailing period in emerald as a quiet brand sign-off. There is no icon. The typeface is the brand — editorial-hospitality convention (Aesop, Le Bernardin, Mews, Eleven Madison Park).

Brand Asset Pack.

Drop these into partner decks, integration pages, "Powered by FoyerFlow" badges, and anywhere else you need the mark. Every asset ships in two formats: SVG for the web (crisp at any size, requires Fraunces to render correctly), and PNG for press kits, slide decks, Word / PowerPoint / Keynote, social uploads, and email signatures (Fraunces glyphs baked in — opens identically everywhere). When in doubt, reach for the PNG.

Individual files.

Read BRAND-README.txt →

Hover any preview to read the filename. Click to download just that variant.

Wordmark

Light · transparent

foyerflow-wordmark-light.{svg,png}

SVG PNG

Dark · transparent

foyerflow-wordmark-dark.{svg,png}

SVG PNG

Mono char

foyerflow-wordmark-mono-char.{svg,png}

SVG PNG

Mono cream

foyerflow-wordmark-mono-cream.{svg,png}

SVG PNG

On cream backdrop

foyerflow-wordmark-on-cream.{svg,png}

SVG PNG

On char backdrop

foyerflow-wordmark-on-char.{svg,png}

SVG PNG

Mark

Light · transparent

foyerflow-mark-light.{svg,png}

SVG PNG

Dark · transparent

foyerflow-mark-dark.{svg,png}

SVG PNG

Mono char

foyerflow-mark-mono-char.{svg,png}

SVG PNG

Mono cream

foyerflow-mark-mono-cream.{svg,png}

SVG PNG

On cream square

foyerflow-mark-on-cream.{svg,png}

SVG PNG

On char square

foyerflow-mark-on-char.{svg,png}

SVG PNG

Favicon

Adaptive (system theme)

32 / 256 px · favicon

SVG PNG

Light · 32 px

32 / 256 px · favicon-light

SVG PNG

Dark · 32 px

32 / 256 px · favicon-dark

SVG PNG

Light · 512 px (PWA)

512 px · favicon-512-light

SVG PNG

Dark · 512 px (PWA)

512 px · favicon-512-dark

SVG PNG

Apple touch · light

180 px · apple-touch-icon-light

SVG PNG

Apple touch · dark

180 px · apple-touch-icon-dark

SVG PNG

PNG dimensions: wordmark 2048 × 547 px, mark 2048 × 2048 px, favicons at native (32 → 256 px) and PWA (512 px) sizes. Need a different size? Open the SVG in a browser and use "Save image as…", or render from the SVG with any image tool — install Fraunces first.

Social media · LinkedIn

Page art, ready to upload.

Logo at 800 × 800 px (retina-sharp; LinkedIn auto-crops to a circle in feed and follower lists — these have an 85% safe zone so the mark survives the crop). Cover at 4200 × 700 px (LinkedIn's current high-resolution spec, 6:1) with the avatar overlay area kept clean on the bottom-left. The SVG sources re-render brand-faithfully on a machine with Fraunces installed — run scripts/generate-social-art.py.

Logo · 800 × 800

f.

Dark · primary

Recommended. Char-700 surface, cream "f.", emerald-400 dot. Reads strongest in LinkedIn feed.

Download PNG →

f.

Light

Cream-50 surface. Use only if your page art is dark and the avatar needs to bright-pop.

Download PNG →

Cover · 4200 × 700

Light

Cream surface. Sits warmly against LinkedIn’s grey chrome.

Download PNG  ·  SVG →

Dark · primary

Recommended. Char-700 surface — pairs with the dark avatar for dramatic contrast.

Download PNG  ·  SVG →

Upload order on LinkedIn. Set the cover first — LinkedIn places the company logo overlay at bottom-left of the cover, so previewing the cover with the logo punched through tells you whether the composition still reads. Recommended pairing: dark cover + dark logo (tonal, dramatic) or light cover + dark logo (classical, hospitality). Avoid light cover + light logo — the avatar disappears into the banner.

Palette.

Cream surfaces, charcoal type, emerald accent. Burgundy and brass appear only as small marks of distinction — never as button fills, never larger than 4 px.

Fraunces & Inter.

Fraunces (variable serif) for every heading. Inter for body, UI and small labels. Both load from Google Fonts. Heading optical-size axis set to 144 for warmth at large sizes.

Five Variants. Two Sizes.

Pill-shaped, charcoal-first. Reach for .btn-primary for almost every CTA. .btn-accent is reserved for moments of celebration — success states, confirmations, post-signup screens.

Inputs & Fields.

Reserved for future contact forms and the embedded inquiry form. Borders are 1 px cream-300; focus ring is emerald, 2 px, 2 px offset against cream-100.

Surfaces.

Three card types. All sit on cream — never directly on white in marketing contexts (this rule is relaxed inside the app for density).

Eyebrow → Display → Lead.

Every editorial section opens with the same three-part rhythm. Don't deviate — even when tempted by a clever crosshead.

Spacing rules — mt-5 between eyebrow and h2, mt-5 between h2 and lead, mt-12 to mt-16 before the section's content grid.

The Sign-off.

Two variants — one personal, one for shared role mailboxes. Both are table-based, inline-styled HTML so they render reliably across Gmail, Apple Mail, Outlook (desktop + web), and iOS Mail. No background colour, so the signature inherits whatever surface the email body is on.

<table cellpadding="0" cellspacing="0" border="0" role="presentation"
  style="font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #1F1D17; line-height: 1.45;">
  <tr><td style="padding: 0 0 6px;">
    <span style="font-family: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif; font-size: 18px; font-weight: 460; letter-spacing: -0.012em; color: #1F1D17;">Anton Eremeeff</span>
  </td></tr>
  <tr><td style="padding: 0 0 12px; font-size: 13.5px; color: #6E6757;">
    Founder, FoyerFlow<span style="color: #047857;">.</span>
  </td></tr>
  <tr><td style="padding: 0 0 10px;">
    <span style="display: inline-block; width: 32px; height: 1px; background: #047857; line-height: 1px;">&nbsp;</span>
  </td></tr>
  <tr><td style="font-size: 13px; color: #3F3A30;">
    <a href="mailto:[email protected]" style="color: #1F1D17; text-decoration: none;">[email protected]</a>
    &nbsp;&middot;&nbsp;
    <a href="tel:+420607700700" style="color: #1F1D17; text-decoration: none;">+420 607 700 700</a>
  </td></tr>
  <tr><td style="padding-top: 2px; font-size: 13px; color: #6E6757;">
    <a href="https://foyerflow.app" style="color: #6E6757; text-decoration: none;">foyerflow.app</a>
  </td></tr>
</table>

<table cellpadding="0" cellspacing="0" border="0" role="presentation"
  style="font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #1F1D17; line-height: 1.45;">
  <tr><td style="padding: 0 0 6px;">
    <span style="font-family: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif; font-size: 18px; font-weight: 460; letter-spacing: -0.012em; color: #1F1D17;">FoyerFlow Support</span>
  </td></tr>
  <tr><td style="padding: 0 0 12px; font-size: 13.5px; color: #6E6757;">
    foyerflow<span style="color: #047857;">.</span>
  </td></tr>
  <tr><td style="padding: 0 0 10px;">
    <span style="display: inline-block; width: 32px; height: 1px; background: #047857; line-height: 1px;">&nbsp;</span>
  </td></tr>
  <tr><td style="font-size: 13px; color: #3F3A30;">
    <a href="mailto:[email protected]" style="color: #1F1D17; text-decoration: none;">[email protected]</a>
  </td></tr>
  <tr><td style="padding-top: 2px; font-size: 13px; color: #6E6757;">
    <a href="https://foyerflow.app" style="color: #6E6757; text-decoration: none;">foyerflow.app</a>
  </td></tr>
</table>

Image Direction.

Photography is the most expressive part of the brand. Get this wrong and the whole page reads as stock-y.