Buttons

Variants

PrimarySecondaryOutlineGhost

Variant	Background	Text	Use case
Primary	Orange 500 (#FF8500)	White	Main actions, CTAs
Secondary	Gray 100 (#F4F4F5)	Gray 900 (#18181B)	Secondary actions
Outline	Transparent	Orange 700 (#C2570A)	Tertiary actions
Ghost	Transparent	Gray 600 (#52525B)	Subtle actions

Sizes

SmallDefaultLarge

Size	Padding	Font-Size	Border-Radius
Small	8px 16px	13px	8px
Default	12px 24px	14px	10px
Large	16px 32px	16px	12px

Disabled State

Primary DisabledSecondary Disabled

CSS

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.875rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-body);
}

.btn-primary {
  background: #FF8500;
  color: white;
}

.btn-primary:hover {
  background: #EA6D00;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 133, 0, 0.3);
}

.btn-secondary {
  background: #F4F4F5;
  color: #18181B;
}

.btn-outline {
  background: transparent;
  color: #C2570A;
  border: 2px solid #FF8500;
}

Hover & Active States

State	Primary	Secondary	Outline
Default	#FF8500	#F4F4F5	transparent
Hover	#EA6D00 + Shadow	#E4E4E7	#FFF7ED
Active	#C2570A	#D4D4D8	#FFEDD5
Disabled	#FED7AA	#E4E4E7	#E4E4E7

Accessibility

All button text must have a contrast ratio of at least 4.5:1 against the background. White on Orange 500 reaches 4.7:1 — narrowly AA compliant.