ds-leobecker 0.1.0 → 0.2.0

package/src/tokens/tokens.json

@@ -0,0 +1,193 @@
+{
+  "$schema": "https://design-tokens.org/draft/2024",
+  "meta": {
+    "name": "Leo Becker Design System",
+    "version": "0.1.0"
+  },
+  "color": {
+    "raw": {
+      "orange-100":  { "value": "#f05524" },
+      "orange-200":  { "value": "#e34a18" },
+      "orange-300":  { "value": "#d2441c" },
+      "teal-1000":   { "value": "#00110e" },
+      "teal-900":    { "value": "#00201c" },
+      "teal-800":    { "value": "#00302a" },
+      "teal-700":    { "value": "#00453f" },
+      "teal-600":    { "value": "#005c54" },
+      "teal-500":    { "value": "#326f68" },
+      "teal-400":    { "value": "#6e8a83" },
+      "beige-50":    { "value": "#e8dcc1" },
+      "beige-100":   { "value": "#d4c7a8" },
+      "beige-200":   { "value": "#c4b597" },
+      "beige-300":   { "value": "#9dafa4" },
+      "green-500":   { "value": "#79e27e" },
+      "red-500":     { "value": "#ff4b4b" },
+      "yellow-500":  { "value": "#f5c542" },
+      "blue-500":    { "value": "#4b9eff" }
+    },
+    "semantic": {
+      "background":            { "value": "{color.raw.teal-1000}", "light": "{color.raw.beige-50}" },
+      "background-secondary":  { "value": "{color.raw.teal-900}",  "light": "{color.raw.beige-100}" },
+      "background-tertiary":   { "value": "{color.raw.teal-800}",  "light": "{color.raw.beige-200}" },
+      "foreground":            { "value": "{color.raw.beige-200}", "light": "{color.raw.teal-900}" },
+      "foreground-strong":     { "value": "{color.raw.beige-50}",  "light": "{color.raw.teal-1000}" },
+      "foreground-muted":      { "value": "{color.raw.teal-400}",  "light": "{color.raw.teal-500}" },
+      "primary":               { "value": "{color.raw.orange-100}", "light": "{color.raw.orange-100}" },
+      "primary-hover":         { "value": "{color.raw.orange-200}", "light": "{color.raw.orange-300}" },
+      "primary-foreground":    { "value": "{color.raw.teal-1000}", "light": "{color.raw.beige-50}" },
+      "border":                { "value": "{color.raw.teal-700}",  "light": "{color.raw.beige-300}" },
+      "border-muted":          { "value": "{color.raw.teal-800}",  "light": "{color.raw.beige-200}" },
+      "input":                 { "value": "{color.raw.teal-800}",  "light": "{color.raw.beige-100}" },
+      "ring":                  { "value": "{color.raw.orange-200}", "light": "{color.raw.orange-200}" },
+      "success":               { "value": "{color.raw.green-500}", "light": "{color.raw.green-500}" },
+      "error":                 { "value": "{color.raw.red-500}",   "light": "{color.raw.red-500}" },
+      "warning":               { "value": "{color.raw.yellow-500}", "light": "{color.raw.yellow-500}" },
+      "info":                  { "value": "{color.raw.blue-500}",  "light": "{color.raw.blue-500}" },
+
+      "card":                  { "value": "{color.raw.teal-900}",  "light": "{color.raw.beige-50}" },
+      "card-foreground":       { "value": "{color.raw.beige-200}", "light": "{color.raw.teal-900}" },
+      "popover":               { "value": "{color.raw.teal-900}",  "light": "{color.raw.beige-50}" },
+      "popover-foreground":    { "value": "{color.raw.beige-200}", "light": "{color.raw.teal-900}" },
+      "muted":                 { "value": "{color.raw.teal-800}",  "light": "{color.raw.beige-100}" },
+      "muted-foreground":      { "value": "{color.raw.teal-400}",  "light": "{color.raw.teal-500}" },
+      "secondary":             { "value": "{color.raw.teal-800}",  "light": "{color.raw.beige-100}" },
+      "secondary-foreground":  { "value": "{color.raw.beige-200}", "light": "{color.raw.teal-900}" },
+      "accent":                { "value": "{color.raw.orange-100}", "light": "{color.raw.orange-100}" },
+      "accent-foreground":     { "value": "{color.raw.teal-1000}", "light": "{color.raw.beige-50}" },
+      "destructive":           { "value": "{color.raw.red-500}",   "light": "{color.raw.red-500}" },
+      "destructive-foreground": { "value": "{color.raw.beige-50}", "light": "{color.raw.beige-50}" }
+    }
+  },
+  "typography": {
+    "fontFamily": {
+      "display": { "value": "\"Geist\", \"Geist Fallback\", ui-sans-serif, system-ui, sans-serif" },
+      "body":    { "value": "\"Geist\", \"Geist Fallback\", ui-sans-serif, system-ui, sans-serif" },
+      "mono":    { "value": "\"Geist Mono\", \"Geist Mono Fallback\", ui-monospace, SFMono-Regular, Menlo, monospace" }
+    },
+    "scale": {
+      "display":    { "fontSize": "clamp(56px, 12vw, 180px)", "fontWeight": 700, "lineHeight": 1,    "letterSpacing": "-0.03em" },
+      "hero":       { "fontSize": "clamp(40px, 8.5vw, 96px)", "fontWeight": 700, "lineHeight": 1,    "letterSpacing": "-0.03em" },
+      "h2":         { "fontSize": "clamp(30px, 4vw, 48px)",   "fontWeight": 600, "lineHeight": 1.1,  "letterSpacing": "-0.025em" },
+      "h3":         { "fontSize": "36px", "fontWeight": 600, "lineHeight": 1.15, "letterSpacing": "-0.02em" },
+      "h4":         { "fontSize": "30px", "fontWeight": 600, "lineHeight": 1.2,  "letterSpacing": "-0.02em" },
+      "h5":         { "fontSize": "24px", "fontWeight": 600, "lineHeight": 1.2,  "letterSpacing": "-0.015em" },
+      "h6":         { "fontSize": "18px", "fontWeight": 600, "lineHeight": 1.3,  "letterSpacing": "-0.015em" },
+      "body":       { "fontSize": "16px", "fontWeight": 400, "lineHeight": 1.5,  "letterSpacing": "0" },
+      "body-sm":    { "fontSize": "14px", "fontWeight": 400, "lineHeight": 1.5,  "letterSpacing": "0" },
+      "label":      { "fontSize": "12px", "fontWeight": 500, "lineHeight": 1.3,  "letterSpacing": "0.01em" },
+      "badge":      { "fontSize": "14px", "fontWeight": 600, "lineHeight": 1.3,  "letterSpacing": "0.025em", "textTransform": "uppercase" },
+      "meta":       { "fontSize": "11px", "fontWeight": 400, "lineHeight": 1.3,  "letterSpacing": "0.05em" },
+      "code":       { "fontSize": "13px", "fontWeight": 400, "lineHeight": 1.5,  "letterSpacing": "0" }
+    }
+  },
+  "spacing": {
+    "1":  { "value": "4px" },
+    "2":  { "value": "8px" },
+    "3":  { "value": "12px" },
+    "4":  { "value": "16px" },
+    "5":  { "value": "20px" },
+    "6":  { "value": "24px" },
+    "8":  { "value": "32px" },
+    "10": { "value": "40px" },
+    "12": { "value": "48px" },
+    "16": { "value": "64px" },
+    "20": { "value": "80px" },
+    "24": { "value": "96px" }
+  },
+  "radius": {
+    "base": { "value": "0rem", "description": "Brutalist zero radius — sharp corners by default" }
+  },
+  "shadow": {
+    "sm":      { "value": "0 1px 2px 0 rgb(0 0 0 / 0.3)" },
+    "md":      { "value": "0 4px 12px 0 rgb(0 0 0 / 0.25)" },
+    "lg":      { "value": "0 8px 24px 0 rgb(0 0 0 / 0.35)" },
+    "xl":      { "value": "0 20px 25px -5px rgb(0 0 0 / 0.4)" },
+    "popover": { "value": "0 0 0 1px rgb(0 0 0 / 0.2), 0 3px 6px 0 rgb(0 0 0 / 0.25), 0 9px 24px 0 rgb(0 0 0 / 0.35)" }
+  },
+  "motion": {
+    "easing": {
+      "default":  { "value": "cubic-bezier(0.4, 0, 0.2, 1)" },
+      "out":      { "value": "cubic-bezier(0, 0, 0.2, 1)" },
+      "in-out":   { "value": "cubic-bezier(0.4, 0, 0.2, 1)" },
+      "linear":   { "value": "linear" }
+    },
+    "duration": {
+      "fast":   { "value": "100ms" },
+      "base":   { "value": "150ms" },
+      "medium": { "value": "250ms" },
+      "slow":   { "value": "500ms" }
+    },
+    "keyframes": {
+      "blink": {
+        "0%, 90%, 100%": { "opacity": "0" },
+        "95%": { "opacity": "1" }
+      },
+      "delayed-fade-in": {
+        "0%":   { "opacity": "0" },
+        "100%": { "opacity": "1" }
+      },
+      "slide-pattern": {
+        "from": { "backgroundPosition": "0 0" },
+        "to":   { "backgroundPosition": "40px 0" }
+      },
+      "scale-in": {
+        "from": { "opacity": "0", "transform": "scale(0.95)" },
+        "to":   { "opacity": "1", "transform": "scale(1)" }
+      },
+      "scale-out": {
+        "from": { "opacity": "1", "transform": "scale(1)" },
+        "to":   { "opacity": "0", "transform": "scale(0.95)" }
+      },
+      "rise-in": {
+        "from": { "opacity": "0", "transform": "translateY(24px)" },
+        "to":   { "opacity": "1", "transform": "translateY(0)" }
+      },
+      "enter-right": {
+        "from": { "opacity": "0", "transform": "translateX(40px)" },
+        "to":   { "opacity": "1", "transform": "translateX(0)" }
+      },
+      "enter-left": {
+        "from": { "opacity": "0", "transform": "translateX(-40px)" },
+        "to":   { "opacity": "1", "transform": "translateX(0)" }
+      },
+      "fade-in": {
+        "from": { "opacity": "0" },
+        "to":   { "opacity": "1" }
+      },
+      "spin": {
+        "to": { "transform": "rotate(360deg)" }
+      },
+      "shimmer": {
+        "0%":   { "backgroundPosition": "-200% 0" },
+        "100%": { "backgroundPosition": "200% 0" }
+      },
+      "slide-in-right": {
+        "from": { "transform": "translateX(100%)", "opacity": "0" },
+        "to":   { "transform": "translateX(0)", "opacity": "1" }
+      }
+    },
+    "animation": {
+      "blink":           { "value": "blink 3s ease-in-out infinite" },
+      "delayed-fade-in": { "value": "delayed-fade-in 100ms ease-out forwards" },
+      "slide-pattern":   { "value": "slide-pattern 2s linear infinite" },
+      "scale-in":        { "value": "scale-in 175ms cubic-bezier(0, 0, 0.2, 1)" },
+      "scale-out":       { "value": "scale-out 175ms cubic-bezier(0, 0, 0.2, 1)" },
+      "rise-in":         { "value": "rise-in 700ms cubic-bezier(0, 0, 0.2, 1)" },
+      "enter-right":     { "value": "enter-right 500ms cubic-bezier(0, 0, 0.2, 1)" },
+      "enter-left":      { "value": "enter-left 500ms cubic-bezier(0, 0, 0.2, 1)" },
+      "fade-in":         { "value": "fade-in 300ms ease-out" },
+      "spin":            { "value": "spin 1s linear infinite" },
+      "shimmer":         { "value": "shimmer 2s linear infinite" },
+      "slide-in-right":  { "value": "slide-in-right 300ms cubic-bezier(0, 0, 0.2, 1)" }
+    }
+  },
+  "zIndex": {
+    "base":     { "value": "1" },
+    "dropdown": { "value": "10" },
+    "sticky":   { "value": "20" },
+    "overlay":  { "value": "40" },
+    "header":   { "value": "60" },
+    "modal":    { "value": "80" },
+    "toast":    { "value": "100" }
+  }
+}

