Marketing · Diametral Design System

Hero

A measured-grid band (.ds-gridlines with --ds-grid-cols:6) carrying a kicker, an Ufficio headline, a lede and two buttons.

Hero band

Pricing intelligence

Price every mission with confidence.

A flat, structured pricing matrix that turns delegation thresholds, staffing and margin into one defensible number — visible structure, no black boxes.

Open the demo Read the docs

<div class="ds-gridlines bk-hero" style="--ds-grid-cols:6">
  <p class="ds-kicker">Pricing intelligence</p>
  <h2 class="ds-title bk-hero__head">Price every mission with confidence.</h2>
  <p class="bk-hero__lede">A flat, structured pricing matrix…</p>
  <div class="bk-hero__actions">
    <a class="ds-button ds-button--primary ds-button--lg" href="#">Open the demo</a>
    <a class="ds-button ds-button--lg" href="#">Read the docs</a>
  </div>
</div>

Feature grid

Three ruled columns (.ds-ruled / .ds-ruled__col), each led by a ticked label (.ds-gridlabel) over an Ufficio sub-title and copy.

.ds-ruled · .ds-gridlabel

Map

Delegation matrix

Encode thresholds and approval rules so every quote follows the same defensible path.

Build

Margin engine

Compose cost, staffing and risk into a live margin you can inspect line by line.

Run

Audit trail

Every change is recorded and reportable — pricing decisions stay traceable over time.

<div class="ds-ruled">
  <div class="ds-ruled__col">
    <span class="ds-gridlabel">Map</span>
    <h3 class="bk-sub">Delegation matrix</h3>
    <p class="bk-copy">Encode thresholds and approval rules…</p>
  </div>
  <!-- …more columns… -->
</div>

Pricing

Three .ds-card columns; the middle one is featured with .ds-frame--accent and a .ds-badge--accent. Each carries an Ufficio price, a feature list and a primary button.

.ds-card · .ds-frame--accent

1 pricing matrix
3 seats
Manual export

Start free

Unlimited matrices
20 seats
Live margin engine
API access

Choose Growth

Everything in Growth
Unlimited seats
SSO & audit log
Dedicated support

Contact sales

<div class="bk-pricing">
  <div class="ds-card">…Starter…</div>

  <div class="ds-card ds-frame--accent">
    <div class="ds-card__header">
      <span class="ds-badge ds-badge--accent">Most popular</span>
      <p class="bk-price">€49<small> / mo</small></p>
    </div>
    <div class="ds-card__body">
      <ul class="bk-feats"><li>Unlimited matrices</li>…</ul>
    </div>
    <div class="bk-card-foot"><a class="ds-button ds-button--primary" href="#">Choose Growth</a></div>
  </div>

  <div class="ds-card">…Scale…</div>
</div>

Stat band

The “impact in numbers” band (.ds-statgrid) — four ruled cells with a ticked label and a large display figure.

.ds-statgrid

Quotes priced

12 k

Avg. margin lift

8 pts

Teams

240 +

Uptime

99.9 %

<div class="ds-statgrid">
  <div class="ds-statgrid__cell">
    <div class="ds-statgrid__label">Quotes priced</div>
    <div class="ds-statgrid__value">12<small> k</small></div>
  </div>
  <!-- …three more cells… -->
</div>

CTA + footer

A centered call-to-action over a multi-column link footer, framed with a horizontal accent rule (.ds-rule-x) and corner registration marks (.ds-marks).

.ds-rule-x · .ds-marks

Get started

Bring structure to your pricing.

Stand up your first pricing matrix in minutes — no build step, no black box.

Open the demo app

Diametral

Minimal · Enduring · Elegant. Pricing intelligence on a visible grid.

Product

Company

Resources

<div class="ds-marks bk-cta">
  <p class="ds-kicker">Get started</p>
  <h2 class="ds-title bk-cta__head">Bring structure to your pricing.</h2>
  <a class="ds-button ds-button--primary ds-button--lg" href="#">Open the demo app</a>
</div>

<hr class="ds-rule-x ds-rule-x--accent">

<div class="bk-footcols">
  <div><div class="bk-foot-brand ds-title">Diametral</div>…</div>
  <div><h4>Product</h4><ul><li><a href="#">Matrix</a></li>…</ul></div>
  <!-- …more columns… -->
</div>