Case study: hva de beste byrånettsidene lærer NESTE

Byråresearch for ny nestestudio.no · NESTE Studio (ENK Neste Studio Isaksen) · Internt dokument, ikke publisert · Sammenstilt 20.10.2026 fra research utført 19.10.2026

Merking: [målt] = lest av kode eller fanget side. [vurdering] = vår faglige vurdering. [bekreftes] = usikkert eller må avklares av Joakim/Eskil. Alt i dokumentet er hentet fra eksisterende researchfiler (FINAL-RAPPORT.md, SYNTESE.md, TOPP30, KONTAKTARK, notes/, notes/pass2/, notes/pass3/, demo/). Ingenting nytt er undersøkt eller funnet på i denne sammenstillingen.

Test demoene selv: https://neste-demo-92527a31.pages.dev/demo/ (intern, ikke indeksert)

Innhold

1. Kort fortalt
2. Metode og tall
3. Wolff Olins i detalj: markøren og bevegelsen
4. Mønstre på tvers av 250 forsider
5. Unngå-listen
6. Topp 30 i dybden (ett kapittel per nettsted)
7. Andre dype noter
8. De sju redesign-retningene og anbefalingen
9. Hva dette betyr for nestestudio.no
10. Demoene vi bygde
11. Åpne spørsmål

1. Kort fortalt

• Vi gikk gjennom ca. 11 000 byrånettsider, 10 853 unike etter sammenslåing på domene. 374 forsider ble fotografert, og 36 nettsteder ble studert i dybden, flere av dem side for side.
• Det viktigste enkeltfunnet er Wolff Olins-markøren: ordene «Prev» og «Next» og en pil, tegnet som SVG og brukt som vanlige CSS-markører. Null forsinkelse, null JavaScript. Blant 250 målte forsider fant vi denne teknikken bare hos Wolff Olins. Det er derfor en reell mulighet for NESTE.
• Det nest viktigste funnet er forretningsmessig: de beste små studioene selger med personene (another, Goodside, Datalands, Jomor), viser hva de kan i en matrise i stedet for tjenestekort (Bakken & Bæck), og bare ca. 11 % viser pris. Å være åpen om pris og person er fortsatt et fortrinn.
• Tilgjengelig bevegelse er sjelden, selv hos de beste: 66 % av de målte sidene har ingen regel for redusert bevegelse. Her kan NESTE lett være bedre enn referansene.
• Anbefaling: retning 1 (ord som markør), 2 (gründerne er studioet) og 3 (kapabilitetsmatrise) som grunnmur, 4 (Live fra Tromsø) som fast detalj, og enten 6 (ett 3D-øyeblikk) eller Heretic-sporet som den ene signaturen.

2. Metode og tall

2.1 Kilder

Totalt 10 853 rader i sites.csv, i tre nivåer: - A: 30+ med dyp note (17 fra pass 1, 3 flersidige studier i pass 2, 19 i pass 3–4; 36 nettsteder totalt) - B: 331 med automatisk fangst (skjermbilde, fonter, farger, teknologi, ::selection, markør) - C: resten, bare listet med kildelenke

2.2 Slik ble det gjort

• Pass 1: innsamling fra listene, deduplisering, lette skjermbilder, 17 dype noter for Joakims prioriterte liste.
• Pass 2 (19.10, 05:00–12:30): rik fangst av 73 forsider (hero, midt, dypt, slutt), flersidige studier av Wolff Olins, another og Heretic, MOTION-BIBLIOTEK.md (45 interaksjoner), TOPP30.pdf, utvidet kontaktark (340 forsider).
• Pass 3–4: 19 nye dype noter, ny live-måling av Wolff Olins (09:17), URL-sjekk av hele topp 20 (alle HTTP 200 kl. 09:15), demo og tester.
• Kun lovlig tilgang: ingen innloggingsvegger, betalingsmurer eller captcha ble omgått.

2.3 Begrensninger

• Mange fangster viser preloader eller svart skjerm (siden var ikke ferdig lastet etter ca. 6 s). Dette er merket i kontaktarket.
• Teknologideteksjonen er heuristisk (globale variabler og script-URL-er).
• cursor:none-tallet overdriver bruken av egen markør, fordi det ofte bare er en Framer-klasse.

2.4 Kontaktark og topp 30

3. Wolff Olins i detalj: markøren og bevegelsen

Målt første gang kl. 04:15 og sjekket på nytt live 19.10.2026 kl. 09:17 (raw/pass3/wo-verify.json).

3.1 Markøren [målt]

• Den er tre vanlige CSS-markører: cursor: url(data:image/svg+xml;base64,…) 60 25, <fallback>. Ingen JS-prikk som følger musa. Derfor null forsinkelse, aldri ute av synk, og ingen JavaScript-kostnad.
• .cursor-prev: ordet «Prev» i gul #FFF84B, 120×50 px, fallback w-resize.
• .cursor-next: ordet «Next», 128×50 px, fallback e-resize.
• .cursor-swarr: stor pil mot nordvest (merkevarepilen), 57×57 px, fallback pointer.
• Hero-karusellen er delt i tre usynlige klikksoner (grid-cols-3). x = 150 gir cursor-prev (role="button", aria-label="Previous"), x = 720 gir pilen over case-bildet, x = 1300 gir cursor-next. Markøren forteller hva et klikk gjør, og sonene er tilgjengelige knapper.
• Ordene er tegnet som vektorbokstaver i SVG-en. Markøren er typografi. Det er hele trikset.
• Video bruker cursor:none og en liten Play/Pause-SVG som følger musa. Det er det eneste JS-elementet.
• Detalj: alle tre bruker hotspot 60 25, også pilen som bare er 57 px bred. NESTE setter riktig hotspot per markør (demo/cursors/kv-hotspots.json).

3.2 Bevegelsen [målt]

• Footer-ordmerket («StretchyLogo»): «Wolff Olins» i egen variabel font «WO». Høydeaksen hght animeres etter hvor langt man har rullet (700 → 853 → 700, translateY følger med), med fjæren {mass:1, tension:500, friction:30}.

• Fargeskift på hele siden: body bytter bakgrunn og tekstfarge på 500 ms cubic-bezier(0.4,0,0.2,1). Arbeidssiden er mørk, og hver case har eget fargetema.
• Ingen preloader, ingen egne sideoverganger, ingen GSAP, Lenis eller WebGL. Bare Next.js, Tailwind og react-spring.
• Hover på nyhetskort: overlegg i merkefarge og en «READ MORE»-marquee, bare når brukeren ikke har valgt redusert bevegelse.
• Ingen egen ::selection.

3.3 Hvorfor det virker [vurdering]

Grepet er billig teknisk, men dyrt i idé: det krever at merkevaren har en typografi og et symbol sterke nok til å bære en markør. Det gir signaturbevegelse uten tunge biblioteker, laster raskt og bryter ikke tilgjengelighet. Det er det motsatte av generisk.

3.4 Slik gjør NESTE det [forslag, ferdig demo]

Kvadratisk-pilen og ordmarkører i Instrument Serif-kursiv («Neste», «Forrige», «Se», «Spill», «Dra») som native SVG i #C8501E. Tre klikksoner i case-karusellen, et footer-«NESTE» som strekkes ved rulling (scaleY med fjær, siden vi ikke har egen variabelfont), og oransje markering ::selection{background:#C8501E;color:#000} (kontrast 4,62:1). Spesifikasjon i MOTION-SPEC.md §0–§8.

4. Mønstre på tvers av 250 forsider [målt]

