{ "_meta": { "version": "1.0", "generated_by": "brandiddit.ai", "important": "This is the COMPLETE brand design system. Apply EVERY token below — logo, colors (light + dark), typography, spacing, sizing, radius, shadows, opacity, iconography, voice, messaging, imagery — to anything you generate for this brand. Do NOT substitute defaults, invent new colors, or pick different fonts.", "ai_instructions": "If you only read one field, read `ai_prompt` — it is the canonical, ready-to-use system prompt for this brand. All structured tokens below are referenced from it.", "usage_instructions": { "ai_prompt": "Drop the value of `ai_prompt` directly into your system prompt. It already contains identity, voice, messaging, imagery, color and typography rules.", "logo": "MANDATORY: Use the brand logo in every generated UI. For Claude artifacts and sandboxed HTML, use `logo.proxy_url` or top-level `logo_url`; these are CORS-safe image endpoints. Do NOT use `logo.raw_url` or `raw_logo_url` in generated artifacts.", "colors": "Use these exact hex values for all brand surfaces. Honor light and dark mode tokens (dark_* prefixed) when rendering in dark mode.", "fonts": "Load the specified Google Fonts (heading_font and body_font) and apply them — heading_font for headings, body_font for body text.", "tokens": "Respect spacing_scale, sizing_scale, radius_scale, shadows, and opacity_scale instead of framework defaults.", "iconography": "Use the specified icon_library for any icons in the generated UI." } }, "ai_prompt": "You are designing and writing for the brand \"Michelle Casanova\".\n\nFetch the full brand system JSON here: https://zadvgtvudyyjcriuawvg.supabase.co/functions/v1/design-system?token=f0dec347526e4057\n\n## Logo (MANDATORY — embed verbatim)\n\nWhenever you render this brand's app icon, avatar, navbar logo, favicon, or any \"brand mark\" UI, embed the image below EXACTLY. Do not describe it, substitute an emoji, generate a new image, use a placeholder, or omit it.\n\nThe `src` value below is the canonical logo source for generated HTML. It is a CORS-safe image proxy URL; paste it verbatim. Use `logo.proxy_url` or top-level `logo_url` from this JSON for Claude artifacts. Do NOT use `logo.raw_url` or `raw_logo_url` because raw storage URLs can be blocked by cross-origin sandbox rules.\n\nHTML (copy verbatim):\n```html\n\"Michelle\n```\n\nJSX (copy verbatim):\n```jsx\n\"Michelle\n```\n\nThe logo is a transparent PNG; always render it on the background color `#525eeb`.\n\n## Identity\n\n- Name: Michelle Casanova\n- Personality: Modern, Professional, Minimal, Technical\n\n## Voice\n\n_(not defined)_\n\n## Messaging\n\n_(not defined)_\n\n## Imagery\n\n_(not defined)_\n\n## Design tokens\n\n- Heading font: Inter. Body font: Inter.\n\n- Primary: #525eeb · Secondary: #a855f7 · Accent: #f43f5e\n\n- Background: #f8fafc · Surface: #ffffff · Text: #0f172a\n\n- Dark — Primary: #7a85ff · Background: #020617 · Text: #f8fafc\n\n- Base spacing: 8px · Border radius: sm\n\n## Rules\n\n- Use only the colors, fonts, spacing, radius and shadows from the brand system above.\n\n- Match the brand voice and messaging in any copy you generate. Respect the Do/Don't list.\n\n- When showing the app icon, use the exact logo src from the Logo section above on the specified logo background. Never use raw storage URLs in Claude artifacts.\n\n- Never invent new brand colors, fonts, or messaging. If something isn't defined, derive it from existing tokens.\n\n- Output production-ready code that references the tokens (CSS variables or Tailwind classes) rather than hardcoded values.\n\n- UI Element overrides are defined in `ui_elements_overrides`. Respect custom button/badge/chip/tag labels, colors, and style tokens (radius, padding, font size/weight, border width) when generating interface components.", "logo": { "url": "https://zadvgtvudyyjcriuawvg.supabase.co/functions/v1/logo-image?token=f0dec347526e4057", "proxy_url": "https://zadvgtvudyyjcriuawvg.supabase.co/functions/v1/logo-image?token=f0dec347526e4057", "raw_url": "https://zadvgtvudyyjcriuawvg.supabase.co/storage/v1/object/public/brand-logos/8b9539d1-41ae-4d2d-bdb9-2869f29b45db/26b9efca-2087-48a1-ab2a-4aecc9e42c07/logo.png?t=2026-02-12T23%3A59%3A46.468513%2B00%3A00", "data_uri": null, "usage": "Use `proxy_url` or `url` for Claude artifacts and sandboxed HTML. They are CORS-safe image endpoints. `data_uri` is an offline fallback. Use `raw_url` only outside sandboxed environments.", "fallback": null }, "id": "26b9efca-2087-48a1-ab2a-4aecc9e42c07", "name": "Michelle Casanova Design System", "brand_name": "Michelle Casanova", "industry": null, "brand_personality": [ "Modern", "Professional", "Minimal", "Technical" ], "primary_color": "#525eeb", "secondary_color": "#a855f7", "tertiary_color": "#0ea5e9", "accent_color": "#f43f5e", "neutral_color": "#64748b", "background_color": "#f8fafc", "surface_color": "#ffffff", "surface_elevated_color": "#ffffff", "surface_muted_color": "#f1f5f9", "border_color": "#e2e8f0", "text_color": "#0f172a", "success_color": "#AEE9D1", "warning_color": "#FFD979", "error_color": "#FED3D1", "info_color": "#B4E1FA", "link_color": "#525eeb", "link_hover_color": "#434dbd", "focus_ring_color": "#a855f7", "hover_opacity": 0.9, "active_opacity": 0.8, "disabled_opacity": 0.4, "dark_primary_color": "#7a85ff", "dark_secondary_color": "#c084fc", "dark_tertiary_color": "#38bdf8", "dark_accent_color": "#fb7185", "dark_neutral_color": "#94a3b8", "dark_background_color": "#020617", "dark_surface_color": "#0f172a", "dark_surface_elevated_color": "#1e293b", "dark_surface_muted_color": "#1e293b", "dark_border_color": "#334155", "dark_text_color": "#f8fafc", "dark_success_color": "#1C3829", "dark_warning_color": "#3D2E14", "dark_error_color": "#3B1C1C", "dark_info_color": "#1C2E3D", "dark_link_color": "#7a85ff", "dark_link_hover_color": "#a855f7", "dark_focus_ring_color": "#c084fc", "heading_font": "Inter", "body_font": "Inter", "typography_scale": { "h1": { "size": 48, "weight": 700, "lineHeight": 1.1 }, "h2": { "size": 36, "weight": 700, "lineHeight": 1.2 }, "h3": { "size": 30, "weight": 600, "lineHeight": 1.2 }, "h4": { "size": 24, "weight": 600, "lineHeight": 1.3 }, "h5": { "size": 20, "weight": 600, "lineHeight": 1.4 }, "h6": { "size": 18, "weight": 600, "lineHeight": 1.4 }, "body": { "size": 16, "weight": 400, "lineHeight": 1.6 }, "code": { "size": 14, "weight": 400, "lineHeight": 1.6 }, "link": { "size": 16, "weight": 500, "lineHeight": 1.6 }, "label": { "size": 14, "weight": 500, "lineHeight": 1.2 }, "caption": { "size": 12, "weight": 400, "lineHeight": 1.4 }, "overline": { "size": 10, "weight": 700, "lineHeight": 1.2, "letterSpacing": 0.1 }, "bodySmall": { "size": 14, "weight": 400, "lineHeight": 1.5 } }, "base_spacing": 8, "spacing_scale": [ 4, 8, 12, 16, 24, 32, 48, 64, 96, 128 ], "sizing_scale": { "lg": 24, "md": 16, "sm": 8, "xl": 32, "xs": 4, "2xl": 48 }, "border_radius": "sm", "radius_scale": { "lg": 8, "md": 6, "sm": 4, "xl": 10, "2xl": 12, "full": 9999, "none": 0 }, "shadows": { "lg": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)", "md": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)", "sm": "0 1px 2px 0 rgba(0, 0, 0, 0.05)", "xl": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)", "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)", "none": "none", "inner": "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)" }, "opacity_scale": { "0": 0, "5": 0.05, "10": 0.1, "20": 0.2, "25": 0.25, "30": 0.3, "40": 0.4, "50": 0.5, "60": 0.6, "70": 0.7, "75": 0.75, "80": 0.8, "90": 0.9, "95": 0.95, "100": 1 }, "icon_library": { "url": "lucide.dev", "name": "Lucide Icons", "description": "A modern, consistent icon library with clean strokes and excellent readability. Supports customizable size and stroke width for flexible usage across UI contexts." }, "logo_url": "https://zadvgtvudyyjcriuawvg.supabase.co/functions/v1/logo-image?token=f0dec347526e4057", "logo_proxy_url": "https://zadvgtvudyyjcriuawvg.supabase.co/functions/v1/logo-image?token=f0dec347526e4057", "raw_logo_url": "https://zadvgtvudyyjcriuawvg.supabase.co/storage/v1/object/public/brand-logos/8b9539d1-41ae-4d2d-bdb9-2869f29b45db/26b9efca-2087-48a1-ab2a-4aecc9e42c07/logo.png?t=2026-02-12T23%3A59%3A46.468513%2B00%3A00", "logo_background_color": null, "logo_foreground_style": "white", "logo_source": null, "created_at": "2026-02-04T18:53:26.416685+00:00", "updated_at": "2026-02-12T23:59:46.468513+00:00", "share_token": "f0dec347526e4057", "tagline": null, "brand_voice": null, "messaging": null, "imagery": null, "voice_examples": null, "ui_elements_overrides": {}, "components": { "button": { "variants": [ "primary", "secondary", "outline", "ghost", "destructive" ], "states": { "default": { "bg": "#525eeb", "fg": "#ffffff", "border": "#525eeb" }, "hover": { "bg": "#4a55d4", "fg": "#ffffff", "border": "#4a55d4", "note": "10% darker than primary" }, "active": { "bg": "#434dc1", "fg": "#ffffff", "border": "#434dc1", "note": "18% darker than primary" }, "focus_visible": { "bg": "#525eeb", "fg": "#ffffff", "border": "#525eeb", "outline": "2px solid #a855f7", "outlineOffset": "2px" }, "disabled": { "bg": "#525eeb", "fg": "#ffffff", "border": "#525eeb", "opacity": 0.4, "cursor": "not-allowed" }, "loading": { "bg": "#525eeb", "fg": "#ffffff", "border": "#525eeb", "note": "Show spinner in fg color, hide label with visibility:hidden" } }, "contrast": { "fg_on_primary": { "ratio": 5.05, "aa_normal": "pass", "aa_large": "pass", "aaa_normal": "fail" }, "primary_on_bg": { "ratio": 4.83, "aa_normal": "pass", "aa_large": "pass", "aaa_normal": "fail" } }, "snippets": { "tailwind": " (e.currentTarget.style.background = \"#4a55d4\")}\n onMouseOut={(e) => (e.currentTarget.style.background = \"#525eeb\")}\n>Continue", "css": ".btn-primary {\n background: #525eeb;\n color: #ffffff;\n border-radius: 6px;\n padding: 10px 16px;\n font-weight: 600;\n transition: background-color 150ms ease;\n}\n.btn-primary:hover { background: #4a55d4; }\n.btn-primary:active { background: #434dc1; }\n.btn-primary:focus-visible { outline: 2px solid #a855f7; outline-offset: 2px; }\n.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }", "react": "export function PrimaryButton(props: React.ButtonHTMLAttributes) {\n return