@palate/cli 0.0.0-stage → 0.0.1

package/kb/sources/product-and-docs.md

@@ -0,0 +1,37 @@
+# Product UI and docs references
+
+Public pages that are best-in-class for screens that marketing galleries don't cover. palate captures them live when one is picked. Add rows freely: palate reads every table with Site, URL, Best for and Notes columns.
+
+## Docs and API references
+
+| Site | URL | Best for | Notes |
+|---|---|---|---|
+| Stripe API reference | https://docs.stripe.com/api | API reference: three columns, sticky code panel, parameters list | The reference everyone copies; request and response beside each endpoint |
+| Resend API reference | https://resend.com/docs/api-reference/introduction | API reference, code tabs in many languages, docs nav | Calm dark docs, one endpoint per page |
+| GitHub REST docs | https://docs.github.com/en/rest | API reference, docs nav for a huge surface | Dense, versioned, strong search |
+| Linear developers | https://linear.app/developers | Docs landing, API reference | Restrained, product-styled docs |
+
+## Changelogs
+
+| Site | URL | Best for | Notes |
+|---|---|---|---|
+| Linear changelog | https://linear.app/changelog | changelog: big media per release, dated entries | Dark, Inter Variable, image-led |
+| Vercel changelog | https://vercel.com/changelog | changelog: dense list with categories | Geist, light and dark |
+| Raycast changelog | https://www.raycast.com/changelog | changelog with version numbers and grouped changes | Dark, playful details |
+
+## App screens (dashboards, tables, settings)
+
+| Site | URL | Best for | Notes |
+|---|---|---|---|
+| shadcn dashboard example | https://ui.shadcn.com/examples/dashboard | dashboard home, KPI row, chart, recent activity | The neutral shadcn baseline; good for density and spacing |
+| shadcn tasks example | https://ui.shadcn.com/examples/tasks | data table with toolbar, filters, row actions | Clean filter toolbar pattern |
+| shadcn forms example | https://ui.shadcn.com/examples/forms | settings pages, section nav, forms | Settings layout with left nav |
+| shadcn mail example | https://ui.shadcn.com/examples/mail | three-pane app layout, list + detail | Resizable panes |
+| Kargul workflow editor | https://workflow-editor-kargul.vercel.app | node canvas, workflow builder, app shell | Dark, layered shadows, dot grid |
+
+## Mobile apps
+
+| Site | URL | Best for | Notes |
+|---|---|---|---|
+| Streaks | https://streaksapp.com | mobile habit tracker, round check-off targets, daily checklist | Apple Design Award winner; big tap targets, playful completion |
+| Things 3 | https://culturedcode.com/things/ | mobile today list, task checklist, calm typography | Restrained, precise, beloved iOS task app |

package/kb/systems/1win/DESIGN.md

