@jaimevalasek/aioson 1.3.0 → 1.5.1

package/template/.aioson/skills/design/warm-craft-ui/references/websites.md

@@ -0,0 +1,289 @@
+# Website Layouts — Warm Craft UI
+
+Composition guides for landing pages, product pages, and institutional websites. Uses tokens from `design-tokens.md` and components from `components.md`.
+
+---
+
+## General Website Rules
+
+1. **Hero is the first impression.** It must feel crafted, not templated. Never a centered headline + two buttons + stock image.
+2. **Editorial pacing.** Alternate between high-impact sections and breathing room. Never repeat the same card grid four times.
+3. **Serif drives the narrative.** Headlines, pull quotes, and hero text use `var(--font-display)`. This is what makes it feel warm, not the colors.
+4. **Warm backgrounds, not white.** Use `var(--bg-void)` for section alternation, never pure white sections.
+5. **One accent, used sparingly.** Terracotta for CTAs and key highlights only. Never accent borders, accent backgrounds on sections, or accent everything.
+6. **Illustrations over icons.** Where possible, use warm, hand-drawn-style illustrations. Cold geometric SVG icons are for apps, not marketing pages.
+7. **Real copy only.** No Lorem ipsum. Write real headlines, descriptions, and CTAs that sound like a human wrote them.
+
+---
+
+## Hero Patterns
+
+### Pattern A: Split Hero
+
+```
++---------------------------+---------------------------+
+|                           |                           |
+|  OVERLINE                 |  PRODUCT SHOT or          |
+|  (text-sm, accent,       |  ILLUSTRATION             |
+|   tracking-wide)          |  (warm tones, soft        |
+|                           |   shadow, slight tilt)    |
+|  HEADLINE                 |                           |
+|  (font-display, text-5xl, |                           |
+|   weight-bold, heading)   |                           |
+|                           |                           |
+|  SUBTITLE                 |                           |
+|  (text-lg, secondary,    |                           |
+|   max-width 480px)        |                           |
+|                           |                           |
+|  [CTA Primary] [CTA Sec] |                           |
+|                           |                           |
++---------------------------+---------------------------+
+```
+
+Use when: product has a strong visual to show. Most common warm hero.
+
+### Pattern B: Editorial Hero
+
+```
++-----------------------------------------------------------+
+|  centered, max-width: 720px                                |
+|                                                            |
+|  OVERLINE (accent badge or small label)                    |
+|                                                            |
+|  HEADLINE                                                  |
+|  (font-display, text-5xl, weight-bold, text-align: center)|
+|  letter-spacing: var(--tracking-tight)                     |
+|                                                            |
+|  SUBTITLE                                                  |
+|  (text-xl, secondary, text-align: center, max-width 560px)|
+|                                                            |
+|  [CTA Primary]                                             |
+|                                                            |
+|  SOCIAL PROOF LINE                                         |
+|  (avatar cluster + "Trusted by 2,000+ teams")             |
+|                                                            |
++-----------------------------------------------------------+
+```
+
+Use when: message is the product. No visual needed above the fold.
+
+### Pattern C: Immersive Hero
+
+```
++-----------------------------------------------------------+
+|  full-width background: warm gradient or warm photography  |
+|  (subtle warm overlay if image is cold)                    |
+|                                                            |
+|  centered content, max-width: 640px                        |
+|                                                            |
+|  HEADLINE (white or light text if on dark background)      |
+|  SUBTITLE                                                  |
+|  [CTA on warm background]                                  |
+|                                                            |
++-----------------------------------------------------------+
+```
+
+Use when: brand-heavy, emotional product, premium feel.
+
+---
+
+## Section Patterns
+
+### Feature Grid
+
+```
+SECTION HEADER
+  overline: var(--text-sm), var(--accent), var(--tracking-wider), uppercase
+  title: var(--font-display), var(--text-3xl), var(--weight-bold)
+  subtitle: var(--text-lg), var(--text-secondary), max-width 600px
+  text-align: center or left
+  margin-bottom: var(--space-12)
+
+GRID
+  display: grid
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))
+  gap: var(--space-6)
+  uses: Feature Card component
+```
+
+Rules:
+- Max 6 features in a grid. If more, group into categories.
+- Each feature card should have a warm icon area (not just an icon floating in space).
+
+### Alternating Feature Sections
+
+```
+SECTION 1 (image left, text right)
++---------------------------+---------------------------+
+|  [Product screenshot      |  OVERLINE                 |
+|   or illustration,       |  TITLE (serif, 2xl)       |
+|   rounded-2xl,           |  DESCRIPTION              |
+|   warm shadow]            |  BULLET POINTS            |
+|                           |  [CTA link →]             |
++---------------------------+---------------------------+
+
+SECTION 2 (text left, image right)
++---------------------------+---------------------------+
+|  OVERLINE                 |  [Product screenshot      |
+|  TITLE                    |   different angle]        |
+|  DESCRIPTION              |                           |
++---------------------------+---------------------------+
+```
+
+Rules:
+- Always alternate sides.
+- Images should be real product screenshots with warm treatment (rounded corners, soft shadow, slight warm tint).
+- Vertical padding between sections: `var(--space-20)` or `var(--space-24)`.
+
+### Testimonials
+
+```
+Option A — Pull Quote:
+  font: var(--font-display), var(--text-2xl), italic
+  color: var(--text-heading)
+  max-width: 640px
+  text-align: center
+  warm accent bar on left or oversized opening quote mark
+
+  attribution:
+    avatar (48px) + name + title + company
+    font: var(--font-body), var(--text-sm)
+    margin-top: var(--space-6)
+
+Option B — Card Grid:
+  3 columns of testimonial cards
+  Each: quote + avatar + name + role
+  background: var(--bg-surface)
+  border: 1px solid var(--border-subtle)
+  border-radius: var(--radius-2xl)
+  padding: var(--space-6)
+```
+
+Rules:
+- Pull quote is preferred for warm aesthetic. Card grid is acceptable for volume.
+- Never more than one testimonial section per page.
+
+### Social Proof Strip
+
+```
+horizontal row of logos or metrics
+  "Trusted by teams at [Logo] [Logo] [Logo] [Logo]"
+  logos: grayscale, opacity 0.5, warm-tinted
+  hover: opacity 1
+
+  or metrics:
+  "10K+ users | 4.9/5 rating | 50+ countries"
+  font: var(--font-body), var(--text-lg), var(--weight-semibold)
+```
+
+### Pricing Section
+
+```
+SECTION HEADER (centered)
+  title: "Simple, transparent pricing"
+  subtitle: "No hidden fees. Cancel anytime."
+
+PRICING CARDS (2-3 columns, centered)
+  each card:
+    background: var(--bg-surface)
+    border: 1px solid var(--border-subtle)
+    border-radius: var(--radius-2xl)
+    padding: var(--space-8)
+
+    plan name: var(--text-lg), var(--weight-semibold)
+    price: var(--font-display), var(--text-4xl), var(--weight-bold)
+    per period: var(--text-sm), var(--text-secondary)
+    feature list: checkmarks with var(--semantic-green)
+    CTA: Primary or Secondary Button (full width)
+
+  recommended card:
+    border: 2px solid var(--accent)
+    shadow: var(--shadow-lg)
+    "Most Popular" badge above card
+```
+
+### CTA Section (before footer)
+
+```
+background: var(--bg-void)
+border-radius: var(--radius-3xl)
+padding: var(--space-16) var(--space-8)
+text-align: center
+margin: var(--space-16) auto
+max-width: var(--content-lg)
+
+title: var(--font-display), var(--text-3xl), var(--weight-bold)
+subtitle: var(--text-lg), var(--text-secondary)
+[CTA Primary — Large variant] + [CTA Secondary]
+```
+
+---
+
+## Footer
+
+```
+background: var(--bg-void)
+border-top: 1px solid var(--border-subtle)
+padding: var(--space-16) var(--space-8) var(--space-8)
+
+LAYOUT (4 columns on desktop, stacked on mobile)
+  Column 1: Logo + tagline + social icons
+  Columns 2-4: Link groups (Product, Company, Resources)
+
+  link group title:
+    font: var(--font-body), var(--text-sm), var(--weight-semibold)
+    color: var(--text-heading)
+    margin-bottom: var(--space-4)
+
+  links:
+    font: var(--text-sm), var(--text-secondary)
+    hover: var(--text-heading)
+    line-height: 2
+
+BOTTOM BAR
+  border-top: 1px solid var(--border-subtle)
+  margin-top: var(--space-8)
+  padding-top: var(--space-6)
+  display: flex; justify-content: space-between
+  copyright: var(--text-xs), var(--text-muted)
+  legal links: var(--text-xs), var(--text-secondary)
+```
+
+---
+
+## Navigation (Websites)
+
+```
+STICKY HEADER
+  height: 72px
+  background: rgba(253, 252, 250, 0.85)  /* bg-base with blur */
+  backdrop-filter: blur(12px)
+  border-bottom: 1px solid var(--border-subtle)
+  position: sticky; top: 0
+  z-index: var(--z-sticky)
+
+  logo (left): max-height 32px
+  nav links (center): var(--text-sm), var(--weight-medium), var(--text-secondary)
+    hover: var(--text-heading)
+    active: var(--text-heading) + subtle underline
+  CTA (right): Primary Button (compact variant)
+
+MOBILE (< 768px)
+  hamburger icon → slide-in drawer from right
+  full-height, var(--bg-surface)
+  nav items stacked vertically
+  CTA at bottom of drawer
+```
+
+---
+
+## Anti-Patterns (Never Do This)
+
+1. **Generic hero:** Centered headline, two buttons, abstract gradient background. This is every AI-generated landing page.
+2. **Icon grid features:** 6 features as icon + title + one-line description in a 3x2 grid. Lazy and undifferentiated.
+3. **Blue accent on warm page:** Blue CTAs or links break the warm system. Use terracotta or sage.
+4. **Stock photography without warm treatment:** Raw stock photos feel cold. Apply rounded corners, soft shadow, warm tint overlay if needed.
+5. **Testimonials as afterthought:** Generic quote in a gray box at the bottom. Either make it editorial (serif, large) or skip it.
+6. **Dense footer:** Footer should breathe like the rest of the page. Generous padding, warm background.
+7. **Multiple CTAs competing:** One primary CTA per viewport. Secondary CTAs use Ghost or Secondary button style.
+8. **Repeating the same layout:** If sections 2, 3, and 4 all use the same card grid, the page feels generated. Vary the composition.

