What We Do 02

Cream-editorial 'What We Do' section: mono meta garnish, oversized grotesque headline, intro, and 4 numbered offering rows.

Preview

(02) — WHAT WE DO

48°N / EST. 2014 / ©

We build the systems behind the brand.

A small studio working across strategy, identity and product. We take the long view — fewer clients, deeper work, and outcomes that outlast the launch.

01
Brand Strategy
Positioning, naming and narrative — the argument for why you exist, sharpened until it can carry every decision that follows.
02
Visual Identity
Logotypes, type systems and art direction built as a kit of parts — flexible enough to grow, disciplined enough to stay recognisable.
03
Digital Product
Websites and interfaces designed and shipped in-house, from first wireframe to production front-end — no handoff gaps, no diluted intent.
04
Editorial & Content
Photography, copy and layout produced as a house voice — a consistent point of view across the page, the deck and the feed.

Copy the code

paste-ready → Designer

<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="whatwedo_component">
  <div class="whatwedo_meta">
    <p class="whatwedo_metalabel">(02) — WHAT WE DO</p>
    <p class="whatwedo_metacoord">48°N / EST. 2014 / ©</p>
  </div>
  <div class="whatwedo_head">
    <h2 class="whatwedo_title">We build the systems behind the brand.</h2>
    <p class="whatwedo_intro">A small studio working across strategy, identity and product. We take the long view — fewer clients, deeper work, and outcomes that outlast the launch.</p>
  </div>
  <ul class="whatwedo_list">
    <li class="whatwedo_row">
      <p class="whatwedo_num">01</p>
      <h3 class="whatwedo_rowtitle">Brand Strategy</h3>
      <p class="whatwedo_rowtext">Positioning, naming and narrative — the argument for why you exist, sharpened until it can carry every decision that follows.</p>
    </li>
    <li class="whatwedo_row">
      <p class="whatwedo_num">02</p>
      <h3 class="whatwedo_rowtitle">Visual Identity</h3>
      <p class="whatwedo_rowtext">Logotypes, type systems and art direction built as a kit of parts — flexible enough to grow, disciplined enough to stay recognisable.</p>
    </li>
    <li class="whatwedo_row">
      <p class="whatwedo_num">03</p>
      <h3 class="whatwedo_rowtitle">Digital Product</h3>
      <p class="whatwedo_rowtext">Websites and interfaces designed and shipped in-house, from first wireframe to production front-end — no handoff gaps, no diluted intent.</p>
    </li>
    <li class="whatwedo_row">
      <p class="whatwedo_num">04</p>
      <h3 class="whatwedo_rowtitle">Editorial & Content</h3>
      <p class="whatwedo_rowtext">Photography, copy and layout produced as a house voice — a consistent point of view across the page, the deck and the feed.</p>
    </li>
  </ul>
</section>

<style>
.whatwedo_component {
  background:#f5f4f0;
  width:100%;
  box-sizing:border-box;
  padding:120px 6vw;
  color:#3a2c22;
  font-family:'Helvetica Neue',Arial,sans-serif;
}

.whatwedo_meta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid rgba(58,44,34,0.25);
  padding-bottom:16px;
  margin-bottom:64px;
}

.whatwedo_metalabel {
  font-family:'Courier New',monospace;
  font-size:12px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:#c0392b;
  margin:0;
}

.whatwedo_metacoord {
  font-family:'Courier New',monospace;
  font-size:12px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:#3a2c22;
  margin:0;
}

.whatwedo_head {
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:56px;
  align-items:end;
  margin-bottom:96px;
}

.whatwedo_title {
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:clamp(56px,9vw,132px);
  line-height:0.92;
  letter-spacing:-0.03em;
  font-weight:700;
  margin:0;
  color:#3a2c22;
}

.whatwedo_intro {
  font-size:18px;
  line-height:1.6;
  color:rgba(58,44,34,0.8);
  margin:0;
  max-width:420px;
}

.whatwedo_list {
  list-style:none;
  padding:0;
  margin:0;
  border-top:1px solid rgba(58,44,34,0.25);
}

.whatwedo_row {
  display:grid;
  grid-template-columns:100px 1.2fr 1.6fr;
  gap:24px;
  padding:40px 0;
  border-bottom:1px solid rgba(58,44,34,0.25);
  align-items:baseline;
}

.whatwedo_num {
  font-family:'Courier New',monospace;
  font-size:13px;
  color:#c0392b;
  letter-spacing:0.2em;
  margin:0;
}

.whatwedo_rowtitle {
  font-size:clamp(26px,3vw,38px);
  letter-spacing:-0.02em;
  font-weight:600;
  margin:0;
  color:#3a2c22;
  line-height:1.05;
}

.whatwedo_rowtext {
  font-size:16px;
  line-height:1.6;
  color:rgba(58,44,34,0.75);
  margin:0;
}
</style>

One email unlocks copying across the whole library — that's the only ask.

Want the whole site built for you?

Book a free call