package/guidelines/components/badge-dot.md

@@ -1,33 +0,0 @@
-# BadgeDot
-
-Eyebrow indicator with animated dot + uppercase mono label.
-
-## When to Use
-
-- Status indicators (active, error, warning)
-- Section labels with visual emphasis
-- Live/online indicators
-
-## Variants
-
-| Variant | Dot Color | Use |
-|---------|-----------|-----|
-| default | primary (orange) | Generic indicator |
-| success | green | Active, online, complete |
-| error | red | Error, offline, failed |
-| warning | yellow | Attention needed |
-| info | blue | Informational |
-| muted | muted-foreground, no animation | Inactive, disabled |
-
-## Usage
-
-```tsx
-<BadgeDot label="Live" variant="success" />
-<BadgeDot label="Error" variant="error" />
-<BadgeDot label="Section" />
-```
-
-## Rules
-
-- **IMPORTANT:** The dot always animates (blink 3s) except in muted variant.
-- Label is always uppercase mono — this is enforced by the component.

package/guidelines/components/button.md

@@ -1,39 +0,0 @@
-# Button
-
-## shadcn/ui Button (themed)
-
-Standard button themed by the DS. Zero radius, Geist font.
-
-### Variants
-
-| Variant | Background | Text | Border | Hover |
-|---------|-----------|------|--------|-------|
-| default | card | foreground | border | primary border |
-| destructive | destructive | white | destructive | opacity 90% |
-| outline | transparent | foreground | border | muted bg |
-| ghost | transparent | muted-foreground | none | muted bg |
-
-## StripeButton (custom)
-
-**IMPORTANT:** Use StripeButton for primary CTAs that need the Leo Becker identity. Use shadcn Button for standard actions.
-
-### Variants
-
-| Variant | When to use |
-|---------|------------|
-| primary | Default CTA |
-| accent | Hero CTA, one per screen max |
-| secondary | Secondary actions alongside accent |
-| ghost | Tertiary, navigation-like actions |
-
-### Sizes
-
-| Size | Height | Use |
-|------|--------|-----|
-| sm | 22px | Compact toolbars, inline actions |
-| default | 28px | Standard buttons |
-| lg | 34px | Hero CTAs, prominent actions |
-
-### Stripe Effect
-
-The diagonal stripe appears on hover at 8% opacity. Never remove or customize the stripe — it's a core identity element.

