<div class="box">
  <h2>Header</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni fuga accusamus corrupti nesciunt illo similique non blanditiis dolor dolorem mollitia. Iure doloremque numquam accusamus expedita eos exercitationem nostrum, repellendus natus!</p>
</div>

html {
  --gray-5: #222;
  --color-orange: #f06d06;
  
  font: 100%/1.5 system-ui;
}

.box {
  background: var(--gray-5);
  color: white;
  padding: 1rem;
  max-inline-size: 600px;

  h2 {
    color: var(--color-orange);
    /* Darkened version of orange */
    border-bottom: 5px solid oklch(from var(--color-orange) calc(l + 0.4) c h);
  }
}