{
  "version": "2.0.0",
  "documentation": {
    "route": "/tasarim-sistemi/",
    "status": "living",
    "owner": "BEBBIL",
    "lastReviewed": "2026-08-05",
    "source": "/data/design-system.json"
  },
  "logo": {
    "name": "BEBBIL Étoile Brooch",
    "variants": {
      "horizontalDark": {
        "asset": "/assets/logo.svg",
        "background": "ivory-or-light",
        "minWidthPx": 150
      },
      "horizontalLight": {
        "asset": "/assets/logo-light.svg",
        "background": "espresso-or-burgundy",
        "minWidthPx": 150
      },
      "stackedDark": {
        "asset": "/assets/logo-stacked.svg",
        "background": "ivory-or-light",
        "minWidthPx": 96
      },
      "iconDark": {
        "asset": "/assets/mark.svg",
        "background": "light-or-transparent",
        "minWidthPx": 32
      },
      "iconLight": {
        "asset": "/assets/mark-light.svg",
        "background": "espresso-or-burgundy",
        "minWidthPx": 32
      },
      "favicon": {
        "asset": "/assets/favicon.svg",
        "background": "browser",
        "minWidthPx": 16
      },
      "appIcon": {
        "asset": "/assets/apple-touch-icon.png",
        "background": "device",
        "minWidthPx": 180
      }
    },
    "clearSpace": "Amblem merkezindeki fildişi fasetin yarıçapı kadar boşluk",
    "rules": [
      "Logonun oranını, harf aralığını veya renklerini değiştirme.",
      "Desenli zeminde okunurluk için yatay açık ya da koyu sürümü kullan.",
      "32 pikselin altında yalnızca favicon sürümünü kullan.",
      "Amblemi dekoratif tekrar veya metin içi harf yerine kullanma."
    ]
  },
  "colors": {
    "brand": {
      "ivory": "#F7F3EC",
      "cream": "#FFFDF9",
      "champagne": "#C3A475",
      "gold": "#B8955A",
      "burgundy": "#75413E",
      "blackCherry": "#4A1722",
      "espresso": "#211D1A",
      "emerald": "#38644F"
    },
    "semantic": {
      "canvas": "#F7F3EC",
      "surface": "#FFFDF9",
      "surfaceMuted": "#EEE5D9",
      "text": "#211D1A",
      "textMuted": "#695F58",
      "border": "#D9CEC1",
      "action": "#75413E",
      "success": "#38644F",
      "warning": "#8B5C21",
      "error": "#8D3739",
      "focus": "#75413E"
    },
    "contrastPairs": [
      {
        "foreground": "#211D1A",
        "background": "#F7F3EC",
        "usage": "Ana metin"
      },
      {
        "foreground": "#695F58",
        "background": "#FFFDF9",
        "usage": "İkincil metin"
      },
      {
        "foreground": "#75413E",
        "background": "#F7F3EC",
        "usage": "Metin bağlantısı"
      },
      {
        "foreground": "#FFFDF9",
        "background": "#211D1A",
        "usage": "Koyu yüzey metni"
      }
    ]
  },
  "typography": {
    "families": {
      "editorial": "Cormorant, Georgia, serif",
      "interface": "Inter, Arial, sans-serif"
    },
    "delivery": {
      "format": "WOFF2",
      "strategy": "self-hosted",
      "display": "swap"
    },
    "scale": {
      "display": {
        "size": "clamp(3.2rem, 8vw, 7.2rem)",
        "lineHeight": 0.98,
        "family": "editorial"
      },
      "title": {
        "size": "clamp(2.45rem, 5vw, 4.7rem)",
        "lineHeight": 1.02,
        "family": "editorial"
      },
      "heading": {
        "size": "clamp(1.55rem, 2.5vw, 2.15rem)",
        "lineHeight": 1.08,
        "family": "editorial"
      },
      "body": {
        "size": "1rem",
        "lineHeight": 1.65,
        "family": "interface"
      },
      "price": {
        "size": "0.82rem",
        "lineHeight": 1.4,
        "family": "interface",
        "weight": 700
      },
      "micro": {
        "size": "0.72rem",
        "lineHeight": 1.4,
        "family": "interface",
        "weight": 700
      }
    }
  },
  "layout": {
    "container": {
      "maxWidthPx": 1320,
      "readingWidthPx": 800,
      "gutter": "clamp(1rem, 3vw, 2rem)"
    },
    "spacingScale": {
      "xs": "0.5rem",
      "sm": "0.75rem",
      "md": "1rem",
      "lg": "1.5rem",
      "xl": "2rem",
      "2xl": "3rem",
      "3xl": "5rem",
      "4xl": "8rem"
    },
    "grids": {
      "productDesktop": 4,
      "productTablet": 2,
      "productMobile": 1,
      "editorialDesktop": 4,
      "minimumCardWidthPx": 240
    },
    "sectionRhythm": "clamp(5rem, 8.5vw, 9rem)",
    "mobileRule": "390–430 pikselde içerik kenar boşluğu en az 16 piksel; yatay taşma yok."
  },
  "imagery": {
    "direction": "İnsansız couture atölyesi ve rafine natürmort",
    "subjects": [
      "couture kumaşlar",
      "tablet",
      "planlayıcı",
      "mimari detay",
      "mücevher benzeri soyut obje"
    ],
    "treatment": {
      "saturation": 0.92,
      "contrast": 1.03,
      "crop": "editorial, centered focal object",
      "mobileArtDirection": true
    },
    "rules": [
      "Onaysız insan modeli kullanma",
      "Her görsele bağlama özgü Türkçe alt metin yaz",
      "Mobilde ayrı kırpılmış WebP kullan",
      "Dekoratif görseli boş alt metinle işaretle"
    ]
  },
  "productImagery": {
    "aspectRatio": "4 / 5",
    "cardWidthPx": 450,
    "galleryWidthPx": 900,
    "format": "WebP",
    "slots": [
      "Paket görünümü",
      "Telefon kullanımı",
      "Tablet kullanımı",
      "Masaüstü kullanımı",
      "İçerik seçkisi",
      "Yakın plan",
      "Kullanım akışı",
      "Koleksiyon görünümü"
    ],
    "treatment": {
      "light": "soft editorial",
      "perspective": "front and restrained three-quarter",
      "background": "warm neutral",
      "shadow": "low-contrast natural"
    },
    "rules": [
      "Her üründe sekiz benzersiz görünüm",
      "Kartta birincil ve ikincil görsel geçişi",
      "Görsel metni okunabilir gerçek ürün içeriğinden oluşur",
      "Esnetme, kırpılmış arayüz metni veya yapay cihaz logosu kullanılmaz"
    ]
  },
  "iconography": {
    "canvas": "24 × 24",
    "strokeWidth": 1.8,
    "lineCap": "round",
    "lineJoin": "round",
    "visualSizesPx": [
      18,
      20,
      24
    ],
    "minimumTouchTargetPx": 44,
    "set": [
      "search",
      "heart",
      "menu",
      "close",
      "concierge-mark",
      "delivery",
      "license",
      "security"
    ],
    "rules": [
      "İşlevsel ikonun erişilebilir adı düğmede bulunur",
      "Dekoratif ikon aria-hidden kullanır",
      "Emoji işlevsel ikon yerine kullanılmaz",
      "İkon tek başına anlamı belirsizse metin etiketi korunur"
    ]
  },
  "components": {
    "buttons": {
      "minimumHeightPx": 50,
      "variants": {
        "primary": "Ana sayfa veya bölümdeki tek baskın eylem",
        "secondary": "Aynı bağlamdaki alternatif eylem",
        "text": "Düşük öncelikli yönlendirme",
        "purchase": "Yalnızca doğrulanmış Shopier ürün geçişi",
        "disabled": "Satış veya işlem hazır değil; nedeni yakın metinde açıklanır"
      },
      "rules": [
        "Bir görünümde bir ana CTA",
        "Eylem fiille ve açık sonuçla adlandırılır",
        "Shopier geçişi yeni sekmede ve sponsored/noopener ile açılır",
        "Sadece renk ile durum anlatılmaz"
      ]
    }
  },
  "motion": {
    "durations": {
      "fast": "180ms",
      "normal": "250ms",
      "slow": "450ms",
      "editorial": "700ms"
    },
    "easing": {
      "standard": "cubic-bezier(.2,.8,.2,1)",
      "enter": "cubic-bezier(.16,1,.3,1)"
    },
    "uses": {
      "fast": "button and icon feedback",
      "normal": "panel and toast",
      "slow": "product image",
      "editorial": "large image reveal"
    },
    "reducedMotion": "All animation and transition durations collapse to 0.01ms; scroll behavior becomes auto."
  }
}