@decantr/content 3.8.0

package/themes/bespoke.json

@@ -0,0 +1,433 @@
+{
+  "$schema": "https://decantr.ai/schemas/theme.v1.json",
+  "id": "bespoke",
+  "version": "1.0.0",
+  "name": "Bespoke",
+  "description": "Premium private equity and M&A theme with deep navy foundations and gold accents. Serif display typography, minimal motion, and quiet luxury aesthetic for authoritative financial and advisory interfaces.",
+  "tags": [
+    "dark",
+    "premium",
+    "finance",
+    "luxury",
+    "private-equity",
+    "serif"
+  ],
+  "personality": "refined + authoritative + quiet luxury + gold-accented",
+  "seed": {
+    "primary": "#D4AF37",
+    "secondary": "#0F172A",
+    "accent": "#B8941F",
+    "background": "#0F172A"
+  },
+  "palette": {
+    "background": {
+      "dark": "#0F172A"
+    },
+    "surface": {
+      "dark": "#1A2332"
+    },
+    "surface-raised": {
+      "dark": "#22304A"
+    },
+    "border": {
+      "dark": "#2D3B52"
+    },
+    "text": {
+      "dark": "#F1E9D2"
+    },
+    "text-muted": {
+      "dark": "#94A3B8"
+    },
+    "primary": {
+      "dark": "#D4AF37"
+    },
+    "primary-hover": {
+      "dark": "#B8941F"
+    },
+    "secondary": {
+      "dark": "#1E293B"
+    },
+    "secondary-hover": {
+      "dark": "#334155"
+    },
+    "accent": {
+      "dark": "#D4AF37"
+    },
+    "accent-hover": {
+      "dark": "#E8C252"
+    }
+  },
+  "modes": [
+    "dark"
+  ],
+  "shapes": [
+    "sharp"
+  ],
+  "cvd_support": [],
+  "tokens": {
+    "base": {
+      "success": "#22C55E",
+      "danger": "#B91C1C",
+      "warning": "#D4AF37",
+      "info": "#64748B"
+    }
+  },
+  "typography": {
+    "scale": "modular",
+    "heading_weight": 500,
+    "body_weight": 400,
+    "display": "'Inter', ui-sans-serif, system-ui, sans-serif",
+    "body": "'Inter', ui-sans-serif, system-ui, sans-serif"
+  },
+  "decantr_compat": ">=2.0.0",
+  "source": "core",
+  "decorators": {
+    "bespoke-card": "Gold-bordered cards with deep navy background and generous interior padding for premium content presentation.",
+    "bespoke-divider": "Thin gold hairline separator (1px #D4AF37 at 40% opacity) for elegant section breaks.",
+    "bespoke-seal": "Wax-seal style circular badge with gold border and embossed emblem. Formal authority indicator.",
+    "bespoke-monogram": "Large serif monogram displays using Playfair or Cormorant. Single-letter or initial typography.",
+    "bespoke-leather": "Subtle leather texture overlay using fine noise pattern. Adds tactile richness to surfaces.",
+    "bespoke-serif-display": "Large serif titles in Playfair Display with refined letter-spacing. Authoritative headlines.",
+    "bespoke-ledger": "Formal table styling with hairline dividers, tabular-nums, and right-aligned figures.",
+    "bespoke-stamp": "Approval stamp overlay with rotated serif text in gold. Executive sign-off aesthetic."
+  },
+  "spatial": {
+    "density_bias": -1,
+    "content_gap_shift": 1,
+    "section_padding": "6rem",
+    "card_wrapping": "subtle",
+    "surface_override": null
+  },
+  "motion": {
+    "preference": "minimal",
+    "reduce_motion": true,
+    "entrance": "bespoke-fade",
+    "micro": "smooth",
+    "timing": "cubic-bezier(0.4, 0, 0.2, 1)",
+    "durations": {
+      "hover": "150ms",
+      "entrance": "400ms",
+      "modal": "300ms",
+      "page": "350ms",
+      "instant": "80ms",
+      "fast": "150ms",
+      "base": "250ms",
+      "slow": "400ms",
+      "slower": "600ms",
+      "stagger": "60ms"
+    },
+    "easings": {
+      "ease": "cubic-bezier(0.4, 0, 0.2, 1)",
+      "easeOut": "cubic-bezier(0, 0, 0.2, 1)",
+      "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
+      "spring": "cubic-bezier(0.34, 1.56, 0.64, 1)"
+    }
+  },
+  "effects": {
+    "enabled": true,
+    "intensity": "subtle",
+    "type_mapping": {
+      "card": [
+        "bespoke-card"
+      ],
+      "divider": [
+        "bespoke-divider"
+      ],
+      "heading": [
+        "bespoke-serif-display"
+      ],
+      "table": [
+        "bespoke-ledger"
+      ],
+      "badge": [
+        "bespoke-seal"
+      ]
+    },
+    "optional_effects": {
+      "leather": false,
+      "stamp": false
+    },
+    "component_fallback": {
+      "Card": "card",
+      "Divider": "divider",
+      "Heading": "heading",
+      "Table": "table",
+      "Badge": "badge"
+    }
+  },
+  "compositions": {
+    "dealroom": {
+      "description": "Deal room dashboard with portfolio metrics, transaction ledger, and executive summaries.",
+      "shell": "sidebar-main",
+      "effects": [
+        "bespoke-card",
+        "bespoke-ledger",
+        "bespoke-divider"
+      ]
+    },
+    "prospectus": {
+      "description": "Investment prospectus presentation with serif headlines and formal document layout.",
+      "shell": "top-nav-footer",
+      "effects": [
+        "bespoke-serif-display",
+        "bespoke-divider",
+        "bespoke-monogram"
+      ]
+    },
+    "marketing": {
+      "description": "Advisory firm marketing page with quiet luxury aesthetic and monogram branding.",
+      "shell": "top-nav-footer",
+      "effects": [
+        "bespoke-monogram",
+        "bespoke-serif-display"
+      ]
+    },
+    "portfolio": {
+      "description": "Portfolio summary with gold-accented cards and ledger-style financial tables.",
+      "shell": "sidebar-main",
+      "effects": [
+        "bespoke-card",
+        "bespoke-ledger"
+      ]
+    }
+  },
+  "radius": {
+    "philosophy": "sharp",
+    "base": 2
+  },
+  "pattern_preferences": {
+    "prefer": [
+      "executive-summary",
+      "ledger-table",
+      "prospectus",
+      "portfolio-grid",
+      "transaction-log"
+    ],
+    "avoid": [
+      "chat-portal"
+    ],
+    "default_presets": {
+      "portfolio-grid": "cards",
+      "transaction-log": "table"
+    }
+  },
+  "shell": {
+    "preferred": [
+      "sidebar-main",
+      "top-nav-footer"
+    ],
+    "avoid": [
+      "chat-portal",
+      "full-bleed"
+    ],
+    "nav_style": "minimal",
+    "default_nav_state": "expanded",
+    "root": "bespoke-canvas",
+    "nav": "bespoke-card",
+    "header": "bespoke-serif-display",
+    "navLabel": "",
+    "brand": "bespoke-monogram",
+    "dimensions": null
+  },
+  "decorator_definitions": {
+    "bespoke-card": {
+      "description": "Gold-bordered cards with deep navy background and generous interior padding for premium content presentation.",
+      "intent": "Use for content containers that communicate authority and value. The gold border signals premium status.",
+      "suggested_properties": {
+        "background": "#1A2332",
+        "border": "1px solid rgba(212, 175, 55, 0.3)",
+        "border-radius": "2px",
+        "padding": "32px",
+        "box-shadow": "0 4px 24px rgba(0, 0, 0, 0.4)"
+      },
+      "pairs_with": [
+        "bespoke-divider",
+        "bespoke-serif-display",
+        "bespoke-ledger"
+      ],
+      "usage": [
+        "Executive summaries",
+        "Portfolio cards",
+        "Deal summaries",
+        "Investment briefs"
+      ]
+    },
+    "bespoke-divider": {
+      "description": "Thin gold hairline separator (1px #D4AF37 at 40% opacity) for elegant section breaks.",
+      "intent": "Use to separate sections with restraint and refinement. The gold hairline signals quality without shouting.",
+      "suggested_properties": {
+        "border": "none",
+        "border-top": "1px solid rgba(212, 175, 55, 0.4)",
+        "margin": "32px 0"
+      },
+      "pairs_with": [
+        "bespoke-card",
+        "bespoke-serif-display"
+      ],
+      "usage": [
+        "Section separators",
+        "Content breaks",
+        "List dividers"
+      ]
+    },
+    "bespoke-seal": {
+      "description": "Wax-seal style circular badge with gold border and embossed emblem. Formal authority indicator.",
+      "intent": "Use for formal certifications, approvals, and marks of authority. Evokes the gravitas of historic wax seals.",
+      "suggested_properties": {
+        "width": "64px",
+        "height": "64px",
+        "border-radius": "50%",
+        "background": "radial-gradient(circle at 30% 30%, #E8C252, #D4AF37 60%, #B8941F)",
+        "border": "2px solid #B8941F",
+        "display": "inline-flex",
+        "align-items": "center",
+        "justify-content": "center",
+        "font-family": "'Playfair Display', serif",
+        "color": "#0F172A",
+        "font-weight": "700"
+      },
+      "pairs_with": [
+        "bespoke-card",
+        "bespoke-monogram"
+      ],
+      "usage": [
+        "Certification badges",
+        "Approval marks",
+        "Authority indicators",
+        "Premium tier labels"
+      ]
+    },
+    "bespoke-monogram": {
+      "description": "Large serif monogram displays using Playfair or Cormorant. Single-letter or initial typography.",
+      "intent": "Use for brand marks and personalized document headers. Creates instantly recognizable identity.",
+      "suggested_properties": {
+        "font-family": "'Playfair Display', 'Cormorant Garamond', serif",
+        "font-size": "clamp(3rem, 8vw, 6rem)",
+        "font-weight": "500",
+        "color": "#D4AF37",
+        "letter-spacing": "-0.02em",
+        "line-height": "1"
+      },
+      "pairs_with": [
+        "bespoke-seal",
+        "bespoke-serif-display",
+        "bespoke-divider"
+      ],
+      "usage": [
+        "Brand marks",
+        "Document headers",
+        "Letterhead displays",
+        "Hero initials"
+      ]
+    },
+    "bespoke-leather": {
+      "description": "Subtle leather texture overlay using fine noise pattern. Adds tactile richness to surfaces.",
+      "intent": "Apply to surface containers sparingly to add tactile warmth. Should remain subtle and never distract.",
+      "suggested_properties": {
+        "background-image": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='l'%3E%3CfeTurbulence baseFrequency='0.7' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)' opacity='0.3'/%3E%3C/svg%3E\")",
+        "background-blend-mode": "overlay",
+        "opacity": "0.08"
+      },
+      "pairs_with": [
+        "bespoke-card",
+        "bespoke-divider"
+      ],
+      "usage": [
+        "Premium surface texture",
+        "Hero section backgrounds",
+        "Executive portal surfaces"
+      ]
+    },
+    "bespoke-serif-display": {
+      "description": "Large serif titles in Playfair Display with refined letter-spacing. Authoritative headlines.",
+      "intent": "Use for primary headlines and section titles. The serif weight communicates authority and tradition.",
+      "suggested_properties": {
+        "font-family": "'Playfair Display', 'Cormorant Garamond', Georgia, serif",
+        "font-weight": "500",
+        "color": "#F1E9D2",
+        "letter-spacing": "-0.01em",
+        "line-height": "1.2",
+        "font-size": "clamp(2rem, 4vw, 3.5rem)"
+      },
+      "pairs_with": [
+        "bespoke-divider",
+        "bespoke-monogram",
+        "bespoke-card"
+      ],
+      "usage": [
+        "Page headlines",
+        "Section titles",
+        "Hero text",
+        "Chapter headings"
+      ]
+    },
+    "bespoke-ledger": {
+      "description": "Formal table styling with hairline dividers, tabular-nums, and right-aligned figures.",
+      "intent": "Use for financial tables and formal data listings. Professional accounting aesthetic.",
+      "suggested_properties": {
+        "width": "100%",
+        "border-collapse": "collapse",
+        "font-variant-numeric": "tabular-nums",
+        "font-size": "14px",
+        "color": "#F1E9D2"
+      },
+      "pairs_with": [
+        "bespoke-card",
+        "bespoke-divider"
+      ],
+      "usage": [
+        "Financial tables",
+        "Transaction logs",
+        "Portfolio holdings",
+        "Fee schedules"
+      ]
+    },
+    "bespoke-stamp": {
+      "description": "Approval stamp overlay with rotated serif text in gold. Executive sign-off aesthetic.",
+      "intent": "Use as overlay badge to signal approval, review completion, or executive endorsement.",
+      "suggested_properties": {
+        "border": "2px solid #D4AF37",
+        "color": "#D4AF37",
+        "font-family": "'Playfair Display', serif",
+        "font-weight": "700",
+        "text-transform": "uppercase",
+        "letter-spacing": "0.1em",
+        "padding": "8px 16px",
+        "transform": "rotate(-8deg)",
+        "display": "inline-block"
+      },
+      "pairs_with": [
+        "bespoke-seal",
+        "bespoke-card"
+      ],
+      "usage": [
+        "Approval stamps",
+        "Review completion marks",
+        "Status overlays",
+        "Certification indicators"
+      ]
+    }
+  },
+  "elevation": {
+    "1": {
+      "light": "0 1px 2px rgba(0,0,0,0.05)",
+      "dark": "0 1px 2px rgba(0,0,0,0.30)"
+    },
+    "2": {
+      "light": "0 2px 6px rgba(0,0,0,0.07)",
+      "dark": "0 2px 6px rgba(0,0,0,0.40)"
+    },
+    "3": {
+      "light": "0 6px 16px rgba(0,0,0,0.09)",
+      "dark": "0 6px 16px rgba(0,0,0,0.45)"
+    },
+    "4": {
+      "light": "0 12px 32px rgba(0,0,0,0.12)",
+      "dark": "0 12px 32px rgba(0,0,0,0.50)"
+    },
+    "5": {
+      "light": "0 24px 64px rgba(0,0,0,0.16)",
+      "dark": "0 24px 64px rgba(0,0,0,0.55)"
+    }
+  }
+}