• Teknologi: canvas 36 %, jQuery 29 %, WebGL 24 %, Lenis 23 %, WordPress 21 %, GSAP 18 % (ScrollTrigger 12 %), Next.js 17 %, Webflow 14 %, Framer 10 %. Blant Joakims favoritter er Framer og Lenis vanligst. De store (WO, R/GA) bruker Next.js uten scroll-bibliotek.
• Egen ::selection: 98 av 250 (39 %). Blant 73 rike fangster: 41 %. Merkefarget markering er vanlig hos de beste, men sjelden i oransje (Otherkind er et unntak).
• Egen markør: 74 har en cursor:none-regel. Ord-/etikettmarkører finnes som JS-følgere (Balzac «PLAY SHOWREEL», Deeo «DRAG ME», Webisoft «DRAG», Live Me Five «PLAY»). Native SVG-ordmarkør bare hos Wolff Olins.
• Redusert bevegelse: 84 av 250 har minst én prefers-reduced-motion-regel; blant 73 rike bare 22 %. Selv Lusion, Goodside, Datalands, Porto Rocha, Spoon, ONTO, monopo, Jomor og Serious Business har 0 regler. Leeroy har 3 (best i pass 3).
• H1: median ca. 38 px, men 29 % har H1 på 80 px eller mer. Serif- eller kursiv display er i mindretall (ca. 11 %). Instrument Serif + Inter Tight skiller seg ut, men se advarselen om «Framer-mal-look» i §5.
• Struktur: lenke til Work/cases 81 %, About/Team/Studio ca. 88 %, kontakt-CTA 76 %. Bare ca. 11 % har prisord.
• Gjentakende detaljer: lokal klokke og hilsen i toppen (RabenRifaie, Default, Porto Rocha, Datalands «OPEN (WE'RE CLOSED)», Craft VRA), «ledig»-status (Default, another), parentes- og nummerlabels (twoplusone, another), stort beskåret ordmerke i footer (WO, Heretic m.fl.).
• Sideoverganger via Swup/Barba: bare 1 nettsted av 73. De fleste bruker rammeverkets egen ruting.
• Oransje i utvalget: monopo London har dominerende #BF4F22 (svært nær NESTEs #C8501E). NESTE må skille seg på papirflate + serif, ikke farge alene [vurdering].
• «Next» som idé: Garden Eight-heroen er «WHAT CAN WE MAKE NEXT». NESTE bør ikke åpne med en engelsk «what's next»-variant; på norsk og med vår pil er ordet vårt [vurdering].

4.1 Tekniske lærdommer [målt]

• Skriv ekte tall i HTML. Spoons telleverk viste «0» for alle tall da siden ble lest (de telles opp med JavaScript).
• Riktig språkkode. spoonagency.no har lang="sv" på norske sider. NESTE: lang="nb".
• Ikke del titler i bokstaver uten tilgjengelig tekst (Lusion gjentar enkeltbokstaver fire ganger i DOM).
• Ingen motstridende tall (Serious Business: «200+» mot «over 180»). Ingen «©2024» som aldri oppdateres (ONTO).

5. Unngå-listen

• Lilla og blå gradient-blobs, glassmorphism-kort, glødende kanter og «aurora»-bakgrunner.
• AI-genererte personer eller «3D-kluss» som hero (f.eks. metasense, der bildene ser genererte ut [vurdering]).
• Ord som «AI-powered», «next-gen», «unlock», «elevate», «seamless», eller emojier i overskrifter. Hos NESTE er AI aldri overskriften.
• Bento-rutenett med ikon + tre ord som eneste innhold. Tallstatistikk vi ikke har.
• Følgemarkør med lag på alt. Bruk native markører, eventuelt en følger på én flate.
• Preloader-port med «Enter» (RabenRifaie, Unseen). Lange preloadere på hvert sidebytte.
• Scroll-jacking uten reduced-motion-fallback.
• Inter som eneste font og svart-hvitt minimalisme uten idé. Og: Inter + Instrument Serif-kursiv + glødende gradient på svart (Charlie Osborne) = «Framer-mal-look».
• Logostriper og kundeomtaler uten samtykke.
• Lisensfeller: script- eller displayfonter med «personal use»-lisens (f.eks. another sin «Ridenation»).
• Case på Behance i stedet for egne sider.
• Mange ulike CTA-formuleringer på samme side (Mocs: fem varianter). Én formulering overalt (Default).
• Stockfoto av person med laptop (Interword).
• mix-blend-mode: difference-prikk på oransje flater (blir grønnblå, utenfor palett).
• Nedlagte byråer som referanse uten å si det (The Bold NZ er arkivert siden april 2025 ifølge egen tekst).
• Glasspaneler over foto og rullende vegg av emoji-kommentarer (Deux Huit Huit), tall uten etikett (Antinomy), følgeprikk i tillegg til systempila (ONTO).
• Gradient-heroene hos monopo og Leeroy ligner vår oransje, men står på unngå-listen.

6. Topp 30 i dybden

Hvert kapittel under bygger på den dype noten for nettstedet, gjengitt med merkingen [målt]/[vurdering]/[bekreftes] slik den står i kildefilen. Skjermbildene er fra våre egne fangster 19.10.2026.

6.1 #1 Wolff Olins

URL: https://www.wolffolins.com/
Kilde: notes/wolffolins.md, notes/pass2/wolffolins.md

Wolff Olins — wolffolins.com

• URL: https://www.wolffolins.com/
• Land: Globalt brandbyrå. Nettstedet sier «Dear 1965, thanks for the blueprint» (grunnlagt 1965). Hovedkontoret er i London [bekreftes; står ikke på forsiden].
• Kilde: Joakims liste (prioritert)
• Skjermbilder: shots/wolffolins.png, -scroll.png, -full.png, -cursor-next.png, -case.png, -footer.png. Markørene er dekodet i raw/wo/cursor-*.svg og vist i raw/wo/cursors.png.
• Fanget: 19.10.2026 ca. 04:15 (Europe/Paris), Chrome headless 1440×900

Teknologi (fra offentlig HTML, JS og CSS)

• Next.js (App Router) og Tailwind CSS. Klassenavn som transition-[height], motion-safe:animate-marquee og group-hover: viser Tailwind.
• Contentful som CMS (ctfassets i HTML).
• react-spring for fysikkbasert animasjon (useSpring, config:{mass:1,tension:500,friction:30}).
• Swiper for hero-karusellen (autoplay delay:6000, loop:true).
• colorjs.io for fargeberegning i LCH. Hver case får sitt eget fargetema, og kontrasten mot hvit eller svart beregnes med contrast(...,"Lstar").
• Vimeo Player for video.
• Ingen GSAP, Lenis, WebGL/Three eller Barba. Bevegelsene er laget med native CSS, Tailwind-overganger og react-spring. Nettopp derfor føles siden rask og «ren».
• Fonter: ABC Monument Grotesk (Regular og Medium) for brødtekst og nav, Untitled Serif, og en egen variabel font «WO» (WolffOlinsVF) med aksen hght og ligaturen dlig.

Den egendefinerte markøren (det Joakim elsker)

Hovedfunn: markøren er ikke et JS-element som følger musen. Den er native CSS-markører med SVG-data-URI. Derfor er den helt uten lag, ruller ikke ut av synk og koster null JS:

• Karusellen har et usynlig rutenett i tre kolonner (.cursor-area, grid-cols-3). Venstre kolonne har onClick=slidePrev og role=button aria-label="Previous", høyre har slideNext. I midten er selve case-lenken med cursor-swarr.
• Testet med Playwright: musen på x=150 gir cursor-prev, x=720 gir swarr, x=1300 gir cursor-next.
• Gulfargen er merkevarefargen brand-color:#FFF84B (Tailwind-temaet har også green:#00FF47).
• Ordene er tegnet som vektorbokstaver, så markøren er typografi. Det er hele trikset.

Andre bevegelser og interaksjoner

• StretchyLogo i footer: et gigantisk «Wolff Olins» i WO-fonten, med fontstørrelse calc((100vw - scrollbar - marg*2)/4.65). Mens footeren ruller inn, animeres variabelfont-aksen hght fra 700 til 5600 ut fra scroll-progresjonen. Bokstavene strekkes høyt og «setter seg» til 700 når du er helt nede. Det drives av react-spring {mass:1,tension:500,friction:30}, og translateY følger med. body.footer-visible toggles via IntersectionObserver.
• Sidetemaer: body har transition: color, background-color… 500ms cubic-bezier(.4,0,.2,1). Case-sider setter CSS-variabler (--page-bg, --page-fg-100/200). Footeren er gul #FFF84B.
• Hover på nyhetskort: en overlay i merkefargen tones inn (opacity 300ms ease-in-out), og en marquee «READ MORE READ MORE …» ruller (marquee 15s linear infinite). Den ligger kun i @media (prefers-reduced-motion:no-preference), så den respekterer redusert bevegelse.
• AnimatedReveal: høyden animeres fra 0 til målt høyde og så til auto på 500 ms, med cubic-bezier(.4,0,.2,1) og mask-image-overgang. Brukes i trekkspill på About-siden.
• Easings i CSS: cubic-bezier(.4,0,.2,1) (Tailwind standard), (.65,.05,.36,1), (.23,1,.32,1) (easeOutQuint-aktig), (0,0,.2,1) og (.4,0,1,1). Varigheter: 150, 200, 300, 500, 650, 700 og 1000 ms og 1,2 s.
• Sideoverganger: ingen egne route-overganger funnet. Next-navigasjonen er umiddelbar, og fargeskiftet på body (500 ms) gjør jobben.
• Preloader: ingen.
• ::selection: ingen egen regel (systemstandard).

Layout, typografi og farge

• Hvit side og svart tekst på 16/24 px. Heroen er en karusell med fullskjermsbilder og video, med tittel og undertittel nede til venstre. Under kommer «Our Ambition» (én setning), «Selected Work» (kort med sektor og tjenestetagger), «Featured News» og footeren.
• Navigasjonen er minimal: Work, About, News, Contact og søk.
• Palett: hvit, svart, gul #FFF84B, grå (#f5f5f5 til #161616) og grønn #00FF47.

Tjenester, team og cases

• About samler alt i tre pilarer, «Brand / Culture / Experience», med 5–6 deltjenester hver. Pilarene vises som trekkspill.
• Team finnes under About, men uten grunnlegger. De markedsfører ledere som tankeledere i nyhetssaker («Global CEO Sairah Ashman writes for Fast Company…»).
• Cases: hvert kort har sektor og tagger som Brand Strategy, Visual Identity og Verbal Identity.
• CTA: stille. «Talk to us or ask us anything» i footeren, og ingen priser.

Hva som er bra

1. Markøren er merkevare: pil og ord i merkefarge, implementert med null JS.
2. Variabelfont som bevegelse (hght-aksen) gir en signatur ingen mal kan kopiere.
3. Bevegelse respekterer prefers-reduced-motion.
4. Én tydelig ambisjonssetning.

Idé for NESTE

• Lag NESTE-markører som SVG-data-URI: Kvadratisk-pilen i #C8501E (lenke eller case), ordmarkører «Neste →» og «← Forrige» i Instrument Serif-kursiv på karusell og galleri, og «Se» over video. Hotspot i senter. Spec og demo ligger i ../MOTION-SPEC.md og ../demo/.
• Footer med et gigantisk «NESTE»-ordmerke som strekkes ved scroll. Vi har ikke en egen variabelfont, så vi bruker scaleY og letter-spacing med spring [forslag], eller en variabel font med vekt- og breddeakse.
• Hver case får sin egen fargetone, med body-overgang på 500 ms.

Wolff Olins: flersidig studie (pass 2)

Fanget 19.10.2026 ca. 05:05 (Europe/Paris) med raw/flow.py. Data: raw/flow/wolffolins.json. Skjermbilder: shots/flow/wolffolins-{home,work,case,about,contact}-{a,b,full}.jpg. Bevegelse: shots/motion/wolffolins-{intro,hover,scroll,transition}.gif. Pass 1-note: notes/wolffolins.md (markører, StretchyLogo).

Flyt [målt]

Bevegelse [målt fra GIF og CSS]

• Ingen sideovergang (transition-GIF: siden bytter direkte, bare bodyfargen glir på 500 ms). Bekrefter pass 1.
• Intro: ingen preloader. Første ramme er hvit, og bildet kommer inn på under 1 s.
• Hover på karusell: ingen synlig DOM-markør i skjermbildet, fordi markørene er native (se pass 1). Bildet bytter når man klikker sonene.
• Scroll: ingen parallakse eller scroll-jacking. Innhold kommer inn med enkel maske/høyde-reveal.

Hva NESTE tar med [vurdering]

1. Case-mal: tall først. Tre resultater øverst i casen før teksten, og en knapp for «Last ned bilder» (presse). For NESTE: bare ekte tall fra egne kunder [bekreftes per case], ellers kvalitative resultater.
2. Tjenester i tre søyler med hver sin farge → NESTE: Nettside · Merkevare · Bevegelse, med oransje, blekk og papir og prikk-bullets i Kvadratisk-flis.
3. Kontakt = personer. «Ny forespørsel: Joakim» / «Prosjekt og drift: Eskil» med direkte e-post, og koordinater for Tromsø (69.6492° N, 18.9553° E) som grafisk detalj.
4. Mørk arbeidsside som tydelig rom-skifte fra lys forside (body-fargeovergang 500 ms cubic-bezier(.4,0,.2,1)).

6.2 #2 another™

URL: https://www.another.gr/
Kilde: notes/another.md, notes/pass2/another.md

another™ Agency — another.gr

• URL: https://www.another.gr/ (gresk, lang=el-GR). Undersider som er fanget: /team og /projects.
• Land: Hellas (Athen). Nettstedet sier «MADE IN ATHENS», «ESTABLISHED IN GREECE SINCE 2024» og har telefon 210 65 26 105.
• Kilde: Joakims liste (prioritert). Han synes dette er en av de beste byråsidene han har sett, fordi den viser team og grunnlegger og faktisk selger tjenestene.
• Skjermbilder: shots/another.png, -full.png, another-team-full.png, another-projects-full.png. Oversikt: raw/ov/another.jpg
• Teknologi: Framer (framerusercontent, motion.mjs), Lenis smooth scroll (html.lenis), en egen Framer-komponent «GradientWave» (WebGL-gradient) og komponentene «Counter» og «Stagger». Fonter: Google Sans 400–700 (H1 92 px/700, uppercase, letter-spacing −4,6 px), Afacad, Geist, Manrope, Inter og et script-font, «Ridenation» (FreePersonalUse), som signatur. NB: fontnavnet antyder en gratis lisens for personlig bruk [bekreftes]. Ikke kopier.
• Markør: Framer har klassen framer-cursor-none. Se cursor-prio.jsonl for om noe følger musen.
• ::selection: ingen egen regel.

Struktur på forsiden (rekkefølgen er salgsargumentet)

1. Hero: grenseløst fullskjermsbilde i lilla og magenta med korn. Ordmerket «another» (an i oransje #FC4908, other i hvit) og «™ Agency», det håndskrevne scriptet «Another» over, og tjenestelinjen «BRANDING / MARKETING / WEB DEVELOPMENT / DIGITAL GROWTH». Grunnleggeren vises i heroen: et lite portrett med navnet «Χρήστος Μάναρης, Founder & CEO». Nede til venstre står knapphet: «ΑΠΟΜΕΝΟΥΝ 2 ΘΕΣΕΙΣ» (= «2 plasser igjen») med en stolpemåler. CTA-en «Ζήτηση Προσφοράς» (be om tilbud) ligger i oransje knapp i nav. Topplinjen har lokal tid og e-post.
2. «AWARD NOMINATED AGENCY» på oransje flate, med en stor tekst og «2011», der fotnoten sier «nominert til årets beste nettsted». Merk:* årstallet 2011 stemmer ikke med «siden 2024». Det står slik på siden [uklart hva det viser til].
3. «ΤΙ ΕΙΝΑΙ Η ANOTHER;» (hva er Another?): et bento-rutenett med kort, «Όλα ξεκινάνε με μια απλή συζήτηση» (alt starter med en samtale) og «Κλείστε Ραντεβού» (book møte).
4. Bevis: «ΧΙΛΙΑΔΕΣ VIRAL», «X50+ VIRAL VIDEOS» og «+100M ΠΡΟΒΟΛΕΣ» (visninger). Marquee: «SOCIAL MEDIA DEVELOPMENT DIGITAL GROWTH».
5. Posisjonering mot AI: «NO AI HERE. Mens internett fylles med sjelløst AI-innhold, fortsetter vi å levere autentisk innhold av høy kvalitet.» Dette er et eget avsnitt.
6. Utvalgte prosjekter i fullskjerm (Lohan × Mahmut Orhan, Dogger og Panaki), med nummer (01)–(03), kategori og år.
7. Grunnleggerens sitat («Promote: Μας το ζητήσατε και το κάναμε!», dere ba om det og vi gjorde det) leder inn i priser.
8. Prispakker for sosiale medier: Basic, Scale og Rise i en sammenligningstabell. Hver rad har en tjeneste (Διαχείριση, Video/Reels, Carousel, Stories, Scriptwriting, Community Management, Account Manager, Creative Campaigns, Ads, Max Ad Spend 2 500 € eller 10 000 €, Viber Marketing, Creators, Strategy Call og Reporting) med antall per måned. Det er ingen bindingstid: «Πληρώνεις μήνα-μήνα» (du betaler måned for måned). Selve pakkeprisene i euro sto ikke synlig i teksten vi fanget [bekreftes].
9. Resultatstatistikk: «+24M» organiske visninger, «−14 %» kostnad mot en intern digitalavdeling og «+194 %» organisk rekkevidde. Ledes inn av Managing Director (Στέλλα Λουβιτάκη).
10. Kundeomtaler med stort svart-hvitt-portrett og logorad (Google, Meta, Anthropic, Qualcomm, TikTok …) [usikkert hva logoene representerer: kunder, partnere eller plattformer].
11. Another Feed: en blogg og nyhetsstrøm.
12. FAQ («Hvordan starter samarbeidet? Gratis første møte …»).
13. Tilbakeringingsskjema: «Θέλεις να σε καλέσουμε εμείς;» (vil du at vi ringer deg?). Footer med kontaktinfo. Skjemaet ble ikke fylt ut eller sendt.

/team

• Intro: «Vi tror ikke på de få som gjør alt, vi tror på de riktige folkene for hver ting». Another fungerer som et eksternt digitalt team til fast månedspris.
• Snittresultater for kundene: +156 % nye forespørsler, +54 % salg, −24 % markedsføringskostnad og +68 % nye kunder.
• Hvert teammedlem har fornavn og rolle: Founder & CEO, Managing Director, Legal Advisor, Account Manager, Revenue Officer, HR, Framer Developer, Graphic Designer, Videographer, Photographer, Social Media Manager, Content Creator og Client Support. Merk at bare fornavn vises «av sikkerhetshensyn».
• Grunnleggeren går igjen som avsender på pakkene, nå «Growth Plans»: Advance, Impact Plus og Dominate.

/projects

• Filter: Alle, Branding, Marketing, Web Development, Content Creation og Growth. Det står at bare et utvalg vises av konfidensialitetshensyn.

Hva som er bra

1. Grunnleggeren er ansiktet i heroen, på pakkene og i CTA-en. Det bygger tillit som en person, ikke som en logo.
2. Selger åpent: pakker, sammenligningstabell, ingen binding, knapphet («2 plasser igjen») og gratis møte.
3. Bevis i tall gjennom hele siden.
4. Hele teamet med roller viser at det er ekte mennesker.
5. Visuelt nivå: kornete fotoflater, en tydelig oransje aksent (veldig nær NESTEs brente oransje), store overskrifter i versaler og et scriptfont som kontrast.
6. Tydelig standpunkt («NO AI HERE»). Merk at det er motsatt av R/GA.

Idé for NESTE

• Hero med Joakim og Eskil som ansikter: små portretter med navn og rolle, og «Tromsø»-tid i topplinjen.
• Knapphet som er ekte: «Vi tar 2 nye prosjekter i [måned]» [bare hvis det stemmer].
• Pakker og fra-priser i en sammenligningstabell (Nettside / Merkevare / Løpende), med tydelig «ingen binding» der det stemmer [priser bekreftes].
• Bevis i tall bare med ekte tall fra pilotene [bekreftes]. Ikke kopier Another sine.
• Gratis første møte som hoved-CTA, med en tilbakeringingsboks.
• Unngå å kopiere scriptfonten og «NO AI HERE»-retorikken direkte. NESTE skal ikke posisjonere seg mot AI, men heller ikke selge AI. Se POSISJONERING.md.

another™: flersidig studie (pass 2)

Fanget 19.10.2026 ca. 05:00 (Europe/Paris). Data: raw/flow/another.json. Skjermbilder: shots/flow/another-{home,work,case,about,contact}-*.jpg. Bevegelse: shots/motion/another-{intro,hover,scroll}.gif. Pass 1: notes/another.md.

Nytt i pass 2 [målt]

Observasjon om tallene [målt]

Snittresultatene på /team har endret seg mellom pass 1 (+156 % nye forespørsler, −24 % kostnad) og pass 2 (+183 %, −37 %), samme døgn. Tallene er altså markedsføring som justeres, ikke revidert dokumentasjon. NESTE skal ikke vise tall vi ikke kan dokumentere (se SYNTESE §5).

Bevegelse [målt fra GIF]

• Scroll: seksjoner bytter bakgrunn i harde kutt (lilla → oransje → hvit → svart), med store versaltitler som glir inn. Lenis gir myk scroll.
• Hover: ingen synlig følgemarkør i rammene. Framer-klassen cursor-none alene er ikke bevis.
• Easing i CSS: bare cubic-bezier(0.44, 0, 0.56, 1) (Framer-standard). Ingen prefers-reduced-motion-regler (0).

Hva NESTE tar med [vurdering]

1. Valgknapper i kontaktskjema («Hva trenger dere?»: Ny nettside / Merkevare / Løpende drift / Usikker) gjør første kontakt lett og sorterer leads. Ingenting sendes uten at kunden selv trykker.
2. Case-mal i fire ledd (Utfordring → Resultat → Tilnærming → Kundens ord) og metafelt (Omfang · Tid · Kunde · År).
3. FAQ + «ring meg»-blokk nederst på alle sider som fast salgsfot.
4. Ærlig «vi viser et utvalg»-note når vi ikke kan vise alt (relevant for kunder vi ikke kan navngi, f.eks. Klarsalg).

6.3 #3 Heretic

URL: https://www.heretic.wtf/
Kilde: notes/heretic.md, notes/pass2/heretic.md

Heretic — heretic.wtf

• URL: https://www.heretic.wtf/ (enkeltside med ankrene WHO WE ARE, REVIEWS og WORK)
• Land: [bekreftes] Står ikke på siden. Kundelisten (Aleo, Morpho, Hourglass, Gaia, Icebreaker, Amazon Luna) peker mot krypto, Web3, tech og gaming.
• Kilde: Joakims liste. Prioritert som «en av hans favoritter gjennom tidene», først og fremst for art direction.
• Skjermbilder: shots/heretic-gate.png (med samtykkeboks), shots/heretic.png, -scroll.png, -full.png. Utsnitt: raw/ov/heretic-c1.jpg (ridder og tjenester) og heretic-c2.jpg (footer). Oversikt: raw/ov/heretic.jpg
• Teknologi: Framer med motion.mjs og Lenis (html.lenis lenis-autoToggle). 7 videoer og 149 bilder. Ingen WebGL-canvas, så bilen i heroen er video eller forhåndsrendret 3D [antatt fra at det ikke finnes canvas]. Fonter: Misfits Blackletter (display), Helvetica Neue Bold og Regular (brødtekst).

Art direction i dybden

Konsept: «heretic» betyr kjetter, en som bryter med læren. Hele identiteten spiller på middelalder, kirke og kjetteri, satt i kollisjon med moderne motorsport og tech. Spenningen mellom gammel ikonografi og nåtidens hastighet er hele art direction-en.

1. Typografi: blackletter (gotisk fraktur) brukes som display, skrevet i store bokstaver og som små aksentord midt i en grotesk setning. Eksempel: «…make people stop, think, and feel something.», der de to siste ordene er blackletter i gull. Tjenestene står også i blackletter, med en liten ruter (◆) som punkt. Brødteksten er nøktern Helvetica Neue Bold, med stramme linjer og stor x-høyde. Kontrasten mellom ornamental fraktur og grotesk er signaturen.
2. Farge: tre flater.
3. Svart #000/#110B1C i hero og cases.
4. Varm steingrå/oliven #97958A (body-bakgrunn), som minner om gammelt pergament eller stein.
5. Gull/okergul: #A99141 og #C3A55F som metallisk gull på svart i heroen, og ren signalgul #FFBA23 i footeren, sammen med mørk olivenbrun #483E1F (tekst og ordmerke).
6. Gull som vises som «bladgull» mot svart gir en kirkelig, ikonaktig følelse.
7. Illustrasjon: kobberstikk- og tresnittsstil. En ridder i full rustning på steilende hest, med lanse/sverd og gravert skravur, tegnet i mørk grå strek direkte på den grå flaten, uten ramme. Stilen er «Dürer-gravyr». Det gir håndverk, historie og opprør, fordi ridderen er i angrep.
8. 3D og foto: heroen viser en rallybil (Audi Quattro-aktig gruppe B-silhuett [antatt ut fra formen]) i Heretic-livery, hvit og gul, med logoen på panseret. Den står på speilblankt svart gulv med refleks og forsvinner i mørket. Motorsport betyr fart og fare, «Burn the Playbook». Det har ingen direkte kobling til tjenestene og er et rent holdningsbilde.
9. Grafiske mønstre: sjakkrutete flaggbånd (motorsportens målflagg) skiller inn footeren. Ruter- og diamantformer brukes som punkttegn og logo-emblem (H i diamant).
10. Ordmerke: «Heretic» i blackletter, øverst til høyre i gull og gigantisk i footeren. Der går det utenfor kantene, beskåret i bunnen, i mørk oliven på gul.
11. Tekst og tone: ordboksoppslag i footeren: «her•e•tic (ˈhɛr ɪ tɪk) n. Someone who does not conform to an established view, doctrine, or principle.» Hero: «Burn the Playbook». Brødtekst: «The marketing playbook everyone uses is cooked, and we're not interested in reheating it.» Samtykkeboksen er skrevet som en ed: «Confirm your intentions. Do you agree or deny to push the boundaries of creative execution? Deny / Agree.»
12. Case-presentasjon: hvert case har navn, «Service: …» og et langt avsnitt med problem, innsikt og resultat (for eksempel «activated 37 cities, top five developer ecosystem»). Deretter følger 3–4 bilder i horisontal stripe (video, mockup og plakat).
13. Kundeomtaler: svarte kort i horisontal karusell med stort anførselstegn, navn og firma.
14. Logorad: Select Clients med gråtonelogoer (Robinhood, Google, Aleo, gaia, MOSS …).

Bevegelse

• Lenis smooth scroll og Framer-overganger (fade og slide). Karusell for omtaler. Ingen egen markør funnet i testen (cursor-prio.jsonl).
• ::selection har ingen egen regel.

Tjenester, team og CTA

• Tjenester: Brand Strategy, Campaign Strategy, Brand Identity, Events & Experiential, Design & Copywriting og Social Content.
• Team og grunnlegger vises ikke på siden. «For over 15 years…» er eneste personlige referanse.
• CTA: «Project inquiries hi@heretic.wtf · Book a call» er fast nede til venstre i heroen og gjentas i footeren.

Hva som er bra

1. Et konsept som styrer alt: navn, fonter, illustrasjon, farge, mikrotekst og til og med cookie-boksen. Det er motsatt av generisk.
2. Uventet kollisjon mellom middelalder og motorsport gjør siden umulig å glemme.
3. Gravyrillustrasjon er håndverk som ikke ser AI-generert ut.
4. Mikrotekst med personlighet («Confirm your intentions»).

Idé for NESTE (oversatt til NESTE-DNA, ikke kopiert)

• Ett konsept som styrer alt. Forslag: «NESTE» som det som kommer etter. Tromsø, nordlys, polarnatt og mørketid er gammel nordnorsk ikonografi, og den møter moderne teknologi. Det kan for eksempel være gravyrstil fra gamle nordnorske kart eller ekspedisjonsillustrasjoner (Nansen, Amundsen, Tromsø som «porten til Ishavet») i kollisjon med skarp digital produksjon [forslag; rettigheter til historiske kilder må sjekkes].
• Aksentord i Instrument Serif-kursiv midt i Inter Tight-setninger, i brent oransje. Det er vår versjon av blackletter-aksenten.
• Mikrotekst med personlighet i samtykkeboks, 404 og skjema, skrevet på norsk med lune.
• Gigantisk ordmerke i footeren, beskåret, i ink på oransje.

Heretic: flersidig studie (pass 2)

Fanget 19.10.2026 ca. 05:22 (Europe/Paris). Data: raw/flow/heretic.json. Skjermbilder: shots/flow/heretic-home-{a,b,full}.jpg. Bevegelse: shots/motion/heretic-{intro,hover,scroll}.gif. Pass 1: notes/heretic.md.

Flyt [målt]

Heretic er én lang side med ankerlenker (WHO WE ARE · REVIEWS · WORK). flow.py fant ingen interne undersider. Casene er seksjoner på forsiden, ikke egne sider.

Rekkefølge på siden: 1. Hero: «Burn the Playbook» i gull blackletter på svart, rallybil i gull/hvitt som dreier 360° i midten (GIF: bilen roterer både i intro- og hover-opptaket, så det er en loop. Om den også styres av musa er ikke målt [bekreftes]). Fast nede til venstre: «Project inquiries hi@heretic.wtf · Book a call». 2. Samtykke i merkevarens stemme: cookie-boksen heter «Confirm your intentions: Do you agree or deny to push the boundaries of creative execution?» med knappene Deny / Agree. Juss-elementet er gjort om til tone. 3. Hvem vi er: stor grotesk på olivengrå flate, der siste frase «feel something» er fremhevet i gult. Tjenester som gul liste med diamant-punkt (Brand Strategy, Campaign Strategy, Brand Identity, Events & Experiential, Design & Copywriting, Social Content). Ved siden av: kobberstikk av en ridder til hest (illustrasjonen bærer «kjetter»-ideen). 4. Select Clients: logorad i blekk på grått. 5. Reviews: sitatkort i mørk oliven med navn og firma, i en horisontal karusell. 6. Featured Work: for hvert case: navn, én setning, kort avsnitt til høyre, og en rad med tre bilder (Aleo, Morpho, Amazon Luna, Icebreaker, Hourglass, Gaia). 7. Footer: sjakkrutet flaggbånd, så gigantisk beskåret «Heretic» i mørk oliven på signalgult.

Hvorfor det virker [vurdering]

• Én idé, tre medier: blackletter (typografi), kobberstikk (illustrasjon) og motorsport (bil, flagg). Alt peker på «bryt reglene», og ingenting er tilfeldig pynt.
• Selv kjedelige deler får tone: cookie-boksen er det beste eksempelet vi har funnet i hele utvalget på mikrotekst som merkevare.
• Lite teknikk: Framer og Lenis, ingen WebGL (pass 1). Inntrykket kommer av art direction, ikke av kode.

NESTE-oversettelse [forslag]

• Ett nordnorsk konsept som styrer alt (SYNTESE retning 3): f.eks. «Ishavsbyen». Gravyr eller tresnitt av ekspedisjonsskuter eller Tromsdalstinden, polarkart-linjer og Kvadratisk-pila som kompassnål. Krever egne eller rettighetsklarerte illustrasjoner [bekreftes].
• Cookie-boks på NESTE-norsk (forslag til tekst, ikke vedtatt): «Neste steg? Vi bruker bare nødvendige informasjonskapsler. [Greit] [Les mer]». Hvis vi ikke har analyse-cookies, trengs det kanskje ingen boks [bekreftes juridisk].
• Ett objekt som dreier i heroen: Kvadratisk-pila eller seglet som forhåndsrendret 360°-loop (samme idé som rallybilen, og koblet til SYNTESE retning 4).
• Gigantisk beskåret NESTE i footer på oransje, med flaggbåndet erstattet av en rad Kvadratisk-fliser.

6.4 #4 RabenRifaie

URL: https://www.rabenrifaie.com/
Kilde: notes/rabenrifaie.md

RabenRifaie — rabenrifaie.com

• URL: https://www.rabenrifaie.com/
• Land: Polen og Singapore («A Polish–Singaporean creative studio»). Grunnleggerne heter Natalia og Ahmad (nevnt i kundeomtaler).
• Kilde: Joakims liste (prioritert). Han liker posisjoneringen som et kreativt teknologistudio.
• Skjermbilder: shots/rabenrifaie-gate.png (preloader og «Welcome»), shots/rabenrifaie.png (hjem), -about.png, -projects.png, -contact.png. Oversikt: raw/ov/rr2.jpg
• Teknologi: Framer. Videoene strømmes med hls.js 1.4.12 (jsDelivr). Ingen WebGL-canvas, så 3D-verdenene er forhåndsrendrede videoloops og ikke sanntid [antatt fra at canvas mangler og HLS brukes]. Fonter: PP Eiko Italic Light (display-serif, kursiv) og PP Neue Montreal Book (grotesk). Calendly er bygget inn for booking (primærfarge 97ac87, salviegrønn).

Opplevelsen

1. Preloader: svart skjerm, ordmerket «RabenRifaie» (Raben i kursiv serif, Rifaie i grotesk) og en teller som går til 100 nede til høyre. Til slutt dukker en pilleknapp opp: «Welcome». Brukeren må klikke seg inn. Det fungerer som en lydport (det finnes en lydknapp) og gir en «entré».
2. Ingen vanlig scroll. Siden er én skjerm med kapitler. Hvert kapittel er en egen 3D-rendret verden i fullskjerm, nærmest som et spill:
3. Hjem: grønne gressbakker med to glødende måner som ruller.
4. About / Projects: en skulpturell sandfarget hule med bonsai og et svevende kuleobjekt.
5. Contact: organisk hvit arkitektur med vinduer mot havet og en hengende lampe. Teksten er «Drink e-coffee with us».
6. Navigasjon: en pillemeny nederst i midten (Home, About, ×, Projects, Contact) og «explore» med en rund R-knapp. Øverst til høyre ligger sosiale ikoner og «Book a call». Bokstavene i lenker er sperret («B o o k a c a l l»). Et hilsen-element sier «Good Night» eller «Good morning» ut fra klokkeslett [observert «Good Night» kl. 04].
7. Typografi: liten, sentrert, hvit tekst på bildet. Kursiv serif og grotesk blandes i samme setning: «A creative design studio for branding, immersive web and 3D motion.»

Posisjonering (det Joakim liker)

• Tittel: «A creative design studio for branding, immersive web and 3D motion.»
• Ingress: «…shaping brands through strategy, design and motion. We create designs that connect across mediums and dimensions.»
• Fire tjenester: Visual strategy · Web design & development · Branding · 3D visualization & animation. «View our services» lenker til Behance.
• Bevis: ni korte kundeomtaler, de fleste fra grunnleggere («Founder – Neaven», «CEO – Achromatic»), og en logorad (GATE108, Signal26, ELMNTL, Uber Bufa …). «Projects» sender til Behance i stedet for egne case-sider.
• CTA: «Book a call» (Calendly 30 min), «Schedule a coffee» og «Contact us».

Hva som er bra

1. Siden er selve beviset: 3D-ferdighetene vises i stedet for å bli fortalt.
2. Fire tjenester er nok. Det gir en klar profil som «creative technology studio».
3. Lavmælt og eksklusiv tone. Ett kapittel er én verden.
4. Kursiv serif sammen med grotesk ligner veldig på NESTEs Instrument Serif og Inter Tight.

Svakheter

• Prosjektene ligger på Behance, så de har ikke egne case-sider (dårligere for SEO og salg).
• Teksten er tynn. Det er vanskelig å forstå prosess, pris og team.
• Tilgjengelighet og ytelse: fullskjermsvideo på mobil og en preloader-port [ikke målt].

Idé for NESTE

• Ett signaturøyeblikk i 3D, ikke en hel 3D-side. For eksempel en forhåndsrendret loop av Kvadratisk-pilen som objekt i et nordnorsk landskap (fjord, snø, polarlys), brukt som hero-video med en poster-ramme som fallback [forslag].
• Tjenester i fire ord, som RabenRifaie: Visuell strategi · Nettsider og utvikling · Merkevare · 3D og bevegelse [forslag, se POSISJONERING.md].
• Hilsen etter klokkeslett med Tromsø-tid («God kveld fra Tromsø»).
• Book-et-møte direkte på siden (Cal.com eller Calendly), men egne case-sider på eget domene.

6.5 #5 Bakken & Bæck

URL: https://bakkenbaeck.com/
Kilde: notes/pass3/bakkenbaeck.md

Bakken & Bæck (bakkenbaeck.com): dyp note (pass 3)

Kilde: flersidig fangst 19.10.2026 ca. 05:20–05:50 (Europe/Paris), raw/flow/bakkenbaeck.json (+ bakken-baeck.json, bakken-baeck-v2.json): forside, arbeid, case Sierra og om oss. Skjermbilder shots/flow/bakkenbaeck-{home,work,case,about}-{a,b,full}.jpg, bevegelse shots/motion/bakkenbaeck-{intro,hover,scroll,transition}.gif, bakkenbaeck-com-cursor.gif, markering bakkenbaeck-com-selection.jpg, raw/motion/bakkenbaeck-com.json. Pass 2-sammendrag i notes/pass2/FLYT-STUDIER.md. Merking: [målt] / [vurdering] / [bekreftes].

Kort fortalt

Design- og teknologistudioet med norske røtter (startet 2011 [målt: «started it in 2011»]; Oslo står først av fem kontorer i fota [målt], at det ble grunnlagt i Oslo er vår kunnskap [bekreftes]) som har bygget det beste formatet vi har sett for å forklare «strategi, design og kode under ett tak». Det er den mest direkte modellen for NESTE som «kreativt teknologistudio», og et nordisk bevis på at formatet holder internasjonalt.

Struktur [målt]

Kapabilitetsmatrisen [målt]

Kolonner Brand · Web · Product, rader Strategy · Design · Code, og i hver celle 4–5 konkrete leveranser, f.eks. Web × Design: «Design Systems, Module Based UI, Micro Interactions»; Product × Code: «Infrastructure + DevOps, Model Integration, System Architecture».

Typografi, farge, markør, bevegelse [målt]

• Én egen font bbSans (500), H1 50 px/56, sporing −1 px; brødtekst 14 px/500. Hvitt og svart med små fargeflater (disiplinbrikkene) som eneste farge.
• Ingen tilpasset ::selection, ingen følgemarkør (nativeCursor: auto).
• Keyframes fadeIn, slideIn, dottedLines, marquee. Easing cubic-bezier(.4,0,.2,1) og cubic-bezier(0.2,0.9,0.3,1). 1 prefers-reduced-motion-regel (bedre enn de fleste i utvalget).
• Next.js + Sanity (case-siden oppgir selv Framer Motion og Rive).

Hva NESTE tar med [vurdering]

1. Kapabilitetsmatrise som kjernen på tjenestesiden: kolonner Merkevare · Nettside · 3D og bevegelse (evt. AI-verktøy), rader Strategi · Design · Kode. Det forklarer «kreativt teknologistudio» på ett skjermbilde. Hver celle bare med det vi faktisk leverer [bekreftes med Eskil].
2. Fargede disiplinbrikker på case (Nettside / Merkevare / 3D), i NESTE-paletten (oransje #C8501E + nøytrale).
3. Case-mal: Utgangspunkt → Resultat → Teknologi → Kreditering. Kreditering av fotografer og samarbeidspartnere er ærlig og bygger nettverk.
4. Faktakort med enkle illustrasjoner («2 gründere · 1 studio i Tromsø · 69° N»), bare ekte tall [bekreftes].
5. Tre formålsadresser i fota (hei@ / ny kunde / presse) når domenet har dem [bekreftes: i dag er joakim@nestestudio.no aktiv].
6. Sentrert pillemeny med én svart «Ta kontakt»-knapp.

Hva NESTE ikke bør kopiere [vurdering]

• Tallblokker («60+ people», «500+ clients») har vi ikke grunnlag for. Ingen oppblåste tall.
• Engelsk produkt-/start-up-tone; NESTE skal snakke norsk til bedrifter i nord.

6.6 #6 R/GA

URL: https://www.rga.com/
Kilde: notes/rga.md

R/GA — rga.com

• URL: https://www.rga.com/ (undersidene /about og /services er fanget)
• Land: USA. «Headquartered in New York City», med team i ni land (AE, AR, AU, BR, DE, ID, JP, SG, UK, US står i footeren). Footeren sier «R/GA 1977–TMRW».
• Kilde: Joakims liste (prioritert). Han liker hvordan de forklarer AI-tilbudet og den egne tekstmarkeringen.
• Skjermbilder: shots/rga.png, -full.png, rga-selection.png (markeringen testet). Oversikt: raw/ov/rga.jpg
• Teknologi: Next.js (CSS-moduler med hash-klasser som hero_fadeIn__l4XKb), Vimeo, HubSpot, Pardot, Clarity og LinkedIn Insight. Ingen GSAP, Lenis eller WebGL funnet. Font: «HelveticaVariableforRGAW05», en egen variabel Helvetica (400/500/600). H1 er 56 px/56 px i versaler med −0,56 px sporing.
• Layout: svart hero med gigantisk hvit versaltekst («AN INDEPENDENT CREATIVE INNOVATION COMPANY FOR THE INTELLIGENCE AGE») og undertekst nede til høyre. Under kommer et collage-rutenett med video, WORK (2×2-kort), WHAT WE DO (trekkspill per tjenesteområde), NEWS (fargekort), «Join R/GA – 12 OPEN ROLES» og en svart footer med landkoder og rødt kvadrat. Logoen er et rødt kvadrat og «R/GA».
• Bevegelse: enkle CSS-keyframes (fadeIn, video-hover fade-in, «logo-live blink», spinner med kvadrater). Lite scrolleffekt. Kvaliteten ligger i typografi og video, ikke i bevegelse.

::selection (det Joakim la merke til)

• Funnet regel (fra deres globale CSS, bdd7a8669371711c.css): ::selection{background:#b3d4fc;text-shadow:none}.
• Testet ved å markere H1 med Playwright (shots/rga-selection.png). Resultatet er en lyseblå blokk bak hvit gigantisk versaltekst på svart. Teksten beholder fargen sin, og bare bakgrunnen byttes.
• Ærlig observasjon: verdien #b3d4fc og text-shadow:none er den kjente standardverdien fra HTML5 Boilerplate. Det som får det til å se «designet» ut, er kombinasjonen med stor, tett versal-Helvetica på svart. Markeringen blir en grafisk blokk som går helt ut i linjehøyden (line-height:1). Vi fant ingen andre ::selection-regler på forsiden eller /services.
• NESTE-versjon: se MOTION-SPEC.md §5. Brent oransje #C8501E som bakgrunn og papir #F4F1EA som tekst på lys flate. På mørk flate (ink #141414) bruker vi oransje bakgrunn med blekk-tekst. text-shadow:none kommer i tillegg. Pluss egen farge for ::target-text og mark.

Slik rammer R/GA inn AI (ordrett fra /, seksjonen «AI Design»)

«Systematically leveraging AI technologies under the hood in creative and technology work is quickly becoming table stakes. We help brands go a step further, not only using AI to do things we already do better, but to design new brand experiences that weren't possible before.»

Undertjenester: - AI Application Design: assistenter, multimodale og agentiske AI-applikasjoner (Google Gemini, OpenAI, Anthropic og flere). - AI Content Studio: dynamisk og personalisert innhold, modellvalg, innholdsautomatisering og kreativ retning (Runway, Veo 2, ElevenLabs). - Brand AI Tools: AI-verktøy som holder merkevaresystemer konsistente i stor skala, med finjustering av egne modeller (Flux, Adobe Firefly, ComfyUI). - AI Strategy & Consulting: pilotprogrammer og «Adoption Accelerator».

AI dukker også opp inne i andre tjenester: - «BRAND AI TOOLS» under Brand Design. - «AI PRODUCT STRATEGY & DEVELOPMENT» (LLM-integrasjoner, egne modeller og agenter) under Product & Experience Design. - «PERSONALIZATION … AI-powered technology» under CRM.

Nyhetene handler også om AI: BRDNA Sequencer, «an AI System That Teaches Coding Agents to Build On-Brand», og kjøpet av AI-designstudioet «Addition».

Rammen: AI er under panseret (bordinnsats) og et nytt materiale for opplevelser. Det er ikke produktet i seg selv. Hovedbudskapet er «intelligent brand systems». Det passer NESTEs regel om å aldri selge AI som produkt.

Tjenestestruktur

Fem til seks områder vises som trekkspill, hvert med en kort definisjon og 5–8 deltjenester i versaler med én setning hver, og ett case («View Case Study»): 1. Brand Design 2. Product & Experience Design 3. Campaign & Content Design 4. CRM & Relationship Design 5. R/GA Ventures 6. AI Design 7. Commerce Design

Team og grunnlegger

• /about: «Global Leadership» med navn og tittel (CEO, CCO osv.). Grunnleggeren fremheves ikke på forsiden.
• Arbeidsmåten oppsummeres i fire punkter: «1 We reframe · 2 We experiment · 3 We think commercially · 4 We craft».

Hva som er bra

1. Én klar posisjon: «intelligent brand systems» for «the intelligence age».
2. Tjenestene er presise. Hver har én setning, og hvert område har ett bevis-case.
3. AI forklares nøkternt og konkret med verktøy og plattformer, uten hype.
4. Typografien er merkevaren, med en egen variabel Helvetica.

Idé for NESTE

• Lag en tjenesteliste i trekkspill etter R/GA-modellen: område, én definisjon, deltjenester med én setning og ett case [forslag i POSISJONERING.md].
• La AI ligge «under panseret» i formuleringene, for eksempel «Vi bruker de beste verktøyene, også AI, så du får mer håndverk for pengene». Det skal aldri være overskriften.
• Bruk ::selection i merkevarefarger og gjør markeringen til en grafisk blokk på store titler (line-height 1).

6.7 #7 Lusion

URL: https://lusion.co/
Kilde: notes/pass3/lusion.md

Lusion (lusion.co): dyp note (pass 3)

Kilde: pass 2 fanget bare intro-GIF (shots/motion/lusion-intro.gif) og én rik forsidefangst (raw/rich/lusion-co.json); flytstudien krasjet på grunn av WebGL og høy last. Nytt i pass 3 (19.10.2026 09:08–09:16, Europe/Paris, offentlige sider): forside, /about, /projects og case /projects/devin_ai. Data raw/pass3/lusion.json, raw/pass3/lusion-sub.json, bilder shots/pass3/lusion-1-*.jpg, shots/pass3/lusion-sub-{1,2,3}-*.jpg. Merking: [målt] / [vurdering] / [bekreftes].

Kort fortalt

Bristol-studioet som er referansen for sanntids-3D på nett. Selve nettstedet er beviset på håndverket: en vedvarende WebGL-scene bak hele siden. For NESTE er Lusion ikke en mal å kopiere, men målestokken for «ett 3D-øyeblikk» (SYNTESE retning 4) og et eksempel på hva vi ikke har kapasitet til å gjøre på hele siden.

Struktur [målt]

Teknikk og bevegelse [målt]

• Astro (/_astro/hoisted…js) + egen WebGL (3 canvas-elementer, ingen global THREE/GSAP/Lenis). Dokumenthøyden er 900 px på alle sider: rullingen er virtuell (siden ruller inne i WebGL/JS, ikke native).
• Fonter: Aeonik (400/500, kursiv), IBM Plex Mono og egen LusionMono. Palett: lys lavendelgrå #F1F1FB og nesten-svart #14151F / #050723, kobolt som aksent.
• Keyframes text-animation og arrow-animation. Easing-familie cubic-bezier(0.4,0,0.1,1) brukt konsekvent på knapper, meny og farger (0,1–0,5 s), pluss (0.16,1,0.3,1).
• Blått lysbånd/spor som slynger seg gjennom scenen ved rulling og musebevegelse (synlig på lusion-1-b.jpg og lusion-sub-3-a.jpg) [målt i bilde; at det styres av musa er vurdering].
• Ingen tilpasset ::selection, ingen DOM-følgemarkør, 0 prefers-reduced-motion-regler.
• Tilgjengelighet/SEO-varsel: prosjekttitler ligger i DOM som enkeltbokstaver gjentatt fire ganger («O O O O r r r r y y y y …» for «Oryzo AI»), brukt til bokstavanimasjon. Uten skjult tekst/aria-label leses dette som rot av skjermlesere og søkemotorer [målt i DOM-tekst; om aria-label finnes er ikke sjekket, bekreftes].

Hva NESTE tar med [vurdering]

1. 3D som én avgrenset ramme, ikke hele siden: Lusion legger 3D-scenen i en avrundet ramme under H1, med tekst og meny i vanlig HTML. NESTE: én forhåndsrendret (video) eller lett WebGL-loop av Kvadratisk-pilen i polarnatt, med stillbilde som reserve og av ved redusert bevegelse.
2. Disipliner med bokstavmerke (S · C · T · P) er en elegant variant av kapabilitetsmatrisen (B&B). NESTE kunne bruke K-flisa med én bokstav per disiplin.
3. Prisbevis med tall fungerer, men bare når de finnes. NESTE har ingen priser ennå; vis ingenting fremfor å fylle ut.
4. «Fortsett å rulle → neste side» nederst er en fin overgang. NESTE-variant med native scroll: en stor «Neste →»-lenke til neste seksjon/case (ordet er bokstavelig talt merkenavnet).
5. Tjenestelinje med punkter under hvert case («NETTSIDE • MERKEVARE • 3D»).
6. Én easing-familie over hele siden (her 0.4,0,0.1,1) gir sammenheng; NESTE har valgt 0.22,1,0.36,1 (MOTION-SPEC).

Hva NESTE ikke bør kopiere [vurdering]

• Virtuell scroll og WebGL på hele siden: tungt på mobil, uten redusert-bevegelse-støtte, og dyrt å vedlikeholde for et tomannsstudio.
• Bokstavsplittede titler uten tilgjengelig tekst.
• Engelsk «ready to go wild?»-tone.

6.8 #8 Goodside

URL: https://www.goodside.studio/
Kilde: notes/pass3/goodside.md

Goodside (goodside.studio): dyp note (pass 3)

Kilde: flersidig fangst 19.10.2026 ca. 05:30 (Europe/Paris), raw/flow/goodside.json (home, work, case Henri & Hélène, about, contact), skjermbilder shots/flow/goodside-*-{a,b,full}.jpg, bevegelse shots/motion/goodside-{intro,hover,scroll,transition,cursor}.gif, markering shots/motion/goodside-selection.jpg, raw/motion/goodside.json. Pass 2-sammendrag i notes/pass2/FLYT-STUDIER.md. Merking: [målt] = lest ut av DOM/CSS eller sett i skjermbilde. [vurdering] = min tolkning. [bekreftes] = må avklares med Joakim/Eskil.

Kort fortalt

Et lite, uavhengig merkevarestudio (ledet av én kreativ leder) som ser større ut enn det er, fordi alt er stramt: én serif, én easing, ett roterende merke og store, godt fotograferte case. Av alle 30 i topplista er dette den nærmeste tonen for NESTE: ro, håndverk og merkevare, uten teknologistøy.

Struktur [målt]

Typografi og farge [målt]

• Én familie: Epicene Text 300 (normal + kursiv), fallback i CSS er nettopp Instrument Serif, samme som NESTE-ordmerket. H1 på case 58,8 px/300, sporing −2,35 px; forsidepåstanden er bare ~25 px.
• Svart på hvitt, hårlinjer som strukturelement. Fargene kommer bare fra case-bildene.
• Ingen tilpasset ::selection (standard), ingen egen følgemarkør (motionprobe: ingen elementer følger musa). nativeCursor: grab over karusellen.

Bevegelse [målt]

• Én easing på hele nettstedet: cubic-bezier(0.22, 1, 0.36, 1) (en «ease-out-quint»). Det er samme kurve som NESTE-demoen bruker i demo/lab.html §06.
• Én keyframe: sunspin, sol-merket i menyen roterer sakte.
• Karusellen på forsiden er dra-bar (grab-markør), bildene glir horisontalt.
• 0 prefers-reduced-motion-regler: det roterende merket og karusellen tar ikke hensyn til redusert bevegelse. Det skal NESTE gjøre bedre.

Hva NESTE tar med [vurdering]

1. Ett roterende merke i menyen som «signatur» (bekrefter seglet b02/b01 som roterende element i demo/lab.html). Rotasjonen bør stoppe ved prefers-reduced-motion.
2. Ordmerket i full bredde som hero (kant til kant) er en sikker, tidløs måte å vise «Neste» i Instrument Serif på.
3. Case-liste med VERSAL NAVN + én kursiv linje: billig å lage, ser eksklusivt ut, passer til få case.
4. Case uten tall er greit når bildene er sterke. NESTE har få case nå og skal ikke finne på tall (SYNTESE §5), så dette formatet passer, med en «Leveranser»-liste (Nettside / Merkevare / Tekst / Foto).
5. Om-side med «én leder + nettverk av spesialister» er en ærlig modell for et lite studio. For NESTE: Joakim + Eskil + navngitte samarbeidspartnere [bekreftes hvem som kan nevnes].
6. Tre kolonner Hvordan · Hva · Bransjer er en kompakt tjenesteside.
7. Kontaktsiden kan være så enkel som én setning + e-post (ingen skjema som må vedlikeholdes).

Hva NESTE ikke bør kopiere [vurdering]

• Engelsk, amerikansk «warm modernism»-tone uten sted. NESTE har Tromsø/69° som fortrinn.
• Ingen redusert-bevegelse-støtte.

6.9 #9 Pentagram

URL: https://www.pentagram.com/
Kilde: notes/pentagram.md

Pentagram — pentagram.com

• URL: https://www.pentagram.com/ (undersiden /about er fanget)
• Land: Internasjonalt. Partnerne sitter i New York, London, Berlin og Austin. Siden kaller seg «the world's largest independent design consultancy», eid og drevet av partnerne (23 på /about, 24 i meta-beskrivelsen).
• Kilde: Joakims liste (prioritert)
• Skjermbilder: shots/pentagram.png, -full.png, pentagram-about-full.png. Oversikt: raw/ov/pentagram.jpg
• Teknologi: egenutviklet (html.js html5 objectFit page-home) med GSAP 3.12.7, 22 videoer og 188 bilder. Clarity og CookieYes. Font: Plain (Optimo), med H1 og brødtekst på 19/25 px. Easings: (.4,0,.2,1), (0,0,.65,1), (.25,.46,.45,.94), (.59,.01,.28,1) og (.46,.03,.52,.96). Keyframes: fadeIn, slideInTop, scaleIn og updown. Siden har 2 regler for prefers-reduced-motion.
• Layout: heroen er et enkelt prosjekt i fullbredde (Isomorphic Labs med lysegrønn 3D). Resten er redaksjonelle seksjoner som et magasin: «The Secret Life of Things» (temarad), «See latest projects», «Retrospective: Shakespeare in the Park» (horisontal plakatrekke), «8 latest Brand Identity projects», «Our Future is the Ultimate Project» (tema), «7 latest Motion Graphics & Film projects», «Data Driven Experiences» og «Industrial/Product Design». Annenhver seksjon er mørk (#22262C). Sitater fra partnere står i stor tekst.
• Typografi: én grotesk (Plain) i én størrelse og nesten ingen hierarki. Arbeidet er typografien. Prosjektbildene bærer siden.
• Bevegelse: lavmælt. Video autospilles i kortene, og seksjonene fader inn. Ingen egen markør eller ::selection.
• Tjenester: ikke en egen side. /about lister disiplinene i én setning («graphics and identity, strategy and positioning, products and packaging, exhibitions…, websites and digital experiences, …, sound and motion»). Arbeidet er sortert etter disiplin på forsiden.
• Team og grunnlegger: /about forklarer modellen: «the only major design studio where the owners of the business are the creators of the work and serve as the primary contact for every client». Deretter følger alle partnere med by, assosiater og «Partners Emeriti» (Alan Fletcher, April Greiman …).
• CTA: stille (Contact i nav). Ingen priser.
• Hva som er bra: kuratering som redaksjon. Temaene og retrospektivene gjør porteføljen til historiefortelling. «Partneren er kontaktpersonen» er et sterkt tillitsargument.
• Idé for NESTE: «Gründerne er designerne du snakker med», etter Pentagram-modellen: Joakim og Eskil er kontaktpersonene. Del arbeidet i tematiske rader (Nettsider, Merkevare, 3D/bevegelse) med video i kortene.

6.10 #10 huehaus

URL: https://huehaus.design/
Kilde: notes/huehaus.md

Huehaus — huehaus.design

• URL: https://huehaus.design/ (undersiden /pricing er fanget)
• Land: Canada og Vietnam («Vancouver, Canada · Hue, Vietnam · Working worldwide»)
• Kilde: Joakims liste
• Skjermbilder: shots/huehaus.png, -full.png, huehaus-pricing-full.png, huehaus-cursor.png. Oversikt: raw/ov/huehaus.jpg
• Teknologi: Framer og Lenis. Fonter: PP Mondwest (pikselserif, H1 240/192 px, −12 px sporing), PP Neue Montreal, Inter Display og Geist Mono.
• Markør: et 16×16 kvadrat i papirfarge #F6F1EB med mix-blend-mode:difference. Det følger musen uten forsinkelse (målt samme posisjon ved t0, 60 og 660 ms), så det er en «pikselmarkør» som passer pikselfonten.
• Art direction: koboltblå #3B5793/#0047FF-aktig, papir #F6F1EB og mørk vinrød #2F1010. Pikseltrapper (8-bits kanter) skjærer seksjonene, og ordmerket «HUEHAUS» står i pikselbokstaver. Kontrasten mellom pikselserif og klassisk foto (Vietnam-arkitektur og håndverk) er tydelig. Navnet forklares som «HUE – THE EMOTION / HAUS – THE STRUCTURE».
• Tjenester og priser (åpent!):
• Website: «Your 24/7 salesperson», no-code i Framer, 3–6 uker, fra 4K.
• Branding: 4 uker, fra 1,5K.
• /pricing:
  • Essential (branding) $1 500
  • Landing page $4 000
  • Start-up (branding og landingsside) $5 000
  • Ultimate (full identitet og flersidig nettsted) $8 000+
• Antall revisjoner står i hver pakke.
• FAQ: «I'm not sure what I need. Can we chat first?»
• Team: «Huehaus is a small studio with big intentions». Egne sider for Studio og Career.
• Hva som er bra: tydelige pakker med pris, tid og revisjoner (svært lik NESTE-målgruppen), en konsekvent pikselidé gjennom font, markør og kanter, og et sterkt merkevarenavn med forklaring.
• Idé for NESTE: pakkekort med tre felt (01 Tjenester · 02 Tid · 03 Fra-pris). En markør som speiler identiteten: Kvadratisk-pilen eller et lite kvadrat i difference-blend.

6.11 #11 Default Studio

URL: https://www.default-studio.com/
Kilde: notes/default-studio.md

Default Studio — default-studio.com

• URL: https://www.default-studio.com/
• Land: [bekreftes] Står ikke på siden. Siden har en Imprint-side, noe som er vanlig i DACH [antatt].
• Kilde: Joakims liste
• Skjermbilder: shots/default-studio.png, -full.png
• Teknologi: Next.js og Lenis, med Inter som variabel font (100–900). ::selection{background:rgba(255,255,255,.18)} gir en diskret hvit glassmarkering på mørk bakgrunn. Det finnes 5 regler for prefers-reduced-motion. Keyframes: rise, fade, word og sound-bar. Markøren er native zoom-in over arbeid, som åpner en work-viewer i fullskjerm.
• Layout: delt skjerm. Til venstre en fast, mørk informasjonskolonne:
• hilsen etter tid («Good evening · 4:17 AM») og en grønn status-pille: «Booking for Q4 2026»
• H1 «Design studio for startups and scaleups», CTA-ene «Book a 30-min call» og «See pricing»
• nederst en spec-tabell: Services, Industries, Founder (Isaac) og Founded (June 2026)

Til høyre en uendelig scroll av arbeid på lyse kort (app-skjermer og nettsider). - Hva som er bra: ekstremt effektiv. Alt du trenger for å kjøpe står på én skjerm. Status-pillen gir knapphet og tidspunkt, og «grunnleggeren» er et datafelt. - Idé for NESTE: en fast infokolonne på desktop med «Ledig for oppstart [måned] [bekreftes]», tjenester, «Gründere: Joakim og Eskil», «Tromsø» og to CTA-er. Arbeidet ruller ved siden av.

6.12 #12 Bolder

URL: https://www.bolderagency.com/
Kilde: notes/bolderagency.md

Bolder — bolderagency.com

• URL: https://www.bolderagency.com/ (undersidene /services og /about er fanget)
• Land: Tyskland og USA («We're based in Berlin and San Francisco»). Footeren lister San Francisco, New York, Berlin og London.
• Kilde: Joakims liste
• Skjermbilder: shots/bolderagency.png, -full.png, bolder-services-full.png, bolder-about-full.png, bolderagency-cursor.png
• Teknologi: Framer, Lenis og ett canvas. Fonter: Aeonik Pro og Inter Display.
• Markør (målt): systemmarkøren skjules (cursor:none) og erstattes av en 9×9 px hvit prikk med border-radius:100px og mix-blend-mode:difference. Den henger etter musen: etter 60 ms har den gått ca. 42 % av distansen, og etter 660 ms er den fremme. Det tilsvarer en lerp på ca. 0,14 per frame ved 60 fps, eller en tilsvarende fjær [estimert ut fra målingen].
• Posisjonering: «We brand the companies that are hardest to explain», og «Clarity creates gravity». Kundene er bare kompleks B2B og deep tech («We don't do consumer, retail, or lifestyle»). Bransjene står oppført: Robotics, AI, Biotech, Energy og Deep Tech.
• Tjenester: 01 Brand Strategy · 02 Visual identity · 03 Websites · 04 Design subscription · 05 Content subscription · 06 Brand + Website. Abonnementer gir løpende inntekt.
• Priser i FAQ (åpent!): «Branding for startups start at $15,000 … 2 to 8 weeks. Full brand builds … $50,000 to $200,000 … 6 to 16 weeks.»
• Annet: «Manifesto: Optimists decide the future», lenke til team, og en FAQ med ærlige svar («We don't push clients toward larger engagements than they need»). Toppteksten er morsom: «Save your dopamine».
• Hva som er bra: en skarp nisje, priser og tid i FAQ, abonnement som tjeneste og en FAQ som selger.
• Idé for NESTE: FAQ med ekte svar om pris og tid. Et løpende «Design-abonnement» for lokale bedrifter [forslag; må prises]. Prikkmarkør med difference-blend som et enkelt alternativ.

6.13 #13 Spoon

URL: https://spoonagency.no/
Kilde: notes/pass3/spoon.md

Spoon (spoonagency.no): dyp note (pass 3)

Kilde: pass 2-forside raw/flow/spoon.json, shots/flow/spoon-home-*.jpg, shots/motion/spoon-{intro,hover,scroll}.gif. Nytt i pass 3 (19.10.2026 09:10–09:14, Europe/Paris, offentlige sider, ingen skjema fylt ut): forside, /tjenester/, /arbeider/, case /arbeider/case-foto-ruter/, /om-spoon/ og /kontakt/ (videresendt til /kontakt-spoon/). Data raw/pass3/spoon.json, raw/pass3/spoon-sub.json, bilder shots/pass3/spoon-1-*.jpg, shots/pass3/spoon-sub-{1..5}-*.jpg. Merking: [målt] / [vurdering] / [bekreftes].

Kort fortalt

Norsk kommunikasjonsbyrå i Oslo (siden 1998, redaksjonelt opphav) med den beste norske byråtonen i utvalget: korte, sikre setninger på godt norsk. Nettstedet er teknisk vanlig (WordPress), men tekstene, case-malen og tjenestestrukturen er direkte overførbare til NESTE. Spoon er også en reell referanse for hva norske kunder er vant til å se.

Struktur [målt]

Typografi, farge, teknikk [målt]

• PP Acma (serif-display, 58 px) til overskrifter + PP Mori (grotesk, 24 px ingress). Rosa (#ffd9e6-ish) og varm off-white som flater, svart tekst.
• WordPress, Splide-karusell, keyframes fade-in-up/fade-bottom, én easing cubic-bezier(0.4,0,0.2,1). Ingen egen markør, ingen tilpasset ::selection, 0 prefers-reduced-motion-regler.
• Feil vi skal unngå: <html lang="sv"> på alle sider, selv om innholdet er norsk (påvirker skjermlesere, oversettelsesforslag og søk). NESTE: lang="nb".
• Feil vi skal unngå: telleverkene på «Om Spoon» viste «0» for alle tre tall da siden ble lest og fotografert. Tallene telles opp med JavaScript først når de ruller inn, så skjermlesere, søkemotorer, delingsforhåndsvisning og skjermbilder ser 0. NESTE: skriv det ekte tallet i HTML og animer bare visuelt.

Hva NESTE tar med [vurdering]

1. Tone: korte norske påstander med punktum («Si mindre. Bety mer.»). NESTE-varianter må være egne, ikke kopier. Retningen er f.eks. «Nettsider i toppklasse.» (finnes allerede).
2. Tjenester gruppert etter verb (Finn retningen / Fortell historien / Skap effekt). For NESTE f.eks. Tenk (strategi) · Form (merkevare, design) · Bygg (nettside, 3D, AI-verktøy) [forslag].
3. Case-titler som forteller resultatet på godt norsk, og metafelt Kunde · Prosjekt · År · Leveranse.
4. Navngitt kontaktperson per case («Vil du vite mer om dette arbeidet? Joakim …»): personlig og konverterer.
5. Bransjesider («Spesialistkompetanse») passer NESTEs referansebank per bransje (restaurant, reiseliv, bygg). Én side per bransje er også god lokal SEO [vurdering].
6. «Book en kaffeprat» som myk CTA (passer Tromsø-tonen; NESTE har «Book en prat» som forslag).
7. Kurs og arrangement som egen menypost: bekrefter idéen om et fast foredrags-/frokostformat.

Hva NESTE ikke bør kopiere [vurdering]

• Generisk WordPress-uttrykk og 30+ trendartikler (SEO-innhold) på forsiden. Det tar oppmerksomhet fra arbeidet.
• lang="sv" og telleverk som starter på 0 (se over).

6.14 #14 Datalands

URL: https://datalands.co/
Kilde: notes/pass3/datalands.md

Datalands (datalands.co): dyp note (pass 3)

Kilde: flersidig fangst 19.10.2026 ca. 05:50 (Europe/Paris), raw/flow/datalands.json (forside + case Nike Viz System; flyten fant ingen egen om-/kontaktside fordi alt ligger på forsiden), skjermbilder shots/flow/datalands-{home,case}-{a,b,full}.jpg, bevegelse shots/motion/datalands-{intro,hover,scroll}.gif, shots/motion/datalands-co-cursor.gif, markering shots/motion/datalands-co-selection.jpg, raw/motion/datalands-co.json. Merking: [målt] / [vurdering] / [bekreftes].

Kort fortalt

En duo (to gründere) som selger en smal nisje, datavisualisering for merkevarer, med en ensidig nettside som ser ut som et stort byrå. Nettstedet er nyttig for NESTE fordi det viser hvordan et lite team kan presentere seg selv, sin prosess og sitt nettverk ærlig, og fordi det har den tilpassede markeringsfargen Joakim ba om.

Struktur [målt]

Én lang forside (Framer) med tydelige seksjonsmerker «⬤ CASE STUDIES / ⬤ SERVICES / ⬤ CLIENTS / ⬤ ABOUT US / ⬤ PROCESS / ⬤ NEWSLETTER»: 1. Topplinje: «BRANDING AND DATA, TOGETHER AT LAST ✨», en levende status «OPEN (WE'RE CLOSED)» + lokal klokke med sekunder («5:53:11 am»), og «LET’S TALK →». 2. Hero: ordmerket «Datalands» i OZIK Black, hvitt på svart, kant til kant; én setning: «Datalands is a data visualization and information design studio.» 3. Case: 4 + «Coming Soon» (Nike, Microsoft, Volta, Lululemon Studio, TSZ), hver med én setning («Overhauling how a beloved sportswear company visualizes data.») og avrundede bildekort med kundenavn som brikke. 4. Tjenester nummerert «01/ … 05/» (Data Visualization, Product Experiences, Reports & Publications, Information Systems, Creative Technology) + én posisjoneringssetning: «Most brand systems stop where information begins.» 5. Om oss: «Design obsessed duo», «Our experience spans a combined 30 years», «our network of collaborators runs deep—if we can't build it, we know who can.» Portrett og kort bio per gründer (år erfaring + hva de er opptatt av). 6. Prosess i 6 trinn (Planning → Discovery → Moodboarding → Design → Handoff → Support). Trinn 4 lover konkret «3 distinct sketch options and 2 rounds of revisions». 7. Nyhetsbrev («extremely infrequent … 3–6 emails per year») og fot med e-post for «New Business». - Case-side (Nike Viz System): metafelt CLIENT · YEAR · ROLE, så 3–4 korte avsnitt og store bilder, «NEXT PROJECT». Ingen tall.

Typografi, farge, markør [målt]

• OZIK Black 900 (ordmerke), Basis Grotesque Pro (brødtekst, H1 38 px), Martian Mono (etiketter og klokke). Svart bakgrunn, farge kommer fra case-bildene.
• Tilpasset markering: ::selection { background: rgb(3,29,26); color: rgb(34,195,160) }, mørk grønn med mint tekst, i merkets farger.
• Framer-klassen cursor-none finnes, men motionprobe fant ingen element som følger musa (lag tom, nativeCursor: auto). En rosa kapselform ses midt i en seksjon på datalands-home-b.jpg; om den er dekor eller markør er ikke avgjort [bekreftes ved ny visning, ikke viktig].
• Easing: bare Framer-standarden cubic-bezier(0.44,0,0.56,1). 0 prefers-reduced-motion-regler.

Hva NESTE tar med [vurdering]

1. Levende «åpent/stengt» + lokal klokke i topplinja. Det bekrefter NESTE-ideen D3 (Tromsø-klokke, nå testet i demo/lab.html §06). NESTE-variant: «Tromsø 69°39′ N · 09:14 · Mørketid om 34 dager» [idé; mørketid-tellingen må regnes ut riktig før bruk].
2. Merkefarget ::selection: som R/GA-ønsket. For NESTE: ::selection{background:#C8501E;color:#000} (4,62:1, se KONTRAST-FORSLAG.md).
3. «Liten kjerne, dypt nettverk» som ærlig formulering for et tomannsstudio. NESTE: «To gründere i Tromsø, et nettverk av fotografer, utviklere og 3D-folk» [bekreftes hvem som er i nettverket].
4. Prosess med konkrete løfter (antall skisser og revisjonsrunder) reduserer usikkerhet før første møte. Tallene må komme fra sales-kit/PRICE-SHEET.md [bekreftes].
5. Nummererte tjenester «01/–05/» og én setning som definerer nisjen.

Hva NESTE ikke bør kopiere [vurdering]

• Alt på én side gjør det vanskelig å dele lenke til «tjenester» eller «om oss». NESTE bør ha egne undersider (SEO, deling).
• Store merkenavn som bevis: bare med ekte kunder.

6.15 #15 Porto Rocha

URL: https://portorocha.com/
Kilde: notes/pass3/portorocha.md

PORTO ROCHA (portorocha.com): dyp note (pass 3)

Kilde: flersidig fangst 19.10.2026 ca. 05:10–05:50 (Europe/Paris), raw/flow/porto-rocha.json og raw/flow/portorocha.json (forside + om oss; flyten fant ingen /work-side fordi prosjektlista ligger i sidekolonnen på alle sider), skjermbilder shots/flow/porto-rocha-{home,about}-{a,b,full}.jpg, shots/flow/portorocha-*.jpg, bevegelse shots/motion/porto-rocha-{intro,hover,scroll,transition}.gif og portorocha-cursor.gif, markering shots/motion/portorocha-selection.jpg, raw/motion/portorocha.json. Ny forsidevisning i pass 3: raw/pass3/portorocha.json, shots/pass3/portorocha-1-*.jpg (hvis fanget). Merking: [målt] / [vurdering] / [bekreftes].

Kort fortalt

Et globalt merkevarebyrå (New York og London) som har bygget nettsiden som et program-/app-grensesnitt: en fast sidekolonne med alle prosjekter som avrundede kort med ikon, og et stort innholdsvindu til høyre. Nettstedet er nyttig for NESTE på tre punkter: levende sted og klokke, en åpen og ryddig om-side (team, kontorer, klienter etter bransje), og en tydelig holdning (No Free Pitches).

Struktur [målt]

• Fast venstrekolonne på alle sider: «Show all projects», en bryter (vippeknapp) øverst til høyre i kolonnen, ordmerket «PORTO ROCHA», så dato + by + klokke med sekunder («Monday, October 19 · London, 04:40:33»; ved neste visning «New York, 01:12:02»: byen veksler mellom kontorene). Under: «About us» og 50+ prosjekter som kort (ikon/logo + navn + én linje: «Making Nike the running brand once again»).
• Forside (høyre vindu): stort case-bilde/video, så nyhetskort med dato («MASP identity wins two Golds and two Silvers at LAD Awards», «featured in Victionary’s latest book»). Altså pressemeldinger som innhold, ikke tom «om oss».
• Om oss: stort teambilde (hele studioet ute på gress), «Our Studio»-tekst i tre korte avsnitt, kontaktboks med fire e-poster (New Business, Media, General, Social).
• Klienter med filter etter bransje (All / Art & Culture / Tech / Fashion / Entertainment / Hospitality / Retail / Finance / Non-profit) i fire kolonner.
• To kontorkort med foto, adresse og en liten analog klokke per by.
• Offerings som faner (Strategy, Verbal Identity, Visual Identity, Digital, Motion, 3D) med én avsnittstekst per fane og en «Services»-linje under.
• Grunnleggerne med portrett og lang bio, deretter teamtabell (navn · rolle · by).
• Events (foredrag og festivaler med dato og by), «Branding AI»-kurs, Current Openings, og en butikk (Black Tote $20 med «Order»-knapp).
• Prosjektet «No Free Pitches» står i prosjektlista: «A resolution to say no to unpaid pitches and change our industry for the better.»

Typografi, farge, markør [målt]

• SF Pro Text/Display, H1 og brødtekst 14 px: typografien er bevisst nøytral, som et OS-grensesnitt. Lys grå flater (#f4-ish), avrundede hjørner, kort med myk skygge.
• Ingen tilpasset ::selection. Ingen følgemarkør (lag tom); cursor:none bare på galleri-navigasjonsknapper i case (egen pil-markør der).
• Nuxt + Prismic. Ingen egne easing-kurver i CSS, 0 prefers-reduced-motion-regler.

Bevegelse [målt fra GIF / vurdering]

• Overgang: høyre vindu bytter innhold mens sidekolonnen står stille (som en app); oppleves rask fordi bare halve skjermen endres.
• Hover på prosjektkort: kortet løftes/markeres; ingen stor hover-forhåndsvisning.

Hva NESTE tar med [vurdering]

1. Sted + klokke som identitet (tredje gang vi ser dette: another.gr, Datalands, Porto Rocha). For NESTE: «Tromsø · mandag 19. oktober · 09:14» i topplinja, testet i demo/lab.html §06.
2. «Vi gjør ikke gratis pitcher» som tydelig, offentlig holdning. Passer NESTEs integritet (høy kvalitet, ikke salg av dårlig kvalitet til høy pris) [bekreftes om Joakim vil ta en slik offentlig holdning].
3. Om-side som bevis: teamtabell, kontor med bilde/adresse/klokke, klienter etter bransje, foredrag/arrangementer. For et tomannsstudio: én «studio»-side med Joakim + Eskil, Tromsø-kontoret, og «Neste torsdag» som foredrags-/frokostformat [idé].
4. Nyheter/priser som forsideinnhold når de finnes; tomt ellers (ikke fyll med oppdiktet innhold).
5. Tjenester som faner (Strategi · Merkevare · Nettside · 3D og bevegelse · AI-verktøy) med én avsnittstekst per fane, kort og skannbart.
6. Liten butikk/merch (tote, plakat) som merkevarebygging [idé, lav prioritet].

Hva NESTE ikke bør kopiere [vurdering]

• 50+ prosjekter i sidekolonnen fungerer bare med stort arkiv. Med 3–6 case blir den tom.
• 14 px overskrifter: krever verdensberømt portefølje for å virke selvsikkert; NESTE trenger større typografi (Instrument Serif) for å bære siden.

6.16 #16 Deux Huit Huit

URL: https://deuxhuithuit.com/en
Kilde: notes/pass3/deuxhuithuit.md

Deux Huit Huit (deuxhuithuit.com): dyp note (pass 3)

Kilde: flersidig fangst 19.10.2026 (Europe/Paris), raw/flow/deux-huit-huit.json (home /en, services, contact), skjermbilder shots/flow/deux-huit-huit-{home,services,contact}-{a,b,full}.jpg, shots/rich/deuxhuithuit-com-{1hero,2mid,3deep,4end}.jpg, bevegelse shots/motion/deux-huit-huit-{intro,hover,scroll}.gif. Undersider (projects, about) i raw/pass3/dhh-sub.json hvis fangsten lyktes. Merking: [målt] = lest ut av DOM/CSS eller sett i skjermbilde. [vurdering] = min tolkning. [bekreftes] = må avklares med Joakim/Eskil.

Kort fortalt

Et uavhengig designkontor i Montréal som kaller seg «SUPERDIGITAL DESIGN OFFICE™» [målt]. Nettstedet er bygget som et lite operativsystem: en fast ikonmeny til venstre, paneler med avrundede hjørner og en kontaktside som viser klokke og vær i Montréal live. Det mest relevante for NESTE er ikke stilen, men at et lokalt byrå gjør stedet og humøret sitt til selve produktet: forsiden er full av kjente lokale kunder (Igloofest, Duceppe, Musée des beaux-arts de Montréal [målt i skjermbilde]), tjenestesiden er skrevet med humor, og kontaktsiden lærer deg å uttale navnet.

Struktur [målt]

Ingen priser i synlig tekst [målt: alle fire «from»-treff er vanlig tekst, ikke priser].

Typografi og farge [målt]

• Én familie: PPNeue (variabel 100–900, Pangram Pangram «Neue Montreal»-familien [vurdering ut fra navnet]). H1 på forsiden 28,8 px/600, altså liten og saklig. Det er bildene som roper.
• Lys grå bakgrunn, svart tekst, én blå aksent (reel-knappen). Fargene kommer ellers fra arbeidene.
• Egen ::selection: mørk rgb(26,26,26) med lys tekst rgb(229,229,229), og omvendt under .dark. Altså tematilpasset markering, samme idé som NESTE-oransje markering, bare i gråskala.
• Ingen egen følgemarkør, ingen cursor: none [målt].

Bevegelse og teknikk [målt]

• Svelte (keyframes heter svelte-…): fade, nav-in (menyen glir inn), translate-main/translate (murveggen), gap, bounce (scroll-pila), translate-video, og på kontakt waves (lydbølger rundt høyttaleren) og blink (kolonet i klokka blinker).
• Mange easinger, hovedkurven er cubic-bezier(.19,1,.22,1) (ease-out-expo). 1 prefers-reduced-motion-regel.
• Ingen GSAP, Lenis eller Three.js funnet. Effekten kommer fra CSS og Svelte-overganger, ikke tunge biblioteker.

Hva NESTE tar med [vurdering]

1. Klokke + vær i Tromsø på kontaktsiden (og gjerne i fot/meny): «12:40 · snø i Tromsø · 69°39′N». Vi har allerede live klokke i demo/lab.html §06, så legg til vær fra en åpen kilde (f.eks. MET Norway Locationforecast, krever bare User-Agent [bekreftes teknisk]). Mørketid/midnattssol gjør dette mer interessant hos oss enn i Montréal.
2. «Hvordan uttale NESTE?» / «Hva betyr NESTE?» som lite lydpanel eller én linje («neste = det som kommer etter»). Gratis personlighet.
3. «Get started»-spørsmål på tjenestesiden: kunden velger ut fra eget problem, ikke vår jargong. For NESTE: «Har dere en nettside dere skammer dere over? → Ny nettside», «Skal dere lansere noe nytt? → Merkevare + lansering», «Bruker dere for mye tid på manuelt arbeid? → Skreddersydd teknologi». Passer rett inn i en nummerert tjenesteside 00–05.
4. Et forord som ber om unnskyldning for byråspråk («Vi beklager. Byråer snakker for mye om seg selv …») er en ærlig, nordnorsk tone. Bruk humor sparsomt.
5. Navngi metoden (de har «Brand Therapy»). NESTE kan gi oppstartsmøtet et eget navn [bekreftes navn].
6. Teamstripe med portretter på kontaktsiden: du ser hvem du skriver til. Krever ekte portretter av Joakim og Eskil [bekreftes].
7. Lokale kunder først: deres forside er en vegg av kjente Montréal-merker. NESTE bør vise Tromsø-/nordnorske case tydelig når de finnes, og ikke låne store merkenavn.
8. Kuraterte samlinger med egne navn i stedet for et kjedelig filter. For NESTE senere, når det finnes nok case: «Mørketid» (mørke nettsider), «Fra fjæra» (sjømat/reiseliv), «Små bedrifter, store nettsider». Med få case nå: vent [vurdering].
9. Egen markeringsfarge som følger tema (lys/mørk) bekrefter planen om oransje ::selection.

Hva NESTE ikke bør kopiere [vurdering]

• Glasspaneler (glassmorphism) over fullskjermsfoto: står på vår unngå-liste (SYNTESE/anti-generisk lint) fordi det er blitt et AI-/mal-uttrykk. De slipper unna fordi bildene er egne og sære; vi bør ikke.
• Rullende vegg av Instagram-kommentarer med emojier som sosialt bevis: virker useriøst for norske bedriftskunder, og vi har ikke slike kommentarer. Bruk heller 2–3 ekte, navngitte sitater når de finnes (ikke dikt opp noe).
• «Sexy and smart»-språket: oversatt til norsk blir det flaut. Behold humoren, dropp «sexy».
• Ikonmeny til venstre som et OS: kult, men tar plass på mobil og ser fort ut som en app-mal.

6.17 #17 Studio ONTO

URL: https://studio-onto.com/
Kilde: notes/pass3/onto.md

Studio ONTO (studio-onto.com): dyp note (pass 3)

Kilde: besøk 19.10.2026 ca. 09:26–09:30 (Europe/Paris), raw/pass3/onto.json (forside) og raw/pass3/onto-sub.json (/work), skjermbilder shots/pass3/onto-1-{a,b,full}.jpg og shots/pass3/onto-sub-1-{a,b,full}.jpg. Nettstedet har bare to sider (Home og Work) pluss enkeltcase (/select, /microsoft, /vault, /openstore, /science, /floral) [målt via lenker]. Merking: [målt] = lest ut av DOM/CSS eller sett i skjermbilde. [vurdering] = min tolkning. [bekreftes] = må avklares med Joakim/Eskil.

Kort fortalt

«ONTO, The Founder Studio» med undertittel «Design for Disrupters» [målt]. Et av de minste nettstedene i topp 20, og derfor nyttig for NESTE: seks case, to sider, én påstand, og likevel ser det ut som et toppstudio. Kvaliteten ligger i bildene (gråtonede CGI-/3D-produktbilder), en stille serif og at alt annet er tatt bort.

Struktur [målt]

Typografi og farge [målt]

• To familier: Saans (grotesk, bl.a. i H1 16 px/400) og TimesNow 300 (serif til påstandene). Kombinasjonen grotesk-etikett + lett serif-påstand er den samme som NESTE-ordmerket (Instrument Serif) + Inter Tight.
• Hvitt, lys grå bildebakgrunn, svart tekst. ::selection er svart med hvit tekst, altså en egen, invertert markering.
• Egen følgemarkør: en 20×20 px div.cursor (grå prikk) som følger musa, mens systempila også vises (cursor: auto) [målt].

Bevegelse og teknikk [målt]

• Lenis (myk scroll), Lottie, OGL/canvas på forsiden. Ingen keyframes; bevegelsen er overganger med cubic-bezier(0.15,0.9,0.34,0.95) og cubic-bezier(0.76,0,0.24,1) (ease-in-out-quart, vanlig for sideoverganger).
• 0 prefers-reduced-motion-regler til tross for myk scroll og følgemarkør.

Hva NESTE tar med [vurdering]

1. Få case kan være nok. ONTO viser seks. NESTE kan lansere med 3–4 ekte case (Unitx Reindeer Camp, Klarsalg uten å nevne kjeden, egne konsepter tydelig merket som konsepter [bekreftes hvilke]).
2. Én flytende bryter «Arbeid ↓ / Hjem ↑» i stedet for full meny på et lite nettsted. Kan bli NESTE-pila: «Arbeid →» og «← Hjem» med den tynne pila fra logoen.
3. Lett serif-påstand + liten grotesk-etikett bekrefter NESTE-typografien (Instrument Serif + Inter Tight).
4. «New»-pille på nyeste case gjør et lite nettsted levende uten nyhetsside.
5. «…products that become verbs»: en god, konkret ambisjon. NESTE trenger en like kort sluttsetning over kontaktknappen [vurdering, forslag skrives senere].
6. Asymmetrisk rutenett med ulike bildestørrelser gir rytme med få case, i tråd med retningen «redaksjonell» i SYNTESE §0.3.

Hva NESTE ikke bør kopiere [vurdering]

• Grå følgeprikk i tillegg til systempila: to markører samtidig er uklart, og prikken følger etter. Wolff Olins-teknikken (innebygd SVG-markør via CSS, ingen JS) er bedre og raskere for NESTE.
• Ingen redusert bevegelse.
• «©2024» i fota to år senere ser forlatt ut. NESTE bør bruke årstall som oppdateres automatisk.
• Engelsk start-up-språk («Disrupters», «game-changing») passer ikke norske småbedrifter.
• Nesten ingen informasjon om team, sted eller pris: fungerer for et kjent studio med henvisninger, ikke for et nytt studio i Tromsø som må bygge tillit.

6.18 #18 Dirtverse

URL: https://dirtverse.co/
Kilde: notes/dirtverse.md

Dirt — dirtverse.co

• URL: https://dirtverse.co/ (undersiden /about er fanget)
• Land: Australia («Grounded in Perth & Sydney. Built for the world.»). Studioet beskriver seg som «women-led», grunnlagt av tre kreative ledere.
• Kilde: Joakims liste
• Skjermbilder: shots/dirtverse.png, -full.png, dirtverse-about-full.png
• Teknologi: Framer, Lenis, ett canvas og 13 videoer. Native markør grab over karusellen. Fonter: Sequel Sans, Inter Tight (samme som NESTE!) og Chivo Mono.
• Art direction: et krom- og glass-3D-ordmerke «dirt» med blobber og kuler i iriserende farger øverst. Resten er hvitt, luftig og redaksjonelt med små overskrifter i versaler og store prosjektbilder.
• Tjenester (/about): fire nummererte pilarer, 01 Brand, 02 Digital, 03 Content og 04 Motion. Hver har én avsnitts-definisjon og en punktliste. Eksempel: Digital: «We translate high-end vision into technical logic».
• Konsept: «Welcome to the dirtverse» er et univers i stedet for en merkevaremanual. Journalen har innlegget «A Brand Universe vs. a Brand Guide».
• CTA: «IT STARTS IN THE DIRT … MAKE AN ENQUIRY».
• Hva som er bra: stramme tjenestepilarer der Motion er en egen tjeneste (som NESTE ønsker), et navn med et eget univers og journal med perspektiver.
• Idé for NESTE: gi «NESTE-universet» et navn [forslag] og la Motion eller 3D være en egen pilar.

6.19 #19 Antinomy Studio

URL: https://antinomy.studio/
Kilde: notes/pass3/antinomy.md

Antinomy (antinomy.studio): dyp note (pass 3)

Kilde: besøk 19.10.2026 ca. 09:26–09:30 (Europe/Paris), raw/pass3/antinomy.json (forside) og raw/pass3/antinomy-sub.json (about, case Vast, work), skjermbilder shots/pass3/antinomy-1-{a,b,full}.jpg og shots/pass3/antinomy-sub-{1,2,3}-{a,b,full}.jpg. Tidligere rik fangst i shots/rich/ hvis den finnes. Merking: [målt] = lest ut av DOM/CSS eller sett i skjermbilde. [vurdering] = min tolkning. [bekreftes] = må avklares med Joakim/Eskil.

Kort fortalt

Et uavhengig kreativt studio med kontor i Amsterdam og Berlin [målt i fot], «Founded in 2019» [målt]. Nettstedet er nesten nøkternt: én grotesk, svart/hvit, små overskrifter, store case. Det som gjør det til topp 20, er hvordan et lite studio ser stort og levende ut: en nyhetsstrøm på forsiden (intervjuer, egne arrangementer, priser, foredrag), et søsterstudio (27b) for en annen type oppdrag, og et team vist med navn, rolle og land. Kundene er store (Google Gemini, i-D, Vast, Adyen, MetaMask [målt]), men grepet kan brukes i Tromsø.

Struktur [målt]

Typografi og farge [målt]

• Én familie: ABC Diatype 400/500 (Dinamo). H1 er bare 24 px/400 med sporing −0,48 px. Hele nettstedet bruker små størrelser og lar bildene ta plassen.
• Svart/hvitt; casebildene og videoene gir all farge.
• Ingen egen ::selection. Klassen .cursor-none finnes i CSS (Tailwind), men ingen følgemarkør ble funnet ved musebevegelse [målt].

Bevegelse og teknikk [målt]

• Next.js + OGL (lett WebGL, 3 <canvas> på forsiden), Lottie og video. Én keyframe: marquee.
• Easinger cubic-bezier(.16,1,.3,1) (ease-out-expo) og cubic-bezier(0.75,-0.02,0.2,0.97) på work. 1 prefers-reduced-motion-regel.

Hva NESTE tar med [vurdering]

1. Filtre inne i en setning, med antall: «Vi lager nettsider ③, merkevarer ②, teknologi ① og 3D ①» der hvert ord er et filter. Ærlig med små tall, og det ser gjennomtenkt ut. Tallene må være ekte antall case [bekreftes].
2. Case-mal: År · Kunde · Omfang → brief → nummererte bilder → Leveranser → Kreditter → Neste case. Kredittlista er spesielt god for NESTE: navngi fotograf, tekstforfatter og samarbeidspartnere (ærlig om at vi er et lite team med nettverk). Hvem som kan navngis [bekreftes].
3. Nyhetsstrøm med kategorier (Arrangement, Intervju, Kunde, Pris) gjør et lite studio levende. For NESTE: lanseringer, foredrag i Tromsø, «designkveld»-arrangementer [bekreftes om det er aktuelt]. Bare ekte hendelser.
4. Eget arrangement med serienavn («27A: Edition #1–3» sammen med andre studioer) bygger nettverk og innhold samtidig. En NESTE-kveld i Tromsø med lokale kreative kan gi både case og nyheter [vurdering, bekreftes].
5. To studioer, ett team («the brief decides if a job is Antinomy or 27b») er en måte å holde ett uttrykk rent på. Relevant hvis NESTE senere vil skille rimelige nettsider fra eksklusive merkevareprosjekter, men ikke nå [vurdering].
6. AI som én tjeneste blant mange (under Experience), ikke som overskrift. Passer regelen «AI er aldri overskriften».
7. Menyen som krymper til en pille ved scroll: diskret og nyttig. Aktiv side i svart, resten i grått i en kommaseparert meny er billig og elegant.
8. Teamkort med land/sted: for NESTE kan det være «Tromsø» eller «69°N» på hvert kort. Ekte portretter [bekreftes].

Hva NESTE ikke bør kopiere [vurdering]

• Store kundenavn og prislister vi ikke har. Antinomy viser Google og Webby; NESTE skal vise ekte lokale case og ingen oppdiktede priser eller tall.
• Tall uten etikett («5 5 2 50+»): uklart for leseren. Hvis NESTE viser tall, må hvert ha en tydelig etikett og være sant.
• Fiskeøye-bildene er morsomme for et kjent studio, men for et nytt studio er tydelige, varme portretter tryggere for tillit.
• Ingen egen markering og ingen egen markør: her gjør NESTE mer (oransje ::selection, markør etter Wolff Olins).

6.20 #20 twoplusone

URL: https://twoplusone.co/
Kilde: notes/twoplusone.md

twoplusone — twoplusone.co

• URL: https://twoplusone.co/
• Land: De forente arabiske emirater («Creative content production agency based in UAE»)
• Kilde: Joakims liste
• Skjermbilder: shots/twoplusone.png, -full.png
• Teknologi: Framer og Lenis, med 8 videoer og 66 bilder. Font: Onest (400/500/700). Papirbakgrunn #FFF8F2 og limegrønn aksent.
• Struktur: heroen er et stort avrundet kort med en hånd som vinker og «Hello! We are twoplusone». Deretter følger tre prinsipper (⑴ Familiar is forgettable ⑵ Ordinary is overpriced ⑶ Good things come in threes), What we do i tre kolonner (Creative / Content / Production) og «Small where it matters, big where it counts». Til slutt Our Work: store kort per kunde (First&Red / Aryna Sabalenka, adidas, Jumeirah …) med en vertikal fotomosaikk.
• Gjennomgående idé: tallet tre. Navnet (2+1=3), tre prinsipper, tre tjenester og seksjonsteller «01 / 03». Seksjonene har labels i parentes: (Hello), (Still Hello), (Approach), (Finally).
• Hva som er bra: én tallregel binder hele siden. Teksten har humor. Teamet er beskrevet ærlig som en «compact core» med et nettverk rundt.
• Idé for NESTE: «To gründere og et nettverk» fortalt like ærlig. Seksjonsteller og parentes-labels på norsk, for eksempel (Hei), (Fortsatt hei), (Til slutt) [forslag].

6.21 #21 Jomor Design

URL: https://www.jomor.design/
Kilde: notes/pass3/jomor.md

Jomor Design (jomor.design): dyp note (pass 3)

Kilde: besøk 19.10.2026 ca. 09:39–09:51 (Europe/Paris), raw/pass3/jomor.json (forside) og raw/pass3/jomor-sub.json (about, case Métrica). Skjermbilder shots/pass3/jomor-1-*.jpg og shots/pass3/jomor-sub-{1,2}-*.jpg. Merking: [målt] = lest ut av DOM/CSS eller sett i skjermbilde. [vurdering] = min tolkning. [bekreftes] = må avklares med Joakim/Eskil.

Kort fortalt

Enpersonsstudio i Montréal: «an independent design practice run by Jonathan Morin, and a selection of respected collaborators» [målt]. Nummer 21 i topp 30 fordi det viser at én designer kan se ut som et toppstudio med fire case, en sterk typografisk hero og en ærlig, morsom tone («Great design services — without the pretentiousness.»). Den nærmeste parallellen til NESTE i størrelse.

Struktur [målt]

Typografi og farge [målt]

• IvyPresto Display 100–400 (normal og kursiv), Clash Grotesk og Inter 300–700. Kontrasten tynn kursiv serif + bred grotesk i versaler.
• Lys grå bakgrunn og svart tekst, fargen kommer fra bildene. Ingen egen ::selection, ingen egen markør (cursor: default).

Bevegelse og teknikk [målt]

• Webflow + jQuery, én keyframe spin. Ingen easinger funnet i CSS (Webflow-interaksjoner styres i JS [vurdering]). 0 prefers-reduced-motion-regler.

Hva NESTE tar med [vurdering]

1. Ord og bilder i samme linje i heroen: «Nettsider [bilde] i toppklasse. [bilde]» med ekte case-bilder mellom ordene. Ferdig grep for et studio med få, men gode case.
2. Fotnote med stjerne som humor: «Vi gjør drømmene deres til virkelighet / så lenge drømmen er en skikkelig god nettside.» Passer NESTEs ærlige tone, på norsk. Én gang, ikke overalt.
3. «1 / 4»-nummerering av case sier ærlig at det er fire, og ser kuratert ut.
4. «Drevet av én person + respekterte samarbeidspartnere» sagt rett ut. Samme modell som Goodside og Datalands. For NESTE: «Joakim og Eskil + folk vi stoler på».
5. Telefon og e-post rett i menyen: lav terskel for lokale kunder.
6. «Noen veldig sterke ord» som overskrift på kundesitatet: et sitat som sier at personen gjorde forskjellen passer et studio der kunden møter Joakim og Eskil direkte. Bare ekte sitater med navn og samtykke [bekreftes].
7. Bildetekst med selvironi under portrettet gjør grunnleggeren menneskelig.

Hva NESTE ikke bør kopiere [vurdering]

• Webflow + jQuery uten redusert bevegelse: NESTE har egen kode og MOTION-SPEC §8.
• Engelsk ordspill («RECOGNISH», «not the singer»): fungerer ikke oversatt. Finn egne norske poenger.
• Duplisert menytekst i DOM («WORK WORK») kan leses dobbelt av skjermlesere. Bruk aria-hidden på kopien.

6.22 #22 Love and Money

URL: https://loveandmoney.com/
Kilde: notes/pass3/loveandmoney.md

Love and Money (loveandmoney.agency): dyp note (pass 4)

Kilde: forsidebesøk 19.10.2026 ca. 09:54 (Europe/Paris), raw/pass3/loveandmoney.json (loveandmoney.agency videresender til loveandmoney.com), skjermbilder shots/pass3/loveandmoney-1-{a,b,full}.jpg. Bare forsiden er lest. Skrevet i pass 4 kl. ca. 11:15. Merking: [målt] = lest ut av DOM/CSS eller sett i skjermbilde. [vurdering] = min tolkning. [bekreftes] = må avklares med Joakim/Eskil. «ogl» i bibliotekslista er kjent falsk positiv og er ikke brukt.

Kort fortalt

Designkonsulent (Melbourne, LA, NY, London, Vancouver). Første skjerm er et kjempestort svart «LAM™» på signalrødt med linjen «LOVE AND MONEY IS NOT WHAT YOU THINK IT IS» [målt]. Nr. 22 i topp 30. Beste modell i settet for en metode som selger: forsiden er en nummerert «OUR PLAYBOOK» i seks steg [målt].

Struktur [målt]

• Playbook: 01 FIND OUR HUMANS · 02 THINK BIG · 03 BUILD A PRODUCT · 04 BUILD A WORLD · 05 FIND 1000 FANS · 06 PUT THEM TO WORK. Hvert steg har én forklaring og en «E.G.»-linje med konkrete leveranser (f.eks. «E.G. CREATIVE DIRECTION, TONE OF VOICE AND MESSAGING»).
• Bransjer i én setning: «consumer goods, technology, B2B, beauty, finance, food and beverage».
• Fem case med etiketter BRAND · DIGITAL · VENTURES (Telepathic Instruments, Fluff, Omega Yeast, Polaroid, Idealworks). 25 videoer på siden.
• Fot: BRAND STUDIO · DIGITAL STUDIO · VENTURES · e-post · Instagram · LinkedIn.

Typografi, farge, bevegelse [målt]

• Én skrift: ABC Diatype Bold, alt i uppercase. Rød + svart + hvit.
• ::selection bakgrunn rgb(231, 38, 4), samme røde som merkevaren.
• Next.js + Sanity, Tailwind-keyframes (fade, slide, wipe). 1 prefers-reduced-motion-regel.

Hva NESTE tar med [vurdering]

1. Metoden som nummererte steg med «f.eks.»-leveranser: «01 Vi ser på det dere har · 02 Vi lager et utkast gratis · 03 Vi bygger · 04 Vi drifter». Konkret og lett å selge over telefon.
2. Markeringsfarge = merkefarge (her rød, hos NESTE #C8501E).
3. Bransjelinje i én setning (restaurant, reiseliv, håndverk …) i stedet for bransjesider tidlig.

Ikke kopier [vurdering]

• Alt i uppercase i én fet skrift er tungt å lese i lengre norsk tekst.
• «Ventures»-delen: NESTE skal ikke love investeringer.

6.23 #23 Garden Eight

URL: https://garden-eight.com/
Kilde: notes/pass3/gardeneight.md

Garden Eight (garden-eight.com): dyp note (pass 4)

Kilde: forsidebesøk 19.10.2026 ca. 09:54 (Europe/Paris), raw/pass3/gardeneight.json, skjermbilder shots/pass3/gardeneight-1-{a,b,full}.jpg. Bare forsiden er lest. Skrevet i pass 4 kl. ca. 11:15. Merking: [målt] = lest ut av DOM/CSS eller sett i skjermbilde. [vurdering] = min tolkning. [bekreftes] = må avklares med Joakim/Eskil. «ogl» i bibliotekslista er kjent falsk positiv og er ikke brukt.

Kort fortalt

Tokyo. Heroen er bokstavelig talt «WHAT CAN WE MAKE NEXT» i en stor, kantete display-serif over myke 3D-figurer i kremfarge [målt]. Nr. 23 i topp 30. Mest relevant fordi «neste» er NESTEs navn: et annet studio bruker allerede «next» som hero-påstand, så NESTE bør ikke åpne med en engelsk «what's next»-linje [vurdering].

Struktur [målt]

• Meny: CASES · ABOUT · ARCHIVES · CONTACT · AI (egen side /ai/) · JA (japansk versjon).
• Kort tekst: «Our goal has always been to make a great website in a playful, yet humble way.» Så VIEW CASES og ABOUT US.
• Kontakt: e-postadresse med «Copy to clipboard / Copied» rett i fota, ingen skjema på forsiden.
• Små miniatyrer følger musa i case-lista (114×114 px, video/bilde lastes når de vises).

Typografi, farge, bevegelse [målt]

• gunsan 600 (display) + lausanne 200/400 (brødtekst, H1-ordmerket er bare 15 px uppercase).
• ::selection byttes etter bakgrunn: hvit på mørke seksjoner, svart på [data-bg="white"].
• Nuxt + GSAP + Three.js. 0 prefers-reduced-motion-regler.

Hva NESTE tar med [vurdering]

1. Markeringsfarge som bytter med seksjonsbakgrunn (oransje på lys, lys på oransje).
2. «Kopier e-post»-knapp med kvittering: billig, nyttig, ingen skjema.
3. Én stor, karakterfull display-skrift mot en rolig grotesk.
4. Egen side for AI i menyen, ikke på forsiden.

Ikke kopier [vurdering]

• «What can we make next»: for nær NESTE-navnet til å være original hos oss. Bruk norsk og egen formulering.
• Myke 3D-figurer i krem er blitt en vanlig stil.

6.24 #24 monopo london

URL: https://monopo.london/
Kilde: notes/pass3/monopo.md

monopo london (monopo.london): dyp note (pass 3)

Kilde: besøk 19.10.2026 ca. 09:38–09:50 (Europe/Paris), raw/pass3/monopo.json (forside) og raw/pass3/monopo-sub.json (services, team). Skjermbilder shots/pass3/monopo-1-*.jpg og shots/pass3/monopo-sub-{1,2}-*.jpg. Cookie-banneret ble ikke klikket. En hvit firkant øverst til høyre i noen skjermbilder er trolig et medieelement som ikke var lastet [vurdering]. Merking: [målt] = lest ut av DOM/CSS eller sett i skjermbilde. [vurdering] = min tolkning. [bekreftes] = må avklares med Joakim/Eskil.

Kort fortalt

Londonkontoret til et Tokyo-byrå: «Based in London · Born in Tokyo · Design-driven creative agency» [målt]. Nummer 24 i topp 30 fordi opprinnelsen er selve konseptet: heroen har en linse som gjør den engelske påstanden om til japansk under musa, menyen viser klokka i tre byer, og teamsiden forteller grunnleggerhistorien. Det er en direkte modell for hvordan NESTE kan bruke Tromsø og nord som idé, ikke bare som adresse.

Struktur [målt]

Typografi og farge [målt]

• Roobert 400/400 kursiv/800 + Noto Sans CJK JP for japansk. H1 86 px/400. Versaler med vid sporing i meny og etiketter, klammer «[ … ]» som typografisk signatur.
• Svart med kornet blå/oransje toning i heroen, ellers svart/hvitt. Ingen egen ::selection, ingen egen markør utenom linsen.

Bevegelse og teknikk [målt]

• Nuxt + Prismic + Lenis, OGL/WebGL (ett canvas, linsen er WebGL [vurdering]). Ingen keyframes, mange easinger (bl.a. cubic-bezier(0.165,0.84,0.44,1) ease-out-quart).
• 0 prefers-reduced-motion-regler.

Hva NESTE tar med [vurdering]

1. Opprinnelsen som interaksjon. monopos linse oversetter til japansk. For NESTE kan en linse eller hover vise samme påstand «i mørketid» (mørk versjon med nordlys-grønn kant) eller vise koordinatene. En variant med nordsamisk tekst må i så fall være riktig og godkjent av noen som kan språket [bekreftes, ikke gjør uten]. Holdes som én signatur (jf. retning 6).
2. «Ring oss hvis → …» i stedet for tjenestekort: «Ring oss hvis dere trenger en nettside som faktisk selger», «… hvis dere vil se større ut enn dere er», «… hvis dere vil ha en partner, ikke en leverandør». Samme idé som Deux Huit Huits «Get started»: kunden kjenner igjen sitt eget problem.
3. Historien i årstall («2026 · Grunnlagt i Tromsø av Joakim og Eskil») og én menneskelig detalj (deres: to bassister). Etableringsår og detalj [bekreftes].
4. Nettverket som liste som slutter med «Du?»: ærlig for et lite studio. Bare fag vi faktisk har folk til [bekreftes].
5. Org.nr. i fota gir tillit for norske bedrifter: «Neste Studio Isaksen · org.nr. 823 614 012» (registrert navn ifølge Brønnøysund 16.10). Hvilken form som skal vises [bekreftes].
6. Klammer «[ … ]» rundt korte forklaringer er et billig typografisk grep som passer Inter Tight i versaler.

Hva NESTE ikke bør kopiere [vurdering]

• Kornet blå/oransje toning i heroen: vanlig «AI-/mal-gradient» og står på unngå-lista, selv om oransjen ligner vår. NESTE bruker flat farge.
• Tre klokker gir mening for tre kontorer. NESTE har ett sted, så én klokke + vær er nok.
• «©2021» på et bilde og «© … 2024» i fota to år senere: årstall må oppdateres automatisk.
• Ingen redusert bevegelse, og linsen har ingen synlig reserve for berøringsskjerm [vurdering].

6.25 #25 Grilled Pixels

URL: https://www.grilledpixels.com/
Kilde: notes/pass3/grilledpixels.md

Grilled Pixels / Adam Roberts (grilledpixels.com): dyp note (pass 4)

Kilde: forsidebesøk 19.10.2026 ca. 09:55 (Europe/Paris), raw/pass3/grilledpixels.json, skjermbilder shots/pass3/grilledpixels-1-{a,b,full}.jpg. Skjermbildet viser preloader («73%»), så visuelle funn er fra DOM. Skrevet i pass 4 kl. ca. 11:15. Merking: [målt] = lest ut av DOM/CSS eller sett i skjermbilde. [vurdering] = min tolkning. [bekreftes] = må avklares med Joakim/Eskil. «ogl» i bibliotekslista er kjent falsk positiv og er ikke brukt.

Kort fortalt

Én person (Sheffield): «ADAM ROBERTS · DESIGN & ENGINEERING», «I BRING THE UNEXPECTED TO BRAND & DIGITAL EXPERIENCES» [målt]. Nr. 25 i topp 30. Relevant fordi menyen har COST ESTIMATE og flere veier til kontakt [målt].

Struktur [målt]

• Meny: PROJECTS · ABOUT · BLOG · COST ESTIMATE · CONTACT.
• Kontaktpanel med valg «Freelance Project / Job/Contract / Other», tre felt, og «Schedule a call». CTA-er: CONTACT, BOOK A CALL, SAY HI.
• Tjenesteliste i klartekst: Branding · Creative Direction & Strategy · UX/UI · Web Development (React/Next.js) · eCommerce, Product, 3D, WebGL · Video & Animation.
• Hvert case har teknologilinje (React, Next.js, GSAP …) og «VIEW CASESTUDY OR QUICK BREAKDOWN 02:40», altså en kort video som alternativ til lang case.
• Eget produkt (Captcha, inspirasjonsverktøy) vist som case.

Typografi, bevegelse [målt]

• untitledSans + tronicaMono + atHaussMono. H1 64 px uppercase.
• Egen markør: to elementer følger musa (prikk 12 px og etikett 140×50). Lenis glatt scrolling, WebGL-canvas ×2. 0 prefers-reduced-motion-regler. Ingen egen ::selection.

Hva NESTE tar med [vurdering]

1. Prisestimat som eget menypunkt: passer fast oppstartspris + månedspris. Tallene er fortsatt hypoteser til Joakim setter dem [bekreftes].
2. «Kort gjennomgang, 2:40» som video ved siden av caset.
3. Markør med etikett («Se caset») bare over case-kort.

Ikke kopier [vurdering]

• Preloader med prosent: siden var ikke ferdig etter ca. 6 s i fangsten.
• Enpersonsstemme («I»): NESTE er to.

6.26 #26 Serious Business

URL: https://serious.business/
Kilde: notes/pass3/serious.md

Serious Business (serious.business): dyp note (pass 3)

Kilde: besøk 19.10.2026 ca. 09:37–09:47 (Europe/Paris), raw/pass3/serious.json (forside), raw/pass3/serious-sub.json (service, about, case Zellerfeld), raw/pass3/serious-form.json (skjemaets felt og valg lest fra DOM, ingenting fylt ut eller sendt; skript raw/pass3/form_read.py). Skjermbilder shots/pass3/serious-1-*.jpg og shots/pass3/serious-sub-{1,2,3}-*.jpg. Cookie-banneret ble ikke klikket, så det står over deler av skjermbildene. Merking: [målt] = lest ut av DOM/CSS eller sett i skjermbilde. [vurdering] = min tolkning. [bekreftes] = må avklares med Joakim/Eskil.

Kort fortalt

Merkevarebyrå for B2B-teknologiselskaper, «Est. 2015», startet på Hyper Island i Stockholm, i dag Serious Business GmbH i München/Stockholm, «100% Remote» [målt]. Nettstedet er nummer 26 i topp 30 fordi det er det tydeligste salgsapparatet av alle: smal målgruppe (Series A & B-selskaper), fire samarbeidsformer, et prosjektskjema med budsjettspenn, et gratis «Brand Masterplan»-tilbud og mye personlighet (smilefjes-merket, humoristiske teamtekster). Stilen er lys, leken og fargesterk. Det er salgsstrukturen NESTE skal lære av, ikke uttrykket.

Struktur [målt]

Typografi og farge [målt]

• PP Mori 400/600 (grotesk) og Nib Pro 400/600 (serif, brukt i kursiv i undertitler). H1 24 px/400 med −0,48 px sporing; de store flatetitlene er langt større.
• Rosa som hovedfarge, med lilla, gul, svart og krem i tjenesteflatene og faktaboksene. Ingen egen ::selection.
• cursor: none på video-/reel-elementer (egen markør over video), ellers vanlig markør.

Bevegelse og teknikk [målt]

• WordPress + Lenis + OGL/WebGL (ett canvas). Keyframes eye, smile-balance og crying: smilefjeset har egne små animasjoner.
• Mange easinger, bl.a. sprett cubic-bezier(.34,1.56,.64,1). 0 prefers-reduced-motion-regler på alle fire sidene.

Hva NESTE tar med [vurdering]

1. Samarbeidsformer i stedet for én tjenesteliste. For NESTE: Nettside (prosjekt), Sprint (fast pris, fast tid, f.eks. «ny nettside på 4 uker»), Drift og videreutvikling (månedlig) og ev. Partnerskap (som Klarsalg-piloten, omtalt uten å navngi kjeden). Navn, pris og innhold må komme fra PRICE-SHEET [bekreftes].
2. «Bare én om gangen»-knapphet («one early stage startup at a time») er ærlig hvis det stemmer: «Vi tar 2 nye prosjekter i måneden». Bare hvis det er sant [bekreftes].
3. Budsjettspenn i skjemaet sorterer henvendelser uten å vise prisliste. For NESTE med kronebeløp som passer nordnorske bedrifter [bekreftes spenn]. Hvis skjema brukes, skal det ha få felt, tydelig personvern og avkrysning for nyhetsbrev som ikke er forhåndsvalgt (slik de gjør).
4. Gratis «hurtigsjekk» som inngang («Brand Masterplan … fixes you can implement within 24 hours»). For NESTE: «Gratis nettsidesjekk: 5 ting dere kan fikse selv» [bekreftes om dere vil tilby det].
5. Tall alltid med etikett (200+ … over 10 år, 95 % …). Men se under om motstridende tall.
6. Case-mal med «hvorfor»: mål i én setning → leveranser gruppert → sitat med navn → kapitler som forklarer hvorfor fonter og farger ble valgt. Gjør NESTE-case lærerike, ikke bare pene.
7. Gjennomstreket liste («~~Overtid~~, ~~Kunden har alltid rett~~») er et morsomt, billig typografisk grep for verdier.
8. Én morsom linje per teammedlem gjør et lite team menneskelig. For Joakim: maraton og triatlon, språk og reiser. For Eskil [bekreftes].

Hva NESTE ikke bør kopiere [vurdering]

• Motstridende tall: tjenestesiden sier 200+ selskaper, mens om-siden sier «over 180» og «15 creatives» [målt]. NESTE skal ha én kilde til alle tall og bruke den overalt.
• Tall som bare vises i en karusell («Serious Facts 01/05»), og som ikke står som tekst i DOM-en før de animeres. Samme lærdom som Spoon (SYNTESE §0.4).
• Lang prisliste og «Agency of the Year Nominee»: NESTE har ikke priser ennå, og skal ikke late som.
• Arbeid mot eierandeler («Venture») som offentlig tilbud: ikke for NESTE nå.
• Rosa, leken scale-up-stil og «make people smile»-tone: passer ikke NESTEs rolige, nordiske uttrykk.
• Ingen redusert bevegelse.

6.27 #27 Phantom

URL: https://www.phantom.land/
Kilde: notes/pass3/phantom.md

Phantom Studios (phantom.land): dyp note (pass 4)

Kilde: forsidebesøk 19.10.2026 ca. 09:53 (Europe/Paris), raw/pass3/phantom.json, skjermbilder shots/pass3/phantom-1-{a,b,full}.jpg. Bare forsiden er lest. Skrevet i pass 4 kl. ca. 11:15. Merking: [målt] = lest ut av DOM/CSS eller sett i skjermbilde. [vurdering] = min tolkning. [bekreftes] = må avklares med Joakim/Eskil. «ogl» i bibliotekslista er kjent falsk positiv og er ikke brukt.

Kort fortalt

London og Auckland. Tittel «Technology Creative Agency», H1 «Phantom is a technology-led creative agency crafting experiences for global brands.» [målt]. Forsiden er arbeidsarkivet: et tett rutenett av 92 prosjekter på svart, med år og fagtagger (EXPERIENCE · AI · 3D · MOTION · CAMPAIGN · CONTENT) [målt]. Nr. 27 i topp 30. Nærmeste referanse for «kreativ teknologi-studio»-posisjonen Joakim vil ha.

Struktur [målt]

• Meny: Work · About (/about/agency) · Careers, og én knapp «Let's Talk» (åpner kontaktmodal, keyframes ContactModal_fade-in/out).
• Første skjerm: prosjektrutenett, ikke en hero-setning. Introteksten står over lista og nevner «AI, WebGL, and augmented reality» som verktøy, ikke som tjeneste.
• Hver prosjekttekst forklarer hva brukeren gjør (f.eks. Casamigos-flasker designet med egen AI-motor trent på egne illustrasjoner).

Typografi, farge, bevegelse [målt]

• Helvetica Now 400/500/700 + ballinger-mono. H1 bare 32 px: arbeidet er overskriften.
• Egen ::selection: bakgrunn rgb(3, 253, 199) (mintgrønn), svart tekst. Samme grep som Joakim vil ha i NESTE-oransje.
• Next.js + Prismic, canvas/WebGL på siden. Egen loader med skew/stretch-keyframes. Easing bl.a. cubic-bezier(0.16, 1, 0.3, 1) (samme expo-out som i MOTION-SPEC). 0 prefers-reduced-motion-regler.

Hva NESTE tar med [vurdering]

1. AI forklart gjennom hva kunden fikk gjøre, aldri som overskrift. Stemmer med regelen i POSISJONERING.
2. Fagtagger per case (WEB · MERKEVARE · 3D · AI) som filter på arbeidssiden.
3. Egen markeringsfarge, kontrastsjekket (se KONTRAST-FORSLAG.md).

Ikke kopier [vurdering]

• 92 prosjekter i et rutenett: NESTE har få case ennå. Et halvtomt rutenett ser svakere ut enn tre store.
• Ingen redusert bevegelse.

6.28 #28 DEEO

URL: [bekreftes]
Kilde: notes/pass3/deeo.md

DEEO Studio (deeo.studio): dyp note (pass 3)

Kilde: flersidig fangst 19.10.2026 ca. 06:39 (Europe/Paris), raw/flow/deeo.json (forside + case Think Company), skjermbilder shots/flow/deeo-{home,case}-{a,b,full}.jpg, rik fangst shots/rich/deeo-studio-{1hero,2mid,3deep,4end}.jpg, raw/rich/deeo-studio.json, raw/motion/deeo-studio.json. Lest og skrevet i pass 3 kl. ca. 10:03. Merking: [målt] = lest ut av DOM/CSS eller sett i skjermbilde. [vurdering] = min tolkning. [bekreftes] = må avklares med Joakim/Eskil.

Kort fortalt

To grunnleggere som har vært venner siden barndommen, Baltimore: «Friends since '94. Based in Baltimore, working globally.» [målt]. Nummer 28 i topp 30, og kanskje den mest direkte modellen for hvordan NESTE kan fortelle om Joakim og Eskil: fota viser et barndomsbilde av de to merket «1996» og linjen «Deeo. In Greek, δύο. In English, two.» med en høyttalerknapp som uttaler navnet. Navnet, historien og antallet grunnleggere er samme idé.

Struktur [målt]

Typografi og farge [målt]

• PP Editorial New Ultralight (serif, H1 70 px, sporing −1,4 px) + PP Neue Montreal (grotesk, H1 på case 72 px Bold) + Inter. Ultralett serif-påstand mot fet grotesk.
• Svart bakgrunn, hvit tekst. Fargen kommer fra 3D-bokstavene og casebildene. Ingen egen ::selection.

Bevegelse og teknikk [målt]

• Framer (.framer-cursor-none finnes i CSS). Ingen egne keyframes eller easinger i CSS (Framer styrer i JS [vurdering]). 0 prefers-reduced-motion-regler.

Hva NESTE tar med [vurdering]

1. Navnet forklart i én linje + lyd: «Neste. Det som kommer etter.» med en liten høyttaler (samme som Deux Huit Huit). Kort og menneskelig.
2. «Venner siden …»: hvis Joakim og Eskil har en felles historie (skole, idrett, Tromsø), kan den stå i én setning og med ett ekte gammelt bilde. Bare med samtykke og ekte bilde [bekreftes].
3. Grunnleggerne med navn, rolle og lenker i en egen seksjon på forsiden (passer retning 2: «Gründerne er studioet»).
4. E-post og «Book en samtale»: to veier inn, begge uten skjema.
5. Case med FAQ i kundens ord («Hva inngår i en ny nettside?», «Hva leverte vi?»). Det hjelper både lesere og søk/AI-oppsummeringer, fordi spørsmål og svar står som tekst [vurdering]. Svarene må være ekte og korte.
6. AI som én leveranse blant mange («Custom AI Agent» i lista, «GEN AI» som én tagg): stemmer med regelen «AI er aldri overskriften».
7. «VIEW LIVE SITE» der det ikke finnes en full case: ærlig og billig for nye prosjekter.

Hva NESTE ikke bør kopiere [vurdering]

• Krom-/regnbue-3D-bokstaver over hele heroen: tung, og regnbueglass er blitt et vanlig AI-/mal-uttrykk. NESTEs 3D-øyeblikk skal være én avgrenset ramme (retning 6).
• Ultralett serif på svart i små størrelser kan bli tung å lese. Hold Instrument Serif stor.
• Framer uten redusert bevegelse.
• FAQ-svar som gjentar firmanavnet i hver setning (skrevet for søkemotorer) blir unaturlig på norsk.

6.29 #29 Leeroy

URL: https://www.leeroy.ca/
Kilde: notes/pass3/leeroy.md

Leeroy (leeroy.ca): dyp note (pass 3)

Kilde: besøk 19.10.2026 ca. 09:37–09:50 (Europe/Paris), raw/pass3/leeroy.json (forside) og raw/pass3/leeroy-sub.json (agence, case Place des Arts; /contact fikk tidsavbrudd etter 45 s og ble ikke lest). Skjermbilder shots/pass3/leeroy-1-*.jpg og shots/pass3/leeroy-sub-{1,2}-*.jpg. Cookie-banneret ble ikke klikket. Merking: [målt] = lest ut av DOM/CSS eller sett i skjermbilde. [vurdering] = min tolkning. [bekreftes] = må avklares med Joakim/Eskil.

Kort fortalt

Kreativt byrå og teknologibyrå i Montréal, på fransk (lang="fr-CA", engelsk versjon finnes). Av alle i topp 30 er dette den nærmeste forretningsmodellen for NESTE: lokale institusjoner og bedrifter (kollektivselskapet i Laval, Place des Arts, skistedene i Québec, en handelsgate, en parkeringsapp), nettside + teknologi + drift i samme hus (Craft CMS-partner, hosting og vedlikehold), og en tydelig påstand: «Des produits numériques qui facilitent le quotidien.» (Digitale produkter som gjør hverdagen enklere.) [målt]

Struktur [målt]

Detalj [målt]: adressen i fota (5605 de Gaspé, Montréal) er samme bygning som Deux Huit Huit (notes/pass3/deuxhuithuit.md).

Typografi og farge [målt]

• Feature (Display/Deck/Text) som serif og Söhne som grotesk. H1 100 px/400, linjeavstand 95 px. Altså stor serif + liten grotesk i versaler, samme oppskrift som NESTE (Instrument Serif + Inter Tight).
• Lys bakgrunn med myk fersken-/oransje toning bak heroen og blålilla toning lenger ned. Ingen egen ::selection.
• cursor: none på .js-hover-cursor (egen markør over bestemte elementer), ellers vanlig markør.

Bevegelse og teknikk [målt]

• GSAP ScrollTrigger + Lenis, OGL/WebGL (ett canvas). Keyframes bl.a. hover-slice-top, slide-x-top/slide-x-bottom (lenker som glir) og bigger.
• Easinger cubic-bezier(0.16,1,0.3,1), cubic-bezier(0.22,1,0.36,1) og flere. 3 prefers-reduced-motion-regler, flest av alle vi har målt i pass 3.
• Craft CMS (de er offisiell partner).

Hva NESTE tar med [vurdering]

1. Case-titler som mål med verb, på norsk: «Fylle leiren hele vintersesongen» (Unitx Reindeer Camp), «Gjøre salg av brukte varer enkelt for en av Skandinavias største kjeder» (Klarsalg uten å navngi kjeden). Bare med ekte mål og resultater [bekreftes formulering].
2. Påstanden «… som gjør hverdagen enklere» er nær NESTEs «Teknologi skreddersydd for bedriften din». Vurder en like konkret hverdagspåstand på norsk.
3. Taggliste over hele leveransen på hver case, inkludert drift: «Strategi · Nettside · Merkevare · Hosting · Vedlikehold». Viser at NESTE tar ansvar også etter lansering.
4. «Kunder akkurat nå» (collaborations actuelles) og en kort nyhetsliste. Bare ekte kunder som har sagt ja [bekreftes].
5. Live klokke med by i fota («09:37:42 MTL») bekrefter retning 4 (Live fra Tromsø): «TOS 09:37:42» eller «Tromsø 09:37».
6. «Ingen maler» som løfte passer NESTE (vi bygger fra bunnen) og kan stå i manifestet.
7. Redusert bevegelse på flere nivåer (3 regler): beste praksis vi har målt i pass 3.

Hva NESTE ikke bør kopiere [vurdering]

• Myk fersken-/oransje toning bak heroen: står på vår unngå-liste (blur-/toning-hero er et vanlig mal- og AI-uttrykk), selv om fargen ligner vår oransje. NESTE bruker flat #C8501E.
• «49 priser»-veggen: vi har ikke priser og skal ikke late som.
• Svært lange case-tekster med SEO-preg («véritable pierre angulaire …»): NESTE skriver korte case.
• Cookie-banner som dekker en fjerdedel av første skjermbilde.

6.30 #30 Studio Tumulte

URL: https://studio-tumulte.com/
Kilde: notes/pass3/tumulte.md

Studio Tumulte (studio-tumulte.com): dyp note (pass 4)

Kilde: forsidebesøk 19.10.2026 ca. 09:56 (Europe/Paris), raw/pass3/tumulte.json, skjermbilder shots/pass3/tumulte-1-{a,b,full}.jpg. Bare forsiden er lest. Skrevet i pass 4 kl. ca. 11:15. Merking: [målt] = lest ut av DOM/CSS eller sett i skjermbilde. [vurdering] = min tolkning. [bekreftes] = må avklares med Joakim/Eskil. «ogl» i bibliotekslista er kjent falsk positiv og er ikke brukt.

Kort fortalt

Grafisk studio i Lyon (identitet, trykk, kultur). Rolig kremhvit forside med bare to ord-par, «création graphique · direction artistique», og et lite ordmerke «-TUMULTE» [målt]. Nr. 30 i topp 30. Med som eksempel på at et lite, lokalt studio kan virke premium med svært lite.

Struktur [målt]

• Rund «MENU»-knapp, sidene projets · à propos · contact.
• Prosjektliste med kundenavn og sesong («Clochards Célestes 2025-2026», «Maison du Peuple», «Fondation Renaud»): mange faste, lokale kulturkunder over flere år.
• Interaksjon i fota: «drag < > go ! 100 %», en dra-glidebryter [målt]. E-post skrevet med mellomrom «h e l l o ( a t ) …» (spredd sporing som designgrep).
• Markørfølger 89×89 px.

Typografi, farge, bevegelse [målt]

• Moche, Moche Light, Forno-r (særpreget display). Beige + svart.
• ::selection: beige tekst på svart, i merkefargene.
• WordPress. Easing bl.a. cubic-bezier(0.16, 1, 0.3, 1). 0 prefers-reduced-motion-regler.

Hva NESTE tar med [vurdering]

1. Gjentatte lokale kunder med år («2025–2026») som bevis: når NESTE har faste Tromsø-kunder, vis sesong/år.
2. Lite innhold, mye luft: passer retningen «rolig nordisk».
3. Egen ::selection i merkefargene.

Ikke kopier [vurdering]

• E-post skrevet med «(at)» og mellomrom: vanskelig å kopiere og dårlig for skjermlesere.
• Ingen H1 på forsiden.

7. Andre dype noter (utenfor topp 30)

7.1 Craft VRA

Kilde: notes/craftvra.md

CraftVra — craftvra.com

• URL: https://craftvra.com/
• Land: Nigeria («Lagos, NG» med lokal tid i toppen)
• Kilde: Joakims liste
• Skjermbilder: shots/craftvra.png, -full.png
• Teknologi: Framer. Mange fonter (Geist, Satoshi, Switzer, Manrope og Inter). H1 er Geist 50/55 med −3 px sporing.
• Layout: lys, nesten hvit og veldig ren SaaS-aktig estetikk. Heroen har en tjenesteliste i fem punkter (01 Digital Products … 05 Content & Direction) og H1 «Make your digital presence match the value of your business». Deretter kundelogoer, «Work that speaks for itself» (6 prosjektkort med én setning per prosjekt), en prosess i fire steg, «One studio. One point of view.» (grunnleggerportrett og personlig tekst), omtaler, en FAQ («Who will actually be working on our project?»), en butikk (Store) og «Prefer to talk with me?», der grunnleggeren tar direkte kontakt. Footeren har et gigantisk «CraftVra® Studio».
• Hva som er bra: enkeltpersonstudio som eier det. Første person, grunnleggeren foran og FAQ-svaret «Who will actually be working…?». Hvert prosjekt har én setning om resultat og stemning.
• Idé for NESTE: FAQ-spørsmålet «Hvem jobber faktisk med prosjektet vårt?» med svaret «Joakim og Eskil, ingen underleverandører» [bekreftes]. En prosjektsetning per case.

7.2 Hiver

Kilde: notes/hiver.md

HIVER — hiver.agency

• URL: https://www.hiver.agency/
• Land: Sveits (HIVER GmbH, Stadthofstrasse 9, 6006 Luzern). Siden finnes på engelsk, tysk og portugisisk.
• Kilde: Joakims liste
• Skjermbilder: shots/hiver.png, -full.png
• Teknologi: Framer (de er «Official Framer Expert»), Inter og en mørk UI.
• Modell: et byrå og en ressursbutikk: gratis verktøy (Image Squeezer, Video Squeezer, MotionUI for After Effects), Framer-komponenter til salgs ($15), guider (SEO-guide i Notion), blogg og «Tech stack». Tjenestene er «Brand Transformation™» og videoproduksjon. Kundehistoriene er video-omtaler.
• Posisjonering: «Branding & digital marketing · From invisible to unmistakable · Tools, knowledge, and direct support».
• Hva som er bra: innholds- og verktøy-ledet salg. Gratis verktøy gir trafikk og tillit, og varemerket «Brand Transformation™» er en produktifisert tjeneste.
• Idé for NESTE: små gratisressurser for lokale bedrifter, for eksempel «Sjekk nettsiden din», en fargepalettgenerator eller en mal for Google-bedriftsprofil [forslag], og en produktifisert tjeneste med navn.

7.3 Live Me Five

Kilde: notes/livemefive.md

LiveMe5ive — livemefive.com

• URL: https://livemefive.com/
• Land: Italia (Via Riccardo Pitteri 10, 20134 Milano)
• Kilde: Joakims liste
• Skjermbilder: shots/livemefive.png, -full.png, livemefive-cursor.png
• Teknologi: Framer og Lenis. Fonter: GT Super Display (serif), Trispace (bred mono) og Instrument Sans.
• Markør (målt): en merkelapp på 87×30 px følger musen med forsinkelse (beveget seg 256→880→1056 px på 0/60/660 ms). Den er sannsynligvis en «View»- eller kategori-pille over prosjekter [antatt; teksten ble ikke lest ut].
• Layout: mørk (#000) med koboltblå #192B70 og rødbrun #93302B. Prosjektkort i stort format (Asus, Nvidia, Amica Chips, Monge, Mahmood, Gi Group) har tagger for avdeling (TALENT HUB, SOCIAL UNIT, CREATIVE HUB) og leveranse. Flere er merket «AI ENABLED».
• Posisjonering: «We turn vision into brands people feel, remember and move with.» Studioet er organisert i «hubs».
• Hva som er bra: tagger som viser hvilken avdeling og hvilken leveranse hvert case er. AI vises som en tagg på leveransen, ikke som produkt. Det er relevant for NESTE.
• Idé for NESTE: case-tagger som «Merkevare · Nettside · 3D». En eventuell «AI-støttet»-tagg brukes bare der det er relevant og sant [forslag].

7.4 Metasense (negativ referanse)

Kilde: notes/metasense.md

Metasense — metasense.dev

• URL: https://www.metasense.dev/
• Land: [bekreftes] Står ikke på siden.
• Kilde: Joakims liste
• Skjermbilder: shots/metasense.png, -full.png. Oversikt: raw/ov/metasense.jpg
• Teknologi: Framer, WebGL-canvas (2 stk.) og egne Framer-komponenter («Text_Reveal», «NumberCounter»). Fonter: Lora (serif-display, H1 50/60 px), Inter og Fragment Mono. Heroen har en kodestrøm i bakgrunnen (TensorFlow-, kvante- og GPT-snutter som tekst).
• Art direction: bilder i barokk og renessanse-oljemaleri (Rembrandt- og Caravaggio-lys) der figurene holder laptoper, mobiler og hodetelefoner. Anakronisme er virkemiddelet. De ser ut til å være AI-genererte [antatt ut fra stilen; ikke bekreftet]. Fargene er svart, brunt og gull med varmt chiaroscuro.
• Struktur: hero («We help you build for the future. Today.») fulgt av «At Metasense, timeless thinking meets accelerated development», en Before AI / With AI-graf (Planning, Design, Development, Testing, Deploy, der fasene krymper med AI), «Building the Intelligence Layer», kapabilitetsfaner (Neural Linguistics & RAG …), case-studier («built with our AI-powered systems»), tjenester i et sirkulært karusell-galleri (Web Development, UI/UX, Mobile Apps, Security Audit, Data Analytics …), kundeomtaler og tall (150+, 30+, 5M+).
• Posisjonering: AI-automasjon, integrasjoner og «augmented resources» (innleid talent). Her er AI selve produktet, altså motsatt av NESTEs regel.
• Mulige røde flagg: navn i omtalene som «Jason Stek», «Joy Newsmith» og «Amelia Brooks» ser ut som malplassholdere [usikkert; ikke verifisert].
• Hva som er bra: et sterkt konsept (gammel kunst møter ny teknologi) og et serif-uttrykk som skiller seg fra den typiske mørke AI-siden. Grafen «Before AI / With AI» viser fart visuelt.
• Hva vi skal unngå: AI som produkt, AI-genererte «old master»-bilder (blir fort klisjé) og mange like tjenestekort.
• Idé for NESTE: konseptet «tradisjon møter neste generasjon» kan oversettes med ekte foto og illustrasjon fra Nord-Norge, ikke AI-malerier. En prosessgraf som viser kortere leveringstid er bare aktuell hvis tallene stemmer [bekreftes].

7.5 Monolith Studio

Kilde: notes/monolithstudio.md

Monolith Studio — monolithstudio.com

• URL: https://monolithstudio.com/ (funnet via refs.gallery)
• Land: USA (Brooklyn, NYC)
• Kilde: Joakims liste og refs.gallery. NB: dette er et tatoveringsstudio, ikke et byrå. Tatt med for designet.
• Skjermbilder: shots/monolithstudio.png, -full.png
• Teknologi: Webflow (w-mod-ix), Lenis, jQuery, Plyr-video og 2 canvas. Font: SK Modernist (H1 285 px, 700, versaler, −14 px sporing).
• Art direction: et gigantisk ordmerke «MONOLITH» i svart på lys grå, og en klassisk marmorbyste (gresk skulptur) som hero-objekt. Typografien er brutalt stor, og layouten redaksjonell, med «Sidenote»-bokser. Topplinjen viser lokal tid («10:18 PM, ET NYC») og «SOUND: OFF».
• Team: artistene er hovedinnholdet («Meet the Artists» i svart-hvitt-rutenett med navn, rolle og stil). Grunnleggerne vises først som «Co-Founder».
• CTA: «Book experience».
• Hva som er bra: teamet er produktet, og det presenteres med portretter, roller og spesialiteter. Skala-kontrasten mellom gigantisk tekst og små detaljer fungerer.
• Idé for NESTE: et team-rutenett med spesialitet per person, store ordmerke-øyeblikk og lokal tid i topplinjen.

7.6 yam112003

Kilde: notes/yam112003.md

YAM112003 — yam112003.com/en/

• URL: https://www.yam112003.com/en/
• Land: Italia (Via Tertulliano 56, 20137 Milano)
• Kilde: Joakims liste
• Skjermbilder: shots/yam112003.png, -full.png
• Teknologi: WordPress (Bootscore-tema og eget child-tema), Bootstrap 5, Swiper og Font Awesome. Font: PT Serif (H1 80 px i versaler). ::selection{color:var(--bs-white);background-color:var(--bs-primary)} gir markering i merkefargen. Siden har 44 regler for prefers-reduced-motion og en tilgjengelighetserklæring.
• Art direction: rosa og rød, med håndskrevne røde ord oppå svart typografi («MAKE LOVE, NOT ADS», «LOVE IS SERIOUS BUSINESS»). Merkede ord i fet versal har farget bakgrunnsmarkering, som ser ut som en «highlighter». Konseptet er «love»: «OUR LOVE LATEST NEWS», «Would you make LOVE with us?» og «AN INDEPENDENT AGENCY THAT TURNS BRANDS INTO LOVE STORIES».
• Struktur: manifest, prosjekter (events og opplevelser, S.Pellegrino, E.ON og Lavazza), nyheter, DEI, Working at, Awards (en liste per år), Relationships (bransjeforeninger) og «Part of the network».
• Hva som er bra: ett ord («love») som styrer all tekst. Ekte priser vises i en liste. Merkefargen brukes som ::selection.
• Idé for NESTE: et nøkkelord som går igjen i teksten, for eksempel «neste», som i «neste steg», «neste nivå» og «hva er det neste?» [forslag]. Tekstmarkering i merkefarge, se MOTION-SPEC.md.

7.7 Flytstudier (pass 2)

Flersidige flytstudier, pass 2 (samlet)

Fanget 19.10.2026 05:00–06:00 (Europe/Paris) med raw/flow.py. Data raw/flow/<slug>.json, bilder shots/flow/, GIF shots/motion/. [målt] = lest ut av DOM/CSS. [vurdering] = min tolkning. Bibliotek-deteksjonen er heuristisk; «ogl» er kjent falsk positiv og ignorert. Dype enkeltnoter: wolffolins.md, another.md, heretic.md i samme mappe.

R/GA (rga.com) — home, work, case (Google Health)

• [målt] Next.js, egen «Helvetica Variable for R/GA», H1 56 px/400, tett sporing (-0.56 px). Ingen egen markør, standard blå ::selection (ikke tilpasset, i motsetning til det Joakim husket; markeringen han så kan ha vært en annen side eller stil som ikke ble lest ut [bekreftes]).
• [målt] Forside: «An independent creative innovation company for the intelligence age» → 4 case → What we do → News. Case-sider: Overview → Our role (liste over 4 tjenester) → seksjon per tjeneste. Mange videoer (11 på forsiden), «video-hover fade-in» som keyframe.
• [vurdering] AI-teksten er posisjonering for en global aktør. For NESTE: lån strukturen (tjenesteblokker med klar «hva vi gjør») men ikke AI-påstanden (regel: aldri AI som produkt).

Pentagram — home, work, case, about, contact

• [målt] GSAP 3.12.7, én font (Plain 400), H1 bare 19 px: navigasjon og bilder bærer, ikke typografi. 187 bilder + 23 videoer på forsiden. 2 prefers-reduced-motion-regler. Easing bl.a. cubic-bezier(0.59,0.01,0.28,1).
• [vurdering] Arkiv som merkevare: «Work — Browse by type of client». For NESTE (få case ennå): ikke kopier volumet; kopier filtrering etter bransje når vi har 8–10 case.

Bakken & Bæck — home, work, case (Sierra), about

• [målt] Next + Sanity, egen bbSans 50 px/500. Om-siden har tall-blokk: «60+ people, 5 offices / 3 disciplines, 1 roof / 15 years, 500+ clients / 100% independent». Kapabilitetstabell Brand / Web / Product × Strategy / Design / Code. Animasjoner: dottedLines, marquee.
• [vurdering] Kapabilitetsmatrisen er det beste formatet vi har sett for «kreativt teknologistudio». NESTE-versjon: Merkevare / Nettside / 3D & bevegelse × Strategi / Design / Kode. Tallblokk kun med ekte tall [bekreftes].

Goodside — home, work, case, about, contact

• [målt] Én serif (Epicene Text 300, fallback Instrument Serif), én easing cubic-bezier(0.22,1,0.36,1), én keyframe sunspin (roterende sol-merke). Case: lang fortelling + «Brand Strategy, Art Direction».
• [vurdering] Nærmest NESTE i tone av alle: én serif, ett roterende merke, ro. Bekrefter seglet b02 som roterende element.

huehaus — home, about, services/pricing, contact

• [målt] Framer + Lenis, egen markør (cursor:none), H1 240 px PP Mondwest (pikselfont). Åpne priser: $4 000 / $5 000 / $8 000+, med revisjoner per pakke og FAQ om betaling.
• [vurdering] Viser at åpne pakkepriser fungerer på en designdrevet side. Tall for NESTE kun fra sales-kit/PRICE-SHEET.md [bekreftes om priser skal vises].

Default Studio — home, pricing, contact

• [målt] Next + Lenis, kun Inter. «Design Partner» abonnement + «One-time project From $7,999», én CTA overalt: «Book a 30-min call». ::selection hvit 18 %.
• [vurdering] Én CTA-formulering gjentatt overalt = god konvertering. NESTE: «Book en prat» (forslag).

Datalands — home, case (Nike Viz System)

• [målt] Framer, egen markør, tilpasset ::selection (mørk grønn bakgrunn, mint tekst = merkefarger). Fonter OZIK + Martian Mono.
• [vurdering] Konkret eksempel på merkefarget markering, akkurat det Joakim ba om. NESTE: ::selection{background:#C8501E;color:#000} (kontrast 4,62:1, se KONTRAST-FORSLAG.md).

Porto Rocha — home, about

• [målt] Nuxt + Prismic, egen markør, brødtekst 14 px SF Pro. Om-siden lister disipliner (Strategy, Motion, 3D, «Branding AI») + «Talking Thursdays»-foredrag.
• [vurdering] Eget foredrags-/arrangementsformat bygger studioet som kulturaktør; NESTE kunne gjøre «Neste torsdag» i Tromsø [idé].

Spoon (spoonagency.no) — kun forside fanget

• [målt] WordPress, PP Acma 58 px, norsk tekst: «Si mindre. Bety mer.», «Flytter merkevarer fra der de er til dit de vil.»
• [vurdering] Norsk referanse på kort, sikker byråtone. Undersider ikke fanget (flow fant ikke interne lenker) [ufullstendig].

RabenRifaie — kun forside

• [målt] Framer, egen markør, ingen overskrifter i DOM (alt er bilde/canvas/tekst i komponenter). Ny kjøring pågikk ved skriving.
• [vurdering] Se pass 1-note; tjenestesettet (visuell strategi, web, branding, 3D) er modellen for NESTEs «kreativt teknologistudio».

Lusion — ikke fanget

• [målt] Ingen sider lagret (WebGL-tung side tidsavbrøt under høy last). Pass 1-note gjelder.

8. De sju redesign-retningene og anbefalingen [forslag]

1. Ord som markør og ett signaturgrep (Wolff Olins): native SVG-markører i Instrument Serif-kursiv og Kvadratisk-pilen, tre klikksoner i case-karusellen, strekk-NESTE i oransje footer. Ferdig demo.
2. Gründerne er studioet (another, Goodside, Datalands, Jomor, Pentagram): Joakim og Eskil i heroen, en infokolonne med datafelt (Gründere, Base: Tromsø, Ledig fra: [bekreftes]), «liten kjerne, nettverk rundt», og navngitt kontaktperson på hver case.
3. Kapabilitetsmatrise (Bakken & Bæck, Lusion): Merkevare · Nettside · 3D og bevegelse × Strategi · Design · Kode på én skjerm i stedet for tjenestekort.
4. Live fra Tromsø (Datalands, Porto Rocha, Deux Huit Huit, RabenRifaie): klokke og sted i topplinja («Tromsø 69°39′ N · 09:14»), eventuelt vær fra MET Norway [bekreftes teknisk]. Testet i demo/lab.html §06.
5. Åpen pris og ærlig FAQ (huehaus, Default, Bolder, another): pakkene fra PRICE-SHEET i en tabell, hvis prisene skal vises [bekreftes]. FAQ svarer ærlig på binding (minimum 3 måneder), tid og hva som skjer om man slutter.
6. Ett 3D-øyeblikk i én ramme (Lusion, RabenRifaie): forhåndsrendret loop av Kvadratisk-pilen i polarnatt, stillbilde som reserve, av ved redusert bevegelse. Ikke hele siden i 3D.
7. Norsk tone med punktum (Spoon): korte påstander, case-titler som forteller resultatet, tjenester gruppert etter verb (Tenk · Form · Bygg).

Alternativt signaturspor: «Nordnorsk kollisjon» (Heretic): gravyr og ekspedisjonsillustrasjon fra Ishavsbyen møter skarp digital produksjon, med mikrotekst med lune på norsk. Krever egne eller rettighetsklarerte illustrasjoner.

Anbefalt kombinasjon [vurdering]: 1 + 2 + 3 som grunnmur, 4 som fast detalj, 5 hvis prisene skal vises, og 6 eller Heretic-sporet som én signatur, ikke begge i første versjon.

Små grep som følger med [vurdering]: - Kunden velger etter problem: «Skal dere lansere noe nytt? → Merkevare + nettside» (Deux Huit Huit, monopo «CALL US IF …»). - Case-mal med kreditter: år, kunde, omfang, brief, nummererte bilder, leveranser, kreditter, neste case (Antinomy). - Få case er nok: ONTO er i toppklassen med seks case og to sider. NESTE kan lansere med 3–4 ekte case. - Samarbeidsformer i stedet for én tjenesteliste (Serious Business), f.eks. Nettside, Sprint og Drift. Navn og priser fra prislisten [bekreftes]. - Prosessen i nummererte steg med eksempler (Love and Money): «01 … 04», hvert steg med en «f.eks.»-linje. - Case-titler som mål med verb (Leeroy). Kun med ekte resultater [bekreftes per case]. - Bilder inne i overskriften (Jomor, Watson LA). - Roterende segl som fast «Book en prat»-knapp (Goodside), oransje strek-markør på lenker (Otherkind), «kopier e-post» med kvittering (Garden Eight), prisestimat i menyen (Grilled Pixels). - FAQ: «Hvorfor velge et lite studio?» (Brikken+Co).

9. Hva dette betyr for nestestudio.no [vurdering]

• Posisjon: NESTE er et lite design- og creative-tech-studio i Tromsø. Referansene som ligner mest i forretning er Bakken & Bæck (norsk design og teknologi), RabenRifaie (visuell strategi, web, merkevare, 3D), Jomor, Goodside og Datalands (små, personbårne). Teknologi og AI forklares gjennom hva kunden fikk, aldri som overskrift (R/GA, Phantom).
• Forsiden: personene og stedet først (retning 2 og 4), deretter matrisen (3), så 3–4 ekte case med titler som forteller hva som skjedde, og én tydelig CTA med samme ordlyd overalt.
• Signatur: ord-markøren og strekk-NESTE gir et grep ingen andre i utvalget har i native form. Det er billig å bygge, raskt og tilgjengelig.
• Typografi og farge: Instrument Serif-kursiv + Inter Tight på papirflate, oransje #C8501E som markering og pil. Unngå glødgradient på svart. Skill oss fra monopo på flate og serif, ikke på farge.
• Kvalitetsstandard: lang="nb", ekte tall i HTML, egen ::selection i oransje, og prefers-reduced-motion på alt som beveger seg. Det siste gjør oss bedre enn nesten alle referansene.
• Ærlighet: vis bare kunder og tall vi kan dokumentere. Klarsalg-piloten omtales uten å navngi kjeden. Konsepter merkes som konsepter.
• Pris: hvis pris vises, kommer tallene bare fra PRICE-SHEET, og bindingstiden (minimum 3 måneder) står tydelig.

10. Demoene vi bygde

Test på PC og mobil: https://neste-demo-92527a31.pages.dev/demo/ (intern testside, ikke indeksert). Markør-effektene krever mus; på mobil ser du resten.

• Motion-demo (demo/index.html, på nett motion.html): ord som markør + oransje pil, tre klikksoner i karusellen, strekk-NESTE i footer, oransje markering.
• Bevegelseslab (demo/lab.html): alle effektene hver for seg, inkludert Live fra Tromsø-klokka (§06, testet 7 av 7).
• Eksempel-case (demo/case.html): caseside i samme bevegelsesspråk. Innholdet er eksempel.

11. Åpne spørsmål til Joakim og Eskil [bekreftes]

1. Hvilke 2–3 retninger vil dere gå for?
2. Hva er Eskils rolle og tittel på siden?
3. Skal prisene stå på siden? (Tallene hentes bare fra prislisten.)
4. Skal vi vise «tar inn nye prosjekter i [måned]»? Bare hvis det stemmer hver måned.
5. Har vi portretter av dere to, eller må de tas?
6. Hvor så du markeringen i oransje som du koblet til R/GA? rga.com har vanlig blå markering i dag (sjekket to ganger).
7. Godtar dere ren svart tekst på oransje (#000 på #C8501E) og to mørkere oransje toner som tekstfarger (se KONTRAST-FORSLAG.md)?
8. Vil NESTE si offentlig at vi ikke gjør gratis pitcher (som Porto Rocha)?
9. Hvem i nettverket kan nevnes ved navn (foto, utvikling, 3D)?
10. Hvilke case og kunder kan vises, og med hvilke tall?
11. Hvor langt tilbyr vi 3D: ferdig renderte loops, eller også interaktiv 3D på nett?
12. Hvilket år skal stå som «etablert»?

Kildefiler: FINAL-RAPPORT.md, SYNTESE.md, TOPP30.pdf, KONTAKTARK.png, KONTAKTARK-UTVIDET.pdf, MOTION-SPEC.md, MOTION-BIBLIOTEK.md, POSISJONERING.md, notes/, notes/pass2/, notes/pass3/, demo/.