Northbound — We Design the Startup Before It Exists
Editorial 'manifesto' startup website: warm cream paper base, near-black ink, a single hot-magenta accent, huge Fraunces serif display headline with italic emphasis, hairline-divided big-number stat rows, a dark ink founder note with a handwritten signature, a 4-up numbered values grid, and a full-bleed magenta CTA band.
Summary
An editorial 'manifesto' startup website that reads like the about/manifesto page of a high-taste product studio. Warm cream paper base (#faf6ef) with near-black ink text (#16130f) and a single hot-magenta accent (#d6246e). A huge Fraunces serif display headline ('We design the startup before it exists.') with one italic light-weight magenta word, Inter for UI/body. Sticky blurred nav with a compass-badge wordmark, a manifesto hero, a full-bleed rounded gradient image strip with an italic serif caption, a 'why we exist' editorial 2-column block, a hairline-divided big-number proof/stat list, a dark ink founder-note card with a handwritten italic signature, a 4-up numbered values grid, a full-bleed magenta CTA band with a faint grid texture, and a dark ink footer. Restraint, big type, generous whitespace, one accent color.
Style
Warm editorial manifesto. Cream paper base, near-black warm ink for type, a single hot-magenta accent used sparingly for emphasis words, eyebrows, stat tags and one CTA. Fraunces variable serif (optical sizing, opsz 40-144) for all display/headings with italic light-weight phrases for emphasis; Inter for nav/body/labels. Big confident display type with tight negative letter-spacing, hairline rules (1px ink at ~14% opacity), generous vertical rhythm, fully-rounded pill buttons, and faint grid/dot textures on the gradient strip and magenta CTA. Mood: high-taste, literary, restrained, confident; never busy, neon-soup, or corporate-template.
Layout & Structure
Single-column long-form editorial page centered in a max-w-[1240px] container with px-6 / md:px-10 gutters. Top-down order: sticky blurred header nav; manifesto hero (eyebrow rule row + huge serif headline + lede paragraph + two pill CTAs); a full-bleed rounded gradient image strip with an italic serif caption and a glass sparkle badge; a 'why we exist' 12-col editorial block (4-col heading / 7-col body + a 2-up feature pair); a hairline-divided proof list of 4 big-number stat rows (number / description / magenta tag) with hover-row left-nudge; a dark ink founder-note card (3-col attribution with avatar / 8-col pull-quote + signature); a 4-up (md:2-col) numbered values grid with top-border cells; a full-bleed magenta CTA band with grid texture and radial glow; and a dark ink footer (5-col brand statement + three link columns + bottom bar). Responsive: all 12-col grids collapse to single column under md, nav links hide under md (CTA pill stays), the stat rows stack number-over-text, and clamp() display type scales down cleanly.
Sticky nav
Manifesto hero
Full-bleed gradient image strip
Why we exist block
Proof / stat list
Founder note card
Values grid
Magenta CTA band
Footer
Special Notes
Fonts loaded from Google Fonts: Fraunces (ital, opsz 9..144, weights 300..900, serif display with optical sizing via font-variation-settings) and Inter (300/400/500/600, sans UI/body). Styled with Tailwind via CDN using a custom theme palette: cream #faf6ef, creamdeep #f3ecdf, ink #16130f, inkmute #5a544a, magenta #d6246e, magentadeep #a81554, with serif=Fraunces and sans=Inter font families. No photographs are used: the only 'image' is the gradient + grid texture strip, so the design is fully self-contained. Keep strictly to one accent color (magenta); the mood must stay warm, editorial, literary and restrained, never neon-soup, dark-mode-default, or corporate-template. Container is max-w-[1240px]; all 12-col grids collapse to single column under the md breakpoint and the display type scales via clamp().