package/themes/bioluminescent.json

@@ -0,0 +1,217 @@
+{
+  "$schema": "https://decantr.ai/schemas/theme.v1.json",
+  "id": "bioluminescent",
+  "version": "1.0.0",
+  "name": "Bioluminescent",
+  "description": "Deep ocean aesthetic. Organic glow. Luminescent edges on dark backgrounds, living and breathing UI. Glowing borders, pulsing animations, deep abyss backgrounds.",
+  "tags": [
+    "ocean",
+    "glow",
+    "organic",
+    "luminescent",
+    "deep-sea"
+  ],
+  "personality": "pill + glow elevation + smooth motion + no borders + vivid gradients",
+  "seed": {
+    "primary": "#00ffd5",
+    "secondary": "#7b61ff",
+    "accent": "#ff6b9d",
+    "background": "#f0fdf4"
+  },
+  "palette": {
+    "background": {
+      "light": "#F0FDF4",
+      "dark": "#050A0E"
+    },
+    "surface": {
+      "light": "#FFFFFF",
+      "dark": "#0A1218"
+    },
+    "surface-raised": {
+      "light": "#ECFDF5",
+      "dark": "#101C25"
+    },
+    "border": {
+      "light": "#A7F3D0",
+      "dark": "#0D3B3B"
+    },
+    "text": {
+      "light": "#0A1A12",
+      "dark": "#E0FFF0"
+    },
+    "text-muted": {
+      "light": "#4A7A60",
+      "dark": "#6AA898"
+    },
+    "primary": {
+      "light": "#059669",
+      "dark": "#00FFD5"
+    },
+    "primary-hover": {
+      "light": "#047857",
+      "dark": "#33FFE0"
+    }
+  },
+  "modes": [
+    "light",
+    "dark"
+  ],
+  "shapes": [
+    "sharp",
+    "rounded",
+    "pill"
+  ],
+  "decantr_compat": ">=2.0.0",
+  "source": "community",
+  "decorators": {
+    "bio-glow-card": "Dark card with luminescent cyan border glow at 40% opacity, subtle pulse animation on the border shadow.",
+    "bio-glow-ring": "Circular element with animated bioluminescent ring that slowly pulses between cyan and violet hues.",
+    "bio-abyss": "Deep near-black background with faint radial cyan glow emanating from center for depth effect.",
+    "bio-tendril": "Organic wavy border accent using SVG path with glowing cyan stroke and animated dash offset."
+  },
+  "spatial": {
+    "density_bias": 0,
+    "content_gap_shift": 0,
+    "section_padding": "6rem",
+    "card_wrapping": "standard"
+  },
+  "motion": {
+    "preference": "moderate",
+    "reduce_motion": false,
+    "entrance": "fade",
+    "timing": "ease-out",
+    "durations": {
+      "hover": "200ms",
+      "entrance": "400ms",
+      "instant": "80ms",
+      "fast": "160ms",
+      "base": "280ms",
+      "slow": "450ms",
+      "slower": "650ms",
+      "stagger": "70ms"
+    },
+    "easings": {
+      "ease": "cubic-bezier(0.34, 1.4, 0.64, 1)",
+      "easeOut": "cubic-bezier(0, 0, 0.2, 1)",
+      "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
+      "spring": "cubic-bezier(0.34, 1.56, 0.64, 1)"
+    }
+  },
+  "typography_hints": {
+    "scale": "modular",
+    "heading_weight": 600,
+    "body_weight": 400
+  },
+  "motion_hints": {
+    "preference": "subtle",
+    "reduce_motion_default": true
+  },
+  "decorator_definitions": {
+    "bio-glow-card": {
+      "description": "Dark card with luminescent cyan border glow at 40% opacity, subtle pulse animation on the border shadow.",
+      "intent": "Use for content containers that should feel alive and organic. The pulsing glow border mimics deep-sea bioluminescence.",
+      "suggested_properties": {
+        "background": "var(--d-surface, #0A1218)",
+        "border": "1px solid rgba(0, 255, 213, 0.3)",
+        "border-radius": "12px",
+        "box-shadow": "0 0 12px rgba(0, 255, 213, 0.4)",
+        "animation": "bio-pulse 3s ease-in-out infinite"
+      },
+      "pairs_with": [
+        "bio-abyss",
+        "bio-glow-ring"
+      ],
+      "usage": [
+        "Feature cards",
+        "Data panels",
+        "Status containers",
+        "Info cards"
+      ]
+    },
+    "bio-glow-ring": {
+      "description": "Circular element with animated bioluminescent ring that slowly pulses between cyan and violet hues.",
+      "intent": "Use for avatar frames, status indicators, and circular elements that need the living bioluminescent effect.",
+      "suggested_properties": {
+        "border-radius": "50%",
+        "border": "2px solid rgba(0, 255, 213, 0.5)",
+        "box-shadow": "0 0 8px rgba(0, 255, 213, 0.3), 0 0 16px rgba(123, 97, 255, 0.2)",
+        "animation": "bio-ring-pulse 4s ease-in-out infinite"
+      },
+      "pairs_with": [
+        "bio-glow-card",
+        "bio-abyss"
+      ],
+      "usage": [
+        "Avatar frames",
+        "Status rings",
+        "Circular indicators",
+        "Icon containers"
+      ]
+    },
+    "bio-abyss": {
+      "description": "Deep near-black background with faint radial cyan glow emanating from center for depth effect.",
+      "intent": "Use as the foundational page background to create the deep ocean abyss atmosphere. The central glow suggests light from an unseen source.",
+      "suggested_properties": {
+        "background": "radial-gradient(ellipse at center, rgba(0, 255, 213, 0.05), #050A0E 70%)",
+        "min-height": "100vh",
+        "color": "#E0FFF0"
+      },
+      "pairs_with": [
+        "bio-glow-card",
+        "bio-tendril"
+      ],
+      "usage": [
+        "Page root containers",
+        "App shell backgrounds",
+        "Hero section backdrops"
+      ]
+    },
+    "bio-tendril": {
+      "description": "Organic wavy border accent using SVG path with glowing cyan stroke and animated dash offset.",
+      "intent": "Use as decorative section borders or dividers. The animated organic wave creates a living, breathing separation between content.",
+      "suggested_properties": {
+        "stroke": "#00FFD5",
+        "stroke-width": "2",
+        "fill": "none",
+        "stroke-dasharray": "8 4",
+        "animation": "tendril-flow 3s linear infinite",
+        "opacity": "0.6"
+      },
+      "pairs_with": [
+        "bio-abyss",
+        "bio-glow-card"
+      ],
+      "usage": [
+        "Section dividers",
+        "Decorative borders",
+        "Content separators"
+      ]
+    }
+  },
+  "typography": {
+    "display": "'Inter', ui-sans-serif, system-ui, sans-serif",
+    "body": "'Inter', ui-sans-serif, system-ui, sans-serif"
+  },
+  "elevation": {
+    "1": {
+      "light": "0 1px 2px rgba(0,0,0,0.06)",
+      "dark": "0 1px 2px rgba(0,0,0,0.4)"
+    },
+    "2": {
+      "light": "0 2px 6px rgba(0,0,0,0.08)",
+      "dark": "0 2px 8px rgba(255, 255, 255, 0.06)"
+    },
+    "3": {
+      "light": "0 6px 16px rgba(0,0,0,0.10)",
+      "dark": "0 4px 16px rgba(255, 255, 255, 0.08)"
+    },
+    "4": {
+      "light": "0 12px 32px rgba(0,0,0,0.14)",
+      "dark": "0 8px 28px rgba(255, 255, 255, 0.12)"
+    },
+    "5": {
+      "light": "0 24px 64px rgba(0,0,0,0.18)",
+      "dark": "0 16px 48px rgba(255, 255, 255, 0.16)"
+    }
+  }
+}