agent-devkit 0.3.2 → 0.3.4

package/runtime/vendor/plugins/open-design/_official/design-systems/resend/DESIGN.md

@@ -1,306 +0,0 @@
-# Design System Inspired by Resend
-
-> Category: Productivity & SaaS
-> Email API. Minimal dark theme, monospace accents.
-
-## 1. Visual Theme & Atmosphere
-
-Resend's website is a dark, cinematic canvas that treats email infrastructure like a luxury product. The entire page is draped in pure black (`#000000`) with text that glows in near-white (`#f0f0f0`), creating a theater-like experience where content performs on a void stage. This isn't the typical developer-tool darkness — it's the controlled darkness of a photography gallery, where every element is lit with intention and nothing competes for attention.
-
-The typography system is the star of the show. Three carefully chosen typefaces create a hierarchy that feels both editorial and technical: Domaine Display (a Klim Type Foundry serif) appears at massive 96px for hero headlines with barely-there line-height (1.00) and negative tracking (-0.96px), creating display text that feels like a magazine cover. ABC Favorit (by Dinamo) handles section headings with an even more aggressive letter-spacing (-2.8px at 56px), giving a compressed, engineered quality to mid-tier text. Inter takes over for body and UI, providing the clean readability that lets the display fonts shine. Commit Mono rounds out the family for code blocks.
-
-What makes Resend distinctive is its icy, blue-tinted border system. Instead of neutral gray borders, Resend uses `rgba(214, 235, 253, 0.19)` — a frosty, slightly blue-tinted line at 19% opacity that gives every container and divider a cold, crystalline quality against the black background. Combined with pill-shaped buttons (9999px radius), multi-color accent system (orange, green, blue, yellow, red — each with its own CSS variable scale), and OpenType stylistic sets (`"ss01"`, `"ss03"`, `"ss04"`, `"ss11"`), the result is a design system that feels premium, precise, and quietly confident.
-
-**Key Characteristics:**
-- Pure black background with near-white (`#f0f0f0`) text — theatrical, gallery-like darkness
-- Three-font hierarchy: Domaine Display (serif hero), ABC Favorit (geometric sections), Inter (body/UI)
-- Icy blue-tinted borders: `rgba(214, 235, 253, 0.19)` — every border has a cold, crystalline shimmer
-- Multi-color accent system: orange, green, blue, yellow, red — each with numbered CSS variable scales
-- Pill-shaped buttons and tags (9999px radius) with transparent backgrounds
-- OpenType stylistic sets (`"ss01"`, `"ss03"`, `"ss04"`, `"ss11"`) on display fonts
-- Commit Mono for code — monospace as a design element, not an afterthought
-- Whisper-level shadows using blue-tinted ring: `rgba(176, 199, 217, 0.145) 0px 0px 0px 1px`
-
-## 2. Color Palette & Roles
-
-### Primary
-- **Void Black** (`#000000`): Page background, the defining canvas color (95% opacity via `--color-black-12`)
-- **Near White** (`#f0f0f0`): Primary text, button text, high-contrast elements
-- **Pure White** (`#ffffff`): `--color-white`, maximum emphasis text, link highlights
-
-### Accent Scale — Orange
-- **Orange 4** (`#ff5900`): `--color-orange-4`, at 22% opacity — subtle warm glow
-- **Orange 10** (`#ff801f`): `--color-orange-10`, primary orange accent — warm, energetic
-- **Orange 11** (`#ffa057`): `--color-orange-11`, lighter orange for secondary use
-
-### Accent Scale — Green
-- **Green 3** (`#22ff99`): `--color-green-3`, at 12% opacity — faint emerald wash
-- **Green 4** (`#11ff99`): `--color-green-4`, at 18% opacity — success indicator glow
-
-### Accent Scale — Blue
-- **Blue 4** (`#0075ff`): `--color-blue-4`, at 34% opacity — medium blue accent
-- **Blue 5** (`#0081fd`): `--color-blue-5`, at 42% opacity — stronger blue
-- **Blue 10** (`#3b9eff`): `--color-blue-10`, bright blue — links, interactive elements
-
-### Accent Scale — Other
-- **Yellow 9** (`#ffc53d`): `--color-yellow-9`, warm gold for warnings or highlights
-- **Red 5** (`#ff2047`): `--color-red-5`, at 34% opacity — error states, destructive actions
-
-### Neutral Scale
-- **Silver** (`#a1a4a5`): Secondary text, muted links, descriptions
-- **Dark Gray** (`#464a4d`): Tertiary text, de-emphasized content
-- **Mid Gray** (`#5c5c5c`): Hover states, subtle emphasis
-- **Medium Gray** (`#494949`): Quaternary text
-- **Light Gray** (`#f8f8f8`): Light mode surface (if applicable)
-- **Border Gray** (`#eaeaea`): Light context borders
-- **Edge Gray** (`#ececec`): Subtle borders on light surfaces
-- **Mist Gray** (`#dedfdf`): Light dividers
-- **Soft Gray** (`#e5e6e6`): Alternate light border
-
-### Surface & Overlay
-- **Frost Primary** (`#fcfdff`): Primary color token (slight blue tint, 94% opacity)
-- **White Hover** (`rgba(255, 255, 255, 0.28)`): Button hover state on dark
-- **White 60%** (`oklab(0.999994 ... / 0.577)`): Semi-transparent white for muted text
-- **White 64%** (`oklab(0.999994 ... / 0.642)`): Slightly brighter semi-transparent white
-
-### Borders & Shadows
-- **Frost Border** (`rgba(214, 235, 253, 0.19)`): The signature — icy blue-tinted borders at 19% opacity
-- **Frost Border Alt** (`rgba(217, 237, 254, 0.145)`): Slightly lighter variant for list items
-- **Ring Shadow** (`rgba(176, 199, 217, 0.145) 0px 0px 0px 1px`): Blue-tinted shadow-as-border
-- **Focus Ring** (`rgb(0, 0, 0) 0px 0px 0px 8px`): Heavy black focus ring
-- **Subtle Shadow** (`rgba(0, 0, 0, 0.1) 0px 1px 3px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`): Minimal card elevation
-
-## 3. Typography Rules
-
-### Font Families
-- **Display Serif**: `domaine` (Domaine Display by Klim Type Foundry) — hero headlines
-- **Display Sans**: `aBCFavorit` (ABC Favorit by Dinamo), fallbacks: `ui-sans-serif, system-ui` — section headings
-- **Body / UI**: `inter`, fallbacks: `ui-sans-serif, system-ui` — body text, buttons, navigation
-- **Monospace**: `commitMono`, fallbacks: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas`
-- **Secondary**: `Helvetica` — fallback for specific UI contexts
-- **System**: `-apple-system, system-ui, Segoe UI, Roboto` — embedded content
-
-### Hierarchy
-
-| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
-|------|------|------|--------|-------------|----------------|-------|
-| Display Hero | domaine | 96px (6.00rem) | 400 | 1.00 (tight) | -0.96px | `"ss01", "ss04", "ss11"` |
-| Display Hero Mobile | domaine | 76.8px (4.80rem) | 400 | 1.00 (tight) | -0.768px | Scaled for mobile |
-| Section Heading | aBCFavorit | 56px (3.50rem) | 400 | 1.20 (tight) | -2.8px | `"ss01", "ss04", "ss11"` |
-| Sub-heading | aBCFavorit | 20px (1.25rem) | 400 | 1.30 (tight) | normal | `"ss01", "ss04", "ss11"` |
-| Sub-heading Compact | aBCFavorit | 16px (1.00rem) | 400 | 1.50 | -0.8px | `"ss01", "ss04", "ss11"` |
-| Feature Title | inter | 24px (1.50rem) | 500 | 1.50 | normal | Section sub-headings |
-| Body Large | inter | 18px (1.13rem) | 400 | 1.50 | normal | Introductions |
-| Body | inter | 16px (1.00rem) | 400 | 1.50 | normal | Standard body text |
-| Body Semibold | inter | 16px (1.00rem) | 600 | 1.50 | normal | Emphasis, active states |
-| Nav Link | aBCFavorit | 14px (0.88rem) | 500 | 1.43 | 0.35px | `"ss01", "ss03", "ss04"` — positive tracking |
-| Button / Link | inter | 14px (0.88rem) | 500–600 | 1.43 | normal | Buttons, nav, CTAs |
-| Caption | inter | 14px (0.88rem) | 400 | 1.60 (relaxed) | normal | Descriptions |
-| Helvetica Caption | Helvetica | 14px (0.88rem) | 400–600 | 1.00–1.71 | normal | UI elements |
-| Small | inter | 12px (0.75rem) | 400–500 | 1.33 | normal | Tags, meta, fine print |
-| Small Uppercase | inter | 12px (0.75rem) | 500 | 1.33 | normal | `text-transform: uppercase` |
-| Small Capitalize | inter | 12px (0.75rem) | 500 | 1.33 | normal | `text-transform: capitalize` |
-| Code Body | commitMono | 16px (1.00rem) | 400 | 1.50 | normal | Code blocks |
-| Code Small | commitMono | 14px (0.88rem) | 400 | 1.43 | normal | Inline code |
-| Code Tiny | commitMono | 12px (0.75rem) | 400 | 1.33 | normal | Small code labels |
-| Heading (Helvetica) | Helvetica | 24px (1.50rem) | 400 | 1.40 | normal | Alternate heading context |
-
-### Principles
-- **Three-font editorial hierarchy**: Domaine Display (serif, hero), ABC Favorit (geometric sans, sections), Inter (readable body). Each font has a strict role — they never cross lanes.
-- **Aggressive negative tracking on display**: Domaine at -0.96px, ABC Favorit at -2.8px. The display type feels compressed, urgent, and designed — like a magazine masthead.
-- **Positive tracking on nav**: ABC Favorit nav links use +0.35px letter-spacing — the only positive tracking in the system. This creates airy, spaced-out navigation text that contrasts with the compressed headings.
-- **OpenType as identity**: The `"ss01"`, `"ss03"`, `"ss04"`, `"ss11"` stylistic sets are enabled on all ABC Favorit and Domaine text, activating alternate glyphs that give Resend's typography its unique character.
-- **Commit Mono as design element**: The monospace font isn't hidden in code blocks — it's used prominently for code examples and technical content, treated as a first-class visual element.
-
-## 4. Component Stylings
-
-### Buttons
-
-**Primary Transparent Pill**
-- Background: transparent
-- Text: `#f0f0f0`
-- Padding: 5px 12px
-- Radius: 9999px (full pill)
-- Border: `1px solid rgba(214, 235, 253, 0.19)` (frost border)
-- Hover: background `rgba(255, 255, 255, 0.28)` (white glass)
-- Use: Primary CTA on dark backgrounds
-
-**White Solid Pill**
-- Background: `#ffffff`
-- Text: `#000000`
-- Padding: 5px 12px
-- Radius: 9999px
-- Use: High-contrast CTA ("Get started")
-
-**Ghost Button**
-- Background: transparent
-- Text: `#f0f0f0`
-- Radius: 4px
-- No border
-- Hover: subtle background tint
-- Use: Secondary actions, tab items
-
-### Cards & Containers
-- Background: transparent or very subtle dark tint
-- Border: `1px solid rgba(214, 235, 253, 0.19)` (frost border)
-- Radius: 16px (standard cards), 24px (large sections/panels)
-- Shadow: `rgba(176, 199, 217, 0.145) 0px 0px 0px 1px` (ring shadow)
-- Dark product screenshots and code demos as card content
-- No traditional box-shadow elevation
-
-### Inputs & Forms
-- Text: `#f0f0f0` on dark, `#000000` on light
-- Radius: 4px
-- Focus: shadow-based ring
-- Minimal styling — inherits dark theme
-
-### Navigation
-- Sticky dark header with frost border bottom: `1px solid rgba(214, 235, 253, 0.19)`
-- "Resend" wordmark left-aligned
-- ABC Favorit 14px weight 500 with +0.35px tracking for nav links
-- Pill CTAs right-aligned
-- Mobile: hamburger collapse
-
-### Image Treatment
-- Product screenshots and code demos dominate content sections
-- Dark-themed screenshots on dark background — seamless integration
-- Rounded corners: 12px–16px on images
-- Full-width sections with subtle gradient overlays
-
-### Distinctive Components
-
-**Tab Navigation**
-- Horizontal tabs with subtle selection indicator
-- Tab items: 8px radius
-- Active state with subtle background differentiation
-
-**Code Preview Panels**
-- Dark code blocks using Commit Mono
-- Frost borders (`rgba(214, 235, 253, 0.19)`)
-- Syntax-highlighted with multi-color accent tokens (orange, blue, green, yellow)
-
-**Multi-color Accent Badges**
-- Each product feature has its own accent color from the CSS variable scale
-- Badges use the accent color at low opacity (12–42%) for background, full opacity for text
-
-## 5. Layout Principles
-
-### Spacing System
-- Base unit: 8px
-- Scale: 1px, 2px, 4px, 5px, 6px, 7px, 8px, 10px, 12px, 16px, 20px, 24px, 30px, 32px, 40px
-
-### Grid & Container
-- Centered content with generous max-width
-- Full-width black sections with contained inner content
-- Single-column hero, expanding to feature grids below
-- Code preview panels as full-width or contained showcases
-
-### Whitespace Philosophy
-- **Cinematic black space**: The black background IS the whitespace. Generous vertical spacing (80px–120px+) between sections creates a scroll-through-darkness experience where each section emerges like a scene.
-- **Tight content, vast surrounds**: Text blocks and cards are compact internally, but float in vast dark space — creating isolated "islands" of content.
-- **Typography-led rhythm**: The massive display fonts (96px) create their own vertical rhythm — each headline is a visual event that anchors the surrounding space.
-
-### Border Radius Scale
-- Sharp (4px): Buttons (ghost), inputs, small interactive elements
-- Subtle (6px): Menu panels, navigation items
-- Standard (8px): Tabs, content blocks
-- Comfortable (10px): Accent elements
-- Card (12px): Clipboard buttons, medium containers
-- Large (16px): Feature cards, images, main buttons
-- Section (24px): Large panels, section containers
-- Pill (9999px): Primary CTAs, tags, badges
-
-## 6. Depth & Elevation
-
-| Level | Treatment | Use |
-|-------|-----------|-----|
-| Flat (Level 0) | No shadow, transparent background | Default — most elements on dark void |
-| Ring (Level 1) | `rgba(176, 199, 217, 0.145) 0px 0px 0px 1px` | Shadow-as-border for cards, containers |
-| Frost Border (Level 1b) | `1px solid rgba(214, 235, 253, 0.19)` | Explicit borders — buttons, dividers, tabs |
-| Subtle (Level 2) | `rgba(0, 0, 0, 0.1) 0px 1px 3px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px` | Light card elevation |
-| Focus (Level 3) | `rgb(0, 0, 0) 0px 0px 0px 8px` | Heavy black focus ring — accessibility |
-
-**Shadow Philosophy**: Resend barely uses shadows at all. On a pure black background, traditional shadows are invisible — you can't cast a shadow into the void. Instead, Resend creates depth through its signature frost borders (`rgba(214, 235, 253, 0.19)`) — thin, icy blue-tinted lines that catch light against the darkness. This creates a "glass panel floating in space" aesthetic where borders are the primary depth mechanism.
-
-### Decorative Depth
-- Subtle warm gradient glows behind hero content (orange/amber tints)
-- Product screenshots create visual depth through their own internal UI
-- No gradient backgrounds — depth comes from border luminance and content contrast
-
-## 7. Do's and Don'ts
-
-### Do
-- Use pure black (`#000000`) as the page background — the void is the canvas
-- Apply frost borders (`rgba(214, 235, 253, 0.19)`) for all structural lines — they're the blue-tinted signature
-- Use Domaine Display ONLY for hero headings (96px), ABC Favorit for section headings, Inter for everything else
-- Enable OpenType `"ss01"`, `"ss04"`, `"ss11"` on Domaine and ABC Favorit text
-- Apply pill radius (9999px) to primary CTAs and tags
-- Use the multi-color accent scale (orange/green/blue/yellow/red) with opacity variants for context-specific highlighting
-- Keep shadows at ring level (`0px 0px 0px 1px`) — on black, traditional shadows don't work
-- Use +0.35px letter-spacing on ABC Favorit nav links — the only positive tracking
-
-### Don't
-- Don't lighten the background above `#000000` — the pure black void is non-negotiable
-- Don't use neutral gray borders — all borders must have the frost blue tint
-- Don't apply Domaine Display to body text — it's a display-only serif
-- Don't mix accent colors in the same component — each feature gets one accent color
-- Don't use box-shadow for elevation on the dark background — use frost borders instead
-- Don't skip the OpenType stylistic sets — they define the typographic character
-- Don't use negative letter-spacing on nav links — ABC Favorit nav uses positive +0.35px
-- Don't make buttons opaque on dark — transparency with frost border is the pattern
-
-## 8. Responsive Behavior
-
-### Breakpoints
-| Name | Width | Key Changes |
-|------|-------|-------------|
-| Mobile Small | <480px | Single column, tight padding, 76.8px hero |
-| Mobile | 480–600px | Standard mobile, stacked layout |
-| Desktop | >600px | Full layout, 96px hero, expanded sections |
-
-*Note: Resend uses a minimal breakpoint system — only 480px and 600px detected. The design is desktop-first with a clean mobile collapse.*
-
-### Touch Targets
-- Pill buttons: adequate padding (5px 12px minimum)
-- Tab items: 8px radius with comfortable hit areas
-- Navigation links spaced with 0.35px tracking for visual separation
-
-### Collapsing Strategy
-- Hero: Domaine 96px → 76.8px on mobile
-- Navigation: horizontal → hamburger
-- Feature sections: side-by-side → stacked
-- Code panels: maintain width, horizontal scroll if needed
-- Spacing compresses proportionally
-
-### Image Behavior
-- Product screenshots maintain aspect ratio
-- Dark screenshots blend seamlessly with dark background at all sizes
-- Rounded corners (12px–16px) maintained across breakpoints
-
-## 9. Agent Prompt Guide
-
-### Quick Color Reference
-- Background: Void Black (`#000000`)
-- Primary text: Near White (`#f0f0f0`)
-- Secondary text: Silver (`#a1a4a5`)
-- Border: Frost Border (`rgba(214, 235, 253, 0.19)`)
-- Orange accent: `#ff801f`
-- Green accent: `#11ff99` (at 18% opacity)
-- Blue accent: `#3b9eff`
-- Focus ring: `rgb(0, 0, 0) 0px 0px 0px 8px`
-
-### Example Component Prompts
-- "Create a hero section on pure black (#000000) background. Headline at 96px Domaine Display weight 400, line-height 1.00, letter-spacing -0.96px, near-white (#f0f0f0) text, OpenType 'ss01 ss04 ss11'. Subtitle at 20px ABC Favorit weight 400, line-height 1.30. Two pill buttons: white solid (#ffffff, 9999px radius) and transparent with frost border (rgba(214,235,253,0.19))."
-- "Design a navigation bar: dark background with frost border bottom (1px solid rgba(214,235,253,0.19)). Nav links at 14px ABC Favorit weight 500, letter-spacing +0.35px, OpenType 'ss01 ss03 ss04'. White pill CTA right-aligned."
-- "Build a feature card: transparent background, frost border (rgba(214,235,253,0.19)), 16px radius. Title at 56px ABC Favorit weight 400, letter-spacing -2.8px. Body at 16px Inter weight 400, #a1a4a5 text."
-- "Create a code block using Commit Mono 16px on dark background. Frost border container (24px radius). Syntax colors: orange (#ff801f), blue (#3b9eff), green (#11ff99), yellow (#ffc53d)."
-- "Design an accent badge: background #ff5900 at 22% opacity, text #ffa057, 9999px radius, 12px Inter weight 500."
-
-### Iteration Guide
-1. Start with pure black — everything floats in the void
-2. Frost borders (`rgba(214, 235, 253, 0.19)`) are the universal structural element — not gray, not neutral
-3. Three fonts, three roles: Domaine (hero), ABC Favorit (sections), Inter (body) — never cross
-4. OpenType stylistic sets are mandatory on display fonts — they define the character
-5. Multi-color accents at low opacity (12–42%) for backgrounds, full opacity for text
-6. Pill shape (9999px) for CTAs and badges, standard radius (4px–16px) for containers
-7. No shadows — use frost borders for depth against the void

package/runtime/vendor/plugins/open-design/_official/design-systems/resend/open-design.json

@@ -1,112 +0,0 @@
-{
-  "$schema": "https://open-design.ai/schemas/plugin.v1.json",
-  "specVersion": "1.0.0",
-  "name": "design-system-resend",
-  "title": "Resend",
-  "title_i18n": {
-    "zh-CN": "Resend",
-    "zh-TW": "Resend",
-    "ja": "Resend",
-    "ko": "Resend",
-    "de": "Resend",
-    "fr": "Resend",
-    "ru": "Resend",
-    "es": "Resend",
-    "pt-BR": "Resend",
-    "it": "Resend",
-    "vi": "Resend",
-    "pl": "Resend",
-    "id": "Resend",
-    "nl": "Resend",
-    "ar": "Resend",
-    "tr": "Resend",
-    "uk": "Resend",
-    "en": "Resend"
-  },
-  "version": "0.1.0",
-  "description": "Email API. Minimal dark theme, monospace accents.",
-  "description_i18n": {
-    "zh-CN": "电子邮件 API。极简深色主题，等宽字体点缀。",
-    "zh-TW": "電子郵件 API。極簡深色主題，等寬字型點綴。",
-    "ja": "メール API。ミニマルなダークテーマ、等幅フォントのアクセント。",
-    "ko": "이메일 API. 미니멀 다크 테마, 모노스페이스 액센트.",
-    "de": "E-Mail-API. Minimales dunkles Theme, Monospace-Akzente.",
-    "fr": "API Email. Thème sombre minimaliste, accents monospace.",
-    "ru": "Email API. Минималистичная тёмная тема, моноширинные акценты.",
-    "es": "API de correo electrónico. Tema oscuro minimalista, acentos monoespaciados.",
-    "pt-BR": "API de e-mail. Tema escuro minimalista, acentos monoespaçados.",
-    "it": "API Email. Tema scuro minimale, accenti monospazio.",
-    "vi": "API Email. Giao diện tối tối giản, điểm nhấn monospace.",
-    "pl": "Email API. Minimalny ciemny motyw, akcenty monospace.",
-    "id": "API Email. Tema gelap minimal, aksen monospace.",
-    "nl": "E-mail API. Minimaal donker thema, monospace accenten.",
-    "ar": "واجهة برمجة تطبيقات البريد الإلكتروني. سمة داكنة بسيطة، لمسات monospace.",
-    "tr": "E-posta API. Minimal koyu tema, monospace vurgular.",
-    "uk": "Email API. Мінімалістична темна тема, моноширинні акценти.",
-    "en": "Email API. Minimal dark theme, monospace accents."
-  },
-  "license": "MIT",
-  "tags": [
-    "design-system",
-    "first-party",
-    "design",
-    "productivity-saas"
-  ],
-  "od": {
-    "kind": "scenario",
-    "taskKind": "new-generation",
-    "mode": "design-system",
-    "scenario": "design",
-    "surface": "web",
-    "useCase": {
-      "query": {
-        "en": "Generate a {{artifactKind}} using the Resend design system. Stay faithful to its colour palette, typography, spacing, iconography, and component vocabulary as documented in DESIGN.md.",
-        "zh-CN": "使用这个插件完成以下任务：Generate a {{artifactKind}} using the Resend design system. Stay faithful to its colour palette, typography, spacing, iconography, and component vocabulary as documented in DESIGN.md."
-      }
-    },
-    "inputs": [
-      {
-        "name": "artifactKind",
-        "label": "Artifact kind",
-        "type": "select",
-        "options": [
-          "landing page",
-          "dashboard",
-          "marketing site",
-          "app screen"
-        ],
-        "default": "landing page"
-      },
-      {
-        "name": "brief",
-        "label": "Brief",
-        "type": "text",
-        "placeholder": "What should the page communicate?"
-      }
-    ],
-    "context": {
-      "designSystem": {
-        "ref": "resend",
-        "primary": true
-      },
-      "assets": [
-        "./DESIGN.md"
-      ]
-    },
-    "pipeline": {
-      "stages": [
-        {
-          "id": "generate",
-          "atoms": [
-            "file-write",
-            "live-artifact"
-          ]
-        }
-      ]
-    },
-    "capabilities": [
-      "prompt:inject",
-      "fs:write"
-    ]
-  }
-}

package/runtime/vendor/plugins/open-design/_official/design-systems/retro/DESIGN.md

@@ -1,71 +0,0 @@
-# Design System Inspired by Retro
-
-> Category: Retro & Nostalgic
-> Throwback design with vintage-inspired typography, high-contrast retro palettes, and nostalgic visual elements.
-
-## 1. Visual Theme & Atmosphere
-
-Throwback design with vintage-inspired typography, high-contrast retro palettes, and nostalgic visual elements.
-
-- **Visual style:** high-contrast, retro
-- **Color stance:** primary, neutral, success, warning, danger
-- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
-
-## 2. Color
-
-- **Primary:** `#3B82F6` — Token from style foundations.
-- **Secondary:** `#8B5CF6` — Token from style foundations.
-- **Success:** `#16A34A` — Token from style foundations.
-- **Warning:** `#D97706` — Token from style foundations.
-- **Danger:** `#DC2626` — Token from style foundations.
-- **Surface:** `#FFFFFF` — Token from style foundations.
-- **Text:** `#111827` — Token from style foundations.
-- **Neutral:** `#FFFFFF` — Derived from the surface token for official format compatibility.
-
-- Favor Primary (#3B82F6) for CTA emphasis.
-- Use Surface (#FFFFFF) for large backgrounds and cards.
-- Keep body copy on Text (#111827) for legibility.
-
-## 3. Typography
-
-- **Scale:** desktop-first expressive scale
-- **Families:** primary=Macondo, display=Macondo, mono=JetBrains Mono
-- **Weights:** 100, 200, 300, 400, 500, 600, 700, 800, 900
-- Headings should carry the style personality; body text should optimize scanability and contrast.
-
-## 4. Spacing & Grid
-
-- **Spacing scale:** 4/8/12/16/24/32
-- Keep vertical rhythm consistent across sections and components.
-- Align columns and modules to a predictable grid; avoid ad-hoc offsets.
-
-## 5. Layout & Composition
-
-- Prefer clear content blocks with consistent internal padding.
-- Keep hierarchy obvious: headline → support text → primary action.
-- Use whitespace to separate concerns before adding borders or shadows.
-
-## 6. Components
-
-- Buttons: primary action uses `#3B82F6`; secondary actions stay neutral.
-- Inputs: strong focus-visible states, clear labels, and predictable error messaging.
-- Cards/sections: use consistent radii, spacing, and elevation strategy across the page.
-
-## 7. Motion & Interaction
-
-- Use subtle transitions that emphasize Primary (#3B82F6) as the interaction signal.
-- Default to short, purposeful transitions (150–250ms) with stable easing.
-- Ensure hover, focus-visible, active, disabled, and loading states are explicit.
-
-## 8. Voice & Brand
-
-- Tone should reflect the visual style: concise, confident, and product-specific.
-- Keep microcopy action-oriented and avoid generic filler language.
-- Preserve the style identity in headlines while keeping UI labels literal and clear.
-
-## 9. Anti-patterns
-
-- Do not introduce off-palette colors when an existing token can solve the problem.
-- Do not flatten hierarchy by using the same type size/weight for all text.
-- Do not add decorative effects that reduce readability or accessibility.
-- Do not mix unrelated visual metaphors in the same interface.

package/runtime/vendor/plugins/open-design/_official/design-systems/retro/open-design.json

@@ -1,112 +0,0 @@
-{
-  "$schema": "https://open-design.ai/schemas/plugin.v1.json",
-  "specVersion": "1.0.0",
-  "name": "design-system-retro",
-  "title": "Retro",
-  "title_i18n": {
-    "zh-CN": "复古",
-    "zh-TW": "復古",
-    "ja": "レトロ",
-    "ko": "레트로",
-    "de": "Retro",
-    "fr": "Rétro",
-    "ru": "Ретро",
-    "es": "Retro",
-    "pt-BR": "Retrô",
-    "it": "Retro",
-    "vi": "Retro",
-    "pl": "Retro",
-    "id": "Retro",
-    "nl": "Retro",
-    "ar": "ريترو",
-    "tr": "Retro",
-    "uk": "Ретро",
-    "en": "Retro"
-  },
-  "version": "0.1.0",
-  "description": "Throwback design with vintage-inspired typography, high-contrast retro palettes, and nostalgic visual elements.",
-  "description_i18n": {
-    "zh-CN": "怀旧设计风格，采用复古字体、高对比度怀旧配色和经典视觉元素。",
-    "zh-TW": "懷舊設計風格，採用復古字體、高對比度懷舊配色和經典視覺元素。",
-    "ja": "ヴィンテージ風のタイポグラフィ、ハイコントラストなレトロパレット、ノスタルジックなビジュアル要素を用いた懐かしいデザイン。",
-    "ko": "빈티지 스타일의 타이포그래피, 고대비 레트로 팔레트, 향수를 불러일으키는 비주얼 요소를 활용한 복고풍 디자인.",
-    "de": "Nostalgisches Design mit Vintage-Typografie, kontrastreichen Retro-Paletten und nostalgischen visuellen Elementen.",
-    "fr": "Design nostalgique avec typographie vintage, palettes rétro à contraste élevé et éléments visuels évocateurs.",
-    "ru": "Ностальгический дизайн с винтажной типографикой, высококонтрастными ретро-палитрами и ностальгическими визуальными элементами.",
-    "es": "Diseño nostálgico con tipografía vintage, paletas retro de alto contraste y elementos visuales evocadores.",
-    "pt-BR": "Design nostálgico com tipografia vintage, paletas retrô de alto contraste e elementos visuais evocativos.",
-    "it": "Design nostalgico con tipografia vintage, palette retrò ad alto contrasto ed elementi visivi evocativi.",
-    "vi": "Thiết kế hoài cổ với typography phong cách vintage, bảng màu retro tương phản cao và các yếu tố hình ảnh gợi nhớ.",
-    "pl": "Nostalgiczny design z typografią vintage, kontrastowymi paletami retro i nostalgicznymi elementami wizualnymi.",
-    "id": "Desain nostalgia dengan tipografi bergaya vintage, palet retro kontras tinggi, dan elemen visual yang mengingatkan masa lalu.",
-    "nl": "Nostalgisch design met vintage typografie, hoog-contrast retro paletten en nostalgische visuele elementen.",
-    "ar": "تصميم حنيني بطباعة عتيقة ولوحات ألوان ريترو عالية التباين وعناصر بصرية تستحضر الذكريات.",
-    "tr": "Vintage tipografi, yüksek kontrastlı retro paletler ve nostaljik görsel öğelerle nostalji tasarımı.",
-    "uk": "Ностальгічний дизайн з вінтажною типографікою, висококонтрастними ретро-палітрами та ностальгічними візуальними елементами.",
-    "en": "Throwback design with vintage-inspired typography, high-contrast retro palettes, and nostalgic visual elements."
-  },
-  "license": "MIT",
-  "tags": [
-    "design-system",
-    "first-party",
-    "design",
-    "retro-nostalgic"
-  ],
-  "od": {
-    "kind": "scenario",
-    "taskKind": "new-generation",
-    "mode": "design-system",
-    "scenario": "design",
-    "surface": "web",
-    "useCase": {
-      "query": {
-        "en": "Generate a {{artifactKind}} using the Retro design system. Stay faithful to its colour palette, typography, spacing, iconography, and component vocabulary as documented in DESIGN.md.",
-        "zh-CN": "使用这个插件完成以下任务：Generate a {{artifactKind}} using the Retro design system. Stay faithful to its colour palette, typography, spacing, iconography, and component vocabulary as documented in DESIGN.md."
-      }
-    },
-    "inputs": [
-      {
-        "name": "artifactKind",
-        "label": "Artifact kind",
-        "type": "select",
-        "options": [
-          "landing page",
-          "dashboard",
-          "marketing site",
-          "app screen"
-        ],
-        "default": "landing page"
-      },
-      {
-        "name": "brief",
-        "label": "Brief",
-        "type": "text",
-        "placeholder": "What should the page communicate?"
-      }
-    ],
-    "context": {
-      "designSystem": {
-        "ref": "retro",
-        "primary": true
-      },
-      "assets": [
-        "./DESIGN.md"
-      ]
-    },
-    "pipeline": {
-      "stages": [
-        {
-          "id": "generate",
-          "atoms": [
-            "file-write",
-            "live-artifact"
-          ]
-        }
-      ]
-    },
-    "capabilities": [
-      "prompt:inject",
-      "fs:write"
-    ]
-  }
-}