{
  "name": "Meeno Zen Design System",
  "version": "1.17",
  "updated": "2026-09-14",
  "guide": "https://meenozen.com/brand/assets/guide.md",
  "canonical": "https://meenozen.com/brand",
  "identity": {
    "wordmarkMinimumWidthPx": 112,
    "iconMinimumPx": 16,
    "wordmarkClearspace": "half the Zen lettering height",
    "iconClearspace": "one quarter of square width"
  },
  "routes": {
    "home": "/",
    "method": "/method",
    "work": "/work",
    "casePattern": "/work/{descriptive-name}",
    "brand": "/brand",
    "assets": "/brand/assets/",
    "futureWriting": "/writing/{descriptive-name}",
    "writing": "/writing",
    "writingArticle": "/writing/{descriptive-name}"
  },
  "colour": {
    "ink": "#17242e",
    "paper": "#f5f1e8",
    "blue": "#155bf5",
    "rust": "#c45b3f",
    "onRust": "#050c10",
    "muted": "#4b555b",
    "evidenceBlue": "#a9c5ff",
    "panel": "#e9e5db",
    "sage": "#d6e1dc",
    "sand": "#ead7be",
    "divider": "#bdb6aa",
    "interactiveInk": "#263e50",
    "onInkSecondary": "#cbd6df",
    "controlOutline": "#52606a",
    "onInkOutline": "#80929f"
  },
  "font": {
    "display": "Fraunces, Georgia, serif",
    "body": "DM Sans, Arial, sans-serif",
    "metadata": "DM Mono, monospace"
  },
  "spacePx": [
    4,
    8,
    16,
    24,
    32,
    48,
    64,
    80,
    112
  ],
  "typePx": {
    "display": [
      64,
      158
    ],
    "section": [
      40,
      88
    ],
    "case": [
      28,
      55
    ],
    "lede": [
      22,
      30
    ],
    "body": [
      16,
      20
    ],
    "control": [
      14,
      16
    ],
    "metadata": [
      12,
      13
    ]
  },
  "lineHeight": {
    "display": 0.9,
    "section": 1.02,
    "case": 1.08,
    "lede": 1.38,
    "body": 1.6
  },
  "layout": {
    "railDesktopPx": 88,
    "railMobilePx": 66,
    "mobileMaxPx": 760,
    "anchorDesktopPx": 24,
    "anchorMobilePx": 16,
    "bodyMeasureCh": [
      45,
      68
    ],
    "detailEdgeDesktopPx": 56,
    "detailEdgeNarrowPx": 12,
    "detailEdgeBreakpointPx": 1000,
    "detailGutter": "clamp(24px, 5.5vw, 88px)",
    "panelInsetPx": [
      16,
      24,
      32
    ]
  },
  "control": {
    "minHeightPx": 44,
    "primaryHeightPx": 48,
    "expandDiameterPx": 44,
    "expandBarWidthPx": 14,
    "expandBarHeightPx": 2,
    "rectangularRadiusPx": 0,
    "select": {
      "source": "app/ui-select.tsx",
      "styles": "app/ui-select.css",
      "nativeSemantics": true,
      "minHeightPx": 52,
      "arrowInsetPx": 16,
      "arrowSizePx": 20,
      "valueToArrowGapPx": 12,
      "paddingInlineStartPx": 16,
      "paddingInlineEndPx": 48,
      "forcedColours": "native appearance; custom icon hidden",
      "verification": [
        "all actual values at narrowest container",
        "arrow edge inset",
        "text reservation",
        "keyboard selection",
        "focus outline",
        "open picker"
      ]
    }
  },
  "motion": {
    "microMs": [
      180,
      250
    ],
    "disclosureMs": [
      360,
      360
    ],
    "ease": "cubic-bezier(.2,.7,.2,1)",
    "sectionNavigation": "single interruptible requestAnimationFrame owner; measured portrait offsets",
    "reducedMotion": "immediate navigation and static state changes",
    "pauseOffscreen": true,
    "collection": {
      "reference": "app/writing/writing-collection.tsx",
      "reorderMs": 620,
      "enterMs": 480,
      "exitMs": 240,
      "enterDelayMs": 100,
      "enterStaggerMs": 45,
      "exitStaggerMs": 25,
      "enterTranslateYPx": 32,
      "exitTranslateYPx": 24,
      "exitRotateDeg": 1,
      "applyFeedbackMs": 200,
      "applyTranslateXPx": 3,
      "ease": "cubic-bezier(.22,1,.36,1)",
      "exitEase": "cubic-bezier(.4,0,1,1)",
      "reducedMotion": "immediate; no card animation or stagger",
      "adoption": "reference values; explicitly adopt and test in each consumer"
    },
    "navigationMs": [
      450,
      850
    ],
    "panelMs": 280,
    "mapTraceMs": 500,
    "mapExpandMs": 360,
    "sharedRuntime": "public/site-motion.js",
    "excludedRoutes": [
      "/work/easy-english/**",
      "/work/cluckin-good/strategy/presenter/**"
    ]
  },
  "performanceTargets": {
    "lcpMs": 2500,
    "inpMs": 200,
    "cls": 0.1,
    "basis": "75th percentile field data; targets, not measured release results"
  },
  "pageRecipes": {
    "home": {
      "headerActions": [
        "Work",
        "Writing",
        "Contact"
      ],
      "chapterNavigation": true,
      "featuredCasesCurrent": 4,
      "selectionIsContentDecision": true,
      "featuredCaseAnatomy": [
        "mark and category",
        "title and introduction",
        "context",
        "contribution",
        "evidence or insight",
        "process",
        "case link and note",
        "expandable detail"
      ]
    },
    "work": {
      "headerActions": [
        "Work",
        "Writing",
        "Contact"
      ],
      "activeLocation": "Work",
      "layout": "featured split card, then responsive collection"
    },
    "case": {
      "h1Px": [
        44,
        88
      ],
      "headerActions": [
        "Work",
        "Writing",
        "Contact"
      ],
      "sections": [
        "context",
        "challenge",
        "what I did",
        "work in practice",
        "results",
        "next case and contact"
      ]
    },
    "method": {
      "pathways": [
        "/method#insights-performance",
        "/method#applied-ai"
      ],
      "phaseDays": [
        [
          1,
          30
        ],
        [
          31,
          60
        ],
        [
          61,
          90
        ]
      ],
      "allPhasesVisibleWithoutJavaScript": true
    },
    "workflow": {
      "h1Px": [
        42,
        72
      ],
      "decorativeEdgeRequired": false,
      "preserveStateOnExpand": true
    },
    "archive": {
      "previewFit": "cover",
      "previewPosition": "top",
      "fullCaptureWidth": "100%",
      "fullCaptureHeight": "auto",
      "rawImageTarget": "_blank",
      "closeIconBoxPx": 18
    },
    "clientDemo": {
      "identity": "client brand, isolated from portfolio styles",
      "submission": "disabled",
      "returnToParentRequired": true
    },
    "guidedResponse": {
      "navigation": [
        "chapters",
        "mode switch",
        "previous/next"
      ],
      "guided": "one section",
      "reading": "full response with active-section tracking",
      "preserveSectionOnModeChange": true,
      "repeatedInstructionBanner": false,
      "help": "one Guide plus accessible contextual explanations",
      "evidenceDetails": [
        "public evidence",
        "proposed scope",
        "conditions",
        "measurement"
      ],
      "disclosureRowMinHeightPx": 48,
      "detailStackBreakpointPx": 760,
      "publicationRequiresSeparateDecision": true,
      "sectionIdentity": "stable identifiers shared by guided, reading, source and presenter views",
      "urlState": [
        "section",
        "mode"
      ],
      "roundTripPreserves": [
        "section",
        "mode"
      ],
      "modeSwitchFocus": "retain focus on the mode control",
      "passiveTrackingMovesFocus": false,
      "observerMayOverrideExplicitNavigation": false,
      "progressMeaning": "position in the response, not completion or approval",
      "presenterTextSizeIndependent": true,
      "presenterViewIsAccessControl": false,
      "staticReadingIncludesEssentialExpandedContent": true
    },
    "writing": {
      "indexRoute": "/writing",
      "detailRoute": "/writing/{descriptive-name}",
      "source": "app/writing/writing-shell.tsx",
      "styles": "app/writing/writing.css",
      "headerActions": [
        "Work",
        "Writing",
        "Contact"
      ],
      "readingMaxWidthPx": 720,
      "contentsStackAtPx": 760,
      "headerStackAtPx": 420,
      "optionalModules": [
        "contents",
        "explanatory graphic",
        "interactive companion",
        "related work"
      ],
      "singleArticle": "one complete feature; no invented inventory",
      "contentContracts": {
        "analysis": [
          "question",
          "argument",
          "evidence",
          "limits"
        ],
        "tutorial": [
          "prerequisites",
          "steps",
          "expected result",
          "recovery"
        ],
        "news": [
          "event date",
          "change",
          "source",
          "relevance"
        ],
        "data": [
          "definitions",
          "source",
          "period",
          "accessible charts"
        ]
      },
      "catalogue": "app/writing/catalogue.ts",
      "hubStyles": "app/writing/writing-hub.css",
      "cover": "same hero artwork; deliberate 3:2 crop; no quote or diagram substitute",
      "pageSize": 12,
      "pagination": "explicit links; URL-backed search, topic, format, sort and page",
      "filterStackMaxPx": 900,
      "cardStackMaxPx": 600,
      "takeaway": "Original useful optional closing download; no fixed count; whole image; single card max 420px",
      "qa": [
        "zero, one and many results",
        "URL restoration",
        "actual-size artwork",
        "source and quotation provenance",
        "blank versus zero",
        "invalid input and export correctness",
        "same-card reorder and filter exit/entry",
        "empty-result recovery and rapid repeated input",
        "keyboard focus and reduced motion",
        "publication-time provenance and genuine ties checked separately"
      ],
      "editorialStyles": "app/writing/writing-editorial.css",
      "editorial": {
        "articleClass": "writing-editorial",
        "singleTakeawayMaxPx": 420,
        "explanationHeadingPx": 25,
        "explanationHeadingLineHeight": 1.2,
        "explanationBodyPx": 18,
        "explanationBodyLineHeight": 1.65,
        "headingGapPx": 14,
        "groupPaddingPx": 24,
        "fieldnoteLabelTrackPx": 120,
        "fieldnoteGapPx": 24,
        "stackMaxPx": 600,
        "transcriptPaddingDesktopPx": [
          32,
          40
        ],
        "transcriptPaddingPhonePx": [
          24,
          20
        ],
        "infographicPlacement": "after supporting explanation at a natural boundary",
        "phoneReference": "whole image plus full-size link and substantive text disclosure",
        "inlineTakeawayFloat": false
      },
      "collectionInteraction": {
        "source": "app/writing/writing-collection.tsx",
        "motionReference": "motion.collection",
        "search": "submit",
        "topic": "immediate link selection",
        "formatAndSort": "explicit apply button",
        "history": "URL state with Back and Forward restoration",
        "scroll": "preserve reading position within available document bounds",
        "noScript": "native GET forms and links"
      }
    },
    "homepageWriting": {
      "source": "app/page.tsx",
      "catalogue": "app/writing/catalogue.ts",
      "position": "after Method, before Career",
      "countMaximum": 2,
      "selection": "latest published entries",
      "chapters": [
        "Expertise",
        "Work",
        "Method",
        "Writing",
        "Career",
        "Contact"
      ],
      "coverAspectRatio": "3:2"
    }
  },
  "format": "Meeno Zen project JSON; not a DTCG interchange file",
  "semanticColour": {
    "textPrimary": "ink",
    "textSecondary": "muted",
    "surfaceReading": "paper",
    "surfaceSupporting": "panel",
    "textOnDark": "paper",
    "textOnRust": "onRust",
    "linkOnLight": "blue",
    "linkOnDark": "evidenceBlue",
    "focusOnLight": "ink",
    "focusOnDark": "evidenceBlue",
    "boundaryOnLight": "controlOutline",
    "boundaryOnDark": "onInkOutline"
  },
  "responsive": {
    "outerGutterDefaultPx": 24,
    "panelInsetMinimumPx": 16,
    "stackedArtworkGapPx": [
      40,
      64
    ],
    "captionGapPx": [
      8,
      16
    ],
    "cardMinimumStartingWidthPx": 280,
    "artworkAndLayoutBreakpointsMatch": true,
    "testBreakpointNeighboursPx": 1,
    "testWidthsPx": [
      320,
      390,
      531,
      760,
      1000,
      1440,
      1920,
      2327,
      2560
    ],
    "testShortLandscape": true
  },
  "componentContract": {
    "required": [
      "purpose",
      "anatomy",
      "variants",
      "content limits",
      "states",
      "semantics",
      "keyboard",
      "responsive modes",
      "recovery",
      "source",
      "tests"
    ],
    "statesToConsider": [
      "default",
      "hover",
      "focus",
      "selected",
      "expanded",
      "loading",
      "empty",
      "error",
      "offline",
      "partial",
      "stale",
      "disabled",
      "read-only",
      "success"
    ],
    "nativeElementsFirst": true,
    "nestedInteractiveTargetsAllowed": false,
    "siteNavigation": {
      "source": "app/site-navigation.tsx",
      "data": "app/site-navigation-data.mjs",
      "items": [
        "Work",
        "Writing",
        "Contact"
      ],
      "destinations": [
        "/work",
        "/writing",
        "/#contact"
      ],
      "home": "wordmark",
      "activeExact": "page",
      "activeDescendant": "location",
      "stackMaxPx": 420,
      "targetMinPx": 44,
      "exceptions": [
        "client-branded demonstrations",
        "presenter windows"
      ],
      "footer": [
        "Work",
        "Writing",
        "Design system"
      ],
      "pageNavigationLabel": "On this page",
      "pageNavigationPurpose": "anchors within the homepage; distinct from masthead collection destinations"
    }
  },
  "decisionSummary": {
    "reuse": [
      "evidence card",
      "disclosure"
    ],
    "closedView": [
      "option",
      "role",
      "recommendation",
      "decisive reason",
      "material blocker when present"
    ],
    "expandedView": [
      "evidence",
      "proposed scope",
      "conditions",
      "evaluation"
    ],
    "decisionStates": [
      "compare",
      "test",
      "proceed subject to conditions",
      "defer",
      "reject"
    ],
    "evidenceStatusSeparateFromDecision": true,
    "coreDecisionVisibleOnMobile": true,
    "multipleOpenForComparison": true,
    "status": "design contract with a generic guide specimen; receiving implementations require QA"
  },
  "crossFormat": {
    "manifestRequires": [
      "content release",
      "guide version",
      "output names",
      "checks performed"
    ],
    "preserve": [
      "facts",
      "assumptions",
      "labels",
      "source references",
      "calculations"
    ],
    "pdf": [
      "essential expanded evidence",
      "linked contents",
      "bookmarks",
      "embedded fonts",
      "running context",
      "repeated table headers",
      "static instructions"
    ],
    "workbook": [
      "labelled inputs and formulas",
      "before/after cell and formula comparison",
      "explained failed checks",
      "native rendering limits"
    ],
    "exportExistenceProvesCurrency": false,
    "standaloneGraphics": {
      "requires": [
        "subject",
        "main claim",
        "essential scope",
        "useful takeaway",
        "retrievable provenance"
      ],
      "review": [
        "isolated interpretation",
        "quotable claim",
        "display-size reading",
        "brand composition"
      ],
      "captionCannotRepairMisleadingImage": true,
      "responsiveCompositionsPreserveMeaning": true
    }
  },
  "contactBand": {
    "narrowOrder": [
      "label",
      "heading",
      "invitation",
      "primary action",
      "next destination"
    ],
    "widePlacementScopedToBreakpoint": true,
    "utilitySurface": "paper",
    "utilityText": "ink",
    "utilityLinksStackOnNarrow": true,
    "arrows": "library icons in non-shrinking boxes"
  },
  "accessibility": {
    "target": "WCAG 2.2 AA; implementation testing required",
    "reflowWidthCssPx": 320,
    "textEnlargementPercent": 200,
    "normalTextContrastMinimum": 4.5,
    "largeTextContrastMinimum": 3,
    "functionalGraphicContrastMinimum": 3,
    "focusMayBeObscured": false,
    "textSpacingTest": {
      "lineHeight": 1.5,
      "paragraphGapEm": 2,
      "letterSpacingEm": 0.12,
      "wordSpacingEm": 0.16
    },
    "screenReaderVerificationRequiredForClaim": true
  },
  "extensions": {
    "decisionOrder": [
      "reuse",
      "variant",
      "new pattern"
    ],
    "lifecycle": [
      "proposed",
      "trial",
      "accepted",
      "deprecated"
    ],
    "exceptionRequires": [
      "rule",
      "reason",
      "surface",
      "owner",
      "test evidence",
      "review trigger"
    ],
    "specificationOnly": [
      "production forms",
      "analytical dashboards",
      "authenticated tools",
      "localisation",
      "system dark theme",
      "print production"
    ],
    "specificationDoesNotImplyImplementation": true
  },
  "state": {
    "disclosureClosed": "plus",
    "disclosureOpen": "minus",
    "technicalIndicatorPx": 24,
    "focusOnLight": "ink",
    "focusOnDark": "evidenceBlue",
    "modalEscapeCloses": true,
    "modalReturnsFocus": true
  },
  "evidence": {
    "designCaseLayers": ["contribution and evidence", "visual decision story", "dated original archive"],
    "comparisonViewportMustMatch": true,
    "interactiveSpecimensRequireContext": true,
    "localDemoLinksMustBeReplacedBeforePublication": true,
    "categories": [
      "measured",
      "self-reported",
      "delivery count",
      "illustrative",
      "proposed"
    ],
    "numericClaimRequires": [
      "label",
      "scope or period",
      "evidence basis"
    ],
    "fabricatedMetricsAllowed": false
  },
  "planningEvidence": {
    "claimKinds": [
      "supplied fact",
      "researched fact",
      "calculation",
      "assumption",
      "proposal",
      "unknown",
      "observed result"
    ],
    "planningOutputsAreCampaignResults": false,
    "aiContributionFields": [
      "input",
      "prepared work",
      "checks or corrections",
      "human decision"
    ],
    "agentRolesProveExecution": false
  },
  "policy": {
    "baselineTheme": "fixed editorial palette",
    "spatialFieldInPortfolioMethod": false,
    "statusMustMatchEvidence": true,
    "pageRecipesMayDiffer": true,
    "clientDemoKeepsClientIdentity": true,
    "screenshotsPreserveOriginalEvidence": true
  },
  "presenterWindow": {
    "container": "popup requested on direct click with retained window reference",
    "browserPolicyControlsPlacement": true,
    "portfolioBanner": false,
    "returnAction": "focus connected strategy window",
    "blockedAction": "explain and retry",
    "verify": [
      "launch",
      "reuse",
      "blocked",
      "direct entry",
      "disconnected",
      "close",
      "synchronisation"
    ]
  },
  "alignment": {
    "strategy": "shared content-aware grid tracks",
    "mobile": "natural flow without fixed content heights",
    "footerMinimumRowPx": 44
  },
  "exports": {
    "css": "/brand/assets/tokens.css",
    "patterns": "/brand/assets/patterns.json",
    "handoff": "/brand/assets/handoff.md",
    "automaticConsumerMigration": false
  }
}