{ "_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 \"Jozi Firecracker Factory\".\n\nFetch the full brand system JSON here: https://zadvgtvudyyjcriuawvg.supabase.co/functions/v1/design-system?token=190277be1c8645f5\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\"Jozi\n```\n\nJSX (copy verbatim):\n```jsx\n\"Jozi\n```\n\nThe logo is a transparent PNG; always render it on the background color `#ffe2d6`.\n\n## Identity\n\n- Name: Jozi Firecracker Factory\n- Tagline: Fueling Intelligent Brands with AI-Native Design.\n\n## Voice\n\n- Tone: Bold, Intelligent, Disruptive, Authoritative, Precise\n- Attributes: AI-native, Full-service creative & technology, Craft-driven, Problem-solving, High-performing\n- Do: Speak with confidence and clarity., Emphasize innovation and cutting-edge technology., Highlight tangible results and leadership., Use strong, active verbs., Focus on the future of design and product.\n- Don't: Use overly casual or informal language., Sound generic or buzzword-heavy (without substance)., Downplay our expertise or impact., Be hesitant or uncertain., Over-complicate simple concepts.\n- Example sentence: We reject mediocrity, crafting beautiful, high-performing products at the intersection of human creativity and machine intelligence.\n\n## Messaging\n\n- Elevator pitch: Jozi Firecracker Factory is an AI-native design and product agency that empowers intelligent brands to reject mediocrity. We fuse human-centered design with advanced machine intelligence to build beautiful, high-performing products and systems that define the future.\n- Value props: Transform complex problems into elegant, AI-powered solutions., Gain a competitive edge with cutting-edge design and product strategies., Partner with an agency trusted by leading global brands.\n- Pillars:\n - AI-Native Advantage — We leverage machine intelligence to create superior, future-proof design and product solutions.\n - Full-Service Expertise — From UX flows to custom infrastructure, our integrated approach delivers comprehensive and scalable results.\n - Craft & Performance — We combine meticulous design with rigorous engineering to build products that are both stunning and highly effective.\n- Naming patterns: Use descriptive, benefit-oriented names for features., Incorporate terms related to intelligence, precision, or ignition (e.g., 'Spark Engine', 'Ignite AI')., Maintain a professional, forward-thinking tone.\n\n## Imagery\n\n- Photography: Sharp, high-contrast, and dynamic photography. Focus on clean lines, modern technology, and abstract representations of data or intelligence. Avoid overly soft or traditional imagery.\n- Illustration: Geometric, abstract, and technical illustrations. Use a limited, bold color palette that aligns with the brand. Illustrations should convey innovation, connectivity, and precision, often featuring subtle nods to AI or data visualization.\n- Mood: Bold, Intelligent, Futuristic, Precise, Dynamic, High-tech, Minimalist, Impactful\n- Avoid: Pastel colors, Soft, organic shapes, Stock-photo clichés (shaking hands, generic diverse teams), Overly complex or cluttered visuals, Anything that looks dated or traditional\n\n## Design tokens\n\n- Heading font: Bebas Neue. Body font: Playfair Display.\n\n- Primary: #FF4800 · Secondary: #1A1A16 · Accent: #FFB800\n\n- Background: #F0F0EE · Surface: #FFFFFF · Text: #1A1A16\n\n- Dark — Primary: #FF6F33 · Background: #121212 · Text: #FAFAF7\n\n- Base spacing: 4px · Border radius: none\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=190277be1c8645f5", "proxy_url": "https://zadvgtvudyyjcriuawvg.supabase.co/functions/v1/logo-image?token=190277be1c8645f5", "raw_url": "https://zadvgtvudyyjcriuawvg.supabase.co/storage/v1/object/public/brand-logos/eda569c5-dfc2-4e75-933b-e285ad1fb40f/dab42884-7268-4846-b146-d34a8a217535/logo.png?v=1782790604881&t=2026-06-30T03%3A37%3A21.446978%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": "dab42884-7268-4846-b146-d34a8a217535", "name": "Jozi Firecracker Factory", "brand_name": "Jozi Firecracker Factory", "industry": null, "brand_personality": [], "primary_color": "#FF4800", "secondary_color": "#1A1A16", "tertiary_color": "#FAFAF7", "accent_color": "#FFB800", "neutral_color": "#2E2E28", "background_color": "#F0F0EE", "surface_color": "#FFFFFF", "surface_elevated_color": "#FAFAF7", "surface_muted_color": "#E5E5E3", "border_color": "#D0D0CE", "text_color": "#1A1A16", "success_color": "#AEE9D1", "warning_color": "#FFD979", "error_color": "#FED3D1", "info_color": "#B4E1FA", "link_color": "#FF4800", "link_hover_color": "#E53F00", "focus_ring_color": "#FFB800", "hover_opacity": 0.85, "active_opacity": 0.7, "disabled_opacity": 0.4, "dark_primary_color": "#FF6F33", "dark_secondary_color": "#2E2E28", "dark_tertiary_color": "#FAFAF7", "dark_accent_color": "#FFD979", "dark_neutral_color": "#A3A3A3", "dark_background_color": "#121212", "dark_surface_color": "#1A1A1A", "dark_surface_elevated_color": "#222222", "dark_surface_muted_color": "#2A2A2A", "dark_border_color": "#404040", "dark_text_color": "#FAFAF7", "dark_success_color": "#1C3829", "dark_warning_color": "#3D2E14", "dark_error_color": "#3B1C1C", "dark_info_color": "#1C2E3D", "dark_link_color": "#FF6F33", "dark_link_hover_color": "#FF8F5C", "dark_focus_ring_color": "#FFD979", "heading_font": "Bebas Neue", "body_font": "Playfair Display", "typography_scale": { "h1": { "size": 52, "weight": 700, "lineHeight": 1.1 }, "h2": { "size": 40, "weight": 700, "lineHeight": 1.2 }, "h3": { "size": 32, "weight": 700, "lineHeight": 1.3 }, "h4": { "size": 26, "weight": 700, "lineHeight": 1.4 }, "h5": { "size": 20, "weight": 700, "lineHeight": 1.5 }, "h6": { "size": 18, "weight": 700, "lineHeight": 1.5 }, "body": { "size": 16, "weight": 400, "lineHeight": 1.6 }, "code": { "size": 14, "weight": 400, "lineHeight": 1.5 }, "link": { "size": 16, "weight": 500, "lineHeight": 1.6 }, "label": { "size": 14, "weight": 500, "lineHeight": 1.4 }, "caption": { "size": 12, "weight": 400, "lineHeight": 1.4 }, "overline": { "size": 12, "weight": 500, "lineHeight": 1.3, "letterSpacing": 0.08 }, "bodySmall": { "size": 14, "weight": 400, "lineHeight": 1.5 } }, "base_spacing": 4, "spacing_scale": [ 4, 8, 12, 16, 24, 32, 48, 64, 96, 128 ], "sizing_scale": { "lg": 48, "md": 32, "sm": 24, "xl": 64, "xs": 16, "2xl": 96 }, "border_radius": "none", "radius_scale": { "lg": 0, "md": 0, "sm": 0, "xl": 0, "2xl": 0, "full": 9999, "none": 0 }, "shadows": { "lg": "0px 4px 8px rgba(0, 0, 0, 0.1)", "md": "0px 2px 4px rgba(0, 0, 0, 0.08)", "sm": "0px 1px 2px rgba(0, 0, 0, 0.05)", "xl": "0px 8px 16px rgba(0, 0, 0, 0.12)", "2xl": "0px 12px 24px rgba(0, 0, 0, 0.15)", "none": "none", "inner": "inset 0px 1px 2px rgba(0, 0, 0, 0.05)" }, "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=190277be1c8645f5", "logo_proxy_url": "https://zadvgtvudyyjcriuawvg.supabase.co/functions/v1/logo-image?token=190277be1c8645f5", "raw_logo_url": "https://zadvgtvudyyjcriuawvg.supabase.co/storage/v1/object/public/brand-logos/eda569c5-dfc2-4e75-933b-e285ad1fb40f/dab42884-7268-4846-b146-d34a8a217535/logo.png?v=1782790604881&t=2026-06-30T03%3A37%3A21.446978%2B00%3A00", "logo_background_color": "#ffe2d6", "logo_foreground_style": "color", "logo_source": null, "created_at": "2026-06-26T23:28:22.389222+00:00", "updated_at": "2026-06-30T03:37:21.446978+00:00", "share_token": "190277be1c8645f5", "tagline": "Fueling Intelligent Brands with AI-Native Design.", "brand_voice": { "do": [ "Speak with confidence and clarity.", "Emphasize innovation and cutting-edge technology.", "Highlight tangible results and leadership.", "Use strong, active verbs.", "Focus on the future of design and product." ], "dont": [ "Use overly casual or informal language.", "Sound generic or buzzword-heavy (without substance).", "Downplay our expertise or impact.", "Be hesitant or uncertain.", "Over-complicate simple concepts." ], "tone": [ "Bold", "Intelligent", "Disruptive", "Authoritative", "Precise" ], "attributes": [ "AI-native", "Full-service creative & technology", "Craft-driven", "Problem-solving", "High-performing" ], "example_sentence": "We reject mediocrity, crafting beautiful, high-performing products at the intersection of human creativity and machine intelligence." }, "messaging": { "pillars": [ { "title": "AI-Native Advantage", "description": "We leverage machine intelligence to create superior, future-proof design and product solutions." }, { "title": "Full-Service Expertise", "description": "From UX flows to custom infrastructure, our integrated approach delivers comprehensive and scalable results." }, { "title": "Craft & Performance", "description": "We combine meticulous design with rigorous engineering to build products that are both stunning and highly effective." } ], "value_props": [ "Transform complex problems into elegant, AI-powered solutions.", "Gain a competitive edge with cutting-edge design and product strategies.", "Partner with an agency trusted by leading global brands." ], "elevator_pitch": "Jozi Firecracker Factory is an AI-native design and product agency that empowers intelligent brands to reject mediocrity. We fuse human-centered design with advanced machine intelligence to build beautiful, high-performing products and systems that define the future.", "naming_patterns": [ "Use descriptive, benefit-oriented names for features.", "Incorporate terms related to intelligence, precision, or ignition (e.g., 'Spark Engine', 'Ignite AI').", "Maintain a professional, forward-thinking tone." ] }, "imagery": { "avoid": [ "Pastel colors", "Soft, organic shapes", "Stock-photo clichés (shaking hands, generic diverse teams)", "Overly complex or cluttered visuals", "Anything that looks dated or traditional" ], "photography": "Sharp, high-contrast, and dynamic photography. Focus on clean lines, modern technology, and abstract representations of data or intelligence. Avoid overly soft or traditional imagery.", "illustration": "Geometric, abstract, and technical illustrations. Use a limited, bold color palette that aligns with the brand. Illustrations should convey innovation, connectivity, and precision, often featuring subtle nods to AI or data visualization.", "mood_keywords": [ "Bold", "Intelligent", "Futuristic", "Precise", "Dynamic", "High-tech", "Minimalist", "Impactful" ] }, "ui_elements_overrides": {} }