{
  "theme": "swiss_high_contrast_adapted",
  "project_type": "company_profile_marketing_site",
  "design_philosophy": "Modern professional with an industrial edge. Utilizing high contrast, generous negative space, and precise geometric typography to convey manufacturing authority. The design is predominantly white, sharply punctuated by vibrant red and yellow accents.",
  "responsive": {
    "breakpoint_strategy": "Mobile-first. Start with grid-cols-1 and strict vertical stacking. Expand to complex bento/asymmetric grids only on md (768px) and lg (1024px).",
    "typography": "Fluid typography scales. H1 ranges from text-4xl on mobile to text-6xl on desktop. Body text remains text-base.",
    "layout": "Padding scales from p-4 on mobile to p-12 on desktop. Prevent horizontal scroll with overflow-x-hidden on the main wrapper.",
    "tap_targets": "Minimum 48x48px for all interactive elements (buttons, language toggles, accordion headers)."
  },
  "colors": {
    "light_mode": {
      "background": "#FAFAFA",
      "surface": "#FFFFFF",
      "text": "#0A0A0A",
      "text_muted": "#525252",
      "primary": "#E60000",
      "primary_hover": "#CC0000",
      "accent_yellow": "#FFCC00",
      "border": "#E5E5E5"
    },
    "dark_mode": {
      "background": "#0A0A0A",
      "surface": "#141414",
      "text": "#FAFAFA",
      "text_muted": "#A3A3A3",
      "primary": "#FF3333",
      "primary_hover": "#FF6666",
      "accent_yellow": "#FFD633",
      "border": "#262626"
    },
    "rules": [
      "Dark mode MUST NOT be muddy or use dark text on dark backgrounds. Use pure solids.",
      "The primary Red is reserved STRICTLY for the company logo text, primary call-to-actions, and key metric highlights.",
      "Yellow is used sparingly as a secondary accent (e.g., hover underlines, decorative geometric shapes, warning/alert chips)."
    ]
  },
  "typography": {
    "fonts": {
      "brand": "'Outfit', sans-serif",
      "heading": "'Clash Display', sans-serif",
      "body": "'DM Sans', sans-serif"
    },
    "scale": {
      "brand_name": "text-2xl md:text-3xl font-black tracking-tight text-primary",
      "h1": "text-4xl sm:text-5xl lg:text-6xl font-semibold tracking-tighter leading-none",
      "h2": "text-2xl sm:text-3xl lg:text-4xl font-semibold tracking-tight",
      "h3": "text-xl sm:text-2xl font-medium",
      "body": "text-base leading-relaxed text-text_muted",
      "overline": "text-xs font-bold tracking-[0.2em] uppercase text-text_muted"
    },
    "brand_specifics": "The company name 'PT. KOMO PLAT INDONESIA' MUST be rendered in the 'Outfit' font (a free, geometric humanist alternative to Gill Sans), font-weight black, and colored Red (primary)."
  },
  "layouts": {
    "hero": "Asymmetric split layout. Left side: kinetic text reveal of the manifesto/value prop. Right side: High-contrast, sharp-edged image container (max-h-[80vh]) with subtle parallax.",
    "bento_grid": "Use for the Catalog section. Mix col-span-1, col-span-2, and row-span-2 tiles. Gaps should be generous (gap-6 to gap-8).",
    "contact_cards": "Grid-cols-1 md:grid-cols-2 lg:grid-cols-4. Strict geometric cards. Solid borders (1px border-border), flat backgrounds. No heavy drop shadows.",
    "spacing": "Sections must be separated by py-20 or py-32 to give the layout 'breathing room'."
  },
  "components": {
    "header_nav": "Sticky header. Crystal glassmorphism (backdrop-blur-xl bg-white/80 dark:bg-black/80) with a 1px solid bottom border. Must include Logo (left), Links (center, hidden on mobile), and Actions (Search, Lang, Theme, Mobile Menu - right).",
    "buttons": "Sharp corners (rounded-none or rounded-sm). Hover states must include a slight X-axis translation of an inner arrow icon. Primary button: Red background, White text. Secondary: Transparent background, 1px border, Red text on hover.",
    "catalog_accordion": "Use Shadcn UI Accordion for subcategories. Override default padding. Active state should highlight the left border with the accent Yellow.",
    "theme_lang_toggles": "Minimalist dropdowns (Shadcn Select/DropdownMenu). Do NOT use transparent backgrounds for dropdown content. Must be solid surface color with 1px border.",
    "search": "Global search triggered via a Shadcn Dialog (Command Palette style). Must be accessible via keyboard shortcut (Cmd+K)."
  },
  "motion": {
    "scrolling": "Implement 'Lenis' for smooth momentum scrolling. This is mandatory for the premium Awwwards feel.",
    "reveals": "Use Framer Motion. Elements should fade in and translate up slightly (y: 20 -> y: 0) as they enter the viewport. Stagger children in grids.",
    "hover": "Images inside bento grids should scale slightly (1.05) on hover while the container remains fixed (overflow-hidden)."
  },
  "media": {
    "image_urls": {
      "hero_manufacturing": {
        "url": "https://images.unsplash.com/photo-1735494033576-9c882e80504c?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NDQ2NDJ8MHwxfHNlYXJjaHwxfHxsYXNlciUyMGN1dHRpbmclMjBtZXRhbCUyMG1vZGVybiUyMGZhY3Rvcnl8ZW58MHx8fHwxNzg1MjYyNTI3fDA&ixlib=rb-4.1.0&q=85",
        "description": "Sparks flying from a laser cutting metal machine, perfect for hero or heavy manufacturing services.",
        "category": "hero"
      },
      "catalog_printing": {
        "url": "https://images.unsplash.com/photo-1503694978374-8a2fa686963a?crop=entropy&cs=srgb&fm=jpg&ixid=M3w4NjY2NzZ8MHwxfHNlYXJjaHwxfHxwcmludGluZyUyMHByZXNzJTIwcGFwZXIlMjBicm9jaHVyZXxlbnwwfHx8fDE3ODUyNjI1Mjd8MA&ixlib=rb-4.1.0&q=85",
        "description": "Modern printing press machine in operation. Use for catalog headers or general printing services.",
        "category": "catalog"
      },
      "catalog_merchandise": {
        "url": "https://images.unsplash.com/photo-1416339134316-0e91dc9ded92?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NDk1ODB8MHwxfHNlYXJjaHwxfHxjdXN0b20lMjBtZXJjaGFuZGlzZSUyMGRlc2lnbnxlbnwwfHx8fDE3ODUyNjI1Mjd8MA&ixlib=rb-4.1.0&q=85",
        "description": "Table with design materials and merchandise setup. Use for Sablon DTF or Merchandise categories.",
        "category": "catalog"
      },
      "branch_1": {
        "url": "https://images.unsplash.com/photo-1645497781181-d6684ebd1863?crop=entropy&cs=srgb&fm=jpg&ixid=M3w4NjAzOTB8MHwxfHNlYXJjaHwyfHxtb2Rlcm4lMjBzdG9yZWZyb250JTIwb2ZmaWNlJTIwZXh0ZXJpb3J8ZW58MHx8fHwxNzg1MjYyNTI3fDA&ixlib=rb-4.1.0&q=85",
        "description": "Modern glowing glass building at night. Representing Admin Pusat or Cabang 1.",
        "category": "address"
      },
      "branch_2": {
        "url": "https://images.unsplash.com/photo-1543892607-04657ef3a279?crop=entropy&cs=srgb&fm=jpg&ixid=M3w4NjAzOTB8MHwxfHNlYXJjaHwxfHxtb2Rlcm4lMjBzdG9yZWZyb250JTIwb2ZmaWNlJTIwZXh0ZXJpb3J8ZW58MHx8fHwxNzg1MjYyNTI3fDA&ixlib=rb-4.1.0&q=85",
        "description": "Clean white modern concrete building during daytime. Representing Cabang 2.",
        "category": "address"
      },
      "laser_precision": {
        "url": "https://images.unsplash.com/photo-1624301809538-5d5c4562656e?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NDQ2NDJ8MHwxfHNlYXJjaHwzfHxsYXNlciUyMGN1dHRpbmclMjBtZXRhbCUyMG1vZGVybiUyMGZhY3Rvcnl8ZW58MHx8fHwxNzg1MjYyNTI3fDA&ixlib=rb-4.1.0&q=85",
        "description": "Close up of laser precision cutting. Excellent for Laser Marking and Laser Cutting catalog items.",
        "category": "catalog"
      }
    },
    "rules": "Never use placeholder images. Always apply a subtle dark overlay (bg-black/20) to hero images if text is overlaid to maintain APCA contrast requirements."
  },
  "instructions_to_main_agent": [
    "CRITICAL: The site must be built as a Single Page Application (SPA) or Multi-Page App using React (.js/.jsx), NOT TypeScript.",
    "CRITICAL: Implement Lucide-React or Phosphor icons. Do not use emojis for icons.",
    "CRITICAL: Install and configure 'lenis' for smooth scrolling. This is non-negotiable for the requested dynamic scroll feel.",
    "CRITICAL: Use Framer Motion for scroll-triggered reveal animations. Stagger items in the Catalog and Contact bento grids.",
    "IMPLEMENT i18n: Add a language context or library (like i18next) to handle ID/EN toggling. Auto-detect based on navigator.language.",
    "IMPLEMENT THEME: Add next-themes or a custom context for dark/light mode. Default should check system preference.",
    "BRANDING: 'PT. KOMO PLAT INDONESIA' must use the 'Outfit' font, font-weight black, and be colored #E60000 (Red).",
    "ROUTING/PAGES: Ensure there are distinct sections/pages for 1. Beranda (Home), 2. Katalog, 3. Kontak, 4. Alamat.",
    "DATA-TESTID: Ensure all buttons, inputs, links, and accordion triggers have a 'data-testid' attribute (e.g., data-testid='theme-toggle-btn').",
    "ACCORDION: The Catalog must use Shadcn's Accordion for product categories (Plat Nomor, Stempel, Kunci, Laser Cutting, Laser Marking, Papan Nama, Nomor Rumah, Nama Dada, Plakat, Sablon DTF, Sticker, Brosur, Merchandise)."
  ],
  "UNIVERSAL_GUIDELINES_FOR_MAIN_AGENT": [
    "You tend to converge toward generic, 'on distribution' outputs. Avoid this: make creative, distinctive frontends that surprise and delight.",
    "Dark colors look good when used independently without gradients. DO NOT use dark colors as gradients.",
    "Don't make generic centered layouts, simplistic gradients, and uniform styling.",
    "Create depth through layered design elements with z-index hierarchy.",
    "Use glass-morphism effects with backdrop filters (12-24px blur).",
    "You MUST NOT apply universal transition. Eg: transition: all. This results in breaking transforms. Always add transitions for specific interactive elements.",
    "You MUST NOT center align the app container, ie do not add .App { text-align: center; } in the css file.",
    "Always use modern button styles like pill-shaped, or sharp button with interaction animations & color relevant to the app style.",
    "NEVER: use AI assistant Emoji characters like 🤖🧠💭💡🔮🎯 etc for icons.",
    "Every interaction needs micro-animations - hover states, transitions, parallax effects, and entrance animations. Static = dead.",
    "Use 2-3x more spacing than feels comfortable. Cramped designs look cheap.",
    "Subtle grain textures, noise overlays, custom cursors, selection states, and loading animations: separates good from extraordinary.",
    "Missing categories (especially sponsor logos) = main agent will use placeholder text which is FORBIDDEN."
  ]
}