{
"_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](\"https://zadvgtvudyyjcriuawvg.supabase.co/functions/v1/logo-image?token=f0dec347526e4057\")
\n```\n\nJSX (copy verbatim):\n```jsx\n\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,
"ui_elements_overrides": {}
}