Designing Scalable
Enterprise Experiences

// Enterprise design token system
import { useTheme } from '@ds/tokens';

const MetricCard = ({ label, value, trend }) => {
  const { colors, spacing } = useTheme();

  return (
    <div style={{
      background: colors.surface,
      padding: spacing.6
    }}>
      <span className="metric-label">
        {label}
      </span>
      <strong>{value}</strong>
    </div>
  );
};

/* Enterprise responsive grid */
.erp-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fill,
      minmax(280px, 1fr));
  gap: var(--space-6);
}

@media (max-width: 768px) {
  .erp-grid {
    grid-template-columns: 1fr;
  }
}

// Scroll reveal animation
const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList
          .add('is-visible');
        observer.unobserve(
          entry.target
        );
      }
    });
  },
  { threshold: 0.12 }
);

<!-- Accessible ERP form field -->
<div role="group"
     aria-labelledby="grp-label">

  <label id="grp-label">
    Purchase Order
  </label>

  <input
    type="text"
    aria-required="true"
    aria-describedby="po-hint"
  />

  <span id="po-hint">
    Format: PO-YYYY-XXXXX
  </span>
</div>