Corners

afrigov is square by default. A site that wants a softer look turns on rounded corners once, for everything, so buttons, fields and cards match.

Turn on rounded corners

<html lang="en" data-ag-corners="rounded">

Square, the default

Show HTML

<form class="ag-mb-0" action="#corners" onsubmit="return false;">
  <div class="ag-field">
    <label class="ag-label" for="corners-square">Email address</label>
    <input class="ag-input" id="corners-square" type="email" />
  </div>
  <button class="ag-button" type="submit">Continue</button>
</form>

Rounded

Show HTML

<div data-ag-corners="rounded">
  <form class="ag-mb-0" action="#corners" onsubmit="return false;">
    <div class="ag-field">
      <label class="ag-label" for="corners-rounded">Email address</label>
      <input class="ag-input" id="corners-rounded" type="email" />
    </div>
    <button class="ag-button" type="submit">Continue</button>
  </form>
</div>

What changes

Corner sizes, square and rounded
Token	Used by	Square	Rounded
`--ag-size-radius`	Buttons, pagination, the menu and search buttons, date blocks, badges	4px	8px
`--ag-size-radius-field`	Text fields, selects, the search box	0	8px
`--ag-size-radius-surface`	Cards, panels, alerts, empty states, the error summary	0	12px

Rules

One choice for the whole site. Set it on html. Rounded buttons beside square fields and cards look like two systems.
A pill for one action. ag-button--pill rounds a call to action fully, with either setting. Use it for the main action on a page, not every button.
Your own sizes. The three tokens can be set to any value, on html or in your own stylesheet after afrigov's.
Focus rings, borders and contrast are the same either way.