Cactuslab · Work · First Light Farms

<!doctype html>  <html lang="en" class="js--html"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileImage" content="/static/img/favicon/ms-icon-144x144.2d537cba.png"> <meta name="theme-color" content="#ffffff"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@cactuslab"> <meta name="twitter:title" content="Cactuslab: First Light Farms"> <meta name="twitter:description" content="Big layouts, bold typography and delicious food photography bring First Light’s new brand and story to life on the web."> <meta name="twitter:image" content="https://cactuslab.com/assets/resized/sm/upload/k8/j8/11/tr/flf-recipes-crop-0-500-0-0.jpg?k=757a2eb7c7"> <meta property="og:url" content="https://cactuslab.com/work/first-light-farms/"> <meta property="og:type" content="article"> <meta property="og:title" content="Project details for First Light Farms at Cactuslab"> <meta property="og:description" content="Big layouts, bold typography and delicious food photography bring First Light’s new brand and story to life on the web."> <meta property="og:image" content="https://cactuslab.com/assets/resized/sm/upload/k8/j8/11/tr/flf-recipes-crop-0-500-0-0.jpg?k=757a2eb7c7"> <meta property="og:image:width" content="500"> <meta property="og:image:height" content="641"> <meta property="fb:app_id" content="654000414758342"> <title> Cactuslab · Work · First Light Farms </title> <link rel="stylesheet" href="/static/css/main.min.9fa619f9.css" type="text/css" media="all"> <link rel="apple-touch-icon" sizes="57x57" href="/static/img/favicon/apple-icon-57x57.f5d574c5.png"> <link rel="apple-touch-icon" sizes="60x60" href="/static/img/favicon/apple-icon-60x60.8aa9891b.png"> <link rel="apple-touch-icon" sizes="72x72" href="/static/img/favicon/apple-icon-72x72.f8a44f32.png"> <link rel="apple-touch-icon" sizes="76x76" href="/static/img/favicon/apple-icon-76x76.8b365de5.png"> <link rel="apple-touch-icon" sizes="114x114" href="/static/img/favicon/apple-icon-114x114.27bae8dc.png"> <link rel="apple-touch-icon" sizes="120x120" href="/static/img/favicon/apple-icon-120x120.5d2efb29.png"> <link rel="apple-touch-icon" sizes="144x144" href="/static/img/favicon/apple-icon-144x144.2d537cba.png"> <link rel="apple-touch-icon" sizes="152x152" href="/static/img/favicon/apple-icon-152x152.ec29f70b.png"> <link rel="apple-touch-icon" sizes="180x180" href="/static/img/favicon/apple-icon-180x180.83b0e344.png"> <link rel="icon" type="image/png" sizes="192x192" href="/static/img/favicon/android-icon-192x192.fdddf555.png"> <link rel="icon" type="image/png" sizes="32x32" href="/static/img/favicon/favicon-32x32.08b5775d.png"> <link rel="icon" type="image/png" sizes="96x96" href="/static/img/favicon/favicon-96x96.d4326dad.png"> <link rel="icon" type="image/png" href="/static/img/favicon/favicon-32x32.08b5775d.png"> <link rel="manifest" href="/static/img/favicon/manifest.1caa16a2.json"> <script type="text/javascript" src="/static/js/main.min.ecc35a3c.js"></script> </head> <body class="js--body -is-not-scrolled"> <div id="wrapper" class="js--wrapper"> <style> .site-logo { color: #337755; } .external-link { color: #337755; } .external-link:hover, .external-link:focus { border-color: #337755; } .project-media .mediaitem { background-color: #337755; } .project-media .deviceset { color: #222222; } </style> <div class="context js--context"> <header class="site-header js--site-header"> <div class="scrollbar-offset js--scrollbar-offset -is-fixed"> <div class="constraint js--constraint"> <a class="site-logo js--site-logo" href="/"> <span class="_sr-only">Cactuslab · </span> <svg class="glyph" xmlns="http://www.w3.org/2000/svg" width="36" height="50" viewBox="0 0 36 50" preserveAspectRatio="xMaxYMid meet"> <title>Cactuslab Glyph Logo</title> <g fill="none" fill-rule="evenodd" transform="translate(6 5)"> <circle class="bubble js--bubble" cx="16" cy="38" r="3"/> <circle class="bubble js--bubble" cx="6" cy="28" r="6"/> <circle class="bubble js--bubble" cx="16" cy="9" r="9"/> </g> </svg> <svg class="wordmark" xmlns="http://www.w3.org/2000/svg" width="123" height="25" viewBox="0 0 123 25" preserveAspectRatio="xMinYMid meet"> <title>Cactuslab Wordmark Logo</title> <g fill-rule="evenodd" stroke-width="0"> <path d="M16.14 4.01c-.987-.707-1.393-.943-2.264-1.238-1.16-.472-2.38-.65-3.658-.65C4.645 2.122.406 6.488.406 12.21c0 6.015 4.18 10.32 10.044 10.32.93 0 1.684-.06 2.67-.295.988-.236 1.452-.412 2.613-.943l-.638-2.005c-1.568.648-2.845.943-4.47.943-4.587 0-7.548-3.243-7.548-8.197 0-4.48 2.96-7.725 7.083-7.725 1.858 0 3.31.472 4.76 1.474l1.22-1.77zm9.36 14.744c-1.916 1.415-2.612 1.71-3.6 1.71-1.103 0-1.8-.708-1.8-1.77 0-.53.06-.825.407-1.473l4.993-1.29v2.83zm3.367 1.887c-.696-.11-1.045-.35-1.103-.7v-8.32c0-2.06-1.683-3.36-4.354-3.36-2.845 0-4.82 1.24-4.82 3.01 0 .3 0 .47.234.83l2.264-.47c-.116-.23-.116-.35-.116-.53 0-.76.638-1.18 2.032-1.18 1.683 0 2.554.59 2.554 1.65v2.42l-4.644 1.12c-1.974.47-2.96 1.77-2.96 3.78 0 2.127 1.392 3.54 3.598 3.54.93 0 2.032-.292 2.845-.763.464-.235.755-.47 1.393-1.06.117 1.296.755 1.77 2.613 1.886l.464-1.83zM42 21.06l-1.16-1.77c-1.103.826-1.916 1.12-3.193 1.12-2.845 0-4.644-1.945-4.644-5.012 0-3.007 1.8-5.13 4.47-5.13 1.22 0 1.974.294 3.02 1.18l1.276-1.83c-.93-.648-1.34-.884-2.21-1.12-.64-.177-1.28-.236-1.98-.236-4.13 0-6.97 3.007-6.97 7.253 0 4.13 2.78 6.96 6.85 6.96 1.33 0 2.61-.295 3.71-.943.11-.06.4-.237.81-.473zm10-.236l-.93-1.474c-.928.707-1.392.943-1.915.943-.464 0-.754-.236-.754-.65-.05-.116-.05-.41-.05-.824l-.06-.59v-7.67h3.54V8.67h-3.54V4.717h-2.21v3.95l-2.26.59v1.298h2.27v8.906c0 1.77 1.04 3.01 2.55 3.01 1.05 0 1.8-.35 3.37-1.65zm13.83 1.297V8.61h-2.263v8.257c-1.51 2.123-3.658 3.656-5.05 3.656-1.104 0-1.57-.708-1.57-2.36V8.61h-2.205v10.144c0 2.477 1.22 3.774 3.54 3.774 2.033 0 3.775-1.06 5.343-3.184v2.83h2.206v-.06zm12.496-3.48c0-2.12-.813-3.06-3.6-4.24-2.438-1-2.786-1.24-3.31-1.77-.23-.23-.347-.53-.347-.82 0-1 .98-1.71 2.49-1.71.52 0 .98.06 1.56.24.69.18 1.04.36 1.91.89l1.1-1.83c-1.108-.65-1.63-.822-2.618-1-.58-.06-1.16-.116-1.685-.116-3.13 0-5.05 1.47-5.05 3.83 0 1.65.87 2.537 3.485 3.657 2.38 1 3.02 1.355 3.544 2.12.174.177.29.59.29.944 0 1.06-.987 1.77-2.38 1.77-.93 0-2.148-.3-3.077-.77-.236-.12-.58-.294-.99-.53l-.93 1.887c1.336.707 1.86.88 3.136 1.12.7.118 1.28.177 1.86.177 2.845 0 4.587-1.415 4.587-3.833z"/> <path d="M81.836.413h2.206v21.703h-2.206z"/> <path d="M94.62 18.754c-1.915 1.415-2.61 1.71-3.598 1.71-1.103 0-1.8-.708-1.8-1.77 0-.53.058-.825.406-1.473l4.993-1.29v2.83zm3.31 1.887c-.696-.11-1.044-.35-1.103-.7v-8.32c0-2.06-1.683-3.36-4.354-3.36-2.845 0-4.82 1.24-4.82 3.01 0 .3 0 .47.234.83l2.264-.47c-.05-.23-.11-.35-.11-.53 0-.76.64-1.18 2.03-1.18 1.69 0 2.56.59 2.56 1.65v2.42l-4.65 1.11c-1.97.47-2.96 1.77-2.96 3.78 0 2.127 1.39 3.54 3.6 3.54.93 0 2.03-.293 2.85-.764.467-.236.757-.472 1.396-1.062.116 1.298.754 1.77 2.61 1.888l.466-1.83zm11.973-5.77c0 2.24-.522 3.54-1.974 4.54-.64.47-1.34.77-2.15.95-.41.06-.76.12-1.16.12-.82 0-1.34-.11-1.92-.41v-8.61c1.1-.76 2.09-1.06 3.31-1.06 2.44 0 3.89 1.65 3.89 4.49zm2.44-.12c0-3.89-2.265-6.49-5.633-6.49-.813 0-1.8.12-2.496.3-.523.18-.813.3-1.51.65V.42h-2.206v21.29c.64.29.87.41 1.335.47.697.18 1.916.292 2.67.292 4.762 0 7.84-3.01 7.84-7.728z"/> </g> </svg> </a> <nav class="site-nav"> <ul class="navlist"> <li class="navitem"><a class="label" href="/about/">About</a></li> <li class="navitem active"><a class="label" href="/work/">Work</a></li> <li class="navitem"><a class="label" href="/ventures/">Ventures</a></li> </ul> </nav> </div> </div> </header> <article class="site-content context-transition -fade-in js--context-transition"> <div class="constraint page-layout -has-no-aside"> <div class="page-body"> <header class="page-section project-information"> <div class="header"> <h1 class="title">First Light Farms</h1> </div> <div class="body"> <div class="rich-text"> <p>We worked with content strategists <a href="https://www.calibrate.co.nz" target="_blank">Calibrate</a> and the team at First Light to bring its new brand to life on the web. Our brief was to focus on big layouts, bold typography and delicious food photography, and to translate the brand and the stories surrounding its farmers and produce successfully to both desktop and mobile devices. BRB firing up the BBQ.</p> </div> <p><a class="external-link" target="_blank" href="http://firstlight.farm">Visit site</a></p> </div> </header> <section class="page-section project-media"> <figure class="mediaitem -has-border -has-no-fade-top -has-no-fade-bottom"> <img data-aspect-ratio="1.42" src="/assets/resized/sm/upload/ns/y3/9l/n4/flf-home-0-1100-0-0.jpg?k=40c44b0850" srcset="/assets/resized/sm/upload/ns/y3/9l/n4/flf-home-0-2200-0-3124-crop-1.jpg?k=86ce8fc4ac 2x" alt="Detail image for First Light Farms" /> </figure> <figure class="mediaitem -has-border -has-no-fade-top -has-fade-bottom"> <img data-aspect-ratio="1.2818181818181817" src="/assets/resized/sm/upload/oj/oq/gs/b2/flf-recipes-crop-0-1100-0-0.jpg?k=c15d08283d" srcset="/assets/resized/sm/upload/oj/oq/gs/b2/flf-recipes-crop-0-2200-0-2820-crop-1.jpg?k=55e3203476 2x" alt="Detail image for First Light Farms" /> </figure> <figure class="mediaitem -has-border -has-no-fade-top -has-fade-bottom"> <img data-aspect-ratio="0.9581818181818181" src="/assets/resized/sm/upload/pm/d6/zo/i3/flf-pie-crop-0-1100-0-0.jpg?k=06129fae33" srcset="/assets/resized/sm/upload/pm/d6/zo/i3/flf-pie-crop-0-2200-0-2106-crop-1.jpg?k=ed0711989a 2x" alt="Detail image for First Light Farms" /> </figure> <figure class="mediaitem -has-no-border -has-no-fade-top -has-no-fade-bottom"> <img data-aspect-ratio="0.8272727272727273" src="/assets/resized/sm/upload/a7/ii/7t/bl/flf-marble-0-1100-0-0.jpg?k=bdee8217e8" srcset="/assets/resized/sm/upload/a7/ii/7t/bl/flf-marble-0-2200-0-1818-crop-1.jpg?k=33c257ff38 2x" alt="Detail image for First Light Farms" /> </figure> <figure class="mediaitem -has-border -has-no-fade-top -has-fade-bottom"> <img data-aspect-ratio="1.0" src="/assets/resized/sm/upload/ee/q3/uf/lb/flf-team-crop-0-1100-0-0.jpg?k=6fcf6f1437" srcset="/assets/resized/sm/upload/ee/q3/uf/lb/flf-team-crop-0-2200-0-2200-crop-1.jpg?k=089cac44c0 2x" alt="Detail image for First Light Farms" /> </figure> <figure class="mediaitem -has-border -has-no-fade-top -has-fade-bottom"> <img data-aspect-ratio="0.8727272727272727" src="/assets/resized/sm/upload/jy/jd/4o/dj/flf-farm-crop-0-1100-0-0.jpg?k=ad3230e9a3" srcset="/assets/resized/sm/upload/jy/jd/4o/dj/flf-farm-crop-0-2200-0-1920-crop-1.jpg?k=34d58f622a 2x" alt="Detail image for First Light Farms" /> </figure> <figure class="mediaitem deviceset -is-double"> <div class="device js--device -phone -portrait" data-device-type="phone"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.7786666666666666" src="/assets/resized/sm/upload/89/vj/y1/18/IMG_7155-0-850-0-0.jpg?k=ad3230e9a3" alt="Detail image for" /> </div> </div> </div> </div> <div class="device js--device -phone -portrait" data-device-type="phone"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.7786666666666666" src="/assets/resized/sm/upload/0n/36/un/xn/IMG_7154-0-850-0-0.jpg?k=ad3230e9a3" alt="Detail image for" /> </div> </div> </div> </div> </figure> <figure class="mediaitem deviceset -is-double"> <div class="device js--device -phone -portrait" data-device-type="phone"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.7786666666666666" src="/assets/resized/sm/upload/zf/l6/te/r8/IMG_7150-0-850-0-0.jpg?k=ad3230e9a3" alt="Detail image for" /> </div> </div> </div> </div> <div class="device js--device -phone -portrait" data-device-type="phone"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.7786666666666666" src="/assets/resized/sm/upload/8z/co/wa/7q/IMG_7153-0-850-0-0.jpg?k=ad3230e9a3" alt="Detail image for" /> </div> </div> </div> </div> </figure> <figure class="mediaitem deviceset -is-double"> <div class="device js--device -phone -portrait" data-device-type="phone"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.7786666666666666" src="/assets/resized/sm/upload/ww/yp/0j/cm/IMG_7152-0-850-0-0.jpg?k=ad3230e9a3" alt="Detail image for" /> </div> </div> </div> </div> <div class="device js--device -phone -portrait" data-device-type="phone"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.7786666666666666" src="/assets/resized/sm/upload/f9/l7/fe/98/IMG_7151-0-850-0-0.jpg?k=ad3230e9a3" alt="Detail image for" /> </div> </div> </div> </div> </figure> </section> <section class="page-section projects-more-of-type"> <h3 class="moreoftypetitle">More Web work</h3> <div class="project-list"> <article class="project" data-text-color="dark"> <div class="proportions" style="background-color:#EECC22"> <a class="repositioning" href="/work/dictionary-stories/"> <h3 class="name">Dictionary Stories</h3> <div class="device js--device -desktop -landscape" data-device-type="desktop"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.4113636363636364" src="/assets/resized/sm/upload/vg/wr/hg/hh/ds-book-0-440-0-0.jpg?k=6dccab785b" srcset="/assets/resized/sm/upload/vg/wr/hg/hh/ds-book-0-880-0-1242-crop-1.jpg?k=5f8d4116bd 2x" alt="Image for Dictionary Stories" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="light"> <div class="proportions" style="background-color:#F9680E"> <a class="repositioning" href="/work/matariki-festival/"> <h3 class="name">Matariki Festival</h3> <div class="device js--device -desktop -landscape" data-device-type="desktop"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.5" src="/assets/resized/resized/sm/upload/fn/il/a1/qe/mf-cropped-0-440-0-0-0-0-0-660-crop-1.jpg?k=ccd6d86d74" srcset="/assets/resized/resized/sm/upload/fn/il/a1/qe/mf-cropped-0-880-0-2016-crop-1-0-0-0-1320-crop-1.jpg?k=cf9b8af5d8 2x" alt="Image for Matariki Festival" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="light"> <div class="proportions" style="background-color:#2F46AB"> <a class="repositioning" href="/work/webstock/"> <h3 class="name">Webstock</h3> <div class="device js--device -desktop -landscape" data-device-type="desktop"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.5" src="/assets/resized/resized/sm/upload/2c/sw/ir/cq/ws-home-orange-0-440-0-0-0-0-0-660-crop-1.jpg?k=801f9f047d" srcset="/assets/resized/resized/sm/upload/2c/sw/ir/cq/ws-home-orange-0-880-0-1712-crop-1-0-0-0-1320-crop-1.jpg?k=8e2c7a42b8 2x" alt="Image for Webstock" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="light"> <div class="proportions" style="background-color:#8060D0"> <a class="repositioning" href="/work/the-good-in-movies/"> <h3 class="name">The Good In Movies</h3> <div class="device js--device -desktop -landscape" data-device-type="desktop"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.356818181818182" src="/assets/resized/sm/upload/h1/yv/xp/94/tgim-home-1600-2x-crop-0-440-0-0.jpg?k=94cc44edad" srcset="/assets/resized/sm/upload/h1/yv/xp/94/tgim-home-1600-2x-crop-0-880-0-1194-crop-1.jpg?k=559129389b 2x" alt="Image for The Good In Movies" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="light"> <div class="proportions" style="background-color:#3D81AE"> <a class="repositioning" href="/work/healthpoint/"> <h3 class="name">Healthpoint</h3> <div class="device js--device -desktop -landscape" data-device-type="desktop"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="1.2363636363636363" src="/assets/resized/sm/upload/g4/xg/kh/1k/hp1-0-440-0-0.jpg?k=c41eae1ea7" srcset="/assets/resized/sm/upload/g4/xg/kh/1k/hp1-0-880-0-1088-crop-1.jpg?k=ece9f43bff 2x" alt="Image for Healthpoint" /> </div> </div> </div> </div> </a> </div> </article> <article class="project" data-text-color="dark"> <div class="proportions" style="background-color:#A0A8B0"> <a class="repositioning" href="/work/back-of-a-napkin/"> <h3 class="name">Back of a Napkin</h3> <div class="device js--device -desktop -landscape" data-device-type="desktop"> <div class="bezel js--bezel"> <div class="ratio js--ratio"> <div class="mask"> <img data-aspect-ratio="0.875" src="/assets/resized/sm/upload/z9/0v/n1/ah/napkin-0-440-0-0.jpg?k=afe89655ce" srcset="/assets/resized/sm/upload/z9/0v/n1/ah/napkin-0-880-0-770-crop-1.jpg?k=8602cd4578 2x" alt="Image for Back of a Napkin" /> </div> </div> </div> </div> </a> </div> </article> </div> <a class="moreoftypetitle -allworklink" href="/work/">All<span class="extendedtext"> work</span></a></h3> </section> </div> </div> </article> <div class="adjacent-project-navigation"> <a class="arrow -previous" href="/work/jane-goodall-institute/" data-target="-1"> <img src="/static/img/assets/arrow.3dd72681.svg"> </a> <a class="arrow -next" href="/work/dictionary-stories/" data-target="1"> <img src="/static/img/assets/arrow.3dd72681.svg"> </a> </div> <footer class="site-footer"> <div class="constraint"> <div class="copyright">© Cactuslab, est. 2001 <a class="backtotop js--backtotop -is-hidden">↑</a> </div> </div> </footer> </div> </div> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-748523-1', 'auto'); ga('send', 'pageview'); </script> </body> </html>

CINXE.COM

Cactuslab · Work · First Light Farms