Faktur — Editorial Serif Burgundy Navbar (legibility-fixed)

Summary

A sticky editorial navbar in an off-white-cream, ink, and burgundy palette: a translucent backdrop-blurred bar that pins flush to the top with a hairline bottom rule, an upper/lower serif wordmark ('Faktur' + italic 'studio'), a row of small-caps uppercase nav links with a grow-from-left underline on hover, and a right cluster pairing a quiet uppercase 'Sign in' with an italic-serif burgundy 'Start designing' text CTA. Built on Fraunces (display serif) + Inter (UI sans) with a calm print-magazine feel, and it collapses below lg to an italic CTA plus a hamburger.

Style

A warm editorial / print-magazine aesthetic on a soft cream paper canvas (#faf6ef) with near-black ink text (#1c1815) and a single deep burgundy accent (#7b2d3b). The mix of a fluid display serif (Fraunces) for the wordmark and headings against a tight uppercase Inter for nav labels gives it a fashion-house / journal feel: quiet, high-contrast, and typographic rather than colorful. Depth comes from hairline rules, a faint paper grain, and translucency, not shadows.

Layout & Structure

A `sticky top-0 z-50` header that pins flush to the top with a translucent cream/blur fill and a hairline bottom rule. Inside, a centered `max-w-[1200px]` nav with `px-6 md:px-10` holds one `flex h-16 md:h-[72px] items-center justify-between` row split into three zones: the serif wordmark (left, shrink-0), a horizontal uppercase link group (center-right, hidden below lg), and a right actions cluster ('Sign in' + the italic-serif 'Start designing' CTA, hidden below lg). Below lg the link group and Sign in hide, and the row shows a compact italic CTA plus a hamburger button.

Sticky translucent header

Centered nav container + row

Serif wordmark (left zone)

Uppercase link group (center-right)

Right actions cluster (Sign in + italic CTA)

Mobile/tablet collapse (below lg)

Special Notes

Icons are Phosphor via Iconify (ph:list for the mobile menu; the hero/CTA band also use ph:arrow-up-right and ph:arrow-right). Fonts: Fraunces (display serif, also italic) for the wordmark, headings, and italic CTA links; Inter for all uppercase nav labels and body. Exact tokens: cream #faf6ef (page + bar fill at 85%), ink #1c1815 (text, used at /80 /70 /65 /10 /12 opacities), burgundy #7b2d3b (accent + CTA), dusty-rose #d98a96 (accent word on the dark CTA band only). The bar pins flush (sticky top-0) with a 1px ink/10 bottom rule and backdrop-blur, no shadow. Legibility fixes applied vs the source editorial reference: nav labels stay at full ink/80 (not faded) and the active hover state bumps to solid ink; the burgundy accent #7b2d3b clears AA contrast on cream for the CTA text; type hierarchy is carried by the Fraunces/Inter pairing, the uppercase 0.18em tracking, and hairline rules so nothing relies on color alone. Layout is responsive: the centered uppercase link group and Sign in collapse below lg, leaving a compact italic CTA + a hamburger; the 'studio' tag hides below sm.