Pricing 02

Deck-editorial pricing section: three tier cards with huge grotesque numerals, red accent, sharp corners and heavy meta garnish.

Preview

(02) — PRICING / PLANS

not the logo.

51°N — EST. 2019 — © STUDIO

Sprint

PAGE 01

4.5k

per two-week sprint, billed upfront

01 — One dedicated designer
02 — Async updates, no calls
03 — Figma source files
04 — 48-hour turnaround

Book a sprint →

Retainer

Most picked

12k

per month, pause or cancel anytime

01 — Everything in Sprint
02 — Two-person pod
03 — Weekly strategy call
04 — Unlimited requests, one active
05 — Slack channel, same-day

Start this month →

Partner

PAGE 03

talk.

custom scope, quarterly commitment

01 — Everything in Retainer
02 — Embedded design team
03 — Roadmap & design ops
04 — Named creative director

Request a scope →

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="pricing_component">
  <div class="pricing_header">
    <div class="pricing_headwrap">
      <p class="pricing_kicker">(02) — PRICING / PLANS</p>
      <h2 class="pricing_title">
        <span class="pricing_title_accent"> not the logo.</span>
      </h2>
    </div>
    <p class="pricing_meta">51°N — EST. 2019 — © STUDIO</p>
  </div>
  <div class="pricing_grid">
    <div class="pricing_card">
      <div class="pricing_cardhead">
        <h3 class="pricing_plan">Sprint</h3>
        <p class="pricing_index">PAGE 01</p>
      </div>
      <div class="pricing_pricerow">
        <p class="pricing_currency">$</p>
        <p class="pricing_amount">4.5k</p>
      </div>
      <p class="pricing_billing">per two-week sprint, billed upfront</p>
      <ul class="pricing_features">
        <li class="pricing_feature">01 — One dedicated designer</li>
        <li class="pricing_feature">02 — Async updates, no calls</li>
        <li class="pricing_feature">03 — Figma source files</li>
        <li class="pricing_feature">04 — 48-hour turnaround</li>
      </ul>
      <a class="pricing_cta" href="#sprint">Book a sprint →</a>
    </div>
    <div class="pricing_card_feat">
      <div class="pricing_cardhead_feat">
        <h3 class="pricing_plan_feat">Retainer</h3>
        <p class="pricing_badge">Most picked</p>
      </div>
      <div class="pricing_pricerow_feat">
        <p class="pricing_currency_feat">$</p>
        <p class="pricing_amount_feat">12k</p>
      </div>
      <p class="pricing_billing_feat">per month, pause or cancel anytime</p>
      <ul class="pricing_features_feat">
        <li class="pricing_feature_feat">01 — Everything in Sprint</li>
        <li class="pricing_feature_feat">02 — Two-person pod</li>
        <li class="pricing_feature_feat">03 — Weekly strategy call</li>
        <li class="pricing_feature_feat">04 — Unlimited requests, one active</li>
        <li class="pricing_feature_feat">05 — Slack channel, same-day</li>
      </ul>
      <a class="pricing_cta_feat" href="#retainer">Start this month →</a>
    </div>
    <div class="pricing_card">
      <div class="pricing_cardhead">
        <h3 class="pricing_plan">Partner</h3>
        <p class="pricing_index">PAGE 03</p>
      </div>
      <div class="pricing_pricerow">
        <p class="pricing_amount">
          <span class="pricing_amount_accent"> talk.</span>
        </p>
      </div>
      <p class="pricing_billing">custom scope, quarterly commitment</p>
      <ul class="pricing_features">
        <li class="pricing_feature">01 — Everything in Retainer</li>
        <li class="pricing_feature">02 — Embedded design team</li>
        <li class="pricing_feature">03 — Roadmap & design ops</li>
        <li class="pricing_feature">04 — Named creative director</li>
      </ul>
      <a class="pricing_cta" href="#partner">Request a scope →</a>
    </div>
  </div>
</section>

<style>
.pricing_component {
  background:#141414;
  color:#eae8e4;
  padding:120px 6vw;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  box-sizing:border-box;
  overflow:hidden;
}

