design.json

{
    "meta": {
      "name": "Ingenium Software Engineering Design System",
      "version": "2.0.0",
      "intended_product": "ISE company website and web application UI",
      "brand": {
        "company": "Ingenium Software Engineering",
        "abbreviation": "ISE",
        "tagline_style": "Clean, modern, crisp",
        "logo_mark": "Hexagonal badge with 'ISE' lettermark",
        "logo_full": "Hexagonal badge + 'INGENIUM SOFTWARE ENGINEERING' wordmark"
      },
      "source_reference": "Derived from ISE brand assets: hexagonal logo mark, sky-blue brand color, light-weight typography, and clean visual identity.",
      "ai_usage_goal": "This file is the single source of truth for styling and component recipes so an AI can reproduce the ISE brand look consistently across the company website and any web applications — layout, tokens, components, states, and interaction patterns."
    },
    "design_style": {
      "keywords": [
        "clean",
        "modern",
        "crisp",
        "hexagonal motif",
        "sky-blue brand accent",
        "light-weight typography",
        "generous whitespace",
        "card-based surfaces",
        "subtle elevation (light) / subtle borders (dark)",
        "precision engineering aesthetic"
      ],
      "principles": [
        {
          "name": "Hierarchy first",
          "guideline": "Always establish a clear visual hierarchy: page title > section titles > card titles > row labels > metadata. Use size/weight and spacing before color."
        },
        {
          "name": "Clean surfaces, confident accents",
          "guideline": "Keep backgrounds and cards bright and minimal; use the ISE sky-blue for primary actions, navigation accents, and brand moments. Let whitespace do the heavy lifting."
        },
        {
          "name": "Hexagonal identity",
          "guideline": "The hexagon is the core brand shape. Use hexagonal clip-paths, subtle hex-grid patterns, and angled edges as decorative motifs — but sparingly and never at the expense of usability."
        },
        {
          "name": "Consistency through tokens",
          "guideline": "All spacing, typography, radii, borders, and colors must come from tokens; no one-off values."
        },
        {
          "name": "Crisp and breathable",
          "guideline": "Favor generous padding, open layouts, and restrained element density. The design should feel precise and airy, never cluttered."
        },
        {
          "name": "Accessible contrast",
          "guideline": "Aim for WCAG AA for text/controls. In dark mode, use slightly lighter surfaces + clear borders to avoid 'black on black'."
        }
      ],
      "visual_language": {
        "shape": "Hexagonal accents as the primary brand shape (logo, decorative elements, section dividers, icon backgrounds). Rounded rectangles for functional containers. Pills for statuses. Circular avatars.",
        "hexagon_usage": [
          "Logo mark: hexagonal badge with ISE lettermark",
          "Section accents: subtle hexagonal clip-path or border on hero elements",
          "Icon containers: hexagonal backgrounds for feature icons",
          "Decorative: faint hex-grid pattern as background texture on hero/CTA sections",
          "Dividers: angled (120°) section breaks echoing hexagonal geometry"
        ],
        "lines": "Thin dividers and borders (1px) with low contrast; avoid heavy outlines. Use angled section breaks sparingly to echo the hexagonal brand shape.",
        "icons": "Simple line icons; consistent stroke weight; use hexagonal backgrounds for feature/service icons to reinforce brand identity.",
        "imagery": "Clean, minimal photography or abstract geometric visuals. Prefer blue-toned overlays when using background images."
      }
    },
    "layout": {
      "app_shell": {
        "structure": [
          "Left nav rail (icon-only) always visible",
          "Optional expanded sidebar panel (contextual navigation)",
          "Main content area with page header + grid of cards + tables"
        ],
        "nav_rail": {
          "width_px": 56,
          "item_hit_area_px": 40,
          "item_spacing_px": 8,
          "active_indicator": "Slim vertical marker aligned to item center OR a subtle filled background behind the active icon.",
          "top_slot": "User avatar / brand mark",
          "bottom_slot": "Settings/help/logout stack"
        },
        "expanded_sidebar": {
          "width_px": 260,
          "sections": [
            "User identity block (avatar, name, email)",
            "Navigation groups with headings (e.g., Analysis, Data Management, Administration)",
            "Collapsible group for sub-items"
          ],
          "active_item_style": "Soft background fill and/or left accent line, using primary color. Keep text readable against tinted fill."
        },
        "content": {
          "max_width_px": 1200,
          "page_padding_px": 24,
          "content_gap_px": 16,
          "section_gap_px": 24,
          "card_grid": "Use responsive grid with consistent gutters; default 12-column mental model.",
          "recommended_card_columns": {
            "mobile": 1,
            "tablet": 2,
            "desktop": 3,
            "wide": 4
          }
        }
      },
      "grid_and_breakpoints": {
        "breakpoints_px": {
          "xs": 0,
          "sm": 600,
          "md": 900,
          "lg": 1200,
          "xl": 1536
        },
        "gutters_px": {
          "xs": 16,
          "sm": 16,
          "md": 20,
          "lg": 24,
          "xl": 24
        }
      }
    },
    "tokens": {
      "spacing": {
        "base_unit_px": 4,
        "scale_px": {
          "0": 0,
          "1": 4,
          "2": 8,
          "3": 12,
          "4": 16,
          "5": 20,
          "6": 24,
          "7": 28,
          "8": 32,
          "10": 40,
          "12": 48,
          "16": 64
        },
        "usage": {
          "card_padding": 16,
          "card_padding_dense": 12,
          "page_padding": 24,
          "table_cell_padding_y": 12,
          "table_cell_padding_x": 16,
          "button_padding_y": 10,
          "button_padding_x": 14,
          "input_padding_y": 10,
          "input_padding_x": 12,
          "pill_padding_y": 4,
          "pill_padding_x": 10
        }
      },
      "radii": {
        "scale_px": {
          "sm": 8,
          "md": 10,
          "lg": 12,
          "xl": 16,
          "pill": 999
        },
        "usage": {
          "card": "lg",
          "button": "md",
          "input": "md",
          "popover": "lg",
          "pill": "pill"
        }
      },
      "borders": {
        "width_px": {
          "hairline": 1,
          "focus": 2
        },
        "style": "Solid; subtle on surfaces, stronger on focus."
      },
      "typography": {
        "font_family": {
          "sans": "Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
          "display": "Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial",
          "mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace",
          "_note": "The ISE brand uses a clean, light-weight sans-serif. Inter at light/regular weights closely matches the brand typography. Use 'display' stack for hero headings and brand-adjacent text."
        },
        "weights": {
          "light": 300,
          "regular": 400,
          "medium": 500,
          "semibold": 600,
          "bold": 700
        },
        "sizes_px": {
          "xs": 12,
          "sm": 13,
          "md": 14,
          "lg": 16,
          "xl": 18,
          "2xl": 22,
          "3xl": 28
        },
        "line_heights": {
          "tight": 1.2,
          "normal": 1.45,
          "relaxed": 1.6
        },
        "letter_spacing_em": {
          "tight": -0.01,
          "normal": 0,
          "caps": 0.06
        },
        "type_recipes": {
          "hero_heading": {
            "font_size_px": 48,
            "font_weight": 300,
            "line_height": 1.15,
            "letter_spacing_em": -0.02,
            "font_family": "display",
            "_note": "Light weight for hero sections — matches the thin, crisp feel of the ISE brand wordmark."
          },
          "hero_subheading": {
            "font_size_px": 20,
            "font_weight": 300,
            "line_height": 1.5,
            "font_family": "display"
          },
          "page_title": {
            "font_size_px": 28,
            "font_weight": 600,
            "line_height": 1.2
          },
          "page_subtitle": {
            "font_size_px": 14,
            "font_weight": 400,
            "line_height": 1.45,
            "opacity_hint": 0.72
          },
          "section_heading": {
            "font_size_px": 14,
            "font_weight": 600,
            "letter_spacing_em": 0,
            "opacity_hint": 0.9
          },
          "card_title": {
            "font_size_px": 13,
            "font_weight": 600,
            "opacity_hint": 0.9
          },
          "body": {
            "font_size_px": 14,
            "font_weight": 400,
            "line_height": 1.5
          },
          "label": {
            "font_size_px": 12,
            "font_weight": 500,
            "letter_spacing_em": 0.02
          },
          "micro": {
            "font_size_px": 12,
            "font_weight": 400,
            "opacity_hint": 0.72
          },
          "brand_wordmark": {
            "font_weight": 300,
            "letter_spacing_em": 0.08,
            "text_transform": "uppercase",
            "_note": "For rendering the 'INGENIUM SOFTWARE ENGINEERING' wordmark in UI contexts."
          }
        }
      },
      "elevation": {
        "light": {
          "card_shadow": "0 1px 2px rgba(16, 24, 40, 0.06), 0 6px 14px rgba(16, 24, 40, 0.08)",
          "floating_shadow": "0 8px 24px rgba(16, 24, 40, 0.14)"
        },
        "dark": {
          "card_shadow": "none (prefer borders)",
          "floating_shadow": "0 10px 30px rgba(0, 0, 0, 0.55)"
        }
      },
      "motion": {
        "durations_ms": {
          "fast": 120,
          "normal": 180,
          "slow": 240
        },
        "easing": {
          "standard": "cubic-bezier(0.2, 0, 0, 1)",
          "emphasized": "cubic-bezier(0.2, 0.8, 0.2, 1)"
        },
        "guidelines": [
          "Favor subtle fades and 2–4px micro-translations for popovers and menus.",
          "Avoid bouncy motion; dashboards should feel stable and precise."
        ]
      },
      "color": {
        "palette": {
          "brand_blue": {
            "50": "#E8F6FF",
            "100": "#CCEDFF",
            "200": "#99DBFF",
            "300": "#66C8FF",
            "400": "#33B5FF",
            "500": "#33AAFF",
            "600": "#1A95E8",
            "700": "#0D7DD4",
            "800": "#0A64AB",
            "900": "#074B82",
            "_gradient_top": "#5CC5FF",
            "_gradient_bottom": "#1A95E8",
            "_note": "Derived from ISE brand assets. 500 is the primary brand blue visible across all logo variants. Gradient values match the hexagonal logo mark."
          },
          "gray": {
            "50": "#F7F8FA",
            "100": "#EEF1F4",
            "200": "#D8DEE6",
            "300": "#B7C0CC",
            "400": "#8A96A8",
            "500": "#667085",
            "600": "#475467",
            "700": "#344054",
            "800": "#1D2939",
            "900": "#101828"
          },
          "dark": {
            "950": "#0B0D12",
            "925": "#0F1117",
            "900": "#12151D",
            "875": "#161A24",
            "850": "#1B2030",
            "825": "#22283A"
          },
          "success": {
            "50": "#E8F8F0",
            "500": "#12B76A",
            "700": "#027A48"
          },
          "warning": {
            "50": "#FFF6E8",
            "500": "#F79009",
            "700": "#B54708"
          },
          "danger": {
            "50": "#FFE8E8",
            "500": "#F04438",
            "700": "#B42318"
          },
          "info": {
            "50": "#E8F6FF",
            "500": "#33AAFF",
            "700": "#0D7DD4"
          },
          "purple": {
            "50": "#F4EFFF",
            "500": "#7A5AF8",
            "700": "#5925DC"
          }
        },
        "semantic": {
          "light": {
            "background": "#F7F9FC",
            "surface_0": "#FFFFFF",
            "surface_1": "#FFFFFF",
            "surface_2": "#F7F9FC",
            "text_primary": "#101828",
            "text_secondary": "#475467",
            "text_tertiary": "#667085",
            "border_subtle": "#EEF1F4",
            "border_default": "#D8DEE6",
            "primary": "#33AAFF",
            "primary_hover": "#1A95E8",
            "primary_pressed": "#0D7DD4",
            "primary_contrast": "#FFFFFF",
            "primary_gradient": "linear-gradient(180deg, #5CC5FF 0%, #1A95E8 100%)",
            "focus_ring": "rgba(51, 170, 255, 0.35)",
            "nav_rail_bg": "#33AAFF",
            "nav_rail_fg": "#FFFFFF",
            "nav_rail_fg_muted": "rgba(255, 255, 255, 0.75)",
            "sidebar_bg": "#33AAFF",
            "sidebar_fg": "#FFFFFF",
            "sidebar_item_bg_active": "rgba(255, 255, 255, 0.18)",
            "sidebar_item_bg_hover": "rgba(255, 255, 255, 0.10)",
            "hero_bg": "#33AAFF",
            "hero_fg": "#FFFFFF",
            "hero_gradient": "linear-gradient(135deg, #5CC5FF 0%, #1A95E8 100%)"
          },
          "dark": {
            "background": "#0F1117",
            "surface_0": "#12151D",
            "surface_1": "#161A24",
            "surface_2": "#1B2030",
            "text_primary": "#F2F4F7",
            "text_secondary": "#D0D5DD",
            "text_tertiary": "#98A2B3",
            "border_subtle": "rgba(255, 255, 255, 0.06)",
            "border_default": "rgba(255, 255, 255, 0.10)",
            "primary": "#66C8FF",
            "primary_hover": "#99DBFF",
            "primary_pressed": "#33AAFF",
            "primary_contrast": "#0B0D12",
            "primary_gradient": "linear-gradient(180deg, #99DBFF 0%, #33AAFF 100%)",
            "focus_ring": "rgba(102, 200, 255, 0.45)",
            "nav_rail_bg": "#12151D",
            "nav_rail_fg": "#F2F4F7",
            "nav_rail_fg_muted": "rgba(242, 244, 247, 0.72)",
            "sidebar_bg": "#12151D",
            "sidebar_fg": "#F2F4F7",
            "sidebar_item_bg_active": "rgba(51, 170, 255, 0.14)",
            "sidebar_item_bg_hover": "rgba(255, 255, 255, 0.06)",
            "hero_bg": "#161A24",
            "hero_fg": "#F2F4F7",
            "hero_gradient": "linear-gradient(135deg, #1B2030 0%, #12151D 100%)"
          },
          "status": {
            "success_bg_light": "#E8F8F0",
            "success_fg_light": "#027A48",
            "warning_bg_light": "#FFF6E8",
            "warning_fg_light": "#B54708",
            "danger_bg_light": "#FFE8E8",
            "danger_fg_light": "#B42318",
            "info_bg_light": "#E8F6FF",
            "info_fg_light": "#0D7DD4",
            "neutral_bg_light": "#EEF1F4",
            "neutral_fg_light": "#344054",
            "success_bg_dark": "rgba(18, 183, 106, 0.18)",
            "success_fg_dark": "#6CE9A6",
            "warning_bg_dark": "rgba(247, 144, 9, 0.18)",
            "warning_fg_dark": "#FEC84B",
            "danger_bg_dark": "rgba(240, 68, 56, 0.18)",
            "danger_fg_dark": "#FDA29B",
            "info_bg_dark": "rgba(51, 170, 255, 0.18)",
            "info_fg_dark": "#99DBFF",
            "neutral_bg_dark": "rgba(255, 255, 255, 0.08)",
            "neutral_fg_dark": "#D0D5DD"
          }
        }
      }
    },
    "component_system": {
      "common_rules": {
        "density": {
          "default": "comfortable",
          "table": "compact",
          "sidebar": "compact"
        },
        "focus": {
          "style": "2px ring using focus_ring color + 1px border_default; never remove focus outlines.",
          "radius": "match component radius"
        },
        "disabled": {
          "opacity": 0.45,
          "cursor": "not-allowed",
          "rule": "Do not rely on opacity alone for critical meaning."
        },
        "hover": {
          "rule": "Use subtle surface tint or border emphasis; avoid large color shifts."
        }
      },
      "components": {
        "AppShell": {
          "purpose": "Overall dashboard layout with nav rail, optional expanded sidebar, and content region.",
          "anatomy": [
            "NavRail",
            "Sidebar",
            "TopRegion (optional)",
            "ContentRegion"
          ],
          "notes": [
            "Keep content centered with max width; allow full-width tables when needed.",
            "Maintain fixed left navigation; content scrolls independently."
          ]
        },
        "NavRail": {
          "purpose": "Always-visible icon navigation.",
          "anatomy": ["AvatarOrBrand", "PrimaryIconStack", "Divider", "SecondaryIconStack"],
          "sizes": {
            "width_px": 56,
            "icon_px": 20
          },
          "states": {
            "default": "icons on neutral/brand background",
            "hover": "subtle rounded background behind icon",
            "active": "accent indicator + slightly stronger icon opacity"
          }
        },
        "Sidebar": {
          "purpose": "Expanded navigation with labels and groups.",
          "anatomy": ["IdentityBlock", "NavGroupHeading", "NavItem", "NavItemBadge", "CollapseChevron"],
          "nav_group_heading_style": "Uppercase or smallcaps feel using label recipe; high contrast in light screenshot when on blue background.",
          "nav_item": {
            "height_px": 40,
            "icon_px": 18,
            "gap_px": 10,
            "active_style": "tinted fill + primary accent; keep rounded corners consistent"
          }
        },
        "Breadcrumb": {
          "purpose": "Contextual navigation (e.g., Home > Settings > General).",
          "style": "Small text; separators as chevrons; last item emphasized.",
          "spacing_px": 8
        },
        "PageHeader": {
          "purpose": "Title + subtitle + actions row.",
          "anatomy": ["Breadcrumb", "Title", "Subtitle", "Actions"],
          "actions": {
            "primary_action": "Filled button (Primary)",
            "secondary_action": "Outline or subtle button",
            "overflow": "Kebab menu button"
          }
        },
        "Button": {
          "variants": {
            "primary": {
              "bg": "semantic.*.primary",
              "fg": "semantic.*.primary_contrast"
            },
            "secondary": {
              "bg": "transparent or surface",
              "fg": "text_primary",
              "border": "border_default"
            },
            "ghost": {
              "bg": "transparent",
              "fg": "text_secondary",
              "hover": "surface tint"
            },
            "icon": {
              "shape": "rounded-square",
              "padding_px": 10
            }
          },
          "sizes": {
            "sm": { "height_px": 32, "font_size_px": 13, "radius": "md" },
            "md": { "height_px": 36, "font_size_px": 14, "radius": "md" },
            "lg": { "height_px": 40, "font_size_px": 14, "radius": "md" }
          },
          "states": {
            "hover": "raise border contrast or slightly change bg",
            "pressed": "reduce brightness slightly; no heavy inset shadows",
            "loading": "spinner left of label; preserve button width"
          }
        },
        "Input": {
          "variants": {
            "default": {
              "bg": "surface",
              "border": "border_default",
              "placeholder": "text_tertiary"
            },
            "search": {
              "leading_icon": "magnifier",
              "radius": "md"
            }
          },
          "sizes": {
            "md": { "height_px": 36, "font_size_px": 14 }
          },
          "states": {
            "focus": "2px ring + border emphasis",
            "error": "danger border + helper text"
          }
        },
        "Select": {
          "purpose": "Dropdown selection; used in filters and forms.",
          "style": "Matches Input; chevron icon; menu is floating surface with radius lg."
        },
        "Checkbox": {
          "purpose": "Table selection and form toggles.",
          "style": "Square with small radius; use primary fill when checked; visible indeterminate state."
        },
        "ToggleSwitch": {
          "purpose": "Settings toggles.",
          "style": "Pill track with circular thumb; primary when on; neutral when off."
        },
        "Card": {
          "purpose": "Primary information container (stats, lists, tables, charts).",
          "anatomy": ["Header (optional)", "Title (optional)", "Action (optional)", "Body", "Footer (optional)"],
          "style": {
            "radius": "lg",
            "padding_px": 16,
            "border": "border_subtle",
            "shadow": "elevation.light.card_shadow (light theme), border-only (dark theme)"
          },
          "variants": {
            "metric": {
              "layout": "Title row + big number + small delta pill/label + sparkline",
              "number_style": "2xl–3xl, bold"
            },
            "profile": {
              "layout": "Centered avatar + name + descriptor + status pill"
            },
            "table_container": {
              "layout": "Header with title + overflow menu; body contains table; footer contains pagination"
            }
          }
        },
        "PillBadge": {
          "purpose": "Compact status indicator (e.g., Offline, Growth, Loss, Neutral).",
          "style": {
            "shape": "pill",
            "padding_px": { "y": 4, "x": 10 },
            "font": "label recipe",
            "border": "optional 1px for additional definition in light mode"
          },
          "color_mapping": {
            "success": "status.success_* tokens",
            "warning": "status.warning_* tokens",
            "danger": "status.danger_* tokens",
            "info": "status.info_* tokens",
            "neutral": "status.neutral_* tokens"
          }
        },
        "Avatar": {
          "purpose": "User identity, table users, and avatar stacks.",
          "sizes_px": { "xs": 20, "sm": 24, "md": 32, "lg": 40 },
          "style": "Circular; thin border in light theme; in dark theme border is subtle and optional.",
          "avatar_stack": {
            "overlap_px": 8,
            "max_visible": 3,
            "overflow_badge": "+N circle with neutral background"
          }
        },
        "Table": {
          "purpose": "Dense data presentation with selectable rows and inline actions.",
          "anatomy": ["HeaderRow", "DataRow", "Cell", "RowActions", "Pagination"],
          "style": {
            "header": "Small label text; muted; optional sort chevrons",
            "row_height_px": 52,
            "divider": "1px border_subtle between rows",
            "hover": "surface tint highlight across row"
          },
          "cells": {
            "primary_cell": "Avatar + Name (semibold) + Secondary line (email) in micro style",
            "progress_cell": "Thin progress bar with rounded ends + percentage label"
          },
          "actions": "Icon buttons aligned right; keep subtle until hover."
        },
        "ProgressBar": {
          "purpose": "Skill or completion indicators in tables/cards.",
          "style": {
            "height_px": 6,
            "radius": "pill",
            "track": "border_subtle or neutral surface",
            "fill": "primary"
          }
        },
        "Chart": {
          "purpose": "Sparklines, line charts, and small summary charts.",
          "style": {
            "stroke_width_px": 2,
            "gridlines": "Very subtle; prefer none for micro charts",
            "legend": "Small labels; muted; avoid heavy boxes",
            "tooltip": "Floating card surface with radius lg and micro typography"
          },
          "color_rules": [
            "Use ISE brand sky-blue as default series.",
            "Use success green and danger red for directional meaning.",
            "Avoid too many saturated series; keep palettes harmonious and consistent.",
            "For multi-series charts, derive additional hues from the brand-blue tint scale (200, 400, 600, 800)."
          ]
        },
        "Tabs": {
          "purpose": "Switch context within a page (e.g., metric segments).",
          "variants": {
            "pill": {
              "style": "Row of pills with one active filled/tinted state.",
              "density": "compact"
            },
            "underline": {
              "style": "Minimal underline indicator; used when space is tight."
            }
          }
        },
        "Pagination": {
          "purpose": "Table paging with previous/next and page counts.",
          "style": "Minimal; muted text; prev/next as ghost buttons; keep consistent alignment in card footer."
        },
        "Menu": {
          "purpose": "Overflow menus for cards/tables (kebab).",
          "style": {
            "surface": "floating surface with radius lg",
            "item_height_px": 36,
            "divider": "border_subtle",
            "icon_optional": true
          }
        },
        "Tooltip": {
          "purpose": "Short contextual hints for icons, truncated labels, and chart points.",
          "style": {
            "shape": "rounded rectangle",
            "radius": "md",
            "padding_px": { "y": 6, "x": 10 },
            "font": "micro recipe",
            "surface": "surface_1 with subtle border; in dark mode slightly lighter than surrounding surface",
            "shadow": "floating shadow"
          },
          "behavior": [
            "Delay show ~300ms; hide quickly.",
            "Do not trap focus; ensure keyboard users can access via focus."
          ]
        },
        "Popover": {
          "purpose": "Rich contextual content anchored to a trigger (filters, quick actions).",
          "style": "Same surface rules as Menu but with more padding and optional header.",
          "anatomy": ["Header (optional)", "Body", "Footer (optional)"]
        },
        "Alert": {
          "purpose": "Inline callouts for page-level messaging (success/warning/error/info).",
          "anatomy": ["Icon", "Title", "Description", "Actions (optional)"],
          "style": {
            "radius": "lg",
            "border": "1px",
            "bg": "tinted by status (very light in light theme, translucent in dark theme)",
            "title_weight": "semibold"
          }
        },
        "Toast": {
          "purpose": "Transient feedback (save, error, warning).",
          "style": "Floating surface; left icon; strong title + micro message; close icon."
        },
        "Modal": {
          "purpose": "Confirmations and form dialogs.",
          "style": {
            "radius": "xl",
            "overlay": "rgba(0,0,0,0.35) light / rgba(0,0,0,0.6) dark",
            "header": "Title + close icon",
            "footer": "Right-aligned actions"
          }
        },
        "Drawer": {
          "purpose": "Side panel for detailed drill-down, filters, or multi-step actions without leaving the page.",
          "style": {
            "width_px": 420,
            "surface": "surface_1",
            "border": "1px border_default on the leading edge",
            "header": "Title + close; optional tabs",
            "footer": "Sticky actions for forms"
          }
        },
        "Accordion": {
          "purpose": "Progressive disclosure in settings and filter panels.",
          "style": "Minimal; chevron indicator; divider between items; keep titles semibold and bodies readable."
        },
        "DateRangePicker": {
          "purpose": "Analytics time filtering (last 7 days, custom range).",
          "style": {
            "trigger": "Input-like control with calendar icon",
            "menu": "Popover with two-month grid, preset list, and apply/cancel actions"
          }
        },
        "FilterBar": {
          "purpose": "Standard pattern for search + filter chips + sort + date range controls.",
          "layout": "Left-aligned primary filters (search/date), right-aligned secondary actions (export, add, columns).",
          "chips": "Use PillBadge/Tag style for active filters; include remove icon."
        },
        "Tag": {
          "purpose": "Non-status labeling (categories, attributes).",
          "style": "Small pill, lower contrast than status badges; neutral by default; optional colored variants that do not imply sentiment."
        },
        "Skeleton": {
          "purpose": "Loading placeholders for cards, tables, and charts.",
          "style": {
            "shape": "rounded rectangles and circles matching final content",
            "animation": "subtle shimmer or opacity pulse; avoid high-contrast shimmer in dark mode"
          }
        },
        "Divider": {
          "purpose": "Visual separation between groups within cards/menus/sidebars.",
          "style": "1px border_subtle; generous spacing around; avoid heavy lines."
        },
        "EmptyState": {
          "purpose": "No data / first-use states.",
          "style": "Centered icon illustration (simple), title, short description, primary action."
        }
      }
    },
    "theme_application_rules": {
      "brand_identity": {
        "hexagonal_motif": [
          "Use the hexagonal logo mark as the primary brand element in headers and footers.",
          "Feature icons and service icons should sit inside hexagonal containers (clip-path or SVG) using brand_blue gradient fill or white fill on blue backgrounds.",
          "Hero sections may use a subtle, low-opacity hex-grid pattern as background texture.",
          "Section transitions can use angled dividers (120° angles) echoing hexagonal geometry.",
          "Avoid overusing the hexagon — it should feel intentional and brand-reinforcing, not decorative noise."
        ],
        "brand_gradient": "Use the brand gradient (5CC5FF → 1A95E8) for hero backgrounds, CTA buttons, and the logo mark. Apply at 135° or 180° angles.",
        "logo_placement": "Hexagonal ISE badge at top-left of navigation. Full wordmark (badge + 'INGENIUM SOFTWARE ENGINEERING') in page headers and footers."
      },
      "light_theme": [
        "Use ISE sky-blue (#33AAFF) as the primary accent — navigation, CTAs, links, and active states.",
        "Hero sections use the brand gradient or solid brand-blue background with white text.",
        "Cards are bright white with subtle shadow; borders are minimal.",
        "Text is dark and crisp; secondary text uses gray-600/500.",
        "Status pills use soft tinted backgrounds with darker text.",
        "Generous whitespace between sections for a clean, open feel."
      ],
      "dark_theme": [
        "Use near-black background with layered surfaces for cards and panels.",
        "Primary accent shifts to lighter sky-blue (#66C8FF) for readability against dark surfaces.",
        "Prefer borders over shadows for card separation; keep shadows only for floating overlays.",
        "Text is off-white; secondary is muted; avoid pure white on pure black.",
        "Status pills use translucent colored backgrounds and brighter text.",
        "Hexagonal decorative elements use subtle border outlines rather than filled shapes."
      ],
      "contrast_targets": {
        "text_on_surface": "AA minimum; prefer AAA for key metrics and titles.",
        "primary_button": "AA for label on primary background in both themes. White text on #33AAFF passes AA for large text; use #0D7DD4 for small text on light backgrounds.",
        "disabled": "Do not drop below readable contrast for essential labels; pair opacity with neutral background shifts."
      }
    },
    "content_patterns": {
      "website_hero": [
        "Full-width hero with brand gradient background or brand-blue solid fill.",
        "Hexagonal logo mark prominently placed; light-weight heading (hero_heading recipe) in white.",
        "Concise value proposition as subheading; single primary CTA button.",
        "Optional: faint hex-grid texture overlay at 3-5% opacity for depth."
      ],
      "website_services": [
        "Grid of service/feature cards (3-column desktop, 1-column mobile).",
        "Each card features a hexagonal icon container with the service icon inside.",
        "Short title (semibold) + descriptive paragraph (body recipe).",
        "Optional hover: subtle brand-blue tint on the hex icon background."
      ],
      "website_about": [
        "Split layout: text content on one side, brand imagery or hex-patterned graphic on the other.",
        "Use section_heading for topic labels; body text for narrative.",
        "Include team or company stats in metric-card style with big numbers."
      ],
      "website_contact": [
        "Clean form layout inside a card with generous padding.",
        "Brand-blue CTA submit button with gradient.",
        "Minimal fields; clear labels and validation messaging."
      ],
      "website_footer": [
        "Full ISE wordmark (hex badge + company name) in footer.",
        "Navigation links, social links, and legal text.",
        "Dark or brand-blue background variant with white/light text."
      ],
      "dashboards": [
        "Hero header with greeting + short subtitle",
        "Row of metric cards with big numbers + delta pills + sparklines",
        "Primary data table inside a card with selection and pagination",
        "Secondary cards for lists, tasks, quick actions"
      ],
      "settings_pages": [
        "Left sidebar with settings categories",
        "Content panel with sectioned forms",
        "Use toggles, selects, and helper text; keep actions in header or sticky footer"
      ]
    },
    "ai_generation_instructions": {
      "brand_summary": "Ingenium Software Engineering (ISE) is a software engineering company. The brand identity centers on a hexagonal logo mark in sky-blue (#33AAFF) with a gradient variant, paired with light-weight sans-serif typography. The overall aesthetic is clean, modern, and crisp.",
      "do": [
        "Implement tokens first (CSS variables or theme object) and bind components to semantic tokens.",
        "Use consistent radii and spacing scale; align to 4px grid.",
        "Keep UI clean: generous whitespace, minimal dividers, and restrained color usage — the brand is confident and uncluttered.",
        "Use the ISE sky-blue (#33AAFF) as the primary accent. Apply the brand gradient (5CC5FF → 1A95E8) for hero sections, CTA buttons, and brand moments.",
        "Apply the hexagonal motif for feature icons (hex-shaped containers), hero section background textures (subtle hex-grid), and section transitions (angled dividers).",
        "Use light font weights (300) for hero headings and display text to match the brand's thin, precise wordmark.",
        "Use cards as primary containers; tables live inside cards with header actions and footer pagination.",
        "Include the hexagonal ISE logo mark in the navigation header and the full wordmark in the footer."
      ],
      "avoid": [
        "Overly thick borders, heavy shadows, noisy gradients, or skeuomorphic effects.",
        "Random color usage not mapped to the semantic status set.",
        "Inconsistent icon styles (mixing filled and outline).",
        "Unstructured layouts without a consistent grid or gutters.",
        "Overusing the hexagonal motif — it should accent, not overwhelm.",
        "Heavy font weights for display text — the brand is light and precise, not bold and aggressive.",
        "Using deep/royal blue (#1F6FFF) instead of the ISE sky-blue (#33AAFF) — the brand blue is warmer and more cyan."
      ]
    }
  }