@penaprieto/design-system/dist/components/EmptyState/EmptyState.css

Multi-brand React design system with design tokens from Figma

/* Base EmptyState */
.ds-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--size8, 64px) var(--size6, 32px);
  -webkit-font-smoothing: antialiased;
}

/* Icon */
.ds-empty-state__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  margin-bottom: var(--size5, 24px);
  color: var(--semantic-icon-default-subtle);
  background-color: var(--semantic-bg-surface-subtle);
  border-radius: var(--br-full, 9999px);
}

/* Illustration */
.ds-empty-state__illustration {
  margin-bottom: var(--size5, 24px);
  max-width: 300px;
}

/* Content */
.ds-empty-state__content {
  max-width: 400px;
  margin-bottom: var(--size5, 24px);
}

/* Title */
.ds-empty-state__title {
  margin: 0 0 var(--size2, 8px) 0;
  font-family: var(--heading-h4-fontFamily, var(--font-family, 'Satoshi', sans-serif));
  font-size: var(--heading-h4-fontSize, 24px);
  font-weight: var(--heading-h4-fontWeight, 700);
  line-height: var(--heading-h4-lineHeight, 150%);
  color: var(--semantic-text-corp-primary);
}

/* Description */
.ds-empty-state__description {
  margin: 0;
  font-family: var(--body-regular-fontFamily, var(--font-family, 'Satoshi', sans-serif));
  font-size: var(--body-regular-fontSize, 16px);
  font-weight: var(--body-regular-fontWeight, 400);
  line-height: var(--body-regular-lineHeight, 150%);
  color: var(--semantic-text-corp-secondary);
}

/* Actions */
.ds-empty-state__actions {
  display: flex;
  gap: var(--size3, 12px);
  flex-wrap: wrap;
  justify-content: center;
}