package/template/.aioson/skills/design-system/SKILL.md

@@ -0,0 +1,92 @@
+---
+name: design
+description: Cognitive Core Design System — a modular visual identity system for building dark/light themed dashboards, frontpages, admin panels, institutional sites, landing pages, and any web interface. Use this skill whenever asked to build, style, or design ANY web UI — dashboards, SaaS panels, landing pages, institutional websites, portfolio pages, command centers, admin tools, or frontpages. Triggers on phrases like "use the design skill", "cognitive core style", "apply the design system", "dark dashboard", "build a landing page", "create a frontpage", "mentes sinteticas layout", "build an admin panel", "create a website with our visual identity", or any request for a styled web interface. This skill routes to sub-modules — always read this file first, then load only the modules you need.
+---
+
+# Cognitive Core Design System
+
+A modular visual identity system. Agents read THIS file first, then load only the sub-modules needed for the task.
+
+## Architecture
+
+```
+skills/design/
+├── SKILL.md                 ← YOU ARE HERE (router)
+├── foundations/
+│   └── SKILL.md             ← Colors, typography, spacing, themes, CSS variables
+├── components/
+│   └── SKILL.md             ← Cards, tables, sidebars, forms, modals, stats, badges
+├── patterns/
+│   └── SKILL.md             ← Page-level layouts: dashboard, settings, auth, list-detail, frontpage
+├── motion/
+│   └── SKILL.md             ← Animations: entrances, hovers, loading, transitions
+└── dashboards/
+    └── SKILL.md             ← Dashboard presets: control center, analytics, ops cockpit
+```
+
+## How Agents Use This System
+
+### Step 1: Read this file (you're doing it)
+
+### Step 2: Classify the task
+
+Determine what type of UI is being built:
+
+| Task Type | Load These Modules |
+|---|---|
+| **Dashboard / Admin panel** | foundations → components → patterns → dashboards |
+| **Landing page / Frontpage** | foundations → components → patterns → motion |
+| **Institutional / Corporate site** | foundations → components → patterns → motion |
+| **Settings / Config page** | foundations → components → patterns |
+| **Auth page (login/register)** | foundations → components → patterns |
+| **Single component** | foundations → components |
+| **Quick styling fix** | foundations |
+| **Animation work** | foundations → motion |
+
+### Step 3: Read the required modules IN ORDER
+
+Always start with `foundations/SKILL.md` — it has the CSS variables everything else depends on. Then read the others as needed.
+
+### Step 4: Build
+
+Compose the interface using tokens from foundations, building blocks from components, layouts from patterns, and animations from motion. For dashboards, the dashboards module has ready-to-use presets.
+
+## Visual Identity Summary
+
+The Cognitive Core aesthetic has three pillars:
+
+1. **Command Center Authority** — Dense data, monospaced labels, large stat readouts, structured grids
+2. **Premium Refinement** — Layered surfaces (3+ depth levels), subtle borders, teal/cyan accent as the "pulse"
+3. **Structured Hierarchy** — Tabs, sidebars, card grids, section headers with icons, labeled zones
+
+This applies to ALL output types — dashboards get the full treatment, but frontpages and institutional pages use the same typography, color system, and component vocabulary in a more open layout.
+
+## Theme System
+
+Every output supports dark/light toggle via `data-theme` attribute:
+
+```html
+<div data-theme="dark"> <!-- or "light" -->
+```
+
+Toggle the attribute value to switch themes. The mechanism (state, JS toggle, server-side) depends on your stack.
+
+Default to **dark** for dashboards/admin. Default to **light** for frontpages/institutional. Always include a theme toggle.
+
+## Technology Boundary
+
+This skill controls **visual identity only** — colors, typography, spacing, layout structure, component anatomy, and motion behavior. It does NOT dictate:
+
+- Output format (HTML, JSX, Vue, Blade, Svelte, etc.)
+- Framework or library choice
+- Build tooling or bundling
+- File structure or splitting strategy
+
+The agent building the interface decides all technology concerns. This skill provides the **what it should look like**, the agent decides the **how to build it**.
+
+Code examples in sub-modules use inline style objects for clarity. Treat them as **design specifications**, not copy-paste code. Adapt the property names and syntax to whatever technology the agent is targeting.
+
+## Required Assets (all technologies)
+
+- **Fonts**: Google Fonts — JetBrains Mono + Inter (import via CSS `@import` or `<link>` tag)
+- **Icons**: Any icon library. Emoji placeholders in examples are just for illustration.