.pricing_header {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  border-bottom:1px solid #333;
  padding-bottom:28px;
  margin-bottom:64px;
  flex-wrap:wrap;
  gap:24px;
}

.pricing_headwrap {
  max-width:640px;
}

.pricing_kicker {
  font-size:12px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:#e63b2e;
  margin:0 0 20px;
  font-weight:500;
}

.pricing_title {
  font-size:clamp(40px,6vw,84px);
  line-height:0.95;
  font-weight:700;
  letter-spacing:-0.03em;
  margin:0;
  color:#eae8e4;
}

.pricing_title_accent {
  color:#e63b2e;
  font-style:italic;
}

.pricing_meta {
  font-size:12px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:#8a8a8a;
  text-align:right;
  margin:0;
}

.pricing_grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:2px;
  background:#333;
}

.pricing_card {
  background:#141414;
  padding:40px;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
}

.pricing_cardhead {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:36px;
}

.pricing_plan {
  font-size:18px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin:0;
  color:#eae8e4;
}

.pricing_index {
  font-size:11px;
  letter-spacing:0.24em;
  color:#8a8a8a;
  margin:0;
}

.pricing_pricerow {
  display:flex;
  align-items:baseline;
  gap:6px;
  margin-bottom:8px;
}

.pricing_currency {
  font-size:28px;
  font-weight:500;
  color:#8a8a8a;
  margin:0;
}

.pricing_amount {
  font-size:clamp(64px,7vw,96px);
  font-weight:700;
  line-height:0.85;
  letter-spacing:-0.04em;
  margin:0;
  color:#eae8e4;
}

.pricing_billing {
  font-size:13px;
  color:#8a8a8a;
  margin:0 0 32px;
}

.pricing_features {
  list-style:none;
  padding:0;
  margin:0;
  flex:1;
  border-top:1px solid #2a2a2a;
}

.pricing_feature {
  font-size:15px;
  padding:14px 0;
  border-bottom:1px solid #2a2a2a;
  display:flex;
  gap:12px;
  color:#cfcdc8;
}

.pricing_cta {
  margin-top:36px;
  display:block;
  text-align:center;
  border:1px solid #eae8e4;
  color:#eae8e4;
  padding:16px;
  font-size:13px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  font-weight:500;
  text-decoration:none;
  transition:background .2s,color .2s;
}

.pricing_card_feat {
  background:#e63b2e;
  color:#141414;
  padding:40px;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
}

.pricing_cardhead_feat {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:36px;
}

.pricing_plan_feat {
  font-size:18px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin:0;
  color:#141414;
}

.pricing_badge {
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  border:1px solid #141414;
  padding:5px 10px;
  font-weight:500;
  margin:0;
}

.pricing_pricerow_feat {
  display:flex;
  align-items:baseline;
  gap:6px;
  margin-bottom:8px;
}

.pricing_currency_feat {
  font-size:28px;
  font-weight:500;
  color:#141414;
  margin:0;
  opacity:0.7;
}

.pricing_amount_feat {
  font-size:clamp(64px,7vw,96px);
  font-weight:700;
  line-height:0.85;
  letter-spacing:-0.04em;
  margin:0;
  color:#141414;
}

.pricing_billing_feat {
  font-size:13px;
  margin:0 0 32px;
  color:#141414;
  opacity:0.8;
}

.pricing_features_feat {
  list-style:none;
  padding:0;
  margin:0;
  flex:1;
  border-top:1px solid rgba(20,20,20,0.3);
}

.pricing_feature_feat {
  font-size:15px;
  padding:14px 0;
  border-bottom:1px solid rgba(20,20,20,0.3);
  display:flex;
  gap:12px;
  color:#141414;
}

.pricing_cta_feat {
  margin-top:36px;
  display:block;
  text-align:center;
  background:#141414;
  color:#eae8e4;
  padding:16px;
  font-size:13px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  font-weight:500;
  text-decoration:none;
  transition:opacity .2s;
}

.pricing_amount_accent {
  color:#e63b2e;
}
</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