{ "_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 \"Vortex\".\n\nFetch the full brand system JSON here: https://zadvgtvudyyjcriuawvg.supabase.co/functions/v1/design-system?token=3bbb2068dabb4ebb\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\"Vortex\"\n```\n\nJSX (copy verbatim):\n```jsx\n\"Vortex\"\n```\n\nThe logo is a transparent PNG; always render it on the background color `#6291D5`.\n\n## Identity\n\n- Name: Vortex\n- Personality: Modern, Creative, Bold, Playful\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: Space Grotesk. Body font: Plus Jakarta Sans.\n\n- Primary: #6291D5 · Secondary: #A459C2 · Accent: #F86C47\n\n- Background: #F8FAFC · Surface: #FFFFFF · Text: #0F172A\n\n- Dark — Primary: #8193E0 · Background: #0F172A · Text: #F8FAFC\n\n- Base spacing: 8px · Border radius: lg\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=3bbb2068dabb4ebb", "proxy_url": "https://zadvgtvudyyjcriuawvg.supabase.co/functions/v1/logo-image?token=3bbb2068dabb4ebb", "raw_url": "https://zadvgtvudyyjcriuawvg.supabase.co/storage/v1/object/public/brand-logos/eda569c5-dfc2-4e75-933b-e285ad1fb40f/25996389-3a76-444d-9d45-05fe5e144f8f/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": "25996389-3a76-444d-9d45-05fe5e144f8f", "name": "Vortex Design System", "brand_name": "Vortex", "industry": null, "brand_personality": [ "Modern", "Creative", "Bold", "Playful" ], "primary_color": "#6291D5", "secondary_color": "#A459C2", "tertiary_color": "#EA546A", "accent_color": "#F86C47", "neutral_color": "#293056", "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": "#5F74C7", "link_hover_color": "#4A5EB1", "focus_ring_color": "#CBD5E1", "hover_opacity": 0.9, "active_opacity": 0.8, "disabled_opacity": 0.4, "dark_primary_color": "#8193E0", "dark_secondary_color": "#F07B8C", "dark_tertiary_color": "#FFD185", "dark_accent_color": "#5EEAD4", "dark_neutral_color": "#94A3B8", "dark_background_color": "#0F172A", "dark_surface_color": "#1E293B", "dark_surface_elevated_color": "#334155", "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": "#8193E0", "dark_link_hover_color": "#A3B2F0", "dark_focus_ring_color": "#475569", "heading_font": "Space Grotesk", "body_font": "Plus Jakarta Sans", "typography_scale": { "h1": { "size": 56, "weight": 700, "lineHeight": 1.1 }, "h2": { "size": 40, "weight": 700, "lineHeight": 1.2 }, "h3": { "size": 32, "weight": 700, "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.5 }, "link": { "size": 16, "weight": 600, "lineHeight": 1.6 }, "label": { "size": 14, "weight": 600, "lineHeight": 1 }, "caption": { "size": 12, "weight": 400, "lineHeight": 1.4 }, "overline": { "size": 12, "weight": 700, "lineHeight": 1, "letterSpacing": 0.1 }, "bodySmall": { "size": 14, "weight": 400, "lineHeight": 1.6 } }, "base_spacing": 8, "spacing_scale": [ 4, 8, 12, 16, 24, 32, 48, 64, 96, 128 ], "sizing_scale": { "lg": 64, "md": 48, "sm": 32, "xl": 96, "xs": 16, "2xl": 128 }, "border_radius": "lg", "radius_scale": { "lg": 12, "md": 8, "sm": 4, "xl": 24, "2xl": 32, "full": 9999, "none": 0 }, "shadows": { "lg": "0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -4px rgba(15, 23, 42, 0.1)", "md": "0 4px 6px -1px rgba(15, 23, 42, 0.1), 0 2px 4px -2px rgba(15, 23, 42, 0.1)", "sm": "0 1px 2px 0 rgba(15, 23, 42, 0.05)", "xl": "0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.1)", "2xl": "0 25px 50px -12px rgba(15, 23, 42, 0.25)", "none": "none", "inner": "inset 0 2px 4px 0 rgba(15, 23, 42, 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=3bbb2068dabb4ebb", "logo_proxy_url": "https://zadvgtvudyyjcriuawvg.supabase.co/functions/v1/logo-image?token=3bbb2068dabb4ebb", "raw_logo_url": "https://zadvgtvudyyjcriuawvg.supabase.co/storage/v1/object/public/brand-logos/eda569c5-dfc2-4e75-933b-e285ad1fb40f/25996389-3a76-444d-9d45-05fe5e144f8f/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-03T00:29:29.10462+00:00", "updated_at": "2026-02-12T23:59:46.468513+00:00", "share_token": "3bbb2068dabb4ebb", "tagline": null, "brand_voice": null, "messaging": null, "imagery": null, "ui_elements_overrides": {} }