{
  "$schema": "https://ndcodex.com/schemas/object/v1.json",
  "id": "codex://object/420-systems-from-curiosity-to-system",
  "archive_id": "420-systems-from-curiosity-to-system",
  "slug": "420-systems-from-curiosity-to-system",
  "url": "https://ndcodex.com/codex/420-systems-from-curiosity-to-system/",
  "type": "codex",
  "object_form": null,
  "title": "420 Systems: From Curiosity to System",
  "summary": "A responsive spatial system built around one fixed 420 cell—disciplined enough to structure a product, flexible enough to hold the peculiar.",
  "content_text": "What began as a curiosity became a system.\n\n420 Systems started with a simple question:\n\nCould one optimal surface create enough discipline for a product—without sanding away its personality?\n\nThe answer became a spatial system built around a fixed 420 cell.\n\nThat cell can divide into 210 and 105 derivatives, or combine into 840, 1260, and 1680 compositions. It does not stretch arbitrarily. It cascades, collapses, and recomposes according to the available space.\n\nThe package now includes:\n\na responsive spatial model;\n\ndark, light, and high-contrast themes;\n\nproduction-ready components and states;\n\nmultiple expression modes;\n\napplied examples and product demonstrations;\n\na documented Figma source of truth.\n\nThe rule is consistent. The outcomes do not have to be.\n\nThe system can hold the peculiar.\n\nExplore the system\n\n420 Systems — working system\n\n420 Systems — Figma source library",
  "content_markdown": "# 420 Systems: From Curiosity to System\n\nWhat began as a curiosity became a system.\n\n420 Systems started with a simple question:\n\n> Could one optimal surface create enough discipline for a product—without sanding away its personality?\n\nThe answer became a spatial system built around a fixed 420 cell.\n\nThat cell can divide into 210 and 105 derivatives, or combine into 840, 1260, and 1680 compositions. It does not stretch arbitrarily. It cascades, collapses, and recomposes according to the available space.\n\nThe package now includes:\n\n- a responsive spatial model;\n- dark, light, and high-contrast themes;\n- production-ready components and states;\n- multiple expression modes;\n- applied examples and product demonstrations;\n- a documented Figma source of truth.\n\nThe rule is consistent. The outcomes do not have to be.\n\nThe system can hold the peculiar.\n\n## Explore the system\n\n- [420 Systems — working system](https://420-field-notes.netlify.app)\n- [420 Systems — Figma source library](https://www.figma.com/design/MLeJZCKUw66ERorre3oybM/420-systems?node-id=37-62)",
  "author": {
    "name": "Nathan Davis",
    "designation": "Archive Operator",
    "role": "Archive Operator",
    "avatar": "/media/people/nathan-davis.jpg"
  },
  "contributors": [
    {
      "name": "Nathan Davis",
      "designation": "Archive Operator",
      "role": "Archive Operator",
      "avatar": "/media/people/nathan-davis.jpg"
    }
  ],
  "date_published": "2026-07-21T00:00:00.000Z",
  "date_modified": "2026-07-21T00:00:00.000Z",
  "status": "published",
  "visibility": "public",
  "language": "en-US",
  "axes": {
    "scale": "meso",
    "depth": "structural",
    "focus": "system",
    "function": "revelatory"
  },
  "themes": [
    "design systems",
    "responsive design",
    "product design",
    "spatial systems",
    "design engineering"
  ],
  "constellations": [],
  "tags": [
    "design systems",
    "product design",
    "figma",
    "responsive design",
    "design engineering",
    "ndcodex",
    "spatial systems"
  ],
  "keywords": [
    "Codex",
    "design systems",
    "responsive design",
    "product design",
    "spatial systems",
    "design engineering",
    "figma",
    "ndcodex"
  ],
  "relations": [],
  "media": [
    {
      "kind": "image",
      "src": "/media/codex/420-systems-from-curiosity-to-system.png",
      "role": "hero",
      "alt": "420 Systems spatial model showing a fixed 420 cell dividing into 210 and 105 units and combining into 840, 1260, and 1680 compositions.",
      "capture": {
        "width": 1672,
        "height": 941,
        "shape": "wide",
        "format": "png",
        "originalFilename": "exec-e09fa566-0f85-4603-bd72-322f08e4f3b5.png"
      }
    }
  ],
  "capture": null
}