{
  "_meta": {
    "generated": "2026-07-13T10:10:14.473Z",
    "version": "1.0.0",
    "description": "EKA brand design manifest — for AI component generation and cross-app consistency",
    "endpoints": {
      "tokens_json": "https://ekabalance.com/brand/tokens.json",
      "tokens_css": "https://ekabalance.com/brand/tokens.css",
      "tailwind_preset": "https://ekabalance.com/brand/tailwind-preset.json",
      "components": "https://ekabalance.com/brand/components.json",
      "ai_context": "https://ekabalance.com/brand/ai-context.md",
      "self": "https://ekabalance.com/brand/manifest.json"
    }
  },
  "brand": {
    "name": "EKA",
    "philosophy": "Minimalist, Apple-inspired flat design. Clean surfaces, generous whitespace, and light typography (weight 300). No box-shadows — depth is expressed through hairline borders, transparency, and backdrop-blur.",
    "principles": [
      "Flat: all box-shadows are 0 0 #0000. Never add drop shadows.",
      "Light type: body font-weight 300 default. Headlines 500. Never bold body text.",
      "Hairline borders: 1px standard, 0.5px on 2×+ DPI (var(--border-hairline)).",
      "Apple radius: 2rem (--radius-apple) for cards/containers. 1.5rem fallback on mobile.",
      "OKLch palette: perceptually uniform colors across the entire palette.",
      "Frosted glass nav: backdrop-blur-2xl + bg-background/55 + subtle border.",
      "Primary blue #0071e3: trust, action. Use for CTAs, links, focus rings.",
      "Rating amber #ffb405: premium. Sparingly — highlights, star ratings, special emphasis.",
      "Rounded buttons: always rounded-full. Cards: rounded-apple."
    ]
  },
  "tokens": {
    "colors": {
      "--color-rating-light": "#fde68a",
      "--color-rating": "#ffb405",
      "--color-rating-dark": "#b45309",
      "--color-sidebar": "oklch(0.985 0 0)",
      "--color-sidebar-foreground": "oklch(0.145 0 0)",
      "--color-sidebar-primary": "oklch(0.546 0.245 262.881)",
      "--color-sidebar-primary-foreground": "oklch(0.97 0.014 254.604)",
      "--color-sidebar-accent": "oklch(0.97 0 0)",
      "--color-sidebar-accent-foreground": "oklch(0.205 0 0)",
      "--color-sidebar-border": "oklch(0.922 0 0)",
      "--color-sidebar-ring": "oklch(0.708 0 0)",
      "--color-chart-1": "oklch(0.87 0 0)",
      "--color-chart-2": "oklch(0.556 0 0)",
      "--color-chart-3": "oklch(0.439 0 0)",
      "--color-chart-4": "oklch(0.371 0 0)",
      "--color-chart-5": "oklch(0.269 0 0)"
    },
    "typography": {},
    "radius": {},
    "shadows": {},
    "easing": {},
    "animations": {},
    "zIndex": {},
    "surfaces": {},
    "borders": {}
  },
  "utilities": {
    "layout": {
      "section-container": "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 — standard content-width wrapper"
    },
    "surfaces": {
      "app-card-surface": "rounded-apple, hairline border-border/60, bg-card — canonical card",
      "apple-card": "app-card-surface + hover:border-primary/30 transition — interactive card",
      "app-muted-card": "rounded-apple, border-border/50, bg-muted/35 — secondary card",
      "app-chrome-surface": "rounded-full, border-border/45, bg-background/55, backdrop-blur-2xl — frosted nav",
      "app-chrome-surface-scrolled": "stronger frosted nav on scroll — border-border/55, bg-background/65",
      "app-dropdown-surface": "rounded-apple, border-border, bg-background/95, backdrop-blur-2xl — dropdown",
      "app-muted-section": "bg-muted/35 — page section background tint",
      "glass-panel": "bg-background/80 backdrop-blur-xl border-border/60 — light frosted panel",
      "glass-panel-strong": "bg-background/95 backdrop-blur-xl border-border/60 — heavy frosted panel",
      "app-soft-tile": "rounded-apple, border-border/50, bg-background — neutral tile"
    },
    "labels": {
      "app-kicker": "rounded-full, border-primary/20, bg-primary/5, text-[10px] uppercase, text-primary — category badge",
      "app-eyebrow": "text-xs font-medium uppercase text-muted-foreground — section label"
    },
    "icons": {
      "app-icon-tile": "rounded-apple bg-primary/10 text-primary — branded icon container"
    },
    "navigation": {
      "app-nav-pill": "rounded-full border text-sm font-medium — nav button base",
      "app-nav-pill-active": "border-primary/20 bg-primary/10 text-primary",
      "app-nav-pill-idle": "border-transparent text-muted-foreground hover:bg-muted/40",
      "app-nav-active-bg": "rounded-full border-primary/15 bg-primary/10 — active indicator background"
    },
    "typography": {
      "apple-headline / heading-1": "text-2xl→6xl font-light leading-[0.95] — hero display text",
      "apple-title / heading-2": "text-xl→3xl font-medium leading-[1.15] — card/section headings",
      "apple-subtitle / heading-3": "text-base→xl font-normal text-muted-foreground leading-[1.5]",
      "text-body-lg": "text-base→lg font-light text-muted-foreground leading-relaxed"
    }
  },
  "components": [
    {
      "name": "Container",
      "category": "layout",
      "path": "src/components/layout/Container.tsx",
      "description": "Max-width wrapper. max-w-6xl, responsive horizontal padding."
    },
    {
      "name": "Section",
      "category": "layout",
      "path": "src/components/layout/Section.tsx",
      "description": "Page section with tone (default|muted|inverted) and spacing (tight|default|loose) props. Wraps Container unless bleed=true."
    },
    {
      "name": "PageHero",
      "category": "layout",
      "path": "src/components/layout/PageHero.tsx",
      "description": "Page header component. Props: eyebrow, title, subtitle, actions, align. Responsive h1 from 3xl to 7xl."
    },
    {
      "name": "CTABlock",
      "category": "layout",
      "path": "src/components/layout/CTABlock.tsx",
      "description": "Call-to-action panel. Tones: soft (muted bg) | bold (primary bg). rounded-apple, centered text."
    },
    {
      "name": "FeatureGrid",
      "category": "layout",
      "path": "src/components/layout/FeatureGrid.tsx",
      "description": "Grid of icon+title+description feature cards. columns: 2|3|4. Cards use apple-card with hover effect."
    },
    {
      "name": "FAQSection",
      "category": "layout",
      "path": "src/components/layout/FAQSection.tsx",
      "description": "Animated FAQ with native details elements and Framer Motion height animation."
    },
    {
      "name": "Accordion",
      "category": "page",
      "path": "src/components/Accordion.tsx",
      "description": "Context-based accordion with single or multiple open items. Framer Motion animation."
    },
    {
      "name": "AnimateIn",
      "category": "page",
      "path": "src/components/AnimateIn.tsx",
      "description": "Scroll-triggered entrance animation wrapper."
    },
    {
      "name": "AppleHero",
      "category": "page",
      "path": "src/components/AppleHero.tsx",
      "description": "Full-bleed hero section with Apple-style large typography."
    },
    {
      "name": "CTASection",
      "category": "page",
      "path": "src/components/CTASection.tsx",
      "description": "Full-bleed CTA with parallax background image and dark overlay."
    },
    {
      "name": "ServiceCard",
      "category": "page",
      "path": "src/components/ServiceCard.tsx",
      "description": "Service listing card with image, price badge, benefits list, booking button."
    },
    {
      "name": "MainLayout",
      "category": "page",
      "path": "src/components/MainLayout.tsx",
      "description": "Root layout with fixed frosted-glass nav, footer, cookie banner, toast container."
    },
    {
      "name": "CoreServiceTemplate",
      "category": "template",
      "path": "src/components/templates/CoreServiceTemplate.tsx",
      "description": "Full page template for service pages. Sections: hero, features, stats, bento grid, FAQ, pricing, testimonials."
    },
    {
      "name": "FunnelHero",
      "category": "template",
      "path": "src/components/templates/FunnelHero.tsx",
      "description": "Conversion-focused hero with problem selector and adaptive copy."
    }
  ],
  "aiGuidelines": {
    "dos": [
      "Use var(--color-primary) / #0071e3 for interactive elements and CTAs",
      "Use rounded-apple (2rem) for card and container border-radius",
      "Apply border-width: var(--border-hairline) on cards (1px / 0.5px on hi-DPI)",
      "Use backdrop-blur-2xl for overlay surfaces — always frosted, never flat-opaque",
      "Keep font-weight 300 for body, 500 for headings, 600–700 only for extreme emphasis",
      "Use --ease-out-quint or --ease-out-expo for entrance animations",
      "Prefix custom utility classes with \"app-\" following established naming",
      "Place app-kicker badges above section headings to categorise content",
      "Use text-muted-foreground for body/description text",
      "Respect prefers-reduced-motion — all animations disable via the global CSS rule"
    ],
    "donts": [
      "Do NOT add box-shadows — design is flat, all shadows are 0 0 #0000",
      "Do NOT use font-weight > 500 for body or paragraph text",
      "Do NOT use colors outside the token palette without justification",
      "Do NOT use border-radius below 1.5rem on major UI surfaces",
      "Do NOT use square or lightly-rounded buttons — always rounded-full or rounded-apple",
      "Do NOT exceed z-index scale: dropdown 100, modal 200, tooltip 300, toast 400",
      "Do NOT mix --color-rating and --color-primary on the same component",
      "Do NOT use border-width greater than 1px — use the hairline variable"
    ],
    "colorUsage": {
      "--color-primary / #0071e3": "CTAs, links, focus, interactive states, icon tiles, kicker badges",
      "--color-rating / #ffb405": "Premium highlights, star ratings, special emphasis — use sparingly",
      "--color-success": "Confirmation, success toasts, positive states",
      "--color-warning": "Caution alerts and notices",
      "--color-destructive": "Errors, destructive confirmations",
      "--color-muted-foreground": "Body text, descriptions, placeholders, secondary info",
      "--color-foreground": "Primary text, headings, strong emphasis",
      "--color-background": "Page bg, card bg, input fills",
      "--color-muted": "Subtle section backgrounds (via app-muted-section)",
      "--color-whatsapp / #25D366": "WhatsApp CTA buttons only"
    },
    "animationGuidance": [
      "Entrance: fadeIn 0.3–0.5s ease-out, or slideUp 0.4–0.6s ease-out",
      "Popover/dialog: scaleIn 0.2s ease-out",
      "Ambient decorative: gentleFloat or float 6s infinite",
      "Always pair CSS animations with @media (prefers-reduced-motion) disable",
      "Use framer-motion for gesture-driven or staggered list animations"
    ]
  },
  "externalIntegration": {
    "cssImport": "@import url('https://ekabalance.com/brand/tokens.css');",
    "tailwindV4": "@import url('https://ekabalance.com/brand/tokens.css'); /* CSS vars picked up natively */",
    "tailwindV3": "// In tailwind.config.js: const preset = require('./brand-tokens.json'); module.exports = { presets: [{ theme: preset.theme }] }",
    "fetchBuildTime": [
      "# Add to your app's package.json \"prebuild\" script:",
      "curl https://ekabalance.com/brand/tokens.json -o brand-tokens.json",
      "# or for CSS variables:",
      "curl https://ekabalance.com/brand/tokens.css -o src/styles/brand.css",
      "# or for AI context:",
      "curl https://ekabalance.com/brand/ai-context.md -o brand-context.md"
    ],
    "aiContextInjection": "Fetch https://ekabalance.com/brand/ai-context.md and inject as system context when prompting an LLM to generate on-brand components."
  }
}