{
  "name": "100x Design System · Instrument · Clay (saturated)",
  "palette": {
    "light": {
      "paper": "#FEFDFB",
      "oat": "#F4F3F0",
      "white": "#FFFFFF",
      "line": "#D1CDC7",
      "lineStrong": "#7B7974",
      "graphite": "#55534E",
      "ink": "#1B1A18",
      "link": "#0667D9"
    },
    "dark": {
      "paper": "#1B1A18",
      "oat": "#232220",
      "white": "#2A2926",
      "line": "#3A3835",
      "lineStrong": "#6E6C68",
      "graphite": "#A8A49C",
      "ink": "#FEFDFB",
      "link": "#429DFF"
    },
    "signal": "#E2FA1C",
    "signalHover": "#C4DC00",
    "onSignal": "#1B1A18",
    "services": {
      "branding": {
        "tile": "#A78BFF",
        "ink": "#160546"
      },
      "launch": {
        "tile": "#FF9F66",
        "ink": "#3A1000"
      },
      "seo-geo": {
        "tile": "#6FB8FF",
        "ink": "#001433"
      },
      "automation": {
        "tile": "#4FE08A",
        "ink": "#032A14"
      },
      "video": {
        "tile": "#FF7ACB",
        "ink": "#46022F"
      }
    },
    "xAccents": {
      "tangerine": "#FF6A00",
      "ube": "#6D4CD6",
      "blueberry": "#2F4FF5"
    }
  },
  "motion": {
    "durationsMs": {
      "instant": 100,
      "quick": 200,
      "base": 320,
      "slow": 600
    },
    "easings": {
      "standard": "cubic-bezier(0.2, 0, 0, 1)",
      "mechanical": "cubic-bezier(0.65, 0, 0.35, 1)",
      "snap": "cubic-bezier(0.3, 1.4, 0.5, 1)"
    },
    "reducedMotion": "final state, no loops, no preloader, no split, 100ms fade on route change"
  },
  "layout": {
    "columns": {
      "640": 8,
      "1024": 12,
      "base": 4
    },
    "margins": {
      "640": 32,
      "1024": 48,
      "1440": 64,
      "1920": "clamp(64px, 4vw, 128px)",
      "base": 16
    },
    "gutters": {
      "640": 24,
      "1024": 24,
      "1440": 32,
      "base": 16
    },
    "maxWidth": 2400,
    "bentoGap": "clamp(8px, 1vw, 16px)",
    "radius": {
      "cell": 6,
      "control": 2,
      "device": 32,
      "default": 0
    },
    "headerHeight": {
      "640": 64,
      "base": 56
    },
    "hitMin": 44,
    "chamfer": 8
  },
  "type": {
    "fonts": {
      "display": "Inter Tight 400/500",
      "mono": "JetBrains Mono 400/500",
      "segment": "Departure Mono 400 (departuremono.com, OFL)"
    },
    "rampPx": {
      "mega": {
        "640": "128/116",
        "1024": "160/144",
        "base": "96/88",
        "tracking": "-0.04em"
      },
      "display": {
        "640": "72/68",
        "1024": "96/88",
        "base": "56/56",
        "tracking": "-0.03em"
      },
      "h1": {
        "640": "52/54",
        "1024": "64/64",
        "base": "40/44",
        "tracking": "-0.025em"
      },
      "h2": {
        "640": "36/40",
        "1024": "40/44",
        "base": "32/36",
        "tracking": "-0.02em"
      },
      "h3": {
        "all": "24/32",
        "tracking": "-0.01em"
      },
      "lead": {
        "640": "20/32",
        "base": "18/28",
        "tracking": "-0.005em"
      },
      "body": {
        "all": "16/24"
      },
      "label": {
        "all": "12/16 mono 500 uppercase",
        "tracking": "0.06em"
      },
      "micro": {
        "all": "11/16 mono uppercase",
        "tracking": "0.04em"
      },
      "data": {
        "all": "14/20 mono tabular"
      },
      "caption": {
        "all": "13/16"
      },
      "readout": {
        "640": "48/48",
        "base": "40/40",
        "font": "Departure Mono tabular"
      }
    }
  },
  "wordmark": {
    "word": "100xlab",
    "glyphs": {
      "0": [
        ".###.",
        "#...#",
        "#..##",
        "#.#.#",
        "##..#",
        "#...#",
        ".###."
      ],
      "1": [
        "..#..",
        ".##..",
        "..#..",
        "..#..",
        "..#..",
        "..#..",
        ".###."
      ],
      "x": [
        ".....",
        ".....",
        "#...#",
        ".#.#.",
        "..#..",
        ".#.#.",
        "#...#"
      ],
      "l": [
        ".##..",
        "..#..",
        "..#..",
        "..#..",
        "..#..",
        "..#..",
        ".###."
      ],
      "a": [
        ".....",
        ".....",
        ".###.",
        "....#",
        ".####",
        "#...#",
        ".####"
      ],
      "b": [
        "#....",
        "#....",
        "####.",
        "#...#",
        "#...#",
        "#...#",
        "####."
      ]
    },
    "cells": {
      "glyph": "5 columns × 7 rows",
      "advance": 6,
      "litCells": 97,
      "logo": {
        "w": 41,
        "h": 7
      },
      "baseGrid": {
        "w": 47,
        "h": 13,
        "padX": 3,
        "padY": 3
      }
    },
    "tile": {
      "size": 0.84,
      "radius": 0.16,
      "offAlpha": 0.45
    },
    "draw": {
      "restDot": 0.14,
      "restPixel": 0.2,
      "litDotRadius": 0.42,
      "litPixelHalf": 0.43,
      "dprMax": 2,
      "fillSpan": {
        "wide": 0.9,
        "narrow": 0.94
      },
      "gapBetweenSamplesMs": 250,
      "defaultHoldMs": 1600
    },
    "colours": {
      "lit": "--ink",
      "rest": "--steel",
      "x": "accent, one per animation: tangerine, ube, blueberry"
    },
    "samples": [
      {
        "id": "resolve",
        "label": "Resolve",
        "playMs": 2600,
        "exitMs": 1300
      },
      {
        "id": "gravity",
        "label": "Gravity",
        "playMs": 2600,
        "exitMs": 1500
      },
      {
        "id": "ripple",
        "label": "Ripple",
        "playMs": 2400,
        "exitMs": 1300
      },
      {
        "id": "scan",
        "label": "Scan",
        "playMs": 2000,
        "exitMs": 1100
      },
      {
        "id": "tiles",
        "label": "Tiles",
        "playMs": 2600,
        "exitMs": 1300
      }
    ],
    "defaultSequence": [
      "resolve",
      "gravity",
      "ripple",
      "scan",
      "tiles"
    ],
    "svgExport": {
      "cellPx": 8,
      "gapCells": 1,
      "padPx": 8,
      "scale": 2,
      "dotRadius": "0.42 cell",
      "animation": "4.2s cubic-bezier(0.65,0,0.35,1) infinite; x cycle 1.6s per colour, step-end"
    }
  },
  "socialKit": {
    "rule": "banners and covers are pure graphics: no logo, no text, no lime; grounds ink, paper or the Branding violet; profile pictures keep the monogram; tile 0.84 of pitch, radius 0.16",
    "pixelFont": {
      "cells": "5 columns x 7 rows",
      "advance": 6,
      "charset": "A-Z 0-9 . , / - + · & $ →"
    },
    "files": [
      {
        "file": "100xlab-profile-monogram-ink-tangerine.svg",
        "group": "profile",
        "width": 800,
        "height": 800,
        "tone": "ink",
        "label": "Monogram · ink"
      },
      {
        "file": "100xlab-profile-monogram-paper-ube.svg",
        "group": "profile",
        "width": 800,
        "height": 800,
        "tone": "paper",
        "label": "Monogram · paper"
      },
      {
        "file": "100xlab-profile-monogram-oat-blueberry.svg",
        "group": "profile",
        "width": 800,
        "height": 800,
        "tone": "oat",
        "label": "Monogram · oat"
      },
      {
        "file": "100xlab-profile-monogram-dot-paper-ube.svg",
        "group": "profile",
        "width": 800,
        "height": 800,
        "tone": "paper",
        "label": "Monogram · dots"
      },
      {
        "file": "100xlab-profile-x-ink-tangerine.svg",
        "group": "profile",
        "width": 800,
        "height": 800,
        "tone": "ink",
        "label": "The x · ink"
      },
      {
        "file": "100xlab-profile-x-paper-blueberry.svg",
        "group": "profile",
        "width": 800,
        "height": 800,
        "tone": "paper",
        "label": "The x · paper"
      },
      {
        "file": "100xlab-banner-linkedin-ink.svg",
        "group": "banner",
        "width": 1584,
        "height": 396,
        "tone": "ink",
        "label": "LinkedIn cover · ink · pixel x"
      },
      {
        "file": "100xlab-banner-linkedin-paper.svg",
        "group": "banner",
        "width": 1584,
        "height": 396,
        "tone": "paper",
        "label": "LinkedIn cover · paper · skyline"
      },
      {
        "file": "100xlab-banner-x-ink.svg",
        "group": "banner",
        "width": 1500,
        "height": 500,
        "tone": "ink",
        "label": "X header · ink · pixel x"
      },
      {
        "file": "100xlab-banner-x-paper.svg",
        "group": "banner",
        "width": 1500,
        "height": 500,
        "tone": "paper",
        "label": "X header · paper · skyline"
      },
      {
        "file": "100xlab-cover-16x9-ink.svg",
        "group": "cover",
        "width": 1920,
        "height": 1080,
        "tone": "ink",
        "label": "Cover 16:9 · ink · pixel x"
      },
      {
        "file": "100xlab-cover-16x9-paper.svg",
        "group": "cover",
        "width": 1920,
        "height": 1080,
        "tone": "paper",
        "label": "Cover 16:9 · paper · skyline"
      },
      {
        "file": "100xlab-cover-16x9-services-ink.svg",
        "group": "cover",
        "width": 1920,
        "height": 1080,
        "tone": "ink",
        "label": "Five fronts · ink"
      },
      {
        "file": "100xlab-cover-16x9-services-paper.svg",
        "group": "cover",
        "width": 1920,
        "height": 1080,
        "tone": "paper",
        "label": "Five fronts · paper"
      },
      {
        "file": "100xlab-card-1200x630-ink.svg",
        "group": "cover",
        "width": 1200,
        "height": 630,
        "tone": "ink",
        "label": "Share card · ink · skyline"
      },
      {
        "file": "100xlab-card-1200x630-paper.svg",
        "group": "cover",
        "width": 1200,
        "height": 630,
        "tone": "paper",
        "label": "Share card · paper · pixel x"
      },
      {
        "file": "100xlab-violet-linkedin-deep.svg",
        "group": "violet",
        "width": 1584,
        "height": 396,
        "tone": "violet-deep",
        "label": "LinkedIn cover · violet deep · pixel x"
      },
      {
        "file": "100xlab-violet-linkedin-light.svg",
        "group": "violet",
        "width": 1584,
        "height": 396,
        "tone": "violet-light",
        "label": "LinkedIn cover · violet light · skyline"
      },
      {
        "file": "100xlab-violet-cover-16x9-deep.svg",
        "group": "violet",
        "width": 1920,
        "height": 1080,
        "tone": "violet-deep",
        "label": "Cover 16:9 · violet deep · skyline"
      },
      {
        "file": "100xlab-violet-cover-16x9-light.svg",
        "group": "violet",
        "width": 1920,
        "height": 1080,
        "tone": "violet-light",
        "label": "Cover 16:9 · violet light · pixel x"
      },
      {
        "file": "100xlab-graphic-horizon-linkedin.svg",
        "group": "graphic",
        "width": 1584,
        "height": 396,
        "tone": "ink",
        "label": "Horizon · LinkedIn"
      },
      {
        "file": "100xlab-graphic-horizon-cover.svg",
        "group": "graphic",
        "width": 1920,
        "height": 1080,
        "tone": "ink",
        "label": "Horizon · Cover 16:9"
      },
      {
        "file": "100xlab-graphic-horizon-violet-linkedin.svg",
        "group": "violet",
        "width": 1584,
        "height": 396,
        "tone": "violet-deep",
        "label": "Horizon · violet · LinkedIn"
      },
      {
        "file": "100xlab-graphic-horizon-violet-cover.svg",
        "group": "violet",
        "width": 1920,
        "height": 1080,
        "tone": "violet-deep",
        "label": "Horizon · violet · Cover 16:9"
      },
      {
        "file": "100xlab-graphic-growth-linkedin.svg",
        "group": "graphic",
        "width": 1584,
        "height": 396,
        "tone": "paper",
        "label": "Growth · LinkedIn"
      },
      {
        "file": "100xlab-graphic-growth-cover.svg",
        "group": "graphic",
        "width": 1920,
        "height": 1080,
        "tone": "paper",
        "label": "Growth · Cover 16:9"
      },
      {
        "file": "100xlab-graphic-growth-violet-linkedin.svg",
        "group": "violet",
        "width": 1584,
        "height": 396,
        "tone": "violet-light",
        "label": "Growth · violet · LinkedIn"
      },
      {
        "file": "100xlab-graphic-growth-violet-cover.svg",
        "group": "violet",
        "width": 1920,
        "height": 1080,
        "tone": "violet-light",
        "label": "Growth · violet · Cover 16:9"
      },
      {
        "file": "100xlab-graphic-ripple-linkedin.svg",
        "group": "graphic",
        "width": 1584,
        "height": 396,
        "tone": "ink",
        "label": "Ripple · LinkedIn"
      },
      {
        "file": "100xlab-graphic-ripple-cover.svg",
        "group": "graphic",
        "width": 1920,
        "height": 1080,
        "tone": "ink",
        "label": "Ripple · Cover 16:9"
      },
      {
        "file": "100xlab-graphic-ripple-violet-linkedin.svg",
        "group": "violet",
        "width": 1584,
        "height": 396,
        "tone": "violet-deep",
        "label": "Ripple · violet · LinkedIn"
      },
      {
        "file": "100xlab-graphic-ripple-violet-cover.svg",
        "group": "violet",
        "width": 1920,
        "height": 1080,
        "tone": "violet-deep",
        "label": "Ripple · violet · Cover 16:9"
      },
      {
        "file": "100xlab-graphic-bloom-linkedin.svg",
        "group": "graphic",
        "width": 1584,
        "height": 396,
        "tone": "paper",
        "label": "Bloom · LinkedIn"
      },
      {
        "file": "100xlab-graphic-bloom-cover.svg",
        "group": "graphic",
        "width": 1920,
        "height": 1080,
        "tone": "paper",
        "label": "Bloom · Cover 16:9"
      },
      {
        "file": "100xlab-graphic-bloom-violet-linkedin.svg",
        "group": "violet",
        "width": 1584,
        "height": 396,
        "tone": "violet-deep",
        "label": "Bloom · violet · LinkedIn"
      },
      {
        "file": "100xlab-graphic-bloom-violet-cover.svg",
        "group": "violet",
        "width": 1920,
        "height": 1080,
        "tone": "violet-deep",
        "label": "Bloom · violet · Cover 16:9"
      },
      {
        "file": "100xlab-graphic-bigx-linkedin.svg",
        "group": "graphic",
        "width": 1584,
        "height": 396,
        "tone": "ink",
        "label": "Big x · LinkedIn"
      },
      {
        "file": "100xlab-graphic-bigx-cover.svg",
        "group": "graphic",
        "width": 1920,
        "height": 1080,
        "tone": "ink",
        "label": "Big x · Cover 16:9"
      },
      {
        "file": "100xlab-graphic-bigx-violet-linkedin.svg",
        "group": "violet",
        "width": 1584,
        "height": 396,
        "tone": "violet-deep",
        "label": "Big x · violet · LinkedIn"
      },
      {
        "file": "100xlab-graphic-bigx-violet-cover.svg",
        "group": "violet",
        "width": 1920,
        "height": 1080,
        "tone": "violet-deep",
        "label": "Big x · violet · Cover 16:9"
      },
      {
        "file": "100xlab-graphic-fronts-linkedin.svg",
        "group": "graphic",
        "width": 1584,
        "height": 396,
        "tone": "paper",
        "label": "Five fronts · LinkedIn"
      },
      {
        "file": "100xlab-graphic-fronts-cover.svg",
        "group": "graphic",
        "width": 1920,
        "height": 1080,
        "tone": "paper",
        "label": "Five fronts · Cover 16:9"
      }
    ]
  },
  "dither": {
    "bayer8": [
      [
        0,
        32,
        8,
        40,
        2,
        34,
        10,
        42
      ],
      [
        48,
        16,
        56,
        24,
        50,
        18,
        58,
        26
      ],
      [
        12,
        44,
        4,
        36,
        14,
        46,
        6,
        38
      ],
      [
        60,
        28,
        52,
        20,
        62,
        30,
        54,
        22
      ],
      [
        3,
        35,
        11,
        43,
        1,
        33,
        9,
        41
      ],
      [
        51,
        19,
        59,
        27,
        49,
        17,
        57,
        25
      ],
      [
        15,
        47,
        7,
        39,
        13,
        45,
        5,
        37
      ],
      [
        63,
        31,
        55,
        23,
        61,
        29,
        53,
        21
      ]
    ],
    "threshold": "(bayer[y%8][x%8] + 0.5) / 64",
    "grainCssPx": 1,
    "rule": "one dot per fragment; a dot is either the container's ink colour or transparent; never a mid-tone",
    "scenes": {
      "branding": "2D puffy six-lobed mascot",
      "launch": "rocket on its pad",
      "seo-geo": "search bar over Google, ChatGPT, Claude tiles",
      "automation": "robot at a desk filing paperwork",
      "video": "retro TV playing the launch video"
    }
  }
}