package/template/.aioson/skills/design-system/components/SKILL.md

@@ -0,0 +1,274 @@
+---
+name: design-components
+description: Reusable UI components for the Cognitive Core design system — cards, tables, sidebars, forms, modals, stats blocks, badges, progress bars, buttons, inputs, and navigation elements. Load foundations/SKILL.md first. Use when building any part of a web interface that needs structured UI elements.
+---
+
+# Components — UI Building Blocks
+
+Requires: `foundations/SKILL.md` loaded first (CSS variables must be present).
+
+All components use CSS variables and adapt to dark/light theme automatically.
+
+**Note on examples:** Code snippets below use inline style objects as a **notation for design specs** — they describe visual properties, not mandate a technology. The agent decides whether to output CSS classes, Tailwind utilities, inline styles, styled-components, or anything else. Read the property-value pairs as a design specification. The shorthand `TT` in examples represents the theme transition: `transition: background 250ms ease, color 250ms ease, border-color 250ms ease, box-shadow 250ms ease`.
+
+## 1. Stat Card
+
+Large numeric readout with mono label. Used in stat rows at top of pages.
+
+```jsx
+<div style={{
+  background: 'var(--bg-surface)', border: '1px solid var(--border-subtle)',
+  borderRadius: 'var(--radius-lg)', padding: 'var(--space-4) var(--space-5)',
+  minWidth: 140, flex: 1, ...TT,
+}}>
+  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', color: 'var(--text-muted)',
+    letterSpacing: 'var(--tracking-widest)', textTransform: 'uppercase', fontWeight: 600, marginBottom: 'var(--space-1)' }}>
+    LABEL
+  </div>
+  <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
+    <span style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-4xl)', fontWeight: 700,
+      color: 'var(--text-heading)', lineHeight: 1 }}>42</span>
+    <span style={{ fontSize: 'var(--text-lg)', color: 'var(--text-muted)' }}>/100</span>
+  </div>
+  <div style={{ fontSize: 'var(--text-sm)', color: 'var(--text-muted)', marginTop: 'var(--space-1)' }}>
+    subtitle text
+  </div>
+</div>
+```
+
+Accent variant: replace `color: 'var(--text-heading)'` with `color: 'var(--semantic-green)'` (or red/amber).
+
+## 2. Card (base)
+
+The fundamental container. Everything lives in cards.
+
+```jsx
+const cardStyle = {
+  background: 'var(--bg-surface)',
+  border: '1px solid var(--border-subtle)',
+  borderRadius: 'var(--radius-lg)',
+  padding: 'var(--space-5)',
+  transition: 'var(--transition-theme), transform 150ms ease',
+};
+// Hover: borderColor → var(--border-medium), boxShadow → var(--shadow-glow), transform → translateY(-1px)
+```
+
+## 3. Info Card (icon + title + description + quote)
+
+Used in grids for features, capabilities, items.
+
+Structure:
+```
+┌─────────────────────────────────┐
+│ 📈  [icon]          Badge text  │ ← header row
+│ Card Title                      │ ← accent color
+│ Description text here that      │ ← secondary color
+│ explains the item.              │
+│ ┃ "Optional quote text"         │ ← muted, left border
+└─────────────────────────────────┘
+```
+
+- Header: flex, space-between. Icon left, badge right (mono, `--text-xs`, muted).
+- Title: `--text-lg`, `--weight-semibold`, `color: var(--text-accent)`
+- Desc: `--text-base`, `--text-secondary`, `line-height: 1.5`
+- Quote: italic, `--text-muted`, `border-left: 2px solid var(--accent-dim)`, `padding-left: var(--space-3)`
+
+## 4. Profile Header
+
+Entity header with avatar, name, role, badges, and stat cards.
+
+Structure:
+```
+┌──────────────────────────────────────────────────────────┐
+│ [Avatar 96px]  BIG NAME          [Badge] [Badge]         │
+│ ID: XXX        Role (italic, accent)                     │
+│                ✦ TAGLINE (mono, xs, muted)                │
+│                                                           │
+│ ┌─StatCard─┐  ┌─StatCard─┐  ┌─StatCard─┐               │
+└──────────────────────────────────────────────────────────┘
+```
+
+- Avatar: `96px`, `border-radius: var(--radius-lg)`, `border: 2px solid var(--border-subtle)`
+- ID: mono, `--text-xs`, absolute positioned below avatar
+- Name: `--text-3xl`, `--weight-black`, `--tracking-tight`, `--text-heading`
+- Role: `color: var(--text-accent)`, `font-style: italic`, `--text-lg`
+- Badges: use Badge component (see below)
+
+## 5. Badge / Chip
+
+Three variants:
+
+**Accent badge** (primary, active states):
+```jsx
+{ background: 'var(--accent-dim)', color: 'var(--accent)', border: '1px solid var(--border-accent)',
+  fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', fontWeight: 600,
+  letterSpacing: 'var(--tracking-wider)', textTransform: 'uppercase',
+  padding: '2px 10px', borderRadius: 'var(--radius-sm)' }
+```
+
+**Outline badge** (neutral tags):
+```jsx
+{ background: 'transparent', color: 'var(--text-secondary)', border: '1px solid var(--border-medium)',
+  /* same font styles as accent */ }
+```
+
+**Semantic badge** (status — swap vars):
+- Success: `background: var(--semantic-green-dim)`, `color: var(--semantic-green)`
+- Danger: `var(--semantic-red-dim)`, `var(--semantic-red)`
+- Warning: `var(--semantic-amber-dim)`, `var(--semantic-amber)`
+- Info: `var(--semantic-blue-dim)`, `var(--semantic-blue)`
+
+All include a status dot: `width: 5px, height: 5px, borderRadius: 50%, background: [color]`
+
+## 6. Tab Navigation
+
+```jsx
+<div style={{ display: 'flex', gap: 2, borderBottom: '1px solid var(--border-subtle)', padding: '0 var(--space-6)', overflowX: 'auto' }}>
+  <button style={{
+    fontFamily: 'var(--font-body)', fontSize: 'var(--text-base)',
+    color: isActive ? 'var(--text-accent)' : 'var(--text-secondary)',
+    background: 'none', border: 'none', padding: 'var(--space-3) var(--space-4)',
+    borderBottom: `2px solid ${isActive ? 'var(--accent)' : 'transparent'}`,
+    cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 'var(--space-2)',
+  }}>
+    <span style={{ fontSize: 'var(--text-sm)' }}>icon</span> Label
+  </button>
+</div>
+```
+
+## 7. Sidebar Tree
+
+```
+┌──────────────────┐
+│ SECTION LABEL    │ ← mono, xs, muted, uppercase, tracking-widest
+│  ⊞ Item Active   │ ← bg-surface, border-subtle, text-heading
+│  📊 Item         │ ← text-secondary, transparent bg
+│  💬 Item         │
+│                  │
+│ SECTION LABEL    │
+│  ○ Category      │ ← text-muted or text-accent when active
+│  ● Category (on) │
+└──────────────────┘
+```
+
+Width: `200-220px`. Items: `padding: var(--space-2) var(--space-3)`, `border-radius: var(--radius-md)`.
+
+## 8. Progress Bar
+
+```jsx
+<div style={{ height: 5, background: 'var(--bg-elevated)', borderRadius: 'var(--radius-full)', overflow: 'hidden' }}>
+  <div style={{ height: '100%', borderRadius: 'var(--radius-full)', background: color, width: `${pct}%`, transition: 'width 300ms ease' }} />
+</div>
+```
+
+Colors: `var(--accent)` (default), `var(--semantic-green)`, `var(--semantic-red)`, `var(--semantic-amber)`, `var(--semantic-purple)`.
+
+## 9. Section Header
+
+```jsx
+<div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', padding: 'var(--space-6) 0 var(--space-4)' }}>
+  <span style={{ color: 'var(--accent)', fontSize: 'var(--text-lg)' }}>⚡</span>
+  <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-xl)', fontWeight: 700, color: 'var(--text-heading)', margin: 0 }}>Title</h2>
+</div>
+```
+
+## 10. Mode Panel (accent feature box)
+
+Centered panel with radial glow — used for "operating mode", "status", or a featured CTA.
+
+```
+┌─────────── border-accent ──────────┐
+│         ◆ BADGE PILL              │
+│            [Icon 56px]             │ ← accent border, glow shadow
+│          MONO LABEL               │
+│        Large Title                │
+│       "Subtitle italic"           │
+│   radial-gradient glow behind     │
+└────────────────────────────────────┘
+```
+
+## 11. Top Navigation Bar
+
+```
+┌──────────────────────────────────────────────────────┐
+│ [Logo] AppName     Link  Link  Link     [☀] [Badge] │
+│        SUBTITLE                                       │
+└──────────────────────────────────────────────────────┘
+```
+
+- Background: `var(--bg-void)`, sticky, `z-index: var(--z-sticky)`
+- Logo: `36px`, `background: var(--accent-dim)`, `border: 1px solid var(--accent)`, `border-radius: var(--radius-md)`
+- Brand name: mono, `--weight-bold`, `--text-heading`
+- Subtitle: mono, `--text-xs`, `--text-muted`, uppercase
+- Theme toggle: `36px` button, `var(--bg-surface)`, `var(--border-subtle)`
+
+## 12. Modal / Detail Overlay
+
+- Backdrop: `rgba(0,0,0,0.6)`, centered flex, `z-index: var(--z-modal)`
+- Content: `var(--bg-base)`, `border: 1px solid var(--border-subtle)`, `border-radius: var(--radius-xl)`, `max-width: 700px`
+- Header: padding, border-bottom, flex with close button
+- Body: reuses stat cards, progress bars, badges, section headers
+
+## 13. Data Table
+
+For list views and tabular data:
+
+```
+┌────────────────────────────────────────────────────┐
+│ NAME ▲        CATEGORY    STOCK    STATUS    PRICE │ ← mono header, --text-xs, --text-muted
+├────────────────────────────────────────────────────┤
+│ Product Name  Laptops     23       [●OK]    R$12k │ ← --text-primary, hover row highlight
+│ Product Name  Phones      5        [●Crit]  R$8k  │
+└────────────────────────────────────────────────────┘
+```
+
+- Header row: `background: var(--bg-elevated)`, mono labels
+- Body rows: `border-bottom: 1px solid var(--border-subtle)`, hover: `background: var(--accent-subtle)`
+- Always include sortable headers if data is tabular
+
+## 14. Form Elements
+
+**Input:**
+```jsx
+{ background: 'var(--bg-surface)', border: '1px solid var(--border-medium)',
+  borderRadius: 'var(--radius-md)', padding: 'var(--space-2) var(--space-3)',
+  color: 'var(--text-primary)', fontSize: 'var(--text-base)',
+  fontFamily: 'var(--font-body)', outline: 'none' }
+// Focus: borderColor → var(--border-accent-strong), boxShadow → 0 0 0 3px var(--accent-glow)
+```
+
+**Label:** mono label style (xs, muted, uppercase, tracking-widest). Place above input with `margin-bottom: var(--space-1)`.
+
+**Button primary:**
+```jsx
+{ background: 'var(--accent)', color: 'var(--text-inverse)', border: 'none',
+  borderRadius: 'var(--radius-md)', padding: 'var(--space-2) var(--space-5)',
+  fontFamily: 'var(--font-mono)', fontSize: 'var(--text-sm)', fontWeight: 600,
+  letterSpacing: 'var(--tracking-wider)', textTransform: 'uppercase', cursor: 'pointer' }
+// Hover: background → var(--accent-hover)
+```
+
+**Button secondary:**
+```jsx
+{ background: 'transparent', color: 'var(--text-secondary)',
+  border: '1px solid var(--border-medium)', /* rest same as primary */ }
+// Hover: borderColor → var(--border-accent), color → var(--text-accent)
+```
+
+## 15. DNA Panel (Sliders + Tags)
+
+Combined panel with labeled metrics and tag group. The "personality" card of any entity.
+
+```
+┌─────────────────────────────────────────┐
+│ ✦ PANEL TITLE                           │
+│                                          │
+│ LABEL  ███████████████░░░░░  72%        │ ← mono labels, progress bar, value
+│ LABEL  █████████░░░░░░░░░░  58%        │
+│ LABEL  ████████████░░░░░░░  85%        │
+│                                          │
+│ [Badge] [Badge] [Badge] [Badge]         │ ← flex wrap, gap var(--space-2)
+└─────────────────────────────────────────┘
+```
+
+Each row: `display: flex, align-items: center, gap: var(--space-3)`. Label min-width 80px. Progress bar flex:1. Value mono, `--text-sm`.