{
  "meta": {
    "name": "Sajtguard / Monochrome Precision",
    "slug": "sajtguard-monochrome",
    "source": [
      "https://www.clutch.security/",
      "reference/clutch-desktop.png",
      "reference/clutch-mobile.png"
    ],
    "captured": "2026-10-28",
    "medium_of_origin": "website",
    "not_copied": [
      "Clutch logo and circular C emblem",
      "PP Radio Grotesk proprietary font",
      "Customer logos, awards, testimonials and certifications",
      "Reference illustrations and source code"
    ]
  },
  "soul": {
    "one_line": "White rails, black and gray headlines, machined metal objects and a single blue light cut.",
    "adjectives": [
      "monochrome",
      "precise",
      "spacious",
      "technical"
    ],
    "lineage": "Swiss web typography and industrial product illustration",
    "read_distance": "desk",
    "energy": {
      "density": 3,
      "variance": 3,
      "contrast": 8,
      "warmth": 2
    }
  },
  "palette": {
    "colors": [
      {
        "role": "ground",
        "hex": "#ffffff",
        "name": "pure white"
      },
      {
        "role": "ink",
        "hex": "#000000",
        "name": "absolute black"
      },
      {
        "role": "quiet",
        "hex": "#c9c9c9",
        "name": "light neutral gray"
      },
      {
        "role": "muted",
        "hex": "#6e6e6e",
        "name": "medium neutral gray"
      },
      {
        "role": "line",
        "hex": "#efefef",
        "name": "hairline gray"
      },
      {
        "role": "accent",
        "hex": "#004dff",
        "name": "electric blue"
      },
      {
        "role": "category-cookie",
        "hex": "#e6c5f7",
        "name": "light lavender"
      },
      {
        "role": "category-leak",
        "hex": "#d9e4ff",
        "name": "icy blue"
      }
    ],
    "coverage": {
      "ground": 92,
      "ink": 3,
      "quiet": 2,
      "muted": 1,
      "line": 1,
      "accent": 0.5,
      "category-cookie": 0.2,
      "category-leak": 0.3
    },
    "mode": "light monochrome with sparse categorical accents",
    "banned": [
      "No large tinted hero backgrounds",
      "No rainbow gradients",
      "No green/lime brand accents",
      "No equal-area multicolor card grids"
    ]
  },
  "type": {
    "families": [
      {
        "role": "display and body",
        "family": "Inter Variable",
        "fallback": "'Helvetica Neue', Arial, sans-serif",
        "weights": [
          400,
          500,
          600
        ],
        "licence_risk": "SIL OFL included. Intentional substitute for measured PP Radio Grotesk; no proprietary font copied."
      }
    ],
    "scale": {
      "display_to_body_ratio": "4.25:1 at desktop; 3.4:1 relative to 20px hero supporting copy",
      "steps": 8,
      "max_sizes_per_frame": 5
    },
    "treatment": {
      "display_tracking": "-1% measured reference; subhead/body -2.5% where needed for optical match",
      "body_leading": "1.5; hero subtitle 1.4",
      "case": "sentence case; uppercase only category/eyebrow",
      "measure": "supporting paragraphs typically 40-65 characters per line",
      "numerals": "lining; counts set without decorative treatment"
    }
  },
  "space": {
    "grid": "1124px centered rail at 1440px, 1:1 product splits and three-column explanatory sections",
    "margin_pct": "10.97% outside rail at 1440px; 3.08% at 390px",
    "gutter_pct": "7.12% of rail for 80px desktop inset; approximately 6.5% mobile inset",
    "alignment": "centered hero and transitions; left-aligned feature copy and product data",
    "rhythm": "78px nav, hero starts y140 desktop/y120 mobile, 80px section inset",
    "negative_space": "Hero is dominated by white; headline, subtitle and one isolated central object. No hero card grid.",
    "safe_area": {
      "desktop": "1124px rail inside 1440px canvas",
      "mobile": "12px outer rails, 24-25px content inset"
    }
  },
  "surface": {
    "texture": {
      "kind": "grayscale grain on a radial orbital plane",
      "opacity": "0.2 in original Sajtguard SVG implementation; inferred, not a reference measurement",
      "scale": "fine grain, SVG fractal noise frequency .85",
      "stacking_order": "under metal shield and orbital tokens"
    },
    "edges": "1px light gray rails; 6px button corners; 6-8px miniature product-panel corners",
    "elevation": "Only primary action and metal illustration carry visible depth; panels have negligible shadow",
    "imagery": "Original beveled metal shield, black elliptical icon discs, monochrome metal blocks; no stock photography",
    "iconography": "Original 1.7px outline symbols with consistent 24-unit viewBox"
  },
  "signatures": [
    {
      "move": "Gray-black statement",
      "how": "At least one muted phrase and one black phrase share the same centered display scale; headline is 4.25x body.",
      "when": "Hero and key tool titles",
      "never": "Do not color the entire heading blue."
    },
    {
      "move": "Rail and white field",
      "how": "Two 1px rails enclose approximately 78% of a 1440px viewport, with section insets near 7% of rail.",
      "when": "Full page",
      "never": "Do not replace the rail with a rounded floating page card."
    },
    {
      "move": "Orbital industrial object",
      "how": "One central metal object is surrounded by many small black discs; art width is roughly 70% of desktop rail.",
      "when": "Hero",
      "never": "Do not reuse the reference emblem or vendor logos."
    },
    {
      "move": "Alternating evidence splits",
      "how": "1:1 text/product compositions alternate sides; product panels use smaller type and hairline structure.",
      "when": "Feature sequence",
      "never": "Do not collapse desktop features into identical centered tiles."
    },
    {
      "move": "Compact black action",
      "how": "Button height is approximately 2.8x label size, corner radius near 15% of button height.",
      "when": "Primary navigation and major next steps",
      "never": "Do not use oversized pill CTAs."
    },
    {
      "move": "Restrained category accents",
      "how": "Blue, lavender and ice appear on small labels totaling much less area than black text.",
      "when": "Feature categories and uncertain status",
      "never": "Do not turn the accents into large section backgrounds."
    }
  ],
  "weird_move": {
    "what": "A single blue spectral cut",
    "how": "A diagonal blue/black beam interrupts the white system once between approach and setup; it occupies about one-third of rail height in that transition.",
    "why": "One concentrated physical-looking anomaly prevents the sparse layout becoming a generic white SaaS page."
  },
  "archetypes": [
    {
      "id": "orbital-hero",
      "purpose": "Introduce the system",
      "anatomy": "Centered headline/subtitle above one metal orbital scene",
      "content_shape": "Three short headline phrases; two supporting lines; one image"
    },
    {
      "id": "evidence-split",
      "purpose": "Explain one capability",
      "anatomy": "Half copy, half miniature product view, alternating on desktop",
      "content_shape": "One label, two-line heading, four short list entries"
    },
    {
      "id": "three-principles",
      "purpose": "Explain method",
      "anatomy": "One title over three left-aligned columns",
      "content_shape": "Three headings and 35-50 words per column"
    },
    {
      "id": "report-workspace",
      "purpose": "Read and act on evidence",
      "anatomy": "Title/actions, demo notice, four counters, tabs and filters, record list",
      "content_shape": "Bounded imported records; no arbitrary target markup"
    },
    {
      "id": "style-manual",
      "purpose": "Carry the system forward",
      "anatomy": "Section numbers, palette specimens, type specimens, tables and component rows",
      "content_shape": "Measured tokens plus explicit substitutions"
    }
  ],
  "motion": {
    "easing": "cubic-bezier(.16,1,.3,1), implementation choice",
    "durations": "200ms action hover; 900-1100ms initial hero arrival; inferred rather than extracted",
    "entrances": "15px rise and fade on hero only; no required scroll reveal to read content",
    "never_moves": "Evidence text, tables, coverage statuses and imported data",
    "reduced_motion": "Disable animation/transitions and smooth scrolling"
  },
  "voice": {
    "register": "Concrete Swedish, technical facts explained in plain language",
    "sentence_length": "Short headlines; one idea per sentence",
    "headline_shape": "Repeated short noun phrase with a full stop",
    "banned_words": [
      "100% säker",
      "garanterat skydd",
      "bevisat intrång without evidence",
      "hacked without a verified result"
    ]
  },
  "bans": [
    "Never copy Clutch logos or proprietary assets.",
    "Never invent clients, certifications or testimonials.",
    "Never use green/lime as the brand accent.",
    "Never set large display headings in a serif.",
    "Never turn the hero into a tinted gradient background.",
    "Never add a second spectral transition.",
    "Never use huge rounded pill actions.",
    "Never hide content until a scroll animation runs.",
    "Never encode status through color alone.",
    "Never render imported report fields with innerHTML.",
    "Never imply the browser demo performed a live scan.",
    "Never load fonts from a third-party service at runtime."
  ],
  "tests": [
    {
      "id": "palette",
      "check": "All eight reference-derived palette values are present in tokens.css.",
      "fail_looks_like": "The implementation violates this explicit source/measurement contract.",
      "auto": true
    },
    {
      "id": "local-font",
      "check": "A local OFL Inter variable font and its license are bundled; no remote font imports.",
      "fail_looks_like": "The implementation violates this explicit source/measurement contract.",
      "auto": true
    },
    {
      "id": "container",
      "check": "Desktop rail is 1124px and navigation maximum width is 1156px.",
      "fail_looks_like": "The implementation violates this explicit source/measurement contract.",
      "auto": true
    },
    {
      "id": "type-scale",
      "check": "Display/body ratio is 68/16 = 4.25 and section heading is 56px.",
      "fail_looks_like": "The implementation violates this explicit source/measurement contract.",
      "auto": true
    },
    {
      "id": "centered-hero",
      "check": "Hero has centered text and exactly one original orbital illustration.",
      "fail_looks_like": "The implementation violates this explicit source/measurement contract.",
      "auto": true
    },
    {
      "id": "hairline-rails",
      "check": "The rail has 1px left and right borders using the line token.",
      "fail_looks_like": "The implementation violates this explicit source/measurement contract.",
      "auto": true
    },
    {
      "id": "compact-actions",
      "check": "Primary button uses the 6px radius token and a restrained dark gradient.",
      "fail_looks_like": "The implementation violates this explicit source/measurement contract.",
      "auto": true
    },
    {
      "id": "responsive",
      "check": "Both 800px and 500px layout adaptations are present.",
      "fail_looks_like": "The implementation violates this explicit source/measurement contract.",
      "auto": true
    },
    {
      "id": "reduced-motion",
      "check": "Reduced-motion explicitly disables animation and smooth scrolling.",
      "fail_looks_like": "The implementation violates this explicit source/measurement contract.",
      "auto": true
    },
    {
      "id": "own-marks",
      "check": "Product HTML references no Clutch assets, customer logos or proprietary font.",
      "fail_looks_like": "The implementation violates this explicit source/measurement contract.",
      "auto": true
    },
    {
      "id": "body-contrast",
      "check": "Muted body text and blue accent both exceed 4.5:1 against white.",
      "fail_looks_like": "The implementation violates this explicit source/measurement contract.",
      "auto": true
    },
    {
      "id": "single-spectrum",
      "check": "The home page contains exactly one spectral-blue transition illustration.",
      "fail_looks_like": "The implementation violates this explicit source/measurement contract.",
      "auto": true
    }
  ],
  "reconstruction": {
    "attempted": true,
    "gaps_found": [
      "Initial headline tracking was -4.5%; corrected to measured -1%.",
      "Grain filter initially produced a rectangular edge; composited to source alpha.",
      "Reference font is proprietary; OFL substitute retained as an explicit difference.",
      "Central emblem and customer marks deliberately replaced with original Sajtguard art/audience labels."
    ],
    "passes": 2
  },
  "uncertainty": [
    {
      "property": "palette.coverage",
      "confidence": 0.55,
      "reason": "Approximate visible-area proportions, not pixel segmentation."
    },
    {
      "property": "motion timings and SVG lighting/noise",
      "confidence": 0.6,
      "reason": "Original implementation choices; reference animation was observed but not source-copied."
    },
    {
      "property": "exact glyph geometry",
      "confidence": 0.65,
      "reason": "Inter is a deliberate licensed substitute for PP Radio Grotesk."
    },
    {
      "property": "similarity percentage",
      "confidence": 0,
      "reason": "No defensible 95% similarity score is claimed. Composition measured and compared in browser."
    }
  ]
}