package/guidelines/components/overview.md

@@ -1,14 +0,0 @@
-# Components
-
-This design system uses shadcn/ui components themed via CSS variables.
-Custom components are documented individually below.
-
-## shadcn/ui Components (themed automatically)
-
-Button, Input, Card, Badge, Dialog, Dropdown, Tabs, Toast, Tooltip,
-Checkbox, Switch, Select, Progress, Avatar, Skeleton, Separator,
-Table, Popover, Navigation Menu, and more.
-
-## Custom Components
-
-Add your DS-specific component docs here.

package/guidelines/foundations/color.md

@@ -1,48 +0,0 @@
-# Color
-
-> Auto-generated from `tokens.json`. Do not edit manually.
-
-## Raw Palette
-
-| Token | Hex | OKLch |
-| ----- | --- | ----- |
-| `orange-100` | `#f05524` | `oklch(0.653 0.201 38.807)` |
-| `orange-200` | `#e34a18` | `oklch(0.619 0.198 38.296)` |
-| `orange-300` | `#d2441c` | `oklch(0.584 0.186 37.281)` |
-| `teal-1000` | `#00110e` | `oklch(0.159 0.030 176.115)` |
-| `teal-900` | `#00201c` | `oklch(0.219 0.041 177.325)` |
-| `teal-800` | `#00302a` | `oklch(0.277 0.053 176.110)` |
-| `teal-700` | `#00453f` | `oklch(0.351 0.065 179.177)` |
-| `teal-600` | `#005c54` | `oklch(0.427 0.079 178.770)` |
-| `teal-500` | `#326f68` | `oklch(0.499 0.069 177.930)` |
-| `teal-400` | `#6e8a83` | `oklch(0.610 0.040 164.746)` |
-| `beige-50` | `#e8dcc1` | `oklch(0.897 0.053 96.455)` |
-| `beige-100` | `#d4c7a8` | `oklch(0.832 0.058 96.076)` |
-| `beige-200` | `#c4b597` | `oklch(0.778 0.057 93.050)` |
-| `beige-300` | `#9dafa4` | `oklch(0.737 0.036 145.641)` |
-| `green-500` | `#79e27e` | `oklch(0.826 0.193 141.291)` |
-| `red-500` | `#ff4b4b` | `oklch(0.671 0.216 26.206)` |
-| `yellow-500` | `#f5c542` | `oklch(0.844 0.173 92.183)` |
-| `blue-500` | `#4b9eff` | `oklch(0.693 0.161 253.127)` |
-
-## Semantic Colors
-
-| Token | Reference | Resolved Hex | OKLch |
-| ----- | --------- | ------------ | ----- |
-| `background` | `{color.raw.teal-1000}` | `#00110e` | `oklch(0.159 0.030 176.115)` |
-| `background-secondary` | `{color.raw.teal-900}` | `#00201c` | `oklch(0.219 0.041 177.325)` |
-| `background-tertiary` | `{color.raw.teal-800}` | `#00302a` | `oklch(0.277 0.053 176.110)` |
-| `foreground` | `{color.raw.beige-200}` | `#c4b597` | `oklch(0.778 0.057 93.050)` |
-| `foreground-strong` | `{color.raw.beige-50}` | `#e8dcc1` | `oklch(0.897 0.053 96.455)` |
-| `foreground-muted` | `{color.raw.teal-400}` | `#6e8a83` | `oklch(0.610 0.040 164.746)` |
-| `primary` | `{color.raw.orange-100}` | `#f05524` | `oklch(0.653 0.201 38.807)` |
-| `primary-hover` | `{color.raw.orange-200}` | `#e34a18` | `oklch(0.619 0.198 38.296)` |
-| `primary-foreground` | `{color.raw.teal-1000}` | `#00110e` | `oklch(0.159 0.030 176.115)` |
-| `border` | `{color.raw.teal-700}` | `#00453f` | `oklch(0.351 0.065 179.177)` |
-| `border-muted` | `{color.raw.teal-800}` | `#00302a` | `oklch(0.277 0.053 176.110)` |
-| `input` | `{color.raw.teal-800}` | `#00302a` | `oklch(0.277 0.053 176.110)` |
-| `ring` | `{color.raw.orange-200}` | `#e34a18` | `oklch(0.619 0.198 38.296)` |
-| `success` | `{color.raw.green-500}` | `#79e27e` | `oklch(0.826 0.193 141.291)` |
-| `error` | `{color.raw.red-500}` | `#ff4b4b` | `oklch(0.671 0.216 26.206)` |
-| `warning` | `{color.raw.yellow-500}` | `#f5c542` | `oklch(0.844 0.173 92.183)` |
-| `info` | `{color.raw.blue-500}` | `#4b9eff` | `oklch(0.693 0.161 253.127)` |

