Border

Overview.

Borders do four things in Flatpay’s product surfaces. They contain a card or input, they divide rows and sections, they signal state (selected, focused, danger), and they framemedia. They never decorate. A line earns its pixel by communicating one of those four things, or it isn’t drawn.

The whole system rides on three width tokens and one neutral colour. Status borders inherit from the same colour ramps as text and surface — they aren’t their own palette.

Width.

Two widths run the system. 1 px is the default for everything; 2 px is reserved for the moments where a line has to announce itself — selected items and keyboard focus. There is no third width.

• border.width

  1 px

  Default

  Cards, inputs, dividers, list rows, table cells, status pills. Pretty much every surface that needs an edge.

• border.width.selected

  2 px

  Selected · Focused

  The active tab, a chosen radio card, the keyboard-focused control. Always paired with a colour that's distinct from the default border.

Color.

One neutral colour does the structural work. It tints with the surface — a touch warmer on light, a touch cooler on dark — and inherits from the same --border token wired in @flatpay-dk/ui/styles. Status borders (danger, success, warning) borrow from the matching text ramp; they aren’t a separate palette.

Focus ring.

Keyboard focus is a 2 px outline with a 2 px offset, drawn around the element rather than on top of its border. The offset keeps the underlying border legible and lets the ring read on every surface — light, dark, brand. Never replace the outline with a colour change inside the element; users navigating without a mouse rely on it.

Dividers.

A divider is a 1 px border on one edge — top, bottom, left, or right — inside an otherwise borderless container. Dividers separate siblings(rows in a list, columns in a stat bar). They never wrap the parent; that’s a containment border, not a divider.

In code.

The --border CSS variable is set globally in @flatpay-dk/ui/styles and applied to every element via * { border-color: hsl(var(--border)); }. That means every Tailwind border and divide utility picks up the token without further configuration.

// Default — 1px containment border, 8px radius
<div className="rounded-lg border bg-card px-4 py-3" />

// Selected — 2px focus-coloured border
<button className="rounded-sm border-2 border-foreground bg-background px-3 py-1.5" />

// Focus ring — 2px outline with 2px offset
<button className="rounded-sm bg-foreground px-4 py-2 text-background
                   focus-visible:outline-2 focus-visible:outline-offset-2
                   focus-visible:outline-[var(--border-focus)]" />

// Dividers — between list rows
<ul className="divide-y rounded-lg border bg-card">
  <li className="px-5 py-4">…</li>
  <li className="px-5 py-4">…</li>
</ul>

Don’ts.

Three patterns the lab refuses to ship. Each one shows up in drafts often enough to keep here as a reference.

Related.