8 brands · g100 tone · same component contract
Compare brands
The same component, rendered across every Avala brand. Carbon Design ships one brand; here's what multi-brand-from-one-token-source actually looks like.
Buttons
Carbon kind matrix — primary, secondary, tertiary, link.AvalaInspect ↗
PrimarySecondaryTertiaryLink →
ChatInspect ↗
PrimarySecondaryTertiaryLink →
InvestorInspect ↗
PrimarySecondaryTertiaryLink →
LearningInspect ↗
PrimarySecondaryTertiaryLink →
NeutralInspect ↗
PrimarySecondaryTertiaryLink →
OperationsInspect ↗
PrimarySecondaryTertiaryLink →
PayInspect ↗
PrimarySecondaryTertiaryLink →
TicketsInspect ↗
PrimarySecondaryTertiaryLink →
Status pills
Locked review-state quartet — never overridden across brands.AvalaInspect ↗
SuccessWarningErrorInfo
ChatInspect ↗
SuccessWarningErrorInfo
InvestorInspect ↗
SuccessWarningErrorInfo
LearningInspect ↗
SuccessWarningErrorInfo
NeutralInspect ↗
SuccessWarningErrorInfo
OperationsInspect ↗
SuccessWarningErrorInfo
PayInspect ↗
SuccessWarningErrorInfo
TicketsInspect ↗
SuccessWarningErrorInfo
Card
Layer + border + text-primary + text-secondary working together.AvalaInspect ↗
Card title
Same shape across every brand. The values flip; the contracts don't.
ChatInspect ↗
Card title
Same shape across every brand. The values flip; the contracts don't.
InvestorInspect ↗
Card title
Same shape across every brand. The values flip; the contracts don't.
LearningInspect ↗
Card title
Same shape across every brand. The values flip; the contracts don't.
NeutralInspect ↗
Card title
Same shape across every brand. The values flip; the contracts don't.
OperationsInspect ↗
Card title
Same shape across every brand. The values flip; the contracts don't.
PayInspect ↗
Card title
Same shape across every brand. The values flip; the contracts don't.
TicketsInspect ↗
Card title
Same shape across every brand. The values flip; the contracts don't.