@layer components {
  .swatches { display: flex; flex-wrap: wrap; gap: var(--space-4); }
  .swatch { display: flex; flex-direction: column; gap: var(--space-1); }
  .swatch__chip {
    width: 4.5rem;
    height: 2.75rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
  }
  .swatch__name { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-3); }
}