{
  "schemaVersion": 2,
  "generatedAt": "2026-08-16T04:11:00.000Z",
  "title": "Design System: AyrisLegal",
  "extensions": {
    "colorMeta": {
      "primary": {
        "role": "primary",
        "displayName": "Ayris Legal Red",
        "canonical": "#E61919",
        "tonalRamp": [
          "#4A0404",
          "#700707",
          "#9E0B0B",
          "#B8140F",
          "#E61919",
          "#F87171",
          "#FCA5A5",
          "#FDEEEC"
        ]
      },
      "primary-dark": {
        "role": "primary",
        "displayName": "Deep Crimson",
        "canonical": "#B8140F",
        "tonalRamp": [
          "#3D0303",
          "#5C0606",
          "#8A0909",
          "#B8140F",
          "#E61919",
          "#EF4444",
          "#F87171",
          "#FDEEEC"
        ]
      },
      "primary-soft": {
        "role": "neutral",
        "displayName": "Soft Rose Tint",
        "canonical": "#FDEEEC",
        "tonalRamp": [
          "#B8140F",
          "#E61919",
          "#F87171",
          "#FCA5A5",
          "#FECACA",
          "#FEE2E2",
          "#FDEEEC",
          "#FFF5F5"
        ]
      },
      "neutral-bg": {
        "role": "neutral",
        "displayName": "Paper White",
        "canonical": "#FFFFFF",
        "tonalRamp": [
          "#09090B",
          "#18181B",
          "#27272A",
          "#71717A",
          "#A1A1AA",
          "#E4E4E7",
          "#FAFAFA",
          "#FFFFFF"
        ]
      },
      "neutral-surface": {
        "role": "neutral",
        "displayName": "Subtle Surface Tint",
        "canonical": "#FAFAFA",
        "tonalRamp": [
          "#09090B",
          "#18181B",
          "#3F3F46",
          "#71717A",
          "#D4D4D8",
          "#E4E4E7",
          "#F4F4F5",
          "#FAFAFA"
        ]
      },
      "neutral-border": {
        "role": "neutral",
        "displayName": "Hairline Border Zinc",
        "canonical": "#E4E4E7",
        "tonalRamp": [
          "#18181B",
          "#27272A",
          "#52525B",
          "#71717A",
          "#A1A1AA",
          "#D4D4D8",
          "#E4E4E7",
          "#F4F4F5"
        ]
      },
      "neutral-muted": {
        "role": "neutral",
        "displayName": "Muted Caption Slate",
        "canonical": "#71717A",
        "tonalRamp": [
          "#18181B",
          "#27272A",
          "#3F3F46",
          "#52525B",
          "#71717A",
          "#A1A1AA",
          "#D4D4D8",
          "#E4E4E7"
        ]
      },
      "neutral-text": {
        "role": "neutral",
        "displayName": "Deep Ink Black",
        "canonical": "#09090B",
        "tonalRamp": [
          "#09090B",
          "#18181B",
          "#27272A",
          "#3F3F46",
          "#52525B",
          "#71717A",
          "#A1A1AA",
          "#E4E4E7"
        ]
      }
    },
    "typographyMeta": {
      "display": {
        "displayName": "Display",
        "purpose": "Hero headlines and commanding value propositions."
      },
      "headline": {
        "displayName": "Headline",
        "purpose": "Section headings and core feature titles."
      },
      "title": {
        "displayName": "Title",
        "purpose": "Card titles, module headers, and modal names."
      },
      "body": {
        "displayName": "Body",
        "purpose": "Long-form explanations, case summaries, and narrative text."
      },
      "label": {
        "displayName": "Label / Mono",
        "purpose": "Case numbers, dates, badge pills, and legal metadata."
      }
    },
    "shadows": [
      {
        "name": "card-float",
        "value": "0 30px 70px -25px rgba(24, 24, 27, 0.25)",
        "purpose": "Applied to hero browser preview frames and featured product mockups for dramatic physical lift."
      },
      {
        "name": "overlay-pop",
        "value": "0 20px 45px -15px rgba(24, 24, 27, 0.20)",
        "purpose": "Applied to offset badges (e.g. Çelişki Avcısı pill) and floating status widgets."
      },
      {
        "name": "form-card",
        "value": "0 20px 60px -30px rgba(24, 24, 27, 0.20)",
        "purpose": "Applied to interactive inquiry and lead generation forms on /iletisim."
      }
    ],
    "motion": [
      {
        "name": "ease-out-smooth",
        "value": "cubic-bezier(0.16, 1, 0.3, 1)",
        "purpose": "Spring transitions for scroll reveals and card entry animations."
      },
      {
        "name": "magnetic-spring",
        "value": "spring(stiffness: 150, damping: 15, mass: 0.5)",
        "purpose": "Subtle cursor attraction physics on primary CTA buttons."
      }
    ],
    "breakpoints": [
      { "name": "sm", "value": "640px" },
      { "name": "md", "value": "768px" },
      { "name": "lg", "value": "1024px" },
      { "name": "xl", "value": "1280px" },
      { "name": "2xl", "value": "1400px" }
    ]
  },
  "components": [
    {
      "name": "Primary Action Button",
      "kind": "button",
      "refersTo": "button-primary",
      "description": "High-intent primary conversion button with pill geometry and crimson hover state.",
      "html": "<a href=\"#iletisim\" class=\"ds-btn-primary\">Ücretsiz Deneyin <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"/><path d=\"m12 5 7 7-7 7\"/></svg></a>",
      "css": ".ds-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 9999px; background: #E61919; color: #FFFFFF; font-family: 'Archivo', sans-serif; font-size: 15px; font-weight: 600; padding: 14px 28px; text-decoration: none; border: none; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; } .ds-btn-primary:hover { background: #B8140F; } .ds-btn-primary:active { transform: scale(0.98); }"
    },
    {
      "name": "Outline Secondary Button",
      "kind": "button",
      "refersTo": "button-outline",
      "description": "Secondary exploratory button with hairline border and subtle zinc hover tone.",
      "html": "<a href=\"#tanisin\" class=\"ds-btn-outline\">Nasıl Çalışır?</a>",
      "css": ".ds-btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 9999px; background: #FFFFFF; color: #18181B; border: 1.5px solid #E4E4E7; font-family: 'Archivo', sans-serif; font-size: 15px; font-weight: 600; padding: 14px 28px; text-decoration: none; cursor: pointer; transition: background 0.15s ease; } .ds-btn-outline:hover { background: #FAFAFA; border-color: #D4D4D8; }"
    },
    {
      "name": "Elevated Browser Mock Card",
      "kind": "card",
      "refersTo": "card-elevated",
      "description": "Floating browser frame mockup with window chrome dots and deep ambient drop shadow.",
      "html": "<div class=\"ds-browser-card\"><div class=\"ds-browser-header\"><span class=\"ds-dot\"></span><span class=\"ds-dot\"></span><span class=\"ds-dot\"></span><span class=\"ds-browser-url\">ayrislegal.com</span></div><div class=\"ds-browser-body\"><div class=\"ds-file-item\"><span class=\"ds-file-name\">Bilirkişi Raporu - Kira Tespiti</span><span class=\"ds-file-date\">15.01.2026</span></div></div></div>",
      "css": ".ds-browser-card { width: 100%; border-radius: 28px; border: 1px solid rgba(228, 228, 231, 0.7); background: #FFFFFF; box-shadow: 0 30px 70px -25px rgba(24, 24, 27, 0.25); overflow: hidden; font-family: 'Archivo', sans-serif; } .ds-browser-header { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #FAFAFA; border-bottom: 1px solid #E4E4E7; } .ds-dot { width: 10px; height: 10px; border-radius: 50%; background: #D4D4D8; } .ds-browser-url { flex: 1; text-align: center; font-size: 12px; color: #A1A1AA; font-family: 'JetBrains Mono', monospace; } .ds-browser-body { padding: 20px; } .ds-file-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border: 1px solid #F4F4F5; border-radius: 16px; } .ds-file-name { font-size: 13.5px; font-weight: 600; color: #3F3F46; } .ds-file-date { font-size: 11.5px; color: #A1A1AA; font-family: 'JetBrains Mono', monospace; }"
    },
    {
      "name": "Lead Input Field",
      "kind": "input",
      "refersTo": "input-field",
      "description": "Comfortable 46px text field with 12px corners and Ayris Red focus stroke transition.",
      "html": "<div class=\"ds-field-wrap\"><label class=\"ds-field-label\">Ad Soyad <span style=\"color:#E61919;\">*</span></label><input type=\"text\" class=\"ds-field-input\" placeholder=\"Av. Ayşe Yılmaz\" /></div>",
      "css": ".ds-field-wrap { display: flex; flex-direction: column; gap: 6px; font-family: 'Archivo', sans-serif; } .ds-field-label { font-size: 13px; font-weight: 600; color: #09090B; } .ds-field-input { width: 100%; min-height: 46px; border-radius: 12px; border: 1.5px solid #E4E4E7; background: #FFFFFF; padding: 10px 16px; font-size: 14px; color: #09090B; outline: none; transition: border-color 0.15s ease; box-sizing: border-box; } .ds-field-input:focus { border-color: #E61919; }"
    },
    {
      "name": "Accent Chip Badge",
      "kind": "chip",
      "refersTo": "badge-accent",
      "description": "Soft rose pill badge with deep crimson text for feature category callouts.",
      "html": "<span class=\"ds-chip-badge\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z\"/></svg> Avukatlar için yapay zeka destekli hukuki asistan</span>",
      "css": ".ds-chip-badge { display: inline-flex; align-items: center; gap: 8px; border-radius: 9999px; background: #FDEEEC; color: #B8140F; font-family: 'Archivo', sans-serif; font-size: 13px; font-weight: 600; padding: 6px 14px; }"
    },
    {
      "name": "Live Indicator Pulse",
      "kind": "custom",
      "refersTo": "live-pulse",
      "description": "Concentric pulsing status indicator for live document analysis and courtroom feeds.",
      "html": "<span class=\"ds-pulse-wrap\"><span class=\"ds-pulse-ring\"></span><span class=\"ds-pulse-dot\"></span></span>",
      "css": ".ds-pulse-wrap { position: relative; display: inline-flex; width: 8px; height: 8px; } .ds-pulse-ring { position: absolute; width: 100%; height: 100%; border-radius: 50%; background: #E61919; opacity: 0.6; animation: ds-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite; } .ds-pulse-dot { position: relative; display: inline-flex; width: 8px; height: 8px; border-radius: 50%; background: #E61919; } @keyframes ds-ping { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.4); opacity: 0; } }"
    }
  ],
  "narrative": {
    "northStar": "The Modern Jurist Studio",
    "overview": "The AyrisLegal design system embodies rigorous editorial precision, surgical focus, and high-trust clarity. Built for Turkish lawyers navigating dense case dockets, precedent archives, and evidentiary records, the interface rejects noisy SaaS clichés in favor of stark white-and-zinc architectural surfaces punctuated by deliberate, high-contrast Ayris Red accents.\n\nThe aesthetic philosophy bridges judicial gravitas with cutting-edge analytical intelligence. Typographic hierarchy is tight, bold, and authoritative. Cards, preview frames, and case documents float cleanly above the canvas with deep ambient drop shadows, giving digital artifacts physical substance and scanability.",
    "keyCharacteristics": [
      "Stark editorial canvas: pure white (#FFFFFF) and architectural zinc neutrals (#FAFAFA, #F4F4F5, #E4E4E7, #09090B).",
      "Singular, surgical accent: high-contrast Ayris Legal Red (#E61919) used strictly for high-intent actions, critical alerts, and focal insights.",
      "Authoritative typography: Archivo with tight tracking (-0.03em) and heavy weights for display, paired with JetBrains Mono for dates, case numbers, and system badges.",
      "Confident tactile geometry: pill-shaped primary action buttons (rounded-full), generous 24px container corners, and layered floating cards with deep ambient shadows.",
      "Zero fluff: no decorative gradient text, no floating particle meshes, and no icon-stuffed bento boxes."
    ],
    "rules": [
      {
        "name": "The Rarity Rule",
        "body": "The Ayris Red accent is applied to ≤5% of any viewport. Its scarcity is what commands immediate cognitive attention when flagging legal conflicts or driving conversion.",
        "section": "colors"
      },
      {
        "name": "The Hairline Rule",
        "body": "All borders use crisp, unblurred 1px to 1.5px solid strokes (#E4E4E7). Borders define geometry; they never glow or carry colored stroke gradients.",
        "section": "colors"
      },
      {
        "name": "The Editorial Lead Rule",
        "body": "Hero and section headlines lead with stark monochrome ink (#09090B) and isolate key thesis statements with solid accent color—never split across multi-stop gradients.",
        "section": "typography"
      },
      {
        "name": "The Monospace Docket Rule",
        "body": "Every date, file reference, and courtroom docket timestamp is typeset in JetBrains Mono to reinforce authentic document reality.",
        "section": "typography"
      },
      {
        "name": "The Tonal Lift Rule",
        "body": "Shadows are always neutral carbon/zinc tinted (rgba(24, 24, 27, ...)). Never use colored or saturated drop shadows under buttons or cards.",
        "section": "elevation"
      }
    ],
    "dos": [
      "Do maintain extreme typographic hierarchy with tight tracking (-0.03em) on Archivo display headings.",
      "Do reserve Ayris Red (#E61919) strictly for primary conversion actions, conflict detection badges, and focus indicators.",
      "Do typeset dates, docket IDs, and file timestamps in JetBrains Mono (label token).",
      "Do pair crisp hairline borders (#E4E4E7) with deep ambient zinc drop shadows on floating card mockups.",
      "Do keep lead capture and demo inquiries strictly on /iletisim."
    ],
    "donts": [
      "Don't use multi-color gradient text, rainbow highlights, or glowing neon outlines.",
      "Don't use generic blue corporate SaaS styling or unbranded generic templates.",
      "Don't clutter views with icon-stuffed bento boxes; let real case file structures and legal workflows lead.",
      "Don't use colored or saturated drop shadows under buttons or cards.",
      "Don't place the full contact form on the home page."
    ]
  }
}