package/guidelines/foundations/motion.md

@@ -1,37 +0,0 @@
-# Motion
-
-## Easings
-
-| Name | Value | Use |
-|------|-------|-----|
-| ease-out | cubic-bezier(0, 0, 0.2, 1) | Enter animations |
-| ease-in-out | cubic-bezier(0.4, 0, 0.2, 1) | Standard transitions |
-
-## Durations
-
-| Name | Value | Use |
-|------|-------|-----|
-| fast | 100ms | Hovers, tooltips |
-| base | 150ms | Standard transitions |
-| medium | 250ms | Complex animations |
-| slow | 500ms | Page transitions |
-
-## Key Animations
-
-| Name | Duration | Use |
-|------|----------|-----|
-| blink | 3s infinite | Badge dots, accent dots |
-| shimmer | 2s infinite | Skeleton loading |
-| scale-in | 175ms | Modal entrance |
-| slide-in-right | 300ms | Toast entrance |
-| enter-right/left | 500ms | Panel slides |
-| rise-in | 700ms | Hero entrance |
-| spin | 1s infinite | Loading spinners |
-
-## Usage
-
-```html
-<div class="animate-blink">...</div>
-<div class="animate-shimmer">...</div>
-<div class="animate-scale-in">...</div>
-```

package/guidelines/foundations/overview.md

