Border

Border tokens cover two categories: radius for corner shapes across the component scale, and width for stroke thickness. Standardised values ensure visual consistency without per-component guesswork.

Border radius

sm4px

md6px

lg8px

xl12px

2xl16px

full9999px

Token	Value	Use
--diwa-radius-sm	4px	Interactive elements — buttons, inputs, tags
--diwa-radius-md	6px	Default — nested elements within a container
--diwa-radius-lg	8px	Cards, panels, image containers
--diwa-radius-xl	12px	Modals, drawers, large surfaces
--diwa-radius-2xl	16px	Hero cards, full-bleed panels
--diwa-radius-full	9999px	Pills, chips, circular avatars

✓Use lg/xl/2xl for parent containers such as cards, images, and panels.
✓Use md for nested elements within a larger container.
✓Use sm for all interactive elements (buttons, inputs, tags).
✓Use full for pills, chips, and circular avatars.
✓Reduce inner radius when nesting: if a card is lg (8px), child elements should use md (6px).

Don't

✕Don't use arbitrary radius values — always use a defined token.
✕Don't apply border-radius when an element touches the edge of its parent or the browser viewport.
✕Don't use the same radius for both parent and child — nested elements look better one step smaller.

Border width

--diwa-border-width-thin1px — Dividers, subtle outlines, card borders

--diwa-border-width-base2px — Interactive borders and selected states

--diwa-border-width-thick4px — Accent strokes, decorative left-border treatments

Don't

✕Don't use border widths other than the defined tokens — consistency across all components depends on using the shared scale.
✕Don't use thick borders decoratively in ways that compete with interactive affordances.

Usage

/* CSS */
.card {
  border-radius: var(--diwa-radius-lg);
  border: var(--diwa-border-width-thin) solid var(--diwa-border);
}

/* Nested element inside card — one step smaller */
.card__header {
  border-radius: var(--diwa-radius-md);
}

/* Focus ring */
.card:focus-visible {
  outline: var(--diwa-focus-ring-width) solid var(--diwa-border-focus);
  outline-offset: var(--diwa-focus-ring-offset);
}

/* Component-level override */
:root {
  --diwa-button-radius: var(--diwa-radius-sm);
}

Styles

All border tokens are available as typed JS constants from @diwacopilot/components/stylesfor use in JSS, styled-components, Framer Motion, or inline styles:

import {
  borderRadiusSm,
  borderRadiusMd,
  borderRadiusLg,
  borderRadiusXl,
  borderRadius2Xl,
  borderRadiusFull,
  borderWidthThin,
  borderWidthBase,
  borderWidthThick,
} from '@diwacopilot/components/styles';

borderRadiusSmborderRadiusMdborderRadiusLgborderRadiusXlborderRadius2XlborderRadiusFullborderWidthThinborderWidthBaseborderWidthThick

@use '@diwacopilot/components/styles' as *;

.badge {
  border-radius: $diwa-border-radius-full;
  border: $diwa-border-width-base solid $diwa-border;
}

.card {
  border-radius: $diwa-border-radius-md;
  border: $diwa-border-width-thin solid $diwa-border;
}

.modal {
  border-radius: $diwa-border-radius-xl;
  overflow: hidden;
}