← Work01 / 08 · Brand — Design — Build — Motion

Client
PACT Media & Sales AB
Year
2026
Role
Brand identity & logo, Web design (UX/UI), Front-end development, Film & motion, Deployment
Disciplines
Brand — Design — Build — Motion
Watch the film — 1:02
The amber PACT statement band from the launch film.

PACT Media connects advertisers with the audiences of some of Sweden’s strongest podcasts and channels. I rebuilt the brand around the one thing worth keeping, then designed and built everything else: the wordmark, the website in two languages, and the film that launches it.

Services
Wordmark, Colour & type system, Bilingual website (SV / EN), 62-second launch film
Location
Stockholm, Sweden

01 — The brief

It worked.

But it didn’t feel like PACT.

The old pactmedia.se was a WordPress theme: a stock-photo hero over a looping office video, five service categories illustrated with more stock photography, and a contact form. The channels PACT actually represents were a row of small logos below the fold.

It did its job. It just looked like a hundred other agencies, and it only spoke Swedish. The brief: make the brand as distinctive as the partnerships, without throwing away what people already recognised.

Then — five categories, five stock photos

Old service category card “eDR & Nyhetsbrev” over a stock photograph.
Old service category card “YouTube & Social” over a stock photograph.
Old service category card “Podcast” over a stock photograph.
Old service category card “Quiz & Gaming” over a stock photograph.
Old service category card “Branded Content” over a stock photograph.
The old site sold categories. The photography could have belonged to anyone.

02 — Identity

One thing survived the rebrand: the amber of the old logo’s triangle, which the old site also used on its buttons. #ED8C43 became the only accent in the new system. On near-black it measures 7.95:1 — strong enough to carry text, not just highlights. Around it: Void, Carbon and Bone, and two typefaces, Bebas Neue for display and Plus Jakarta Sans for everything else.

The wordmark is drawn, not typed. The A’s crossbar is a single swoosh that sweeps out of the letter and into the C, tying the name together in one stroke. Below, the old triangle opens into it: same name, new signature.

Now

Every text colour was checked against WCAG AA; the dimmest grey is the dimmest that still passes on both surfaces.

Bebas NeueDisplay

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ0123456789&

Your commercial media partner

Plus Jakarta SansText & interface

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ0123456789&

PACT is a commercial media partner with long experience of media, sales and business development.

Two families, one scale: twenty-three hand-tuned clamp() sizes consolidated into seven display tokens.

03 — The site

pactmedia.se
The old pactmedia.se above the fold: navy logo with an amber triangle A, a stock photo of two colleagues at a whiteboard, the headline “Nå rätt målgrupp med genuint & engagerande innehåll” and an amber “Kontakta oss” button.
The new PACT homepage above the fold: “PACT” in bone and “YOUR COMMERCIAL MEDIA PARTNER” in amber Bebas Neue on near-black, under a minimal header with the swoosh wordmark.
NowThen
Same URL, first screen. Drag to compare.

The homepage opens like a terminal: PACT, then “Your commercial media partner”, typed at uneven, human intervals. The typing is pure CSS — every character in the server-rendered HTML carries its own delay — so it starts on first paint, never waits for JavaScript, and appears finished for anyone who prefers reduced motion.

The five stock categories gave way to the real thing: Fotbollsmorgon, Kapitalet, Marknaden and Dobb TV, each with its own page, clips and case work.

pactmedia.se/en
The whole homepage, then and now. Scroll to run both.

Now — four real channels

Channel tile: Fotbollsmorgon — video, podcast, social media, live event.
Channel tile: Kapitalet — podcast, social media.
Channel tile: Marknaden — podcast, social media.
Channel tile: Dobb TV — video, podcast, social media, 4 shows.

Hover, frame by frame

Hover a channel and the arrow, title and rule light up in amber.

Frame 01/28

pactmedia.se/en/kanaler
Fotbollsmorgon’s channel page: the name in large Bebas Neue, format tags, a description, a clip, and case cards for Heineken 0.0, Bolist and Rexona.
Fig. 01Channel pages lead with the channel: formats, the pitch, a clip, and the partnerships built on it.

The line PACT uses in every pitch, as a full-bleed amber band — ported from the site’s StatementBand.

Mobile homepage hero: “PACT” and “YOUR COMMERCIAL MEDIA PARTNER” under the header.
Mobile menu open: Channels, For advertisers, Careers, About us, an SV / EN switch and an amber Contact button.
Mobile homepage scrolled to “Strong content. Engaged audiences.” with a swipeable row of channel tiles.
Just as sharp on mobile: the typing hero, the full-screen menu, the swipeable channel row.
pactmedia.se
The homepage hero in Swedish: “PACT — DIN KOMMERSIELLA MEDIEPARTNER”.
The homepage hero in English: “PACT — YOUR COMMERCIAL MEDIA PARTNER”.
ENSV
Swedish and English, one set of keys. Drag to switch.

04 — Engineering

Built on the Next.js App Router and prerendered in full, in both languages. Only three routes run on demand: the contact form, job applications and CSP reports.

  • Typed dictionaries.Swedish is the source of truth and English is typed against it, so a missing or extra key fails the build. Dictionary text never ships to the browser; the server sends only the active language.
  • Private by default.No cookies and no tracking until a visitor says yes. Fonts are self-hosted, the YouTube embed is click-to-load on youtube-nocookie.com, and analytics waits for consent, with “Decline” exactly as prominent as “Accept”.
  • Hardened headers.HSTS, a scoped Permissions-Policy and a Content-Security-Policy rolled out report-only first.
  • Accessible by construction.Every text colour audited against WCAG AA, one focus-ring utility on every interactive element, a skip link, and reduced-motion fallbacks.
  • No broken links.Every page of the old WordPress site redirects to its closest new home.

Stack

Framework
Next.js 16 · App Router
Language
TypeScript
Styling
Tailwind CSS v4 · design tokens
Motion
Framer Motion · CSS keyframes
i18n
Typed SV / EN dictionaries
Forms
Resend · Turnstile · Upstash
Hosting
Netlify
The site

  1. Typed dictionaries

    SV source of truth · EN typed against it

  2. Static prerender

    RSC · both locales

  3. Netlify

    CDN + 3 API routes

2
Languages, prerendered
0
Cookies before consent
3
Server routes
AA
Contrast on every text colour

05 — The film

English cut. Sound on.

Read the film ↓
  1. pactmedia.se is typed into an address bar. The old WordPress site loads: a stock-photo hero, the headline “Nå rätt målgrupp med genuint & engagerande innehåll”, an amber “Kontakta oss” button.
  2. The old page scrolls. “This was pactmedia.se.” “It worked.” “But it didn’t feel like PACT.”
  3. A cursor deletes the headline letter by letter. The page drains of colour, except the amber button. The camera pushes in and amber floods the frame: “Same colour.” The amber collapses into a cursor.
  4. On black, the cursor types “PACT” and, in amber, “Your commercial media partner”. The camera pulls back into a browser.
  5. The new homepage scrolls with its fade-ins, and a channel tile lights up. “Sharper. Clearer. More PACT.”
  6. Five stock-photo cards flip into four channels — Fotbollsmorgon, Kapitalet, Marknaden and Dobb TV — whose clips come alive. “Handpicked channels.”
  7. Case films play, stat icons draw and numbers count up. “Partnerships that get noticed.”
  8. Full-screen amber: “The right content. The right audience. The right context.” slams in one line at a time.
  9. Three phones: the typing hero, the open menu, a scrolling page. “Just as sharp on mobile.”
  10. “In English.” A cursor clicks SV and the tagline retypes as “Din kommersiella mediepartner”. “På svenska.”
  11. The old and new heroes share one browser, and an amber line sweeps old into new. “From template to brand.”
  12. The old logo on a white card. The letters slide away, the triangle opens into the amber A and swoosh, and P, C and T grow out in bone. “Same name. New signature.”
  13. End card: the wordmark, “Your commercial media partner”, an amber rule, “pactmedia.se”, and “by” with Selim’s signature. Fade to black.

To launch the site I made a film about the change itself. The old pactmedia.se loads, scrolls and drains of colour; the amber floods the frame; the new site types itself in; the old logo opens into the new one.

Apart from one CSS hover, nothing in it is a screen recording. The site’s own motion — easing curves, fade-ins, counters, typing intervals — is replayed from its source values in a single GSAP timeline, which headless Chrome renders frame by frame into ffmpeg. The music and sound effects are synthesised in Python from cue points the timeline writes; the mix is normalised to −14 LUFS. Two cuts: Swedish for PACT’s launch, English for this page.

The film pipeline

  1. Capture

    Playwright · old + new site

  2. One GSAP timeline

    the site’s own timings

  3. Headless Chrome

    frame by frame

  4. Python synth

    music + SFX from cues

  5. ffmpeg

    H.264 · 60 fps

  6. Loudnorm + mux

    −14 LUFS

62 s
Runtime
60 fps
Frame rate
3,720
Frames, rendered one by one
−14
LUFS, loudness-normalised
Film frame: amber fills the screen behind “SAME COLOUR.” in black.
Film frame: four channel tiles under “HANDPICKED CHANNELS.”
Film frame: the new PACT wordmark with an amber A over “SAME NAME. NEW SIGNATURE.”

Credits

Brand identity & logo
Selim Yaylali
Web design (UX/UI)
Selim Yaylali
Front-end development
Selim Yaylali
Film & motion
Selim Yaylali
Deployment
Selim Yaylali
Client
PACT Media & Sales AB, Stockholm
By

Like what you see? — work@selimyaylali.com

(Next) 02 / 08

BadgeForce