Emblem

The hero calls Emblem a 'single-shop coffee roaster in Portland' and hands the reader a photo of the storefront. The claim that Emblem actually roasts on premises, not resells someone else's beans, only lands inside the origin story near the bottom of the page. A first-time reader who bounces before scrolling that far leaves without the differentiator.

Above the fold the copy could apply to any coffee shop with a nice interior. The roasting is the reason the shop exists and the reason a bag of beans costs $22 instead of $14, but the site treats it as a mid-page detail.

A customer landing on a coffee shop's site is usually answering three questions in the first ten seconds: are you open right now, where are you, and can I get a table. Emblem answers question two (address in the hero), buries question one (hours in the footer), and skips question three entirely.

Hours in the footer means the user scrolls the entire page to find out whether the shop is open at 4pm on a Tuesday. Half will not bother.

The menu board shows espresso and pour-over prices cleanly. The retail bag price, which is the highest-margin item on the site, appears only inside the origin story as a passing line: 'The Yirgacheffe washed lands at $22 a bag.' No product card, no add-to-cart, no dedicated Beans section in the nav.

The single CTA is 'Visit us' which anchors to the address. There is no 'Call ahead' link, no 'Reserve a bag' path, no clear next action for a returning customer who already knows where the shop is. The site is a brochure with a map.

If Emblem does not do online ordering, that is fine, but the site should say so and offer a phone number as the alternative. Currently a returning customer's only recourse is to type the phone number from the footer into their own dialer.

The top nav has Menu, Origin, Visit, Contact. Menu scrolls to the menu-board section, which works. But the menu-board is one long list with no internal anchors. A visitor who wants to see just the pour-over prices scrolls past espresso and drip first.

Espresso and pour-over sit as two side-by-side columns on desktop. Same visual weight, same type scale, no signal that one is the shop's specialty. Emblem's origin story is a specialty pour-over story; the menu treatment does not reflect that.

On mobile the columns stack and the pour-over ends up below espresso, which reinforces the lesser-emphasis read.

The mobile hamburger opens a full-screen overlay. The close button is a small terracotta × in the top-right, weighted the same as the menu items. On first tap-open, two test users tapped the wordmark in the top-left instead of the × because the wordmark reads as the more prominent target.

The site's accent is a warm terracotta (#C25E44) used on CTAs and highlighted headings. A secondary olive-green (#7A8659) shows up on the 'Roast this week' badge and the origin-story pull quote. Two accents against a warm cream ground means the eye has to decide which color signals the primary action.

Terracotta and olive are pleasant together, and they compete for attention in the hero-plus-first-fold zone.

Section padding is inconsistent: hero uses px-8, menu-board uses px-6, origin story uses px-10, visit section uses px-8. Inner max-width is also uneven (max-w-5xl in some places, max-w-6xl in others, no max at all in the origin story).

On desktop the effect is subtle. On mobile the varying horizontal padding creates a small side-to-side wobble as the user scrolls.

The hero h1 uses clamp(32px, 6vw, 72px). At 375px width the 6vw arm resolves to 22.5px which is below the clamp minimum, so the clamp holds at 32px. Body copy in the same fold is 20px. The 32:20 ratio flattens the hierarchy, and on 320px screens the h1 reads more like a caption.

The hero storefront image ships as a 1.9MB JPEG at 2400px wide. next/image is not in use; the image is a plain <img> tag. On a 3G-throttled test the image blocks LCP at 3.4 seconds.

AVIF at equivalent visual quality would land near 240KB. WebP fallback near 380KB. Even without a build-time conversion pipeline, a manual sips or squoosh pass would help.

The homepage has a title tag and a meta description. The /origin and /visit routes inherit the same title tag ('Emblem: coffee roaster in Portland'). Open Graph tags are set on the homepage only. A link to /origin shared in a text message previews as unbranded.

sitemap.xml lists three URLs (/, /origin, /visit) with today's date as lastmod on every entry. That signal has almost no crawl value since the crawler cannot tell which page actually changed. Small site, and the crawl-priority signal costs nothing to send correctly.

The menu-board headings ('Espresso', 'Pour-over', 'Drip', 'Beans') are marked up as <div class='menu-title'>. Same for the origin story's chapter titles. A screen reader user gets one long body paragraph with no landmarks, no jump-to-section, no way to skim.

The 'Roast this week' section overlays cream-colored body text on a dark-roasted-beans photograph. The text hits about 3.9:1 contrast in the middle third of the image where the beans lighten. WCAG AA requires 4.5:1 for body copy.

The paragraph is legible at a glance and starts to soften under bright ambient light on a phone.

The nav links, the CTA button, and the menu-board anchors all rely on the browser default focus ring. In Safari 17 the default ring is a low-contrast blue that reads against the warm cream ground as a browser bug. Keyboard users can navigate, and the current-focus indication is inconsistent across browsers.

The hero image is the LCP element on the homepage. It renders as a plain <img> tag with no preload hint and no fetchpriority. On desktop-cable the LCP measures 1.8s. On mobile-3G it measures 3.4s and is the primary contributor to a 'Needs improvement' Core Web Vitals rating.

Fonts load via <link rel='stylesheet'> from fonts.googleapis.com in the head. That blocks first paint by 200 to 400ms on mobile. Two families load (a serif for headings, a sans for body) and each ships two weights.

For a site this size, self-hosted fonts with font-display: swap eliminate the render-blocking round-trip.