@@ -1,7 +0,0 @@
-# Foundations
-
-Design tokens that define the visual language.
-
-- [Colors](./color.md) - Palette, semantic mappings, status colors
-- [Typography](./typography.md) - Font families, type scale
-- [Spacing](./spacing.md) - Spacing scale

package/guidelines/foundations/radius.md

@@ -1,19 +0,0 @@
-# Border Radius
-
-## Philosophy
-
-Zero radius by default. This is the brutalist foundation of the system. Exceptions exist only where sharp corners would confuse the user about the component's function.
-
-## Values
-
-| Token | Value | Use |
-|-------|-------|-----|
-| --radius | 0rem | Default for all structural components |
-| --radius-pill | 9999px | Toggle tracks/thumbs, avatars (affordance) |
-| --radius-soft | 4px | Progress bar fills (reads as meter) |
-
-## Decision Tree
-
-- Is this a toggle or avatar? → Use pill (9999px)
-- Is this a progress bar? → Use soft (4px)
-- Everything else → Use 0 (default)

package/guidelines/foundations/spacing.md

@@ -1,36 +0,0 @@
-# Spacing
-
-> Auto-generated from `tokens.json`. Do not edit manually.
-
-## Scale
-
-| Token | Value |
-| ----- | ----- |
-| `1` | 4px |
-| `2` | 8px |
-| `3` | 12px |
-| `4` | 16px |
-| `5` | 20px |
-| `6` | 24px |
-| `8` | 32px |
-| `10` | 40px |
-| `12` | 48px |
-| `16` | 64px |
-| `20` | 80px |
-| `24` | 96px |
-
-## Radius
-
-| Token | Value | Description |
-| ----- | ----- | ----------- |
-| `base` | 0rem | Brutalist zero radius — sharp corners by default |
-
-## Shadows
-
-| Token | Value |
-| ----- | ----- |
-| `sm` | `0 1px 2px 0 rgb(0 0 0 / 0.3)` |
-| `md` | `0 4px 12px 0 rgb(0 0 0 / 0.25)` |
-| `lg` | `0 8px 24px 0 rgb(0 0 0 / 0.35)` |
-| `xl` | `0 20px 25px -5px rgb(0 0 0 / 0.4)` |
-| `popover` | `0 0 0 1px rgb(0 0 0 / 0.2), 0 3px 6px 0 rgb(0 0 0 / 0.25), 0 9px 24px 0 rgb(0 0 0 / 0.35)` |

package/guidelines/foundations/typography.md

@@ -1,29 +0,0 @@
-# Typography
-
-> Auto-generated from `tokens.json`. Do not edit manually.
-
-## Font Families
-
-| Role | Stack |
-| ---- | ----- |
-| `display` | `"Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif` |
-| `body` | `"Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif` |
-| `mono` | `"Geist Mono", "Geist Mono Fallback", ui-monospace, SFMono-Regular, Menlo, monospace` |
-
-## Type Scale
-
-| Name | Size | Weight | Line Height | Letter Spacing | Transform |
-| ---- | ---- | ------ | ----------- | -------------- | --------- |
-| `display` | clamp(56px, 12vw, 180px) | 700 | 1 | -0.03em | --- |
-| `hero` | clamp(40px, 8.5vw, 96px) | 700 | 1 | -0.03em | --- |
-| `h2` | clamp(30px, 4vw, 48px) | 600 | 1.1 | -0.025em | --- |
-| `h3` | 36px | 600 | 1.15 | -0.02em | --- |
-| `h4` | 30px | 600 | 1.2 | -0.02em | --- |
-| `h5` | 24px | 600 | 1.2 | -0.015em | --- |
-| `h6` | 18px | 600 | 1.3 | -0.015em | --- |
-| `body` | 16px | 400 | 1.5 | 0 | --- |
-| `body-sm` | 14px | 400 | 1.5 | 0 | --- |
-| `label` | 12px | 500 | 1.3 | 0.01em | --- |
-| `badge` | 14px | 600 | 1.3 | 0.025em | uppercase |
-| `meta` | 11px | 400 | 1.3 | 0.05em | --- |
-| `code` | 13px | 400 | 1.5 | 0 | --- |

package/guidelines/overview.md

@@ -1,26 +0,0 @@
-# DS Leo Becker
-
-## Design Philosophy
-
-Brutalist dark-mode design system for LBK Content House. Every interface built with this system has a distinctive editorial character — sharp corners, teal depths, orange accents, and mono typography for UI chrome.
-
-## Principles
-
-1. **Zero radius by default** — --radius: 0 for all structural components. Exceptions only for affordance clarity: pill shapes (9999px) on toggles and avatars, soft radius (4px) on progress bars.
-2. **Mono chrome** — All UI labels, meta, badges use Geist Mono uppercase.
-3. **1px borders, two styles** — Solid for component outlines (card, button, input). Dashed for content rhythm (section breaks, separators).
-4. **Stripe hover** — Buttons animate a 45-degree diagonal stripe layer on hover.
-5. **Accent dot** — Animated 8px dot blinks as section/status indicator.
-6. **Texture as background only** — Never place text directly on bg-diagonal or bg-grid.
-
-## Rules
-
-- **IMPORTANT:** Always use semantic tokens (bg-background, text-foreground), never raw hex values.
-- **IMPORTANT:** Only one accent CTA (StripeButton variant="accent") per screen.
-- Use Geist Mono uppercase for all UI chrome: badges, pills, labels, meta text.
-- Use Geist Sans for all content: headings, body, descriptions.
-
-## Reading Order
-
-1. **Foundations** — Colors, typography, spacing, motion
-2. **Components** — shadcn/ui themed + custom (BadgeDot, StripeButton, Pill, etc.)

package/guidelines/setup.md

@@ -1,26 +0,0 @@
-# Setup
-
-## Install
-
-```bash
-npm install ds-leobecker
-```
-
-## Configure
-
-```css
-/* globals.css */
-@import "tailwindcss";
-@import "tw-animate-css";
-@import "ds-leobecker/theme";
-
-@layer base {
-  * { @apply border-border outline-ring/50; }
-  body { @apply bg-background text-foreground; }
-}
-```
-
-## Requirements
-
-- Tailwind CSS 4+
-- PostCSS with @tailwindcss/postcss plugin