DESIGN.json

{
  "schemaVersion": 2,
  "generatedAt": "2026-04-28T08:48:04Z",
  "title": "Design System: LumaForge",
  "description": "Browser-local RAW finishing lab with color-safe guardrails.",
  "sourceFiles": ["PRODUCT.md", "DESIGN.md"],
  "register": "product",
  "creativeNorthStar": "The Calibrated Photo Lab",
  "tokens": {
    "colors": {
      "lf-paper": {
        "value": "oklch(0.964 0.018 86)",
        "role": "main light surface",
        "usage": "Root backgrounds and broad quiet product surfaces. Never replace with pure white."
      },
      "lf-paper-low": {
        "value": "oklch(0.918 0.026 86)",
        "role": "secondary light surface",
        "usage": "Section bands, secondary panels, and tonal transitions."
      },
      "lf-paper-warm": {
        "value": "oklch(0.9 0.034 82)",
        "role": "proof surface",
        "usage": "Workflow, proof, and comparison areas that need warmth without decoration."
      },
      "lf-ink": {
        "value": "oklch(0.18 0.018 76)",
        "role": "primary text and dark foundation",
        "usage": "Headings, dark panels, and darkroom surfaces. Never replace with pure black."
      },
      "lf-ink-soft": {
        "value": "oklch(0.38 0.032 75)",
        "role": "body text",
        "usage": "Long-form copy on light surfaces."
      },
      "lf-hairline": {
        "value": "oklch(0.74 0.035 78)",
        "role": "structural border",
        "usage": "Rails, separators, panel borders, and compact product structure."
      },
      "lf-green": {
        "value": "oklch(0.59 0.15 153)",
        "role": "primary action",
        "usage": "Start, export, confirm, active guardrail, and safe contract states."
      },
      "lf-green-hover": {
        "value": "oklch(0.66 0.16 153)",
        "role": "primary action hover",
        "usage": "Hover and active lift for primary buttons and safe affordances."
      },
      "lf-green-deep": {
        "value": "oklch(0.37 0.105 155)",
        "role": "quiet green emphasis",
        "usage": "Section kickers, inline confidence labels, and dense UI emphasis."
      },
      "lf-amber": {
        "value": "oklch(0.78 0.16 63)",
        "role": "calibration highlight",
        "usage": "Color-contract labels, rail numbers, and color science explanation."
      },
      "lf-rose": {
        "value": "oklch(0.62 0.17 346)",
        "role": "secondary proof accent",
        "usage": "Rare profile-family or proof accents. Do not use as a general brand color."
      },
      "lf-sky": {
        "value": "oklch(0.65 0.1 214)",
        "role": "runtime and preview accent",
        "usage": "Browser capability, preview, and technical proof accents."
      },
      "lf-hero-ink": {
        "value": "oklch(0.97 0.014 86)",
        "role": "text on photography",
        "usage": "Hero copy, photographic overlays, and dark comparison panels."
      }
    },
    "typography": {
      "display": {
        "fontFamily": "Geist Sans, ui-sans-serif, system-ui, sans-serif",
        "fontSize": "clamp(3.05rem, 10vw, 6.8rem)",
        "fontWeight": 860,
        "lineHeight": 0.9,
        "usage": "Brand wordmarks and one central page idea."
      },
      "headline": {
        "fontFamily": "Geist Sans, ui-sans-serif, system-ui, sans-serif",
        "fontSize": "clamp(2.35rem, 5vw, 3.4rem)",
        "fontWeight": 830,
        "lineHeight": 1.04,
        "usage": "Major section propositions."
      },
      "title": {
        "fontFamily": "Geist Sans, ui-sans-serif, system-ui, sans-serif",
        "fontSize": "1.46rem",
        "fontWeight": 760,
        "lineHeight": 1.15,
        "usage": "Panel titles, proof points, and compact component headings."
      },
      "body": {
        "fontFamily": "Geist Sans, ui-sans-serif, system-ui, sans-serif",
        "fontSize": "1.03rem",
        "fontWeight": 400,
        "lineHeight": 1.65,
        "maxMeasure": "75ch",
        "usage": "Plain explanatory copy."
      },
      "label": {
        "fontFamily": "Geist Sans, ui-sans-serif, system-ui, sans-serif",
        "fontSize": "0.76rem",
        "fontWeight": 780,
        "lineHeight": 1.2,
        "letterSpacing": "normal",
        "textTransform": "uppercase",
        "usage": "Kickers and short contract group labels."
      }
    },
    "radii": {
      "mark": "5px",
      "control": "8px",
      "panel": "8px",
      "pill": "999px"
    },
    "spacing": {
      "hairline": "1px",
      "chip-gap": "7px",
      "control-gap": "12px",
      "content-gap": "clamp(28px, 5vw, 72px)",
      "section-block": "clamp(58px, 8vw, 112px)",
      "section-inline": "clamp(18px, 6vw, 88px)"
    },
    "elevation": {
      "photo-panel": {
        "boxShadow": "0 24px 80px oklch(0.18 0.018 76 / 0.18)",
        "usage": "Large preview and comparison panels only."
      },
      "flat-control": {
        "boxShadow": "none",
        "usage": "Default for controls, lists, chips, and dense product UI."
      }
    },
    "motion": {
      "standard-hover": {
        "duration": "180ms",
        "easing": "cubic-bezier(0.22, 1, 0.36, 1)",
        "properties": ["transform", "background-color", "border-color", "color"]
      },
      "reduced-motion": {
        "rule": "Respect prefers-reduced-motion and remove nonessential movement."
      }
    },
    "breakpoints": {
      "compact": "max-width: 720px",
      "singleColumn": "max-width: 1100px",
      "midHero": "1101px to 1320px",
      "narrowTitle": "max-width: 420px"
    }
  },
  "componentRecipes": {
    "buttonPrimary": {
      "backgroundColor": "{colors.lf-green}",
      "textColor": "{colors.lf-ink}",
      "border": "1px solid {colors.lf-green}",
      "borderRadius": "{radii.control}",
      "minHeight": "46px",
      "padding": "12px 17px",
      "hover": "{motion.standard-hover}",
      "useFor": ["start", "export", "confirm", "safe primary action"]
    },
    "buttonSecondary": {
      "backgroundColor": "oklch(0.16 0.018 76 / 0.48)",
      "textColor": "{colors.lf-hero-ink}",
      "border": "1px solid oklch(0.92 0.018 86 / 0.22)",
      "borderRadius": "{radii.control}",
      "minHeight": "46px",
      "padding": "12px 17px",
      "useFor": [
        "source link",
        "secondary route",
        "photographic overlay action"
      ]
    },
    "contractChip": {
      "backgroundColor": "oklch(0.16 0.018 76 / 0.54)",
      "textColor": "oklch(0.94 0.014 86)",
      "border": "1px solid oklch(0.92 0.018 86 / 0.16)",
      "borderRadius": "{radii.pill}",
      "padding": "7px 10px",
      "minHeight": "30px",
      "contentRule": "Show resolved safety facts with text plus icon when selected or verified."
    },
    "surfacePanel": {
      "backgroundColor": "oklch(0.18 0.02 76)",
      "textColor": "{colors.lf-hero-ink}",
      "borderRadius": "{radii.panel}",
      "border": "1px solid oklch(0.95 0.018 86 / 0.12)",
      "useFor": ["image comparison", "dark preview", "contract explanation"]
    },
    "comparePanel": {
      "role": "signature motif",
      "requiredElements": [
        "real photograph",
        "vertical split",
        "circular handle",
        "paired labels"
      ],
      "visualRules": [
        "Use the photo as the depth source.",
        "Keep the split line crisp.",
        "Do not use the compare panel when there is no real before and after state."
      ]
    },
    "contractRail": {
      "role": "safety explanation motif",
      "requiredElements": [
        "ordered steps or verified chips",
        "actual transform name",
        "visible compatibility state"
      ],
      "visualRules": [
        "Use amber for rail numbering or calibration labels.",
        "Every rail item must map to a real transform or safety gate.",
        "Do not treat it as a generic timeline."
      ]
    }
  },
  "rules": {
    "do": [
      "Use warm OKLCH neutrals from the Lab Paper and Darkroom Ink families.",
      "Reserve Lab Green for primary action, export-safe states, and active guardrail states.",
      "Use real image material for RAW, preview, LUT, compare, and export surfaces.",
      "Expose camera-log LUT work as scene-referred preview and export, not display sRGB followed by LUT application.",
      "Explain unsafe states with direct copy and fail closed.",
      "Use rails, numbered rows, chips, and hairlines to explain workflow sequence.",
      "Keep product controls denser than marketing sections while retaining the same color and contract language."
    ],
    "dont": [
      "Do not mimic DaVinci Resolve with dense dark panels, nodes, scopes, and unlimited grading controls.",
      "Do not add hero metric blocks, repeated icon-card grids, or centered template stacks.",
      "Do not use purple gradients, gradient text, decorative orbs, bokeh blobs, or default glassmorphism.",
      "Do not use colored side stripes on cards, list items, callouts, or alerts.",
      "Do not use pure black, pure white, or category-reflex dark blue tool styling.",
      "Do not describe the default camera-log LUT path as display sRGB followed by a LUT.",
      "Do not silently render mismatched gamma, log, gamut, or LUT output choices.",
      "Do not leave template attribution, placeholder demo widgets, or component-gallery copy on user-facing pages."
    ]
  }
}