{
  "name": "Cellect",
  "version": "1.0",
  "canonical": "https://www.cellect.ai/brand",
  "colors": {
    "paper": "#ECEAE3",
    "ink": "#14161A",
    "accent": "#BB4D36"
  },
  "typography": {
    "sans": {
      "family": "IBM Plex Sans",
      "weights": [
        400,
        500,
        600
      ]
    },
    "mono": {
      "family": "IBM Plex Mono",
      "weights": [
        400,
        500,
        600
      ],
      "uses": [
        "wordmark geometry",
        "product and brand lines",
        "labels",
        "data"
      ]
    },
    "logotype": {
      "family": "IBM Plex Mono",
      "weight": 600,
      "case": "lower",
      "advanceEm": 0.6,
      "setWidthEm": 4.2,
      "trackingEm": 0,
      "kerning": "none",
      "inkEm": {
        "left": 0.067,
        "right": 4.129,
        "width": 4.062
      },
      "ascenderEm": 0.74,
      "xHeightEm": 0.516,
      "overshootEm": 0.012,
      "stemEm": 0.128,
      "inkGapsEm": {
        "ce": 0.12,
        "el": 0.127,
        "ll": 0.143,
        "le": 0.126,
        "ec": 0.122,
        "ct": 0.106
      },
      "delivery": "outlines; never retype"
    },
    "brandLine": {
      "text": "FUND BUILD BOOK",
      "family": "IBM Plex Mono",
      "weight": 600,
      "case": "upper",
      "trackingEm": 0.097
    }
  },
  "motion": {
    "inkCount": 1,
    "outerRing": "fixed",
    "easing": "calm; no bounce or overshoot",
    "reducedMotion": "required",
    "states": [
      "idle",
      "listening",
      "thinking",
      "speaking"
    ]
  },
  "mark": {
    "smallSizeCutMaxPx": 20
  },
  "productHierarchy": {
    "master": "Cellect Fi",
    "brandLine": "Fund Build Book",
    "expression": "brand-line lockup",
    "logoExpressions": [
      "Cellect",
      "Cellect Fi",
      "Cellect / Fund Build Book"
    ]
  },
  "interactions": {
    "entry": "thin the outer ring, visor, and divisions continuously from the mark into idle",
    "states": [
      "idle",
      "listening",
      "thinking",
      "speaking"
    ]
  },
  "assets": {
    "mark": "/assets/brand/cellect/cellect-mark.svg",
    "markReversed": "/assets/brand/cellect/cellect-mark-paper.svg",
    "wordmark": "/assets/brand/cellect/cellect-wordmark.svg",
    "fiWordmark": "/assets/brand/cellect/cellect-fi-wordmark.svg",
    "fundBuildBookWordmark": "/assets/brand/cellect/cellect-fund-build-book-wordmark.svg",
    "logo": "/assets/brand/cellect/cellect-lockup.svg",
    "fi": "/assets/brand/cellect/cellect-fi.svg",
    "fiSmall": "/assets/brand/cellect/cellect-fi-small.svg",
    "fundBuildBook": "/assets/brand/cellect/cellect-fund-build-book.svg",
    "faviconIco": "/assets/brand/cellect/cellect-favicon.ico",
    "favicon16": "/assets/brand/cellect/cellect-favicon-16.png",
    "favicon32": "/assets/brand/cellect/cellect-favicon-32.png",
    "favicon48": "/assets/brand/cellect/cellect-favicon-48.png",
    "appleTouchIcon180": "/assets/brand/cellect/cellect-apple-touch-icon-180.png",
    "appIcon192": "/assets/brand/cellect/cellect-app-icon-192.png",
    "appIcon512": "/assets/brand/cellect/cellect-app-icon-512.png",
    "appIconMaskable512": "/assets/brand/cellect/cellect-app-icon-maskable-512.png",
    "appIconArchive": "/assets/brand/cellect/cellect-app-icons.tar.gz"
  },
  "references": {
    "productExplainer": "https://www.cellect.ai/products/fi/explainer",
    "pageConventions": "/brand#pages",
    "interfaceSpecimens": "/brand#interface",
    "pageSpecimen": "/brand/example"
  },
  "pageConventions": [
    {
      "name": "Rail",
      "do": "Connect a long narrative with one thin rail. Align section starts and content.",
      "dont": "Competing rails, decorative branches or sticky behavior that obstructs reading."
    },
    {
      "name": "Headers",
      "do": "Left-align short section names; a tick is optional.",
      "dont": "Numbering ordinary web sections, repeating labels or showing progress markers that do not track the visible section."
    },
    {
      "name": "Scale",
      "do": "Give the main idea scale and keep supporting text readable.",
      "dont": "Oversizing every statement or shrinking the body to fit more copy."
    },
    {
      "name": "Pacing",
      "do": "Keep one main thought and its evidence together. Align comparable blocks; let content determine section height.",
      "dont": "Repeated explanations, decorative staggering, stranded metrics or empty bands beneath short content."
    },
    {
      "name": "Scrolling",
      "do": "Use sticky section orientation and gentle section snapping. Land at the section boundary without a cropped fragment of the previous section. Show a down arrow on the opening screen.",
      "dont": "Hidden scroll affordances, trapped scrolling or fixed-height sections that cut off content."
    },
    {
      "name": "Keyboard",
      "do": "Keep Arrow keys, Space, Page Up/Down and Home/End native. Offer Alt + ↑/↓ to move and focus between sections; preserve control keys and reduced motion.",
      "dont": "Hijacking reading keys, skipping long-section content, moving without focus or trapping Tab."
    },
    {
      "name": "First screen",
      "do": "Fit the complete hero—navigation, headline, supporting copy, action and scroll cue—inside the opening viewport. Size by height as well as width; test short laptops and phone landscape.",
      "dont": "Width-only hero type, clipped final lines or a call to action below the fold. Allow natural scrolling for enlarged text and unusually constrained windows rather than hiding content."
    },
    {
      "name": "Hierarchy",
      "do": "Keep the title larger than section headings. Let specimens lead and keep specifications nearby.",
      "dont": "Chapter titles competing with the cover or tiny samples in oversized panels."
    },
    {
      "name": "Mobile",
      "do": "Put the heading and context before long figures in both mobile layout and source order. Recompose diagrams, keep text legible and touch targets at least 44px.",
      "dont": "Scaled-down desktop diagrams, delayed explanations, oversized hero gaps or sticky headers covering content."
    },
    {
      "name": "Chips",
      "do": "Use chips for filters, selections or meaningful status.",
      "dont": "Decorative pills around capabilities, slogans or sentences."
    },
    {
      "name": "Blocks",
      "do": "Group distinct features, choices or outputs in simple blocks.",
      "dont": "A card around every paragraph or the same card grid throughout."
    },
    {
      "name": "Lines",
      "do": "Use thin borders to clarify relationships and boundaries.",
      "dont": "Dividing every paragraph or adding lines for texture."
    },
    {
      "name": "Figures",
      "do": "Give each figure a distinct purpose. Pair verified outcomes with supporting product evidence.",
      "dont": "Repeated prose in diagram form, unsupported outcomes or internal counts that do not help the reader."
    },
    {
      "name": "Screenshots",
      "do": "Crop to the task with readable content and sensible margins.",
      "dont": "Clipped text, tiny dashboards or copy that repeats the screenshot."
    },
    {
      "name": "Motion",
      "do": "Animate a meaningful process: assemble, check, approve, return. Use stable framing and hold the completed state long enough to read.",
      "dont": "Busy ambient effects, arbitrary morphs or motion that restarts before the outcome can be understood."
    },
    {
      "name": "Copy",
      "do": "Use short, self-sufficient headings. Every section adds a new fact or advances the story.",
      "dont": "Repeated captions, filler taglines or agents in every sentence."
    },
    {
      "name": "Presence",
      "do": "Use the wordmark confidently. Give the mark a purpose.",
      "dont": "Automatically adding the mark to every logo, hero or screen."
    }
  ],
  "reviewChecks": [
    {
      "issue": "Rule compliance concealed weak whole-page composition",
      "rule": "Judge rendered scroll sequences separately from token and behavior compliance",
      "check": "Capture desktop and phone viewport slices; inspect gaps, paired columns, case-study evidence and the close before scoring"
    },
    {
      "issue": "Mobile diagrams appeared before the reader knew their purpose",
      "rule": "Put context before long figures in visual and source order",
      "check": "At phone width the section heading appears before the diagram; text remains legible without sideways scrolling"
    },
    {
      "issue": "Sparse paired columns, decorative offsets and an oversized close created dead space",
      "rule": "Align comparable blocks, compose metrics with their story and size the close to its content",
      "check": "Review complete viewports; no stranded evidence, unexplained progress boxes or persistent prototype controls"
    },
    {
      "issue": "Width-sized hero overflowed an ordinary laptop screen",
      "rule": "Budget the complete first screen against the available viewport height",
      "check": "At 1366×768, 1440×900, 1920×1080 and phone portrait/landscape, the whole headline, CTA and down arrow are visible; enlarged text remains reachable without clipping"
    },
    {
      "issue": "Scroll narratives lacked an explicit keyboard convention",
      "rule": "Preserve native reading keys and provide optional focused section shortcuts",
      "check": "Alt + Up/Down moves between sections; Tab reaches content; controls retain their keys; long sections stay readable and reduced motion is instant"
    },
    {
      "issue": "Mobile downloads lost file formats and evidence labels collided with amounts",
      "rule": "Preserve essential metadata at every breakpoint and separate labels from their evidence",
      "check": "Download format is visible on mobile; labels and linked amounts have distinct lines"
    },
    {
      "issue": "Rules were illustrated with slogans rather than evidence",
      "rule": "Demonstrate the rule with real product captures and explicitly labeled sample records",
      "check": "Linked amounts match source references; cropped captures remain inspectable at full size"
    },
    {
      "issue": "Motion could only be watched repeatedly",
      "rule": "Provide pause, replay and a static reduced-motion specimen",
      "check": "Pause freezes the specimen, replay restarts it and reduced motion never animates"
    },
    {
      "issue": "Similar asset names obscured which lockup to download",
      "rule": "Name downloads by composition: wordmark, mark + wordmark, product and size",
      "check": "A reader can select the correct asset without opening several files"
    },
    {
      "issue": "Chapter titles competed with the cover",
      "rule": "Title > section > specimen label; the actual specimen may be large",
      "check": "Compare computed sizes and a screenshot with adjacent heading levels"
    },
    {
      "issue": "Tiny type samples floated in tall empty panels",
      "rule": "Specimen scale must survive the CSS cascade; spacing follows the content",
      "check": "Inspect rendered Sans and Mono samples, not only stylesheet values"
    },
    {
      "issue": "Dropdown navigation hid destinations and felt detached",
      "rule": "Use a quiet desktop index with current location; a full-screen mobile contents panel",
      "check": "Open, select, close and keyboard-navigate on desktop and narrow screens"
    },
    {
      "issue": "Repeated frames competed with the demonstrated interface",
      "rule": "Frame the object only where meaningful; pair comparisons with a shared row rule",
      "check": "Remove borders that do not express a relationship"
    },
    {
      "issue": "Readers could miss that the first screen scrolls",
      "rule": "Provide an opening down arrow, sticky orientation and gentle section snapping",
      "check": "Arrow works; long sections remain reachable; sticky headers never cover anchored content"
    },
    {
      "issue": "Marketing pacing became either dense text or empty bands",
      "rule": "One main thought plus useful evidence at a time; concise copy without dead space",
      "check": "Review whole viewports, not isolated components"
    },
    {
      "issue": "Desktop review alone missed mobile composition",
      "rule": "Verify 375, 390 and 430px widths, landscape and reduced motion",
      "check": "No page overflow, clipped text, inaccessible links or touch targets below 44px"
    }
  ],
  "motionInspection": {
    "controls": [
      "pause",
      "replay",
      "reduced motion"
    ],
    "systemPreference": "Always honor prefers-reduced-motion",
    "still": "Static approved end state"
  },
  "keyboard": {
    "reading": "Native Arrow keys, Space, Page Up/Down, Home/End",
    "sections": "Alt + ArrowUp / ArrowDown moves focus and scrolls to the previous / next section",
    "controls": "Do not intercept shortcuts inside interactive controls or open menus",
    "reducedMotion": "Instant section movement"
  },
  "motionReferences": [
    {
      "path": "https://staging.www.cellect.ai/proto/p37",
      "status": "Animation explicitly liked; requested draw-package subject instead of invoice",
      "date": "2026-09-08"
    },
    {
      "path": "https://staging.www.cellect.ai/proto/p41",
      "status": "Promising direction; requested selectively animated variants",
      "date": "2026-09-08"
    },
    {
      "path": "https://staging.www.cellect.ai/proto/p45",
      "status": "Promising direction; package and lender round-trip motion",
      "date": "2026-09-08"
    }
  ],
  "illustrations": {
    "version": 1,
    "canonical": "https://www.cellect.ai/brand#illustrations",
    "approved": [
      {
        "id": "m1",
        "name": "Set-out",
        "renderer": "SET_OUT",
        "use": "Coordination and a shared reference; headline-supporting conceptual motion",
        "intro": false,
        "component": "SetOut",
        "example": "https://staging.www.cellect.ai/proto/p57#p57-on-one-set-of-numbers"
      },
      {
        "id": "g3a",
        "name": "Intake",
        "renderer": "ABSTRACT.convergence",
        "use": "Document intake becoming one ledger",
        "intro": false
      },
      {
        "id": "g3c",
        "name": "Cost curve",
        "renderer": "ABSTRACT.curve",
        "use": "Budget, actuals and forecast",
        "intro": false
      },
      {
        "id": "g3e",
        "name": "Three parties",
        "renderer": "ABSTRACT.register",
        "use": "One source shared by sponsor, team and investors",
        "intro": false
      },
      {
        "id": "k1",
        "name": "Set-back",
        "renderer": "SITE_WORK.stakes",
        "use": "Completed, active and future development",
        "intro": false
      }
    ],
    "notApproved": [
      "g3b: tangled wireframe site plan",
      "g3d: literal building section",
      "Other exploratory renderers included in historical source are not approved assets"
    ],
    "tokens": {
      "paper": "#ECEAE3",
      "ink": "#14161A",
      "accent": "#BB4D36",
      "labels": "IBM Plex Mono",
      "headings": "IBM Plex Sans"
    },
    "rules": {
      "do": [
        "Explain a process, relationship or change",
        "Use accent to identify a meaningful active state",
        "Fit complete artwork to its frame and keep labels legible on mobile",
        "Loop calmly, hold the composed frame, provide pause and replay",
        "Honor prefers-reduced-motion with a meaningful still",
        "Use construction details as conceptual language: datum, section cut, junction; keep one dominant idea.",
        "Use the same four-second assembly, hold, and return rhythm across the approved family",
        "Keep legend samples consistent with their line colors and dash patterns",
        "Place labels in clear paper space; do not cross curves, footprint edges, or ground grids"
      ],
      "dont": [
        "Use tangled wireframes",
        "Use literal buildings as filler",
        "Invent financial figures or imply synthetic curves are real performance",
        "Add decorative motion or use multiple accent colors",
        "Add fasteners, hatching, or dimension lines that do not improve the idea.",
        "Let every element move at once or lose the idea in the final still",
        "Render shared information as a tiny node-and-spoke flowchart or a document conveyor",
        "Add an unexplained measurement bracket to a chart or a callout to Set-back"
      ]
    },
    "source": "/assets/brand/cellect/illustrations.tar.gz",
    "integration": "Use Drawing with the approved renderer, id, name, detail and intro flag above. Load IBM Plex Mono as --brand-mono on the canvas and IBM Plex Sans as --brand-sans. Canvas needs an explicit CSS width and height. Pass paused, still and replay props; still must honor prefers-reduced-motion. Renderers use CanvasRenderingContext2D and are framework-independent; drawing.tsx is the React adapter.",
    "setOut": {
      "timing": {
        "loopSeconds": 4,
        "assembleSeconds": 1.5,
        "holdSeconds": 1,
        "returnSeconds": 1.5
      },
      "stroke": {
        "structure": 2,
        "detail": 1,
        "activeConnection": 2.5
      },
      "accent": "One drawn datum and the aligned intersections; do not accent each moving part separately.",
      "placement": "Place beside copy about coordination or one shared reference. On mobile, copy precedes art. Keep complete geometry visible; render the canonical component instead of re-creating it.",
      "motion": "Pause offscreen and in hidden tabs. Provide an accessible pause control. Reduced motion shows the assembled state. Do not speed up to imply urgency.",
      "status": "Joint and Reveal remain studies; Set-out is the selected lead direction."
    },
    "family": {
      "loopSeconds": 4,
      "assembleSeconds": 1.5,
      "holdSeconds": 1,
      "returnSeconds": 1.5,
      "structure": 2,
      "detail": 1,
      "activeConnection": 2.5,
      "notes": [
        "Intake is a physical offset source stack; pages peel into the books. Avoid dashed transfer lanes.",
        "Three parties is one continuous register: BOOKS names the source sheet; sponsor, team, and investors read three positions on it. Carry one accent datum through all three.",
        "Cost curve uses budget, actual, and forecast strokes with a matching legend; avoid unexplained cursor-like marks.",
        "Set-back begins with the surrounding site drawn. The footprint, stakes, and strings carry the idea without a callout.",
        "Use matching line samples for Budget, Actual and Forecast; dashed forecast begins at Today. Synthetic curves are illustrative, never evidence.",
        "Construction details must explain a boundary, junction or datum. Avoid decorative hatching."
      ]
    }
  }
}