Chamfers and corners

Geometry

Corners communicate construction.

Geometry of Trust uses two opposing cuts to create precise, directional components without relying on generic rounded rectangles.

The characteristic shape uses chamfers on:

• the top-left corner
• the bottom-right corner

The remaining corners stay square or use a maximum optical radius of 2px.

Chamfers must reinforce the geometry of the logo. They are not decorative clipping effects.

---

Core shape

Primary control

Card surface

Large panel

The strength of the cut increases with the visual scale of the element.

Buttons use a clearly recognizable chamfer. Cards and panels use larger cuts, but their geometry must remain subordinate to the content.

---

Chamfer scale

4px Tags, chips and very compact interface elements

XS

6px Inputs, compact buttons and small controls

S

10px Standard buttons and interactive controls

M

14px Cards and medium content surfaces

L

18px Hero panels and large focal surfaces

XL

Level	Cut	Typical use
XS	4px	Tags and compact chips
S	6px	Inputs and small buttons
M	10px	Standard buttons
L	14px	Cards
XL	18px	Hero panels

---

Token usage

Chamfer values must come from central tokens.

:root {
  --got-chamfer-xs: 4px;
  --got-chamfer-sm: 6px;
  --got-chamfer-md: 10px;
  --got-chamfer-lg: 14px;
  --got-chamfer-xl: 18px;
}

Use the smallest suitable token for the component scale.

Do not introduce one-off values such as 7px, 11px or 15px.

---

CSS construction

The generic construction uses a component-level custom property:

.got-chamfer {
  --got-chamfer: var(--got-chamfer-md);

  clip-path: polygon(
    var(--got-chamfer) 0,
    100% 0,
    100% calc(100% - var(--got-chamfer)),
    calc(100% - var(--got-chamfer)) 100%,
    0 100%,
    0 var(--got-chamfer)
  );
}

Example:

<button
  class="got-chamfer"
  style="--got-chamfer: var(--got-chamfer-md);"
>
  Verify evidence
</button>

The existing component classes should eventually use the same construction:

.demo-button {
  --got-chamfer: var(--got-chamfer-md);
}

.got-card {
  --got-chamfer: var(--got-chamfer-lg);
}

.got-chapter-hero {
  --got-chamfer: var(--got-chamfer-xl);
}

---

Borders

A clipped element's standard CSS border may not render consistently around diagonal edges.

Use one of these approaches:

1. A wrapping element with the outer shape.
2. A pseudo-element acting as the border layer.
3. CSS masking where supported.
4. An inset outline when exact diagonal border continuity is not required.

Simple components

Inset boundary

Buttons and compact controls may use an inset box shadow when the diagonal edge remains visually clear.

Prominent components

Layered construction

Hero panels and important cards should use a wrapper, mask or pseudo-element when a continuous border is necessary.

---

Touch targets

Chamfers must never reduce usability.

The visual cut belongs inside the required interaction area.

Component	Minimum target
Standard button	44 × 44px
Compact control	40 × 40px
Icon-only control	44 × 44px
Mobile primary action	48px height

The clipped visible surface may be smaller than the interaction box, but the clickable target must remain accessible.

---

Corner rules

Do

• Cut the top-left and bottom-right corners.
• Use a consistent token within each component family.
• Scale the cut with the visual size of the component.
• Keep the remaining corners square or optically softened by no more than 2px.
• Preserve minimum touch targets independently of the visible shape.

Do not

• Cut all four corners.
• Combine large chamfers with large rounded corners.
• Use random cut depths within one component family.
• Apply chamfers to every small decorative element.
• Reduce padding or interaction size to preserve the visual cut.

---

Core rule

Corners

The cut should feel structural, not ornamental.

If removing the chamfer does not change the component's visual direction or relationship to the broader system, the cut may not be necessary.

Knowledge graph