{
  "name": "The Meeting",
  "version": 2,
  "meta": {
    "source": "code",
    "synced": "2026-10-05",
    "prefix": "mtg",
    "idea": "Start from the end: the only thing a client pays for is a held meeting, so the system is a week calendar. Time is the spacing unit, day columns are the grid, event blocks are the components. v2 raises the craft: bigger display type, product windows as the imagery, one motion vocabulary.",
    "url": "https://meetdylan.ai/design",
    "css": "https://meetdylan.ai/design/the-meeting.css",
    "breakpoints": {
      "tablet": "max-width: 1099px",
      "phone": "max-width: 767px"
    }
  },
  "color": {
    "themes": [
      {
        "id": "light",
        "name": "Paper"
      },
      {
        "id": "dark",
        "name": "Charcoal"
      }
    ],
    "tokens": [
      {
        "name": "mtg-paper",
        "value": {
          "light": "#FBF9F5",
          "dark": "#1B1A18"
        },
        "usage": "The page. Bright warm paper by day, warm charcoal by night."
      },
      {
        "name": "mtg-sheet",
        "value": {
          "light": "#FFFFFF",
          "dark": "#222120"
        },
        "usage": "The calendar sheet: week grids, cards, the composer, inputs."
      },
      {
        "name": "mtg-offhours",
        "value": {
          "light": "#F3F0EA",
          "dark": "#1E1D1B"
        },
        "usage": "Outside working hours. Secondary surfaces, chip backgrounds, table heads."
      },
      {
        "name": "mtg-line",
        "value": {
          "light": "#E4DFD6",
          "dark": "#363430"
        },
        "usage": "Hour lines and borders."
      },
      {
        "name": "mtg-line-soft",
        "value": {
          "light": "#EEEBE5",
          "dark": "#2C2B28"
        },
        "usage": "Half-hour lines, dotted."
      },
      {
        "name": "mtg-rule",
        "value": {
          "light": "#948E83",
          "dark": "#726D64"
        },
        "usage": "Edges that must be seen: input borders, outlined buttons. 3:1 on the sheet."
      },
      {
        "name": "mtg-ink",
        "value": {
          "light": "#1B1A17",
          "dark": "#F1EEE7"
        },
        "usage": "Text."
      },
      {
        "name": "mtg-ink-2",
        "value": {
          "light": "#55524B",
          "dark": "#B9B4A9"
        },
        "usage": "Secondary text. 7.4:1 or better on paper."
      },
      {
        "name": "mtg-ink-3",
        "value": {
          "light": "#6E6A63",
          "dark": "#9A958A"
        },
        "usage": "Muted text: time labels, captions, small print. 4.5:1 or better on every surface."
      },
      {
        "name": "mtg-now",
        "value": {
          "light": "#CC3417",
          "dark": "#FF6B4A"
        },
        "usage": "The now line and primary actions. The only saturated accent."
      },
      {
        "name": "mtg-now-ink",
        "value": {
          "light": "#FFFFFF",
          "dark": "#1B1A18"
        },
        "usage": "Text on the accent. 5.2:1 light, 6.2:1 dark."
      },
      {
        "name": "mtg-now-tint",
        "value": {
          "light": "#FBE9E5",
          "dark": "#3A241F"
        },
        "usage": "Selection, focus halo, the now label background."
      },
      {
        "name": "mtg-now-text",
        "value": {
          "light": "#B82E14",
          "dark": "#FF6B4A"
        },
        "usage": "The red as small text on the tint: the Example tag and counts waiting for you. A shade deeper by day to keep 4.5:1."
      },
      {
        "name": "mtg-sage-fill",
        "value": {
          "light": "#DFECDD",
          "dark": "#8FD19B"
        },
        "usage": "Event hue 1, fill. Dylan's meetings in the hero."
      },
      {
        "name": "mtg-sage-ink",
        "value": {
          "light": "#245C2F",
          "dark": "#10231A"
        },
        "usage": "Event hue 1, text on the fill (6.5:1 light, 9.2:1 dark). In light mode also the hatch stroke and the tentative label."
      },
      {
        "name": "mtg-slate-fill",
        "value": {
          "light": "#DFE8F5",
          "dark": "#97B8EC"
        },
        "usage": "Event hue 2, fill."
      },
      {
        "name": "mtg-slate-ink",
        "value": {
          "light": "#274A7E",
          "dark": "#0F1A2E"
        },
        "usage": "Event hue 2, ink."
      },
      {
        "name": "mtg-plum-fill",
        "value": {
          "light": "#EEE2F1",
          "dark": "#D3A8E0"
        },
        "usage": "Event hue 3, fill."
      },
      {
        "name": "mtg-plum-ink",
        "value": {
          "light": "#62347A",
          "dark": "#2A1633"
        },
        "usage": "Event hue 3, ink."
      },
      {
        "name": "mtg-amber-fill",
        "value": {
          "light": "#F8EBD2",
          "dark": "#EFC26E"
        },
        "usage": "Event hue 4, fill."
      },
      {
        "name": "mtg-amber-ink",
        "value": {
          "light": "#6E4A0B",
          "dark": "#2A1D05"
        },
        "usage": "Event hue 4, ink."
      },
      {
        "name": "mtg-teal-fill",
        "value": {
          "light": "#DBEFEC",
          "dark": "#82D3CC"
        },
        "usage": "Event hue 5, fill."
      },
      {
        "name": "mtg-teal-ink",
        "value": {
          "light": "#1A5A57",
          "dark": "#0B2523"
        },
        "usage": "Event hue 5, ink."
      },
      {
        "name": "mtg-stone-fill",
        "value": {
          "light": "#ECE9E2",
          "dark": "#3B3934"
        },
        "usage": "The client's own meetings and blocked time."
      },
      {
        "name": "mtg-stone-ink",
        "value": {
          "light": "#4F4C45",
          "dark": "#DAD5CA"
        },
        "usage": "Text on stone."
      },
      {
        "name": "mtg-stone-line",
        "value": {
          "light": "#8A857A",
          "dark": "#7B766C"
        },
        "usage": "Edges and hatch strokes on stone: blocked time and no-shows."
      },
      {
        "name": "mtg-hue-line",
        "value": {
          "light": "the hue ink",
          "dark": "the hue fill"
        },
        "usage": "Hatch strokes, left bars and tentative labels on the sheet: light mode uses the hue ink, dark mode uses the luminous fill."
      },
      {
        "name": "mtg-chrome",
        "value": {
          "light": "#F7F5F0",
          "dark": "#262523"
        },
        "usage": "The window chrome bar and the app sidebar."
      },
      {
        "name": "mtg-dim",
        "value": {
          "light": "rgba(27,26,23,0.42)",
          "dark": "rgba(0,0,0,0.6)"
        },
        "usage": "The page behind the intake sheet."
      },
      {
        "name": "mtg-scrim",
        "value": {
          "light": "rgba(251,249,245,0.9)",
          "dark": "rgba(27,26,24,0.9)"
        },
        "usage": "The sticky nav once you scroll and the phone action bar, under a 10px blur."
      },
      {
        "name": "mtg-hatch-alpha",
        "value": {
          "light": "55%",
          "dark": "70%"
        },
        "usage": "Strength of the forecast hatch: the hue line mixed at this share over transparent."
      },
      {
        "name": "mtg-glow",
        "value": {
          "light": "rgba(204,52,23,0.07)",
          "dark": "rgba(255,107,74,0.06)"
        },
        "usage": "The very soft warm glow under product windows."
      }
    ]
  },
  "type": {
    "fonts": [
      {
        "family": "Bricolage Grotesque",
        "file": "fonts/bricolage-grotesque-latin-standard-normal.woff2",
        "weight": "200 800",
        "style": "normal",
        "axes": "opsz 12 to 96, wdth 75 to 100, wght 200 to 800"
      },
      {
        "family": "Hanken Grotesk",
        "file": "fonts/hanken-grotesk-latin-wght-normal.woff2",
        "weight": "100 900",
        "style": "normal",
        "axes": "wght 100 to 900"
      }
    ],
    "families": {
      "display": "'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif",
      "text": "'Hanken Grotesk', system-ui, sans-serif",
      "terminal": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
    },
    "groups": [
      {
        "name": "Display",
        "family": "display",
        "styles": [
          {
            "name": "hero",
            "fontSize": "88px",
            "lineHeight": "88px",
            "fontWeight": 600,
            "letterSpacing": "-0.025em",
            "sample": "Your week, booked by an agent.",
            "usage": "One per page, balanced. 64/66 under 1100px, 44/46 on phones.",
            "tablet": {
              "fontSize": "64px",
              "lineHeight": "66px"
            },
            "phone": {
              "fontSize": "44px",
              "lineHeight": "46px",
              "letterSpacing": "-0.03em"
            }
          },
          {
            "name": "title",
            "fontSize": "48px",
            "lineHeight": "52px",
            "fontWeight": 600,
            "letterSpacing": "-0.03em",
            "sample": "Three steps. Only the last one costs money.",
            "usage": "Section titles. 34/38 on phones.",
            "phone": {
              "fontSize": "34px",
              "lineHeight": "38px"
            }
          },
          {
            "name": "h3",
            "fontSize": "28px",
            "lineHeight": "34px",
            "fontWeight": 600,
            "letterSpacing": "-0.02em",
            "sample": "Your domain never sends a cold email.",
            "usage": "Row and step titles. 24/30 on phones.",
            "phone": {
              "fontSize": "24px",
              "lineHeight": "30px"
            }
          },
          {
            "name": "h4",
            "fontSize": "20px",
            "lineHeight": "26px",
            "fontWeight": 600,
            "letterSpacing": "-0.01em",
            "sample": "What counts as a held meeting?",
            "usage": "FAQ questions, tier names, sheet headings at 30/36."
          },
          {
            "name": "numeral",
            "fontSize": "44px",
            "lineHeight": "48px",
            "fontWeight": 700,
            "letterSpacing": "-0.025em",
            "fontStretch": "90%",
            "sample": "$500",
            "usage": "Prices and the Belkins figures; the only use of the width axis.",
            "phone": {
              "fontSize": "36px",
              "lineHeight": "40px"
            }
          }
        ]
      },
      {
        "name": "Text",
        "family": "text",
        "styles": [
          {
            "name": "lead",
            "fontSize": "20px",
            "lineHeight": "30px",
            "fontWeight": 400,
            "letterSpacing": "0",
            "sample": "Dylan finds the people who buy what you sell.",
            "usage": "Under titles. 18/27 on phones.",
            "phone": {
              "fontSize": "18px",
              "lineHeight": "27px"
            }
          },
          {
            "name": "body",
            "fontSize": "17px",
            "lineHeight": "28px",
            "fontWeight": 400,
            "letterSpacing": "0",
            "sample": "You pay only for meetings that happen.",
            "usage": "Everything readable."
          },
          {
            "name": "small",
            "fontSize": "14px",
            "lineHeight": "20px",
            "fontWeight": 400,
            "letterSpacing": "0",
            "sample": "Figures as published on belkins.io",
            "usage": "Small print, hints, table cells."
          },
          {
            "name": "caption",
            "fontSize": "12px",
            "lineHeight": "16px",
            "fontWeight": 500,
            "letterSpacing": "0.01em",
            "sample": "Example plan built from your answers",
            "usage": "Labels on cards."
          },
          {
            "name": "label",
            "fontSize": "12px",
            "lineHeight": "12px",
            "fontWeight": 600,
            "letterSpacing": "0.06em",
            "textTransform": "uppercase",
            "sample": "MON TUE WED",
            "usage": "Day headers, field labels inside the app."
          },
          {
            "name": "app",
            "fontSize": "13px",
            "lineHeight": "18px",
            "fontWeight": 400,
            "letterSpacing": "0",
            "sample": "Oct 19 to 23, 2026",
            "usage": "The base size inside product windows."
          },
          {
            "name": "block",
            "fontSize": "12px",
            "lineHeight": "13px",
            "fontWeight": 600,
            "letterSpacing": "0",
            "fontVariantNumeric": "tabular-nums",
            "sample": "10:30 Maya",
            "usage": "Line one of an event block; line two is 11/12 at weight 500."
          }
        ]
      }
    ]
  },
  "spacing": {
    "note": "Time is the spacing unit. One 15-minute slot is 12px; an hour is 48px. Leading, padding, gaps and section rhythm are multiples of the slot; 6px is the half slot for micro adjustments.",
    "tokens": [
      {
        "name": "mtg-half-slot",
        "value": "6px",
        "usage": "Micro: gaps inside chips, padding inside blocks."
      },
      {
        "name": "mtg-slot",
        "value": "12px",
        "usage": "The 15-minute slot. Base unit."
      },
      {
        "name": "mtg-2slot",
        "value": "24px",
        "usage": "Half an hour. Paragraph spacing, card padding, column gaps."
      },
      {
        "name": "mtg-3slot",
        "value": "36px",
        "usage": "Forty-five minutes. Gaps between related groups."
      },
      {
        "name": "mtg-hour",
        "value": "48px",
        "usage": "One hour. Row height in the week grid, gap between blocks of content, section padding on mobile."
      },
      {
        "name": "mtg-2h",
        "value": "96px",
        "usage": "Section padding on desktop."
      },
      {
        "name": "mtg-3h",
        "value": "144px",
        "usage": "The hero's breathing room above the fold."
      },
      {
        "name": "mtg-gutter",
        "value": "60px",
        "usage": "The time gutter: five slots wide."
      },
      {
        "name": "mtg-page",
        "value": "1200px",
        "usage": "Max content width: the gutter plus five day columns of 228px."
      },
      {
        "name": "mtg-edge",
        "value": "24px desktop, 16px mobile",
        "usage": "Side padding of the page."
      },
      {
        "name": "mtg-sec",
        "value": "120px",
        "usage": "Section padding on desktop (ten slots); 72px on phones."
      },
      {
        "name": "mtg-app-hour",
        "value": "80px",
        "usage": "One hour inside the app's week grids, so a 30-minute block holds two lines with room below."
      }
    ]
  },
  "radius": {
    "note": "Blocks are softly rounded like every calendar's, cards a little more, chips fully. The mark rounds one side to 50%.",
    "tokens": [
      {
        "name": "mtg-block",
        "value": "6px",
        "usage": "Event blocks, inputs, buttons."
      },
      {
        "name": "mtg-card",
        "value": "12px",
        "usage": "Invitation cards, the plan, the composer."
      },
      {
        "name": "mtg-pill",
        "value": "999px",
        "usage": "Chips, the today circle, the avatar, the undo ring."
      },
      {
        "name": "mtg-d",
        "value": "50%",
        "usage": "The right side of the mark."
      },
      {
        "name": "mtg-win",
        "value": "16px",
        "usage": "Product windows and the sheet (18px)."
      }
    ]
  },
  "shadow": {
    "tokens": [
      {
        "name": "mtg-shadow-card",
        "value": {
          "light": "0 12px 24px -12px rgba(27,26,23,0.22), 0 1px 0 rgba(27,26,23,0.06)",
          "dark": "0 12px 24px -12px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.04)"
        },
        "usage": "Invitation cards and the composer, lifted one slot off the sheet."
      },
      {
        "name": "mtg-shadow-pop",
        "value": {
          "light": "0 24px 48px -24px rgba(27,26,23,0.35), 0 0 0 1px rgba(27,26,23,0.06)",
          "dark": "0 24px 48px -24px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.06)"
        },
        "usage": "The open invitation over the week, the undo toast."
      },
      {
        "name": "mtg-shadow-win",
        "value": {
          "light": "0 1px 0 rgba(27,26,23,.04), 0 24px 48px -18px rgba(60,40,10,.18), 0 70px 120px -50px rgba(60,40,10,.22)",
          "dark": "0 1px 0 rgba(255,255,255,.03), 0 24px 48px -18px rgba(0,0,0,.55), 0 70px 120px -50px rgba(0,0,0,.7)"
        },
        "usage": "Product windows: layered and warm by day, deeper and cooler by night."
      },
      {
        "name": "mtg-shadow-toast",
        "value": {
          "light": "0 1px 0 rgba(27,26,23,.04), 0 16px 32px -12px rgba(27,26,23,.28), 0 0 0 1px rgba(27,26,23,.05)",
          "dark": "0 1px 0 rgba(255,255,255,.03), 0 16px 32px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.07)"
        },
        "usage": "Toasts and the invite card."
      }
    ]
  },
  "timing": {
    "note": "Small, purposeful, inside the metaphor. Everything is off under prefers-reduced-motion: reduce and the page is complete at rest.",
    "tokens": [
      {
        "name": "mtg-tick",
        "value": "120ms",
        "usage": "Hover and focus transitions."
      },
      {
        "name": "mtg-settle",
        "value": "520ms",
        "usage": "A block drops one slot (12px) into place with a small overshoot: cubic-bezier(.2, 1.2, .35, 1)."
      },
      {
        "name": "mtg-stagger",
        "value": "70ms",
        "usage": "Between blocks settling."
      },
      {
        "name": "mtg-rise",
        "value": "420ms",
        "usage": "Content enters 16px lower at 0 opacity: cubic-bezier(.2, .8, .2, 1)."
      },
      {
        "name": "mtg-count",
        "value": "900ms",
        "usage": "Numbers count up, easing out, in tabular figures."
      },
      {
        "name": "mtg-type",
        "value": "38 chars per second",
        "usage": "Dylan types with seeded variation, after 600 to 900ms of typing dots."
      },
      {
        "name": "mtg-toast",
        "value": "280ms in, 220ms out",
        "usage": "Slide 16px plus fade."
      },
      {
        "name": "mtg-toast-in",
        "value": "280ms",
        "usage": "A toast slides 16px and fades in."
      },
      {
        "name": "mtg-toast-out",
        "value": "220ms",
        "usage": "A toast fades out after it has been read."
      },
      {
        "name": "mtg-stamp",
        "value": "140ms",
        "usage": "The approval mark lands from scale 1.15 to 1."
      },
      {
        "name": "mtg-check",
        "value": "360ms",
        "usage": "A held block draws its check (stroke-dashoffset)."
      },
      {
        "name": "mtg-minute",
        "value": "1s",
        "usage": "The hero now line creeps one minute per second while on screen, for forty minutes."
      },
      {
        "name": "mtg-spring",
        "value": "cubic-bezier(.2, 1.2, .35, 1)",
        "usage": "Settle: a small overshoot, like a block dropped into its slot."
      },
      {
        "name": "mtg-ease-out",
        "value": "cubic-bezier(.2, .8, .2, 1)",
        "usage": "Rise, toast, stamp and check: fast start, soft landing."
      },
      {
        "name": "mtg-ease",
        "value": "cubic-bezier(.2, 0, 0, 1)",
        "usage": "Hover, focus and color changes (with mtg-tick)."
      }
    ]
  }
}