@@ -0,0 +1,463 @@
+---
+version: alpha
+name: 1win Analysis
+description: An analysis of 1win's design language — a near-black crypto casino and sportsbook built on Inter at heavy weights, where a vivid green action color and an electric blue secondary carry every CTA across dense, full-bleed game-tile rails, promo cards, and live betting panels on a flat dark-grey surface ladder.
+
+colors:
+  primary: "#00b24b"
+  secondary: "#0075ff"
+  on-primary: "#ffffff"
+  canvas: "#141415"
+  surface: "#2e3035"
+  hairline: "#2d2f33"
+  ink: "#f0f2f5"
+  muted: "#9aa1b1"
+  faint: "#53575f"
+  black: "#000000"
+
+typography:
+  display:
+    fontFamily: Inter
+    fontSize: 33px
+    fontWeight: 800
+    lineHeight: 1.1
+    letterSpacing: 0
+  heading:
+    fontFamily: Inter
+    fontSize: 20px
+    fontWeight: 800
+    lineHeight: 1.2
+    letterSpacing: 0
+  title:
+    fontFamily: Inter
+    fontSize: 16px
+    fontWeight: 600
+    lineHeight: 1.3
+    letterSpacing: 0
+  body:
+    fontFamily: Inter
+    fontSize: 14px
+    fontWeight: 600
+    lineHeight: 1.4
+    letterSpacing: 0
+  ui:
+    fontFamily: Inter
+    fontSize: 13px
+    fontWeight: 600
+    lineHeight: 1.3
+    letterSpacing: 0
+  caption:
+    fontFamily: Inter
+    fontSize: 12px
+    fontWeight: 600
+    lineHeight: 1.3
+    letterSpacing: 0
+
+rounded:
+  xs: 4px
+  sm: 6px
+  md: 8px
+  lg: 10px
+  xl: 12px
+  card: 16px
+  full: 999px
+
+spacing:
+  xxs: 2px
+  xs: 4px
+  sm: 8px
+  md: 12px
+  lg: 16px
+  xl: 20px
+  xxl: 24px
+  xxxl: 32px
+
+components:
+  button-primary:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.body}"
+    rounded: "{rounded.lg}"
+    padding: "8px 12px"
+  button-secondary:
+    backgroundColor: "{colors.secondary}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.body}"
+    rounded: "{rounded.lg}"
+    padding: "8px 12px"
+  button-tertiary:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body}"
+    rounded: "{rounded.xl}"
+    padding: "8px 12px"
+  button-ghost:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body}"
+    rounded: "{rounded.lg}"
+    padding: "0px 8px"
+  pill-badge:
+    backgroundColor: "{colors.secondary}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.caption}"
+    rounded: "{rounded.full}"
+    padding: "0px 4px"
+  pill-outline:
+    textColor: "{colors.ink}"
+    typography: "{typography.title}"
+    rounded: "{rounded.full}"
+    padding: "0px 8px"
+  top-nav:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    padding: "8px 16px"
+  sidebar-rail:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.muted}"
+    padding: "8px"
+  game-tile:
+    backgroundColor: "{colors.surface}"
+    rounded: "{rounded.card}"
+  hero-banner:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.card}"
+    padding: "24px"
+  promo-card:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.card}"
+    padding: "16px"
+  feature-card:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.card}"
+    padding: "16px"
+  feature-card-elevated:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.card}"
+    padding: "16px"
+  bet-odds-button:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.ink}"
+    typography: "{typography.ui}"
+    rounded: "{rounded.md}"
+    padding: "8px 12px"
+  betslip-panel:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.card}"
+    padding: "16px"
+  text-input:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body}"
+    rounded: "{rounded.md}"
+    padding: "8px 12px"
+  footer:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.muted}"
+    padding: "24px"
+
+  # ─── Examples (illustrative) — kit-mirror surfaces ───
+  ex-pricing-tier:
+    description: "Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface."
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.ink}"
+    borderColor: "{colors.hairline}"
+    rounded: "{rounded.card}"
+    padding: "{spacing.lg}"
+  ex-pricing-tier-featured:
+    description: "Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode)."
+    backgroundColor: "{colors.ink}"
+    textColor: "{colors.on-primary}"
+    rounded: "{rounded.card}"
+    padding: "{spacing.lg}"
+  ex-product-selector:
+    description: "What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery)."
+    backgroundColor: "{colors.surface}"
+    rounded: "{rounded.card}"
+    padding: "{spacing.lg}"
+  ex-cart-drawer:
+    description: "Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart)."
+    backgroundColor: "{colors.surface}"
+    rounded: "{rounded.card}"
+    padding: "{spacing.lg}"
+    item-divider: "{colors.hairline}"
+  ex-app-shell-row:
+    description: "Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator."
+    backgroundColor: "{colors.canvas}"
+    activeIndicator: "{colors.primary}"
+    rounded: "{rounded.sm}"
+    padding: "{spacing.sm} {spacing.md}"
+  ex-data-table-cell:
+    description: "Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm."
+    headerBackground: "{colors.surface}"
+    headerTypography: "{typography.caption}"
+    bodyTypography: "{typography.body}"
+    cellPadding: "{spacing.sm} {spacing.md}"
+    rowBorder: "{colors.hairline}"
+  ex-auth-form-card:
+    description: "Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside."
+    backgroundColor: "{colors.surface}"
+    rounded: "{rounded.card}"
+    padding: "{spacing.lg}"
+  ex-modal-card:
+    description: "Modal dialog surface — same chrome as feature-card with elevated shadow."
+    backgroundColor: "{colors.surface}"
+    rounded: "{rounded.card}"
+    padding: "{spacing.lg}"
+  ex-empty-state-card:
+    description: "Empty-state illustration frame."
+    backgroundColor: "{colors.surface}"
+    rounded: "{rounded.card}"
+    padding: "{spacing.xxl}"
+    captionTypography: "{typography.body}"
+  ex-toast:
+    description: "Toast notification surface — feature-card shape + medium shadow."
+    backgroundColor: "{colors.surface}"
+    rounded: "{rounded.card}"
+    padding: "{spacing.md} {spacing.lg}"
+    typography: "{typography.body}"
+
+---
+
+
+## Overview
+
+1win is a crypto casino and sportsbook that runs almost entirely on a near-black canvas (`{colors.canvas}` — #141415), a flat, slightly cool dark field that lets thousands of vibrant game thumbnails do the shouting. The chrome around the content is deliberately quiet: dark-grey surfaces (`{colors.surface}` — #2e3035), faint translucent hairlines, and off-white text (`{colors.ink}` — #f0f2f5). Against that restraint, two action colors carry the entire interactive layer — a vivid green (`{colors.primary}` — #00b24b) on the "Registration" CTA and every primary confirm, and an electric blue (`{colors.secondary}` — #0075ff) on "Log In", links, the "Show more" pill, active tabs, and bet highlights.
+
+The layout is a high-density product surface, not a marketing page. A fixed left icon rail holds category navigation; the main column is a long stack of horizontally-scrolling rails — "Top games", "Slots", "Originals", game providers — each a row of full-bleed, brightly-illustrated `game-tile` thumbnails. Promotional bonuses ride in gradient-rich `hero-banner` cards at the top, and the sportsbook adds match rows with `bet-odds-button` chips and a right-hand `betslip-panel`. Typography is Inter set at heavy weights only (600 and 800) — even body copy is semibold — which gives the dense UI a punchy, app-like confidence rather than an editorial calm.
+
+Color discipline is the key to reading this brand correctly: the loud purples, reds, ambers, and violets that fill the screen all live *inside* game artwork and bonus-card illustrations — they are content, not chrome. The system itself is monochrome dark plus exactly two signals: green for "go / win / register" and blue for "secondary / navigate / live". Everything structural is built from the dark surface ladder and those two accents.
+
+**Key Characteristics:**
+- Near-black `{colors.canvas}` foundation with a flat `{colors.surface}` card/tile ladder — depth comes from surface shifts and faint `{colors.hairline}` borders, not heavy shadow.
+- Two-signal action system: green `{colors.primary}` for primary CTAs (Registration, confirm) and blue `{colors.secondary}` for secondary actions, links, and live/betting highlights.
+- Inter at heavy weights only (600 / 800) — even `{typography.body}` is semibold, giving the dense UI an app-like punch.
+- Content-forward game rails — full-bleed `game-tile` artwork supplies all the saturation; the surrounding frame stays monochrome dark.
+- Pill language for badges and status (`{rounded.full}`), modest `{rounded.lg}`–`{rounded.xl}` on buttons, and `{rounded.card}` (16px) on tiles, promo cards, and panels.
+- A left icon `sidebar-rail` + dense horizontally-scrolling rails define the shell, closer to a native app than a website.
+
+## Colors
+
+> Source pages analyzed: home, promotions, betting, vip-club.
+
+### Brand & Accent
+- **Action Green** (`{colors.primary}` — #00b24b): The primary action color — the "Registration" CTA, primary confirms, betslip place-bet, and section accent icons. The brand's "go / win" signal.
+- **Electric Blue** (`{colors.secondary}` — #0075ff): The secondary action — "Log In", text links, the "Show more" pill, active tabs, badges, and live/betting highlights.
+- **On Primary** (`{colors.on-primary}` — #ffffff): White text/icons on the green and blue fills.
+
+### Surface
+- **Canvas** (`{colors.canvas}` — #141415): The page background and the fill of the nav and `sidebar-rail` — a flat near-black.
+- **Surface** (`{colors.surface}` — #2e3035): Cards, game tiles, promo cards, betslip panels, utility buttons, and input fields — the single elevated dark step.
+- **Hairline** (`{colors.hairline}` — #2d2f33): The faint 1px divider/card border, a translucent cool-grey edge that reads against both canvas and surface.
+
+### Text
+- **Ink** (`{colors.ink}` — #f0f2f5): Primary text, the wordmark, and headings — a soft off-white.
+- **Muted** (`{colors.muted}` — #9aa1b1): Secondary labels, inactive nav glyphs, footer text.
+- **Faint** (`{colors.faint}` — #53575f): Tertiary/placeholder text and disabled labels.
+- **Black** (`{colors.black}` — #000000): Maximum-contrast text used on the brightest accent fills and light promo surfaces.
+
+## Typography
+
+### Font Family
+The entire system is set in **Inter** (`Inter, sans-serif`), and only at heavy weights — **600 (semibold)** and **800 (extrabold)**. There is no regular-weight body text; even running copy is semibold, which is what gives the dense, data-heavy interface its punchy, native-app feel. Headlines and bonus figures use 800; everything functional uses 600.
+
+### Hierarchy
+
+| Token | Size | Weight | Line Height | Letter Spacing | Use |
+|---|---|---|---|---|---|
+| `{typography.display}` | 33px | 800 | 1.1 | 0 | Hero / page headlines (bonus figures, "Promotions") |
+| `{typography.heading}` | 20px | 800 | 1.2 | 0 | Section + card titles |
+| `{typography.title}` | 16px | 600 | 1.3 | 0 | Game titles, row headers, outlined pills |
+| `{typography.body}` | 14px | 600 | 1.4 | 0 | Default body, button labels |
+| `{typography.ui}` | 13px | 600 | 1.3 | 0 | Inline UI text, odds, metadata |
+| `{typography.caption}` | 12px | 600 | 1.3 | 0 | Badges, chips, micro-labels |
+
+### Principles
+Hierarchy is built from size and the 600↔800 weight jump, never from a light/regular contrast. The heavy floor keeps small UI text legible against the dark, busy backdrop and matches the high-energy gambling context.
+
+### Note on Font Substitutes
+Inter is an open-source Google Font, so no substitution is needed. If a fallback is required, any grotesque with a strong semibold (e.g. Manrope, Geist) preserves the heavy-weight character; keep body at 600+ to retain the app-like density.
+
+## Layout
+
+### Spacing System
+- **Base unit**: 8px.
+- **Tokens (front matter)**: `{spacing.xxs}` 2px · `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 20px · `{spacing.xxl}` 24px · `{spacing.xxxl}` 32px
+- Controls run tight — `{spacing.sm}`×`{spacing.md}` (8×12px) is the recurring button padding; cards and panels use `{spacing.lg}`–`{spacing.xxl}` (16–24px) interiors.
+
+### Grid & Container
+The shell is a fixed left icon `sidebar-rail` plus a fluid content column. Discovery uses horizontally-scrolling rails (carousels) of `game-tile` thumbnails rather than wrapping grids; the promotions page uses a 2-up card grid, and the sportsbook uses full-width match rows with a docked right-hand `betslip-panel`.
+
+### Whitespace Philosophy
+Density is the point — tiles pack close together to maximize the number of games in view, and the dark canvas itself does the separating between rails. Vertical gaps between labeled rails are modest; the brightness step between a tile and the canvas, plus a faint `{colors.hairline}`, supplies most of the structure.
+
+### Responsive Strategy
+
+#### Breakpoints
+| Name | Width | Key Changes |
+|---|---|---|
+| Mobile | < 768px | Left rail collapses to a bottom/hamburger nav; rails shorten; betslip becomes a bottom sheet |
+| Tablet | 768–1023px | Condensed rail; fewer tiles per rail; 2-up promo grid retained |
+| Laptop | 1024–1439px | Full rail + multi-tile rails |
+| Desktop | ≥ 1440px (up to 1920px) | Widest rails + persistent betslip panel |
+
+#### Touch Targets
+Buttons carry `{spacing.sm}`×`{spacing.md}` padding and pills clear comfortable tap sizes; the green `button-primary` is the largest, highest-priority tap surface. Aim for 44×44px minimum on the dense rails.
+
+#### Collapsing Strategy
+The left `sidebar-rail` collapses first (to a hamburger or bottom bar). Category tab strips and `bet-odds-button` rows become horizontally scrollable rather than wrapping. Game rails keep their carousel behavior at every width, simply showing fewer tiles. The `betslip-panel` docks to the right on desktop and becomes a bottom sheet on mobile.
+
+#### Image Behavior
+Game thumbnails are full-bleed inside `{rounded.card}` corners (no internal padding) in portrait-leaning and square ratios; the artwork supplies all the color. Promo cards carry edge-to-edge photography behind an `{colors.ink}` title. Tiles lazy-load as rails scroll into view, with the `{colors.surface}` tile color as the placeholder.
+
+## Elevation & Depth
+
+Depth is mostly tonal — a flat two-step surface ladder rather than layered shadows.
+
+| Level | Treatment | Use |
+|---|---|---|
+| 0 | `{colors.canvas}` flat | Page background, nav, sidebar rail |
+| 1 | `{colors.surface}` + `{colors.hairline}` border | Cards, tiles, promo cards, betslip, buttons, inputs |
+| Floating | `{colors.surface}` + soft `rgba(0,0,0,0.4)` shadow | Modals, dropdowns, the docked betslip lifted above content |
+
+### Decorative Depth
+The brand's visual richness comes from the game and promo artwork (radial-gradient bonus banners, illustrated tiles) layered on the flat dark canvas — not from UI shadows. Selected/active states use the green or blue accent as a glow-like emphasis rather than elevation.
+
+## Shapes
+
+### Border Radius Scale
+
+| Token | Value | Use |
+|---|---|---|
+| `{rounded.xs}` | 4px | Small chips, inner elements |
+| `{rounded.sm}` | 6px | Compact cards, small media |
+| `{rounded.md}` | 8px | Inputs, odds buttons, medium elements |
+| `{rounded.lg}` | 10px | Primary / secondary / ghost buttons |
+| `{rounded.xl}` | 12px | Utility buttons |
+| `{rounded.card}` | 16px | Game tiles, promo cards, hero banners, panels |
+| `{rounded.full}` | 999px | Pills, badges, avatars, circular controls |
+
+### Photography Geometry
+Game artwork is framed at `{rounded.card}` (16px) and runs full-bleed inside the tile. Promo cards use the same 16px frame with edge-to-edge imagery. Avatars, status badges, and provider chips use `{rounded.full}`. There is no exposed photography outside the gaming/promo content — the structural chrome stays geometric and flat.
+
+## Components
+
+> **No hover states documented.** Each spec covers Default and Active/Pressed only. Variants live as separate `components:` entries.
+
+### Buttons
+
+**`button-primary`** — the green "Registration" / primary-confirm CTA, the highest-visibility control.
+- Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.body}`, rounded `{rounded.lg}`, padding `{spacing.sm}` `{spacing.md}` (8×12px).
+
+**`button-secondary`** — the blue "Log In" / secondary action and the "Show more" pill.
+- Background `{colors.secondary}`, text `{colors.on-primary}`, type `{typography.body}`, rounded `{rounded.lg}`, padding 8×12px.
+
+**`button-tertiary`** — the dark-grey utility button ("More events", "Read more").
+- Background `{colors.surface}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.xl}`, padding 8×12px.
+
+**`button-ghost`** — a low-emphasis grey control on dense rows.
+- Background `{colors.surface}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.lg}`, padding `0` `{spacing.sm}` (0×8px).
+
+### Navigation
+
+**`top-nav`** — the sticky header carrying the 1win wordmark, search, balance, and the green Registration + blue Log In CTAs.
+- Background `{colors.canvas}`, text `{colors.ink}`, padding 8×16px, with a `{colors.hairline}` base edge.
+
+**`sidebar-rail`** — the fixed left icon rail (Casino, Sports, categories).
+- Background `{colors.canvas}`, glyphs `{colors.muted}`, padding `{spacing.sm}`. Active item marked in `{colors.primary}`.
+
+### Inputs & Forms
+
+**`text-input`** — search and betslip amount fields.
+- Background `{colors.surface}`, text `{colors.ink}`, placeholder `{colors.faint}`, border `{colors.hairline}`, type `{typography.body}`, rounded `{rounded.md}`, padding 8×12px.
+
+**`bet-odds-button`** — the odds chip in sportsbook match rows.
+- Background `{colors.surface}`, text `{colors.ink}`, type `{typography.ui}`, rounded `{rounded.md}`, padding 8×12px. Selected state highlights in `{colors.secondary}`.
+
+### Pills & Badges
+
+**`pill-badge`** — the solid blue status/count badge.
+- Background `{colors.secondary}`, text `{colors.on-primary}`, type `{typography.caption}`, rounded `{rounded.full}`, padding `0` `{spacing.xs}` (0×4px).
+
+**`pill-outline`** — the bordered filter/category pill.
+- Text `{colors.ink}`, type `{typography.title}`, rounded `{rounded.full}`, padding 0×8px, with a `{colors.hairline}` border.
+
+### Cards & Containers
+
+**`game-tile`** — the core discovery unit: a full-bleed game thumbnail.
+- Background `{colors.surface}` (placeholder), rounded `{rounded.card}`. Artwork fills edge-to-edge with no padding.
+
+**`hero-banner`** — the top welcome-bonus / promo banner.
+- Background `{colors.surface}` with edge-to-edge gradient imagery, headline `{colors.ink}` in `{typography.display}`, rounded `{rounded.card}`, padding `{spacing.xxl}`.
+
+**`promo-card`** — a promotions-page card (full-bleed photo + title + chips).
+- Background `{colors.surface}`, title `{colors.ink}`, rounded `{rounded.card}`, padding `{spacing.lg}`.
+
+**`feature-card`** — generic dark content card.
+- Background `{colors.surface}`, text `{colors.ink}`, border `{colors.hairline}`, rounded `{rounded.card}`, padding `{spacing.lg}`.
+
+**`feature-card-elevated`** — a feature card lifted above the page (floating shadow), base for modal/toast surfaces.
+- Background `{colors.surface}`, text `{colors.ink}`, rounded `{rounded.card}`, padding `{spacing.lg}`, soft `rgba(0,0,0,0.4)` shadow.
+
+**`betslip-panel`** — the docked sportsbook betslip / wheel-of-fortune panel.
+- Background `{colors.surface}`, text `{colors.ink}`, rounded `{rounded.card}`, padding `{spacing.lg}`. Confirm action uses `button-primary`.
+
+**`footer`** — the page footer (support, information, categories columns).
+- Background `{colors.canvas}`, text `{colors.muted}`, headings `{colors.ink}`, padding `{spacing.xxl}`.
+
+### Examples (illustrative)
+
+> Kit-mirror demonstration surfaces. Each `ex-*` entry references 1win's brand-native primitives (`{colors.surface}`, `{colors.primary}`, `{rounded.card}`, the spacing scale) so downstream consumers re-skin the same 10 illustrative surfaces consistently. These are not extracted brand components.
+
+**`ex-pricing-tier`** — Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface.
+- Properties: `backgroundColor`, `textColor`, `borderColor`, `rounded`, `padding`
+
+**`ex-pricing-tier-featured`** — Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode).
+- Properties: `backgroundColor`, `textColor`, `rounded`, `padding`
+
+**`ex-product-selector`** — What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery).
+- Properties: `backgroundColor`, `rounded`, `padding`
+
+**`ex-cart-drawer`** — Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart).
+- Properties: `backgroundColor`, `rounded`, `padding`, `item-divider`
+
+**`ex-app-shell-row`** — Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator.
+- Properties: `backgroundColor`, `activeIndicator`, `rounded`, `padding`
+
+**`ex-data-table-cell`** — Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm.
+- Properties: `headerBackground`, `headerTypography`, `bodyTypography`, `cellPadding`, `rowBorder`
+
+**`ex-auth-form-card`** — Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside.
+- Properties: `backgroundColor`, `rounded`, `padding`
+
+**`ex-modal-card`** — Modal dialog surface — same chrome as feature-card with elevated shadow.
+- Properties: `backgroundColor`, `rounded`, `padding`
+
+**`ex-empty-state-card`** — Empty-state illustration frame.
+- Properties: `backgroundColor`, `rounded`, `padding`, `captionTypography`
+
+**`ex-toast`** — Toast notification surface — feature-card shape + medium shadow.
+- Properties: `backgroundColor`, `rounded`, `padding`, `typography`
+
+
+## Do's and Don'ts
+
+### Do
+- Reserve `{colors.primary}` (green) for primary actions — Registration, confirm, place-bet — and `{colors.secondary}` (blue) for secondary actions, links, and live/betting highlights.
+- Build depth with the surface ladder (`{colors.canvas}` → `{colors.surface}`) plus a faint `{colors.hairline}` edge; avoid heavy shadows.
+- Set every label in Inter 600+ (`{typography.body}` / `{typography.caption}`); use the 800 weight for headlines and bonus figures.
+- Let game and promo artwork supply the color — keep the surrounding chrome monochrome dark.
+- Use `{rounded.lg}`–`{rounded.xl}` on buttons, `{rounded.card}` (16px) on tiles/cards/panels, and `{rounded.full}` on pills and badges.
+- Pair accent fills with `{colors.on-primary}` (white) text for legibility.
+
+### Don't
+- Don't promote game-tile or bonus-banner gradient colors (the purples, reds, violets, ambers) into the UI palette — they are content, not chrome.
+- Don't add a third structural accent; the system is green + blue only.
+- Don't use pure-regular weights — there is no Inter 400 here; body copy is semibold.
+- Don't pad game tiles — artwork is full-bleed inside `{rounded.card}` corners.
+- Don't rely on drop shadows for elevation; the surface brightness step is the elevation language.

package/kb/systems/LICENSE-awesome-design-md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 VoltAgent
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/kb/systems/README.md

@@ -0,0 +1,7 @@
+# Design systems
+
+Design system analyses in the DESIGN.md format (Google's DESIGN.md spec), one folder per product.
+
+**Source and credit:** [VoltAgent/awesome-design-md](https://github.com/VoltAgent/awesome-design-md) (commit 3b60532), MIT licence, copied here unchanged with its licence in `LICENSE-awesome-design-md`. More analyses at [getdesign.md](https://getdesign.md). The products, names and brands belong to their owners; these files describe their public design for learning and reference.
+
+**How palate uses them:** to learn craft (type scales, spacing rhythm, radii logic, elevation, density, colour roles) and each system's decision rules, and to transfer that craft into a project's own tokens while keeping the project's brand. palate does not reproduce another company's logo, copy or brand identity unless the user explicitly asks for a likeness.