<h5>👍 Primary initial</h5>
<figure>
  <span class="Swatch" style="background-color: #88539a">Primary</span>
  <span class="Swatch" style="background-color: #fe513f">Secondary</span>
</figure>
<h5>👎 Primary modified (too close to Secondary)</h5>
<figure>
  <span class="Swatch" style="background-color: #bd386c">Primary</span>
  <span class="Swatch" style="background-color: #fe513f">Secondary</span>
</figure>
<h5>👍 Secondary adjusted relative to Primary</h5>
<figure>
  <span class="Swatch" style="background-color: #bd386c">Primary</span>
  <span class="Swatch" style="background-color: rgb(255, 122, 20)">Secondary</span>
</figure>

@use cssnext;

figure, h5 {
  margin: 0;
}

h5:not(:first-child) {
  margin-top: 1.5em;
}

.Swatch {
  display: inline-block;
  line-height: 1;
  padding: .5em 1em;
  margin-top: .5em;
  text-align: center;
  border-radius: .25em;
  background-color: black;
  color: white;
}