Border

Borders help define the edges of elements, convey separation, and emphasize hierarchy. The Tendoo Design System uses a consistent border width scale to keep visual presentation clean and predictable.

Corner radius are documented separately in Corner Radius.

Border Width Tokens

💡 Tip: Use semantic tokens like border.thin rather than hardcoded pixel values for consistency and scalability.

Usage Guidelines

• Use border.thin as the default border width for most UI components like inputs, buttons, and cards.
• Apply border.medium to indicate active or focused states.
• Use border.none for visual simplicity when a border isn't needed.
• Reserve border.thick for special states or strong emphasis, such as active selection indicators.

Example

<input className="border border-thin border-gray-300 focus:border-medium focus:border-primary" />

Design Token Reference

// border.tokens.ts
export const border = {
  none: "0px",
  thin: "1px",
  medium: "2px",
  thick: "4px",
};

Related

• Corner Radius
• Color
• Elevation

Using a simple, token-based border scale improves both visual consistency and maintainability — giving developers and designers shared language and flexibility.