MenuFramer logo

The mark on its own — a thin-stroke M framed by two quarter-arc corners, one over the top right and one under the bottom left. It fills with currentColor, so it inherits the surrounding text colour and adapts to light and dark without a variant. The artwork is square (26×26) — size it by height with h-* w-auto and the width follows.

import { LogoMark } from "@/components/brand/logo"

<LogoMark className="h-6 w-auto" />          // inherits text colour
<LogoMark className="h-6 w-auto text-primary" />  // or tint it

The same mark, contained — cream on the brand rounded square, with its own background and hairline. Use it on photography, or on any surface where a bare mark wouldn’t hold contrast. Colours are fixed, so it does not follow the theme. It is the exception, not the default: every first-party surface — header, footer, auth, the guide — uses the bare mark. Contained and simple are one path, so there is nothing to keep in sync between them — but the favicon is separate artwork (app/icon.svg, replaced 2026-08-25). Same mark, different container: a white card around a near-black square rather than this gradient. It holds its own copy of the path, so a change here does not reach the browser tab.

import { LogoBadge } from "@/components/brand/logo"

<LogoBadge className="size-9" />

“MenuFramer” as artwork. The F is a custom glyph — the crossbar sweeps down into the stem — so the word cannot be set in a font; it is one outlined path (WORDMARK_PATH), in currentColor like the mark. Its viewBox is the glyphs’ tight box, so the height you set is the cap height and the width follows at about 7.4×. It is decorative on its own — the lockup around it carries the name.

import { Wordmark } from "@/components/brand/logo"

<Wordmark className="h-3.5" />   // 14px caps; width follows

Mark + wordmark. Logo wraps it in a link; LogoWordmark is the bare lockup for use inside a trigger. Proportions come from the designer’s horizontal lockup: the wordmark’s caps stand 0.44 of the mark’s height, the gap is 0.19 of it, and the caps are centred on the mark. The badge lockup keeps the word at the same size as its simple sibling, so the header’s morph into the auth page never resizes the name.

When the lockup is drawn as a picturerather than set in a row — the footer mural, a social image, print — LogoLockupArt is one SVG at the designer’s exact ratios, so one fill and one mask cover both halves. Size it by width or height; nothing inside it needs aligning.

import { Logo } from "@/components/brand/logo"

<Logo />                          // sm, bare mark, links to /
<Logo size="lg" />                // header, footer, auth
<Logo size="lg" mark="badge" />   // only where currentColor can't hold contrast
<LogoLockupArt className="w-full" />  // the lockup as artwork (footer mural)

Two lockup scales. Mark sizes below are heights — the artwork is square, so the width matches. The wordmark column is cap height. The mark holds down to about 16px; below that switch to the badge, which keeps its own contrast.

One family, three voices. Geist sets everything — display, headings, body and UI — and the display voice is the same face large, semibold and slightly tighter, never a heavier one. The font-display utility owns that weight (600) and tracking, so a call site never spells either out and the display voice stays one definition. In body and UI, prominence comes from semantic mutedness rather than weight. Geist Mono carries values. Reference the token, never the family name.

<h1 className="font-display text-5xl">…</h1>
<p className="text-muted-foreground">…</p>   // font-sans is the default
<span className="font-mono">$14.50</span>

Long-form prose — legal pages, FAQ answers, anything article-shaped — is styled by the typeset system (ported from shadcn/typeset, adapted to the tokens; see app/typeset.css). Wrap the content in typeset plus a voice preset and author bare semantic markup — no classes on headings, paragraphs, lists or tables. Embedded components opt out with not-typeset. Everything below carries zero classes:

<div className="typeset typeset-notes">
  <h2>Section</h2>          // bare markup — typeset styles it
  <p>Prose…</p>
</div>

The chrome uses the standard shadcn semantic tokens, defined in app/globals.css and resolved per theme. Reference the token, never a hex. A restaurant’s own accent colour is set per-tenant at runtime, so it isn’t a brand token.

• Colour comes from the parent. The mark and wordmark are currentColor— set it with a text utility; don’t hardcode a fill.
• Minimum mark height 16px; use LogoBadge below that.
• Never stretch the mark or the wordmark. Size both by height and let the width follow — the wordmark is about 7.4× as wide as it is tall, and a fixed width would squash the F.
• Clear space= half the mark’s height on every side.
• Don’t rebuild the lockup by hand or restyle the badge — import the component so spacing and motion stay consistent.

The designer’s full export, 38 SVGs in public/brand/kit/, for surfaces that can’t run React. Ink, cream, forest, orange and pink are the artwork’s own colours, not interface tokens — inside the product everything above draws in currentColor. The catalogue is lib/brand-kit.ts.

Wordmark

“MenuFramer” with the stylised F — a custom glyph, so the word is artwork, never type. In code it is WORDMARK_PATH.

Wordmark · ink

Wordmark · cream

Bracketed · ink

Set inside the frame’s corner brackets.

Bracketed · cream

Lockups

Mark and wordmark together. The horizontal lockup is the reference for how the two sit in the UI (LOCKUP in lib/brand.ts).

Horizontal · ink

The reference lockup.

Horizontal · cream

Horizontal, MF monogram · ink

Horizontal, MF monogram · cream

Framed · ink

The arcs frame the wordmark’s own M.

Framed · cream

Stacked · ink

Two lines, arcs on the M.

Stacked · cream

Mark

The framed M: a thin-stroke M with a quarter-arc over the top right and under the bottom left. Square. In code it is MARK_PATH, drawn in currentColor.

Mark · cream

The bare mark. Its ink twin is MARK_PATH.

Outlined · ink

Inside a rounded-square outline; a heavier cut.

Outlined · cream

Tiles

The mark or monogram on a solid square. Social avatars, print, anywhere a bare mark would lose its edge.

M · cream on ink

M outlined · cream on ink

M · forest on orange

M · forest on pink

M · ink on stone

MF light · cream on ink

MF light · forest on orange

MF light · forest on pink

MF medium · cream on ink

MF bold · forest on orange

MF bold · forest on pink

App icons

Rounded-square icons with a baked-in drop shadow. Three cuts of the M: thin, regular, bold.

M thin · cream on ink

M regular · cream on ink

M regular · forest on orange

M regular · forest on pink

M bold · forest on orange

M bold · forest on pink

MF, arcs · cream on ink

Monograms

Two MF monograms: one framed by the arcs like the mark, one solid with the wordmark’s stylised F, in light, medium, regular and bold cuts.

MF, arcs · ink

MF, arcs · cream

MF regular · ink

MF regular · cream

MF bold · forest