{ "_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 \"NoisyIgloo\".\n\nFetch the full brand system JSON here: https://zadvgtvudyyjcriuawvg.supabase.co/functions/v1/design-system?token=0c87f2e98e9f9a29820b392e63c6f4205c823dfa51c7e4aa0f9417b24707a688\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\"NoisyIgloo\"\n```\n\nJSX (copy verbatim):\n```jsx\n\"NoisyIgloo\"\n```\n\nThe logo is a transparent PNG; always render it on the background color `#96d35f`.\n\n## Identity\n\n- Name: NoisyIgloo\n- Tagline: Crafting reliable gaming experiences, block by block.\n- Personality: Professional, Trustworthy\n\n## Voice\n\n- Tone: Clear, Authoritative, Helpful, Direct, Confident\n- Attributes: Reliable, Expert, Secure, Efficient, Gamer-centric\n- Do: Use precise and unambiguous language., Focus on benefits and solutions for gamers., Maintain a professional yet approachable tone., Provide clear instructions and support., Reference gaming concepts without being overly childish.\n- Don't: Use slang or overly casual language., Be vague or make unsupported claims., Sound condescending or dismissive., Overuse technical jargon without explanation., Be overly playful or immature.\n- Example sentence: Our secure servers ensure uninterrupted gameplay, so you can focus on building your world without lag.\n\n## Messaging\n\n- Elevator pitch: NoisyIgloo delivers professional and trustworthy Minecraft-inspired gaming solutions. We ensure a seamless, secure, and reliable experience, allowing players to focus on what matters most: building, exploring, and conquering their digital worlds.\n- Value props: Experience lag-free, rock-solid server performance., Protect your progress with advanced security protocols., Get expert support whenever you need it, fast.\n- Pillars:\n - Unwavering Reliability — We provide stable, high-performance services that gamers can always count on.\n - Player-First Security — Your account and data are protected with industry-leading security measures.\n - Seamless Gaming Experience — From setup to epic adventures, our platform enhances every moment of your gameplay.\n- Naming patterns: Clear, descriptive names for features (e.g., 'SecureSave', 'InstantWorld'), Avoid overly cute or abstract names., Incorporate terms related to reliability and performance.\n\n## Imagery\n\n- Photography: Clean, focused shots of gaming setups, diverse gamers in action, or abstract, high-tech visuals. Avoid overly dramatic or staged photos.\n- Illustration: Minimalist, geometric illustrations inspired by blocky aesthetics but rendered with a modern, professional touch. Focus on clear concepts and functionality.\n- Mood: Structured, Reliable, Modern, Crisp, Secure, Analytical, Efficient, Grounded\n- Avoid: Cartoonish or overly childish graphics., Messy or cluttered compositions., Poorly lit or low-contrast images., Generic stock photos that lack relevance., Vibrant, unrealistic color filters.\n\n## Design tokens\n\n- Heading font: Space Grotesk. Body font: IBM Plex Sans.\n\n- Primary: #96d35f · Secondary: #333333 · Accent: #e08d3e\n\n- Background: #f0f4f8 · Surface: #ffffff · Text: #1a1a1a\n\n- Dark — Primary: #b3f07a · Background: #1a1a1a · Text: #f0f0f0\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=0c87f2e98e9f9a29820b392e63c6f4205c823dfa51c7e4aa0f9417b24707a688", "proxy_url": "https://zadvgtvudyyjcriuawvg.supabase.co/functions/v1/logo-image?token=0c87f2e98e9f9a29820b392e63c6f4205c823dfa51c7e4aa0f9417b24707a688", "raw_url": "https://zadvgtvudyyjcriuawvg.supabase.co/storage/v1/object/public/brand-logos/eda569c5-dfc2-4e75-933b-e285ad1fb40f/8d2d0e4f-0b69-4611-81c1-ae2cd5e698b3/logo.png?v=1783002638395&t=2026-07-02T14%3A30%3A55.704955%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": "8d2d0e4f-0b69-4611-81c1-ae2cd5e698b3", "name": "NoisyIgloo", "brand_name": "NoisyIgloo", "industry": null, "brand_personality": [ "Professional", "Trustworthy" ], "primary_color": "#96d35f", "secondary_color": "#333333", "tertiary_color": "#5a8e3d", "accent_color": "#e08d3e", "neutral_color": "#a8a8a8", "background_color": "#f0f4f8", "surface_color": "#ffffff", "surface_elevated_color": "#f8f8f8", "surface_muted_color": "#e9edf2", "border_color": "#dcdcdc", "text_color": "#1a1a1a", "success_color": "#AEE9D1", "warning_color": "#FFD979", "error_color": "#FED3D1", "info_color": "#B4E1FA", "link_color": "#5a8e3d", "link_hover_color": "#4a7a33", "focus_ring_color": "#e08d3e", "hover_opacity": 0.85, "active_opacity": 0.7, "disabled_opacity": 0.5, "dark_primary_color": "#b3f07a", "dark_secondary_color": "#e0e0e0", "dark_tertiary_color": "#7bb55f", "dark_accent_color": "#f7a55c", "dark_neutral_color": "#8c8c8c", "dark_background_color": "#1a1a1a", "dark_surface_color": "#222222", "dark_surface_elevated_color": "#2a2a2a", "dark_surface_muted_color": "#333333", "dark_border_color": "#404040", "dark_text_color": "#f0f0f0", "dark_success_color": "#1C3829", "dark_warning_color": "#3D2E14", "dark_error_color": "#3B1C1C", "dark_info_color": "#1C2E3D", "dark_link_color": "#7bb55f", "dark_link_hover_color": "#8cd16c", "dark_focus_ring_color": "#f7a55c", "heading_font": "Space Grotesk", "body_font": "IBM Plex Sans", "typography_scale": { "h1": { "size": 48, "weight": 700, "lineHeight": 1.1 }, "h2": { "size": 38, "weight": 700, "lineHeight": 1.2 }, "h3": { "size": 30, "weight": 600, "lineHeight": 1.3 }, "h4": { "size": 24, "weight": 600, "lineHeight": 1.4 }, "h5": { "size": 20, "weight": 500, "lineHeight": 1.5 }, "h6": { "size": 18, "weight": 500, "lineHeight": 1.5 }, "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.5 }, "caption": { "size": 12, "weight": 400, "lineHeight": 1.7 }, "overline": { "size": 12, "weight": 600, "lineHeight": 1.7, "letterSpacing": 0.08 }, "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": 48, "md": 32, "sm": 24, "xl": 64, "xs": 16, "2xl": 96 }, "border_radius": "sm", "radius_scale": { "lg": 12, "md": 8, "sm": 4, "xl": 16, "2xl": 24, "full": 9999, "none": 0 }, "shadows": { "lg": "0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05)", "md": "0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05)", "sm": "0 1px 2px rgba(0, 0, 0, 0.05)", "xl": "0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04)", "2xl": "0 25px 50px rgba(0, 0, 0, 0.15)", "none": "none", "inner": "inset 0 2px 4px 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=0c87f2e98e9f9a29820b392e63c6f4205c823dfa51c7e4aa0f9417b24707a688", "logo_proxy_url": "https://zadvgtvudyyjcriuawvg.supabase.co/functions/v1/logo-image?token=0c87f2e98e9f9a29820b392e63c6f4205c823dfa51c7e4aa0f9417b24707a688", "raw_logo_url": "https://zadvgtvudyyjcriuawvg.supabase.co/storage/v1/object/public/brand-logos/eda569c5-dfc2-4e75-933b-e285ad1fb40f/8d2d0e4f-0b69-4611-81c1-ae2cd5e698b3/logo.png?v=1783002638395&t=2026-07-02T14%3A30%3A55.704955%2B00%3A00", "logo_background_color": "#96d35f", "logo_foreground_style": "color", "logo_source": "generated", "created_at": "2026-07-02T14:29:32.808383+00:00", "updated_at": "2026-07-02T14:30:55.704955+00:00", "share_token": "0c87f2e98e9f9a29820b392e63c6f4205c823dfa51c7e4aa0f9417b24707a688", "tagline": "Crafting reliable gaming experiences, block by block.", "brand_voice": { "do": [ "Use precise and unambiguous language.", "Focus on benefits and solutions for gamers.", "Maintain a professional yet approachable tone.", "Provide clear instructions and support.", "Reference gaming concepts without being overly childish." ], "dont": [ "Use slang or overly casual language.", "Be vague or make unsupported claims.", "Sound condescending or dismissive.", "Overuse technical jargon without explanation.", "Be overly playful or immature." ], "tone": [ "Clear", "Authoritative", "Helpful", "Direct", "Confident" ], "attributes": [ "Reliable", "Expert", "Secure", "Efficient", "Gamer-centric" ], "example_sentence": "Our secure servers ensure uninterrupted gameplay, so you can focus on building your world without lag." }, "messaging": { "pillars": [ { "title": "Unwavering Reliability", "description": "We provide stable, high-performance services that gamers can always count on." }, { "title": "Player-First Security", "description": "Your account and data are protected with industry-leading security measures." }, { "title": "Seamless Gaming Experience", "description": "From setup to epic adventures, our platform enhances every moment of your gameplay." } ], "value_props": [ "Experience lag-free, rock-solid server performance.", "Protect your progress with advanced security protocols.", "Get expert support whenever you need it, fast." ], "elevator_pitch": "NoisyIgloo delivers professional and trustworthy Minecraft-inspired gaming solutions. We ensure a seamless, secure, and reliable experience, allowing players to focus on what matters most: building, exploring, and conquering their digital worlds.", "naming_patterns": [ "Clear, descriptive names for features (e.g., 'SecureSave', 'InstantWorld')", "Avoid overly cute or abstract names.", "Incorporate terms related to reliability and performance." ] }, "imagery": { "avoid": [ "Cartoonish or overly childish graphics.", "Messy or cluttered compositions.", "Poorly lit or low-contrast images.", "Generic stock photos that lack relevance.", "Vibrant, unrealistic color filters." ], "photography": "Clean, focused shots of gaming setups, diverse gamers in action, or abstract, high-tech visuals. Avoid overly dramatic or staged photos.", "illustration": "Minimalist, geometric illustrations inspired by blocky aesthetics but rendered with a modern, professional touch. Focus on clear concepts and functionality.", "mood_keywords": [ "Structured", "Reliable", "Modern", "Crisp", "Secure", "Analytical", "Efficient", "Grounded" ] }, "voice_examples": null, "ui_elements_overrides": {}, "components": { "button": { "variants": [ "primary", "secondary", "outline", "ghost", "destructive" ], "states": { "default": { "bg": "#96d35f", "fg": "#111827", "border": "#96d35f" }, "hover": { "bg": "#87be56", "fg": "#111827", "border": "#87be56", "note": "10% darker than primary" }, "active": { "bg": "#7bad4e", "fg": "#111827", "border": "#7bad4e", "note": "18% darker than primary" }, "focus_visible": { "bg": "#96d35f", "fg": "#111827", "border": "#96d35f", "outline": "2px solid #e08d3e", "outlineOffset": "2px" }, "disabled": { "bg": "#96d35f", "fg": "#111827", "border": "#96d35f", "opacity": 0.5, "cursor": "not-allowed" }, "loading": { "bg": "#96d35f", "fg": "#111827", "border": "#96d35f", "note": "Show spinner in fg color, hide label with visibility:hidden" } }, "contrast": { "fg_on_primary": { "ratio": 9.95, "aa_normal": "pass", "aa_large": "pass", "aaa_normal": "pass" }, "primary_on_bg": { "ratio": 1.61, "aa_normal": "fail", "aa_large": "fail", "aaa_normal": "fail" } }, "snippets": { "tailwind": " (e.currentTarget.style.background = \"#87be56\")}\n onMouseOut={(e) => (e.currentTarget.style.background = \"#96d35f\")}\n>Continue", "css": ".btn-primary {\n background: #96d35f;\n color: #111827;\n border-radius: 8px;\n padding: 10px 16px;\n font-weight: 600;\n transition: background-color 150ms ease;\n}\n.btn-primary:hover { background: #87be56; }\n.btn-primary:active { background: #7bad4e; }\n.btn-primary:focus-visible { outline: 2px solid #e08d3e; outline-offset: 2px; }\n.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }", "react": "export function PrimaryButton(props: React.ButtonHTMLAttributes) {\n return