سیستم رنگی

/* استفاده در CSS */
.my-element {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-color: hsl(var(--border));
}

/* استفاده با Tailwind */
<div className="bg-primary text-primary-foreground border-border">
  محتوا
</div>