<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Pirate Agency — Independent Creative Studio</title> <meta name="description" content="Pirate Agency is an independent creative studio building brands, identities and digital experiences that refuse to sink." /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,800;0,900;1,500&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="styles.css" /> </head> <body> <div class="progress"></div> <div class="cursor"><span class="cursor__ring"></span><span class="cursor__dot"></span></div> <div class="preloader"> <span class="preloader__name">PIRATE<span class="mark" style="color:var(--accent)">✦</span>AGENCY</span> <span class="preloader__count">000</span> </div> <nav class="nav"> <a href="index.html" class="nav__logo">PIRATE<span class="mark">✦</span>AGENCY</a> <div class="nav__links"> <a class="nav__link is-active" href="index.html">Index</a> <a class="nav__link" href="work.html">Work</a> <a class="nav__link" href="agency.html">Agency</a> <a class="nav__link" href="careers.html">Careers</a> <a class="nav__link" href="store.html">Store</a> </div> </nav> <header class="hero container"> <span class="eyebrow" data-reveal>Independent creative studio — Est. 2014</span> <h1 class="hero__title mt-2"> <span class="row"><span>We build brands</span></span> <span class="row"><span>that refuse to</span></span> <span class="row"><span><em>sink.</em></span></span> </h1> <div class="hero__foot"> <p class="lead">A crew of strategists, designers and engineers charting ambitious companies into open water — through identity, product and story.</p> <span class="hero__scroll">↓ Scroll to explore</span> </div> </header> <div class="marquee"> <div class="marquee__track"> <span>Brand Strategy</span><span>Visual Identity</span><span>Web Design</span><span>Motion</span><span>Art Direction</span><span>Product</span> <span>Brand Strategy</span><span>Visual Identity</span><span>Web Design</span><span>Motion</span><span>Art Direction</span><span>Product</span> </div> </div> <section class="section container"> <div class="grid cols-2"> <span class="eyebrow" data-reveal>What we do</span> <div> <p class="display" style="font-size:clamp(1.8rem,4vw,3.2rem)" data-reveal> We chart the route from a blank map to a brand the world can't ignore — and ship every mile of the journey. </p> <p class="lead mt-3" data-reveal>No off-the-shelf templates, no borrowed compasses. Every engagement starts from your raw ambition and ends with work built to last past the next tide.</p> <a href="agency.html" class="btn magnetic mt-3" data-reveal>More about the crew <span class="arrow">→</span></a> </div> </div> </section> <section class="section--tight container"> <div class="flex-between" style="margin-bottom:2.5rem"> <span class="eyebrow" data-reveal>Selected work</span> <a href="work.html" class="nav__link">All projects →</a> </div> <div class="work"> <a class="work__item" href="work.html" data-reveal><span class="work__index">01</span><span class="work__title">Saltwater Coffee</span><span class="work__tags">Brand · Packaging</span></a> <a class="work__item" href="work.html" data-reveal><span class="work__index">02</span><span class="work__title">Northwind Bank</span><span class="work__tags">Identity · Product</span></a> <a class="work__item" href="work.html" data-reveal><span class="work__index">03</span><span class="work__title">Harbor & Co.</span><span class="work__tags">Web · Motion</span></a> <a class="work__item" href="work.html" data-reveal><span class="work__index">04</span><span class="work__title">Compass Outdoors</span><span class="work__tags">Strategy · Campaign</span></a> <a class="work__item" href="work.html" data-reveal><span class="work__index">05</span><span class="work__title">Meridian Studios</span><span class="work__tags">Identity · Web</span></a> </div> </section> <section class="section container"> <span class="eyebrow" data-reveal>Capabilities</span> <div class="grid cols-2 mt-3"> <div class="tile" data-reveal><span class="tile__num">01</span><h3>Strategy</h3><p>Positioning, naming and narrative that give your brand a heading before a single pixel is drawn.</p></div> <div class="tile" data-reveal><span class="tile__num">02</span><h3>Identity</h3><p>Logos, type, colour and the whole flag — design systems that fly the same in any port.</p></div> <div class="tile" data-reveal><span class="tile__num">03</span><h3>Digital</h3><p>Sites, products and stores engineered for speed, motion and the kind of detail people screenshot.</p></div> <div class="tile" data-reveal><span class="tile__num">04</span><h3>Motion</h3><p>Title sequences, product film and social — story told in frames that move as well as they look.</p></div> </div> </section> <section class="section--tight container"> <div class="grid" style="grid-template-columns:repeat(4,1fr);gap:2rem"> <div class="stat" data-reveal><b>11</b><span>Years afloat</span></div> <div class="stat" data-reveal><b>240+</b><span>Projects shipped</span></div> <div class="stat" data-reveal><b>18</b><span>Awards won</span></div> <div class="stat" data-reveal><b>32</b><span>Crew aboard</span></div> </div> </section> <section class="section container cta"> <span class="eyebrow" style="justify-content:center" data-reveal>Start a project</span> <h2 class="cta__title mt-2" data-reveal>Let's set <em>sail.</em></h2> <a href="mailto:ahoy@pirate.agency" class="btn btn--solid magnetic mt-3" data-reveal>ahoy@pirate.agency <span class="arrow">→</span></a> </section> <footer class="footer"> <div class="footer__big">PIRATE<span class="mark">✦</span>AGENCY</div> <div class="footer__grid"> <div class="footer__col"> <h4>Studio</h4> <a href="agency.html">Agency</a><a href="work.html">Work</a><a href="careers.html">Careers</a><a href="store.html">Store</a> </div> <div class="footer__col"> <h4>Social</h4> <a href="#">Instagram</a><a href="#">Behance</a><a href="#">LinkedIn</a><a href="#">Read.cv</a> </div> <div class="footer__col"> <h4>Contact</h4> <a href="mailto:ahoy@pirate.agency">ahoy@pirate.agency</a><a href="careers.html">careers@pirate.agency</a><a href="#">+1 902 000 0000</a> </div> </div> <div class="footer__legal"> <span>© <span data-year>2026</span> Pirate Agency — Charted in open water</span> <span>Privacy · Terms</span> </div> </footer> <script src="app.js"></script> </body> </html>

Code & assets

Design System