first commit

src/components/ui/Badge.tsx

@@ -0,0 +1,20 @@
+type Props = {
+  children: React.ReactNode
+  className?: string
+  tone?: 'lavender' | 'deep' | 'outline'
+}
+
+export function Badge({ children, className = '', tone = 'lavender' }: Props) {
+  const tones = {
+    lavender: 'bg-purple-lavender text-purple-deep',
+    deep: 'bg-purple-deep text-white',
+    outline: 'border border-purple-deep text-purple-deep',
+  }
+  return (
+    <span
+      className={`inline-flex items-center font-mono text-[11px] tracking-widest uppercase rounded-full px-3 py-1 ${tones[tone]} ${className}`}
+    >
+      {children}
+    </span>
+  )
+}