FP30 | Northbound | FIT=A | Professional | Kinetic type
TECHNIQUES: scroll pin hover tap touch focus rotate product back filter motion checkout contact font hero film gsap lenis
BORN_HOOD_ADVICE: Controlled kinetic type and cursor-responsive case art, restrained.
DESIGN_SIGNATURE: 's colors] The design The idea: the agency site other agencies copy, where huge moving type and the work do the talking. Fonts: Syne ExtraBold for headlines, huge and tightly tracked; Albert Sans for body text and labels. Colors: off-black #0C0C0C, bone #EDEAE3, electric lime #D4FF3A for highlights, ultramarine #2B3BFF, ash #A19D94 and graphite #55524C for quiet text. Order: a black hero with a two-line headline stretched edge to edge, a compass needle set in as a letter and a small tile cycling through the work; a giant marquee of the positioning crossed by a tilted lime tape, then a statement that lights up word by word; selected work as a huge numbered list of client names in outline with lime result tags; services as an index list; an ultramarine process that pins and slides sideways; a lime clients section with count-up results and a quote; careers with salary ranges; contact with a huge email and a short form; a footer with the name edge to edge. Motion: letters rise on load while the needle swings and settles north; scrolling scatters them upward, and every needle points at the cursor. The marquee races with scroll speed. The signature: each case has a cover made in the page that looks like real brand work (a striped transit map, coffee bags, halftone-moon posters, a contour map with a hang tag). It follows the cursor and bends with its speed; while scrolling, the case nearest the middle fills in and its cover glides alongside. Full-screen color wipes carry chapter titles between sections and open each case.
HTML_SURFACE: headings=Brands with direction.; What we stand for; Four offorty-one.; Five things,done properly.; How itgoes.; A few of the 41 brands we’ve launched; Do great work.Home by six.; Got somewhereto be?; Junction | ids=n, menu, main, top, about, pos-h, work, work-h, services, svc-h, process, proc-h, clients, cl-h, careers, car-h, contact, ct-h, f-name, f-mail, f-co, f-msg, n-mail, cs, cs-t | functions=readM, rng, hash, vnoise, fbm, F, T, fitS, mk, grain, route, pJunction, bag, pDovetail, moon, poster, pNocturne, pLarch, paintCovers, frame, r, tick, setMenu, fitHero, fitEl, shrink, fitAll, setNeedle, cacheChars, introDone
ORIGINAL_PROMPT: prompt/northbound.md (SHA256 bd5457936816d82fc56588b47bf12bf66cfc141d4b1072c723478abec08c3ccb)
EXAMPLE_SOURCE: example/northbound.html (SHA256 677f5dd99f357537265d480bd810e3a4a05cd6e921dd01cdb9d223c5ba90f7a7)
FULL_RUNNABLE_OFFLINE_EXAMPLE: C:\Users\usapr\Documents\Reference Libraries\Futurepedia Claude Website Library\offline_examples\northbound\index.html
DO_NOT_COPY: Demo facts/images/prices/logos; use only proven techniques respecting current BORN HOOD constraints.
