Border radius is a subtle but powerful design parameter. It communicates the personality of the system — too sharp feels cold and corporate, too round feels playful and toy-like. Alius occupies a deliberate middle ground.

Design Rationale

The Alius border radius system is guided by a clear philosophy:

  • Engineering systems should not be too round — robotic platforms, configuration tools, and technical interfaces benefit from the precision conveyed by tighter radii
  • Open-source community should not be too cold — a moderate radius expresses friendliness and openness without undermining technical credibility
  • “Moderate radius” is the brand position — it communicates that Alius is both approachable and professional

The parametric logic:

  • Smaller radius = engineering precision, technical gravity
  • Moderate radius = friendly and open, community-oriented
  • Larger radius = soft and casual (used sparingly)

Radius Scale

XS (Extra Small)

  • Use for: Small tags, badges, status labels, inline indicators
  • Character: Barely rounded, nearly sharp — conveys precision
  • Examples: Version tags, category labels, status chips

S (Small)

  • Use for: Buttons, text inputs, select dropdowns, small cards
  • Character: Subtly rounded — professional with a hint of softness
  • Examples: Primary buttons, search inputs, filter controls, toggle switches

M (Medium)

  • Use for: Cards, modals, dialog boxes, content containers
  • Character: Clearly rounded — friendly without being casual
  • Examples: Documentation cards, product cards, notification panels, settings panels

L (Large)

  • Use for: Large containers, hero sections, feature blocks, image containers
  • Character: Noticeably rounded — warm and approachable
  • Examples: Hero image containers, feature highlight cards, promotional banners

Full (Fully Round)

  • Use for: Avatars, status dots, pill buttons, circular icons, notification badges
  • Character: Completely round — used for specific functional elements, not decorative purposes
  • Examples: User avatars, online status indicators, notification count badges, icon buttons

Usage Guidelines

  • Stay within the defined scale — do not introduce arbitrary radius values
  • Maintain consistency within a component category (all buttons use S, all cards use M)
  • When in doubt, choose the smaller radius — Alius leans toward precision over softness
  • Border radius should never be the most noticeable visual element on a page