{
  "brand": {
    "name": "Geeks of Cybernet",
    "version": "1.1-html-reference",
    "date": "2026-05-10",
    "source": "Expanded Geeks of Cybernet HTML website CSS variables and mockup direction",
    "lastUpdated": "2026-05-10"
  },
  "colors": {
    "primary": {
      "blue": "#0B63F6",
      "blueDark": "#0955DC",
      "blue50": "#EFF6FF",
      "blue100": "#DBEAFE"
    },
    "accent": {
      "cyan": "#22D3EE",
      "indigo": "#243CAA"
    },
    "text": {
      "navy": "#071A42",
      "ink": "#102044",
      "muted": "#62708D"
    },
    "surface": {
      "light": "#F8FBFF",
      "line": "#D9E6FB",
      "card": "#FFFFFF"
    },
    "status": {
      "success": "#16A34A",
      "warning": "#F97316",
      "danger": "#EF4444"
    }
  },
  "cssVariables": {
    "--blue": "#0B63F6",
    "--blue-600": "#0955DC",
    "--blue-50": "#EFF6FF",
    "--blue-100": "#DBEAFE",
    "--cyan": "#22D3EE",
    "--indigo": "#243CAA",
    "--navy": "#071A42",
    "--ink": "#102044",
    "--muted": "#62708D",
    "--light": "#F8FBFF",
    "--line": "#D9E6FB",
    "--card": "#FFFFFF",
    "--success": "#16A34A",
    "--warning": "#F97316",
    "--danger": "#EF4444",
    "--shadow": "0 18px 55px rgba(15,40,90,.12)",
    "--shadow-soft": "0 10px 30px rgba(15,40,90,.08)",
    "--radius": "22px",
    "--max": "1180px"
  },
  "typography": {
    "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif",
    "h1": {
      "size": "clamp(2.5rem, 6vw, 5.35rem)",
      "weight": 900,
      "lineHeight": 1.08,
      "letterSpacing": "-0.035em"
    },
    "h2": {
      "size": "clamp(2rem, 4vw, 3.35rem)",
      "weight": 900,
      "lineHeight": 1.08,
      "letterSpacing": "-0.035em"
    },
    "h3": {
      "size": "1.35rem",
      "weight": 850,
      "lineHeight": 1.15
    },
    "body": {
      "size": "1rem",
      "weight": 400,
      "lineHeight": 1.65
    },
    "lead": {
      "size": "clamp(1.05rem, 2vw, 1.25rem)",
      "lineHeight": 1.65
    },
    "button": {
      "size": "0.95rem",
      "weight": 850,
      "lineHeight": 1.1
    }
  },
  "layout": {
    "containerMax": "1180px",
    "desktopHeaderHeight": "86px",
    "mobileHeaderHeight": "74px",
    "sectionPadding": "82px 0",
    "mobileSectionPadding": "62px 0",
    "cardPadding": "26px",
    "gridGap": "22px",
    "buttonRadius": "13px",
    "cardRadius": "22px",
    "largePanelRadius": "26px\u201330px"
  },
  "applicationGuidelines": {
    "shell": "Light #F8FBFF app background with white topbar/sidebar and blue active states.",
    "cards": "White cards, #D9E6FB border, 22px radius, soft shadow.",
    "actions": "Use primary blue gradient for the main action only; secondary actions use white with blue border.",
    "forms": "Visible labels, 13px rounded fields, #D7E5FB border, blue focus ring.",
    "status": "Use green/orange/red only for status, not general branding.",
    "mobile": "At <=820px stack cards, use full-width primary buttons, and keep tap targets at least 44px."
  },
  "applicationBlueprint": {
    "coreStyle": "Clean Canadian software-company interface: white and light-blue surfaces, navy text, bright blue CTAs, rounded cards, soft shadows, spacious layouts, and clear business-focused content.",
    "recommendedPages": [
      "Dashboard",
      "Projects",
      "Clients",
      "Reports",
      "Settings",
      "Support"
    ],
    "layout": {
      "appShell": "White top bar, optional white sidebar, light #F8FBFF workspace background, max-width content for marketing pages and 12-column grid for app screens.",
      "activeState": "Use #0B63F6 blue background or blue underline for active navigation. Avoid using status colors for navigation.",
      "cards": "White background, #D9E6FB border, 22px radius, soft shadow, 22px-28px padding.",
      "tables": "White table cards with clear labels, light borders, sticky header optional, blue links for row actions.",
      "forms": "Visible labels above fields, 13px radius inputs, #D7E5FB border, #0B63F6 focus ring, helpful microcopy below complex fields."
    },
    "components": {
      "primaryButton": {
        "background": "#0B63F6",
        "hover": "#0955DC",
        "text": "#FFFFFF",
        "radius": "13px",
        "weight": 850
      },
      "secondaryButton": {
        "background": "#FFFFFF",
        "border": "#0B63F6",
        "text": "#0B63F6",
        "radius": "13px"
      },
      "pill": {
        "background": "#EFF6FF",
        "text": "#0B63F6",
        "border": "#D9E6FB",
        "radius": "999px"
      },
      "statCard": {
        "surface": "#FFFFFF",
        "border": "#D9E6FB",
        "iconBackground": "#EFF6FF",
        "positive": "#16A34A"
      },
      "alert": {
        "info": "#0B63F6",
        "success": "#16A34A",
        "warning": "#F97316",
        "danger": "#EF4444"
      }
    },
    "aiBuilderInstructions": [
      "Use navy headings (#071A42), ink body text (#102044), and muted helper text (#62708D).",
      "Use primary blue (#0B63F6) for main CTAs, active states, icons, and key highlights.",
      "Use light blue backgrounds (#F8FBFF, #EFF6FF) behind sections and dashboard workspaces.",
      "Use white cards with rounded 22px corners, #D9E6FB borders, and soft shadows.",
      "Keep layouts spacious, professional, software-focused, and Canadian business friendly.",
      "Use simple line icons, dashboard cards, form panels, progress steps, and system-status patterns.",
      "Avoid dark cyberpunk themes, neon overload, sharp corners, generic gradients, and random accent colors.",
      "For AI, plugin, portal, dashboard, or admin applications, keep the same topbar/card/button/form system."
    ],
    "accessibility": {
      "minimumTapTarget": "44px",
      "focusRing": "2px solid #0B63F6 with 3px outline offset",
      "bodyContrast": "Use navy/ink on white or light-blue backgrounds.",
      "doNot": "Do not place light blue text on white for body copy. Do not rely on color alone for status."
    }
  }
}