{
  "_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": "No logo is set. Render a letter avatar using the brand's first letter on a square tile filled with the primary color.",
      "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 \"Factline Design System\".\n\nFetch the full brand system JSON here: https://zadvgtvudyyjcriuawvg.supabase.co/functions/v1/design-system?token=2e57acf92c014a53\n\n## Logo\n\nNo uploaded logo. Render a letter avatar showing \"F\" on a square tile filled with #ff6250, white text, rounded corners.\n\n## Identity\n\n- Name: Factline Design System\n- Personality: Modern, 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: Space Grotesk. Body font: Inter.\n\n- Primary: #ff6250 · Secondary: #333333 · Accent: #00d1ff\n\n- Background: #fcfcfc · Surface: #ffffff · Text: #1a1a1a\n\n- Dark — Primary: #ff796b · Background: #0f1113 · Text: #f8fafc\n\n- Base spacing: 6px · 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": null,
    "proxy_url": null,
    "raw_url": null,
    "data_uri": null,
    "usage": null,
    "fallback": {
      "type": "letter_avatar",
      "letter": "F",
      "background_color": "#ff6250",
      "text_color": "#FFFFFF"
    }
  },
  "id": "4b294840-f580-43e4-9a84-6805db7a063a",
  "name": "Factline Design System",
  "brand_name": "Factline Design System",
  "industry": null,
  "brand_personality": [
    "Modern",
    "Minimal",
    "Technical"
  ],
  "primary_color": "#ff6250",
  "secondary_color": "#333333",
  "tertiary_color": "#5e6a75",
  "accent_color": "#00d1ff",
  "neutral_color": "#6d7a85",
  "background_color": "#fcfcfc",
  "surface_color": "#ffffff",
  "surface_elevated_color": "#ffffff",
  "surface_muted_color": "#f1f3f5",
  "border_color": "#e2e8f0",
  "text_color": "#1a1a1a",
  "success_color": "#AEE9D1",
  "warning_color": "#FFD979",
  "error_color": "#FED3D1",
  "info_color": "#B4E1FA",
  "link_color": "#ff6250",
  "link_hover_color": "#e55848",
  "focus_ring_color": "rgba(255, 98, 80, 0.4)",
  "hover_opacity": 0.85,
  "active_opacity": 0.7,
  "disabled_opacity": 0.4,
  "dark_primary_color": "#ff796b",
  "dark_secondary_color": "#e0e0e0",
  "dark_tertiary_color": "#94a3b8",
  "dark_accent_color": "#33dbff",
  "dark_neutral_color": "#94a3b8",
  "dark_background_color": "#0f1113",
  "dark_surface_color": "#1a1d21",
  "dark_surface_elevated_color": "#24292f",
  "dark_surface_muted_color": "#2d333b",
  "dark_border_color": "#373e47",
  "dark_text_color": "#f8fafc",
  "dark_success_color": "#1C3829",
  "dark_warning_color": "#3D2E14",
  "dark_error_color": "#3B1C1C",
  "dark_info_color": "#1C2E3D",
  "dark_link_color": "#ff796b",
  "dark_link_hover_color": "#ff9085",
  "dark_focus_ring_color": "rgba(255, 121, 107, 0.5)",
  "heading_font": "Space Grotesk",
  "body_font": "Inter",
  "typography_scale": {
    "h1": {
      "size": 48,
      "weight": 700,
      "lineHeight": 1.1
    },
    "h2": {
      "size": 36,
      "weight": 700,
      "lineHeight": 1.2
    },
    "h3": {
      "size": 28,
      "weight": 600,
      "lineHeight": 1.2
    },
    "h4": {
      "size": 22,
      "weight": 600,
      "lineHeight": 1.3
    },
    "h5": {
      "size": 18,
      "weight": 600,
      "lineHeight": 1.4
    },
    "h6": {
      "size": 16,
      "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": 500,
      "lineHeight": 1.6
    },
    "label": {
      "size": 13,
      "weight": 600,
      "lineHeight": 1.2
    },
    "caption": {
      "size": 12,
      "weight": 400,
      "lineHeight": 1.4
    },
    "overline": {
      "size": 11,
      "weight": 700,
      "lineHeight": 1.2,
      "letterSpacing": 1.5
    },
    "bodySmall": {
      "size": 14,
      "weight": 400,
      "lineHeight": 1.5
    }
  },
  "base_spacing": 6,
  "spacing_scale": [
    6,
    12,
    18,
    24,
    36,
    48,
    72,
    96,
    144,
    192
  ],
  "sizing_scale": {
    "lg": 64,
    "md": 48,
    "sm": 24,
    "xl": 96,
    "xs": 12,
    "2xl": 128
  },
  "border_radius": "sm",
  "radius_scale": {
    "lg": 6,
    "md": 4,
    "sm": 2,
    "xl": 8,
    "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": null,
  "logo_proxy_url": null,
  "raw_logo_url": null,
  "logo_background_color": null,
  "logo_foreground_style": "white",
  "logo_source": null,
  "created_at": "2026-01-30T14:08:14.537609+00:00",
  "updated_at": "2026-02-12T23:59:46.468513+00:00",
  "share_token": "2e57acf92c014a53",
  "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": "#ff6250",
          "fg": "#111827",
          "border": "#ff6250"
        },
        "hover": {
          "bg": "#e65848",
          "fg": "#111827",
          "border": "#e65848",
          "note": "10% darker than primary"
        },
        "active": {
          "bg": "#d15042",
          "fg": "#111827",
          "border": "#d15042",
          "note": "18% darker than primary"
        },
        "focus_visible": {
          "bg": "#ff6250",
          "fg": "#111827",
          "border": "#ff6250",
          "outline": "2px solid rgba(255, 98, 80, 0.4)",
          "outlineOffset": "2px"
        },
        "disabled": {
          "bg": "#ff6250",
          "fg": "#111827",
          "border": "#ff6250",
          "opacity": 0.4,
          "cursor": "not-allowed"
        },
        "loading": {
          "bg": "#ff6250",
          "fg": "#111827",
          "border": "#ff6250",
          "note": "Show spinner in fg color, hide label with visibility:hidden"
        }
      },
      "contrast": {
        "fg_on_primary": {
          "ratio": 6.01,
          "aa_normal": "pass",
          "aa_large": "pass",
          "aaa_normal": "fail"
        },
        "primary_on_bg": {
          "ratio": 2.88,
          "aa_normal": "fail",
          "aa_large": "fail",
          "aaa_normal": "fail"
        }
      },
      "snippets": {
        "tailwind": "<button\n  className=\"inline-flex items-center justify-center gap-2 rounded-[4px] px-4 py-2 text-sm font-semibold transition-colors disabled:opacity-[0.4] disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2\"\n  style={{ background: \"#ff6250\", color: \"#111827\", [\"--tw-ring-color\" as any]: \"rgba(255, 98, 80, 0.4)\" }}\n  onMouseOver={(e) => (e.currentTarget.style.background = \"#e65848\")}\n  onMouseOut={(e) => (e.currentTarget.style.background = \"#ff6250\")}\n>Continue</button>",
        "css": ".btn-primary {\n  background: #ff6250;\n  color: #111827;\n  border-radius: 4px;\n  padding: 10px 16px;\n  font-weight: 600;\n  transition: background-color 150ms ease;\n}\n.btn-primary:hover { background: #e65848; }\n.btn-primary:active { background: #d15042; }\n.btn-primary:focus-visible { outline: 2px solid rgba(255, 98, 80, 0.4); outline-offset: 2px; }\n.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }",
        "react": "export function PrimaryButton(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {\n  return <button {...props} className=\"btn-primary\" />;\n}"
      }
    },
    "badge": {
      "variants": [
        "solid",
        "subtle",
        "outline"
      ],
      "states": {
        "default": {
          "bg": "#ff6250",
          "fg": "#111827"
        },
        "subtle": {
          "bg": "#ff625022",
          "fg": "#ff6250",
          "note": "12% alpha wash"
        },
        "outline": {
          "bg": "transparent",
          "fg": "#1a1a1a",
          "border": "#e2e8f0"
        }
      },
      "contrast": {
        "solid": {
          "ratio": 6.01,
          "aa_normal": "pass",
          "aa_large": "pass",
          "aaa_normal": "fail"
        },
        "subtle": {
          "ratio": 2.88,
          "aa_normal": "fail",
          "aa_large": "fail",
          "aaa_normal": "fail"
        }
      },
      "snippets": {
        "tailwind": "<span className=\"inline-flex items-center rounded-[2px] px-2 py-0.5 text-xs font-semibold\" style={{ background: \"#ff6250\", color: \"#111827\" }}>New</span>",
        "css": ".badge { background: #ff6250; color: #111827; border-radius: 2px; padding: 2px 8px; font-size: 12px; font-weight: 600; }"
      }
    },
    "input": {
      "variants": [
        "default",
        "error",
        "disabled"
      ],
      "states": {
        "default": {
          "bg": "#ffffff",
          "fg": "#1a1a1a",
          "border": "#e2e8f0"
        },
        "hover": {
          "bg": "#ffffff",
          "fg": "#1a1a1a",
          "border": "#c0c5cc"
        },
        "focus": {
          "bg": "#ffffff",
          "fg": "#1a1a1a",
          "border": "rgba(255, 98, 80, 0.4)",
          "outline": "2px solid rgba(255, 98, 80, 0.4)33",
          "outlineOffset": "0px"
        },
        "disabled": {
          "bg": "#ffffff",
          "fg": "#1a1a1a",
          "border": "#e2e8f0",
          "opacity": 0.4,
          "cursor": "not-allowed"
        },
        "error": {
          "bg": "#ffffff",
          "fg": "#1a1a1a",
          "border": "#FED3D1"
        }
      },
      "contrast": {
        "text_on_surface": {
          "ratio": 17.4,
          "aa_normal": "pass",
          "aa_large": "pass",
          "aaa_normal": "pass"
        }
      },
      "snippets": {
        "tailwind": "<input className=\"w-full rounded-[4px] border px-3 py-2 text-sm outline-none focus:ring-2\" style={{ background: \"#ffffff\", color: \"#1a1a1a\", borderColor: \"#e2e8f0\", [\"--tw-ring-color\" as any]: \"rgba(255, 98, 80, 0.4)\" }} />",
        "css": ".input { background: #ffffff; color: #1a1a1a; border: 1px solid #e2e8f0; border-radius: 4px; padding: 8px 12px; font-size: 14px; }\n.input:focus { outline: none; border-color: rgba(255, 98, 80, 0.4); box-shadow: 0 0 0 3px rgba(255, 98, 80, 0.4)33; }\n.input:disabled { opacity: 0.4; cursor: not-allowed; }"
      }
    },
    "card": {
      "variants": [
        "default",
        "elevated",
        "outlined"
      ],
      "states": {
        "default": {
          "bg": "#ffffff",
          "fg": "#1a1a1a",
          "border": "#e2e8f0",
          "radius": 6,
          "shadow": "0 1px 2px 0 rgba(0, 0, 0, 0.05)"
        },
        "elevated": {
          "bg": "#ffffff",
          "fg": "#1a1a1a",
          "border": "transparent",
          "radius": 6,
          "shadow": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"
        },
        "outlined": {
          "bg": "transparent",
          "fg": "#1a1a1a",
          "border": "#e2e8f0",
          "radius": 6,
          "shadow": "none"
        }
      },
      "contrast": {
        "text_on_surface": {
          "ratio": 17.4,
          "aa_normal": "pass",
          "aa_large": "pass",
          "aaa_normal": "pass"
        }
      },
      "snippets": {
        "tailwind": "<div className=\"p-6 border\" style={{ background: \"#ffffff\", color: \"#1a1a1a\", borderColor: \"#e2e8f0\", borderRadius: 6, boxShadow: \"0 1px 2px 0 rgba(0, 0, 0, 0.05)\" }}>…</div>",
        "css": ".card { background: #ffffff; color: #1a1a1a; border: 1px solid #e2e8f0; border-radius: 6px; padding: 24px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }"
      }
    },
    "alert": {
      "variants": [
        "success",
        "warning",
        "error",
        "info"
      ],
      "states": {
        "success": {
          "bg": "#AEE9D1",
          "fg": "#111827"
        },
        "warning": {
          "bg": "#FFD979",
          "fg": "#111827"
        },
        "error": {
          "bg": "#FED3D1",
          "fg": "#111827"
        },
        "info": {
          "bg": "#B4E1FA",
          "fg": "#111827"
        }
      },
      "contrast": {
        "success": {
          "ratio": 8.92,
          "aa_normal": "pass",
          "aa_large": "pass",
          "aaa_normal": "pass"
        },
        "warning": {
          "ratio": 9.69,
          "aa_normal": "pass",
          "aa_large": "pass",
          "aaa_normal": "pass"
        },
        "error": {
          "ratio": 6,
          "aa_normal": "pass",
          "aa_large": "pass",
          "aaa_normal": "fail"
        },
        "info": {
          "ratio": 7.06,
          "aa_normal": "pass",
          "aa_large": "pass",
          "aaa_normal": "pass"
        }
      },
      "snippets": {
        "tailwind": "<div role=\"alert\" className=\"flex items-start gap-3 p-4\" style={{ background: \"#B4E1FA\", color: \"#004480\", borderRadius: 4 }}>…</div>",
        "css": ".alert-info { background: #B4E1FA; color: #004480; border-radius: 4px; padding: 16px; }"
      }
    }
  }
}