{
  "$schema": "https://tr.designtokens.org/format/",
  "$description": "Design tokens for Airtable",
  "meta": {
    "name": "Airtable",
    "description": "A sober, editorial workflow-software interface anchored on white canvas and dark-ink type, where brand voltage comes from full-bleed signature cards in coral, dark green, peach, and dark navy that punctuate long-scroll explainer pages. Primary actions use a near-black pill CTA; secondary actions sit in a white outlined button. Type runs Haas Grotesk in modest weights — never bold for its own sake.",
    "theme": "light"
  },
  "color": {
    "primary": {
      "$value": "#181d26",
      "$type": "color",
      "$description": "Use for the primary role."
    },
    "primary-active": {
      "$value": "#0d1218",
      "$type": "color",
      "$description": "Use for the primary active role."
    },
    "ink": {
      "$value": "#181d26",
      "$type": "color",
      "$description": "Use for the ink role."
    },
    "body": {
      "$value": "#333840",
      "$type": "color",
      "$description": "Use for the body role."
    },
    "muted": {
      "$value": "#41454d",
      "$type": "color",
      "$description": "Use for the muted role."
    },
    "hairline": {
      "$value": "#dddddd",
      "$type": "color",
      "$description": "Use for the hairline role."
    },
    "border-strong": {
      "$value": "#9297a0",
      "$type": "color",
      "$description": "Use for the border strong role."
    },
    "canvas": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the canvas role."
    },
    "surface-soft": {
      "$value": "#f8fafc",
      "$type": "color",
      "$description": "Use for the surface soft role."
    },
    "surface-strong": {
      "$value": "#e0e2e6",
      "$type": "color",
      "$description": "Use for the surface strong role."
    },
    "surface-dark": {
      "$value": "#181d26",
      "$type": "color",
      "$description": "Use for the surface dark role."
    },
    "surface-dark-elevated": {
      "$value": "#1d1f25",
      "$type": "color",
      "$description": "Use for the surface dark elevated role."
    },
    "signature-coral": {
      "$value": "#aa2d00",
      "$type": "color",
      "$description": "Use for the signature coral role."
    },
    "signature-forest": {
      "$value": "#0a2e0e",
      "$type": "color",
      "$description": "Use for the signature forest role."
    },
    "signature-cream": {
      "$value": "#f5e9d4",
      "$type": "color",
      "$description": "Use for the signature cream role."
    },
    "signature-peach": {
      "$value": "#fcab79",
      "$type": "color",
      "$description": "Use for the signature peach role."
    },
    "signature-mint": {
      "$value": "#a8d8c4",
      "$type": "color",
      "$description": "Use for the signature mint role."
    },
    "signature-yellow": {
      "$value": "#f4d35e",
      "$type": "color",
      "$description": "Use for the signature yellow role."
    },
    "signature-mustard": {
      "$value": "#d9a441",
      "$type": "color",
      "$description": "Use for the signature mustard role."
    },
    "on-primary": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the on primary role."
    },
    "on-dark": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the on dark role."
    },
    "link": {
      "$value": "#1b61c9",
      "$type": "color",
      "$description": "Use for the link role."
    },
    "link-active": {
      "$value": "#1a3866",
      "$type": "color",
      "$description": "Use for the link active role."
    },
    "info": {
      "$value": "#254fad",
      "$type": "color",
      "$description": "Use for the info role."
    },
    "info-border": {
      "$value": "#458fff",
      "$type": "color",
      "$description": "Use for the info border role."
    },
    "success": {
      "$value": "#006400",
      "$type": "color",
      "$description": "Use for the success role."
    },
    "success-border": {
      "$value": "#39bf45",
      "$type": "color",
      "$description": "Use for the success border role."
    },
    "pricing-ink": {
      "$value": "#1d1f25",
      "$type": "color",
      "$description": "Use for the pricing ink role."
    }
  },
  "typography": {
    "display-xl": {
      "$value": {
        "fontFamily": "Haas Groot Disp, Haas, sans-serif",
        "fontSize": "48px",
        "fontWeight": 500,
        "lineHeight": 1.1,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for display xl."
    },
    "display-lg": {
      "$value": {
        "fontFamily": "Haas Groot Disp, Haas, sans-serif",
        "fontSize": "40px",
        "fontWeight": 400,
        "lineHeight": 1.2,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for display lg."
    },
    "display-md": {
      "$value": {
        "fontFamily": "Haas Groot Disp, Haas, sans-serif",
        "fontSize": "32px",
        "fontWeight": 400,
        "lineHeight": 1.2,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for display md."
    },
    "title-lg": {
      "$value": {
        "fontFamily": "Haas, sans-serif",
        "fontSize": "24px",
        "fontWeight": 400,
        "lineHeight": 1.35,
        "letterSpacing": "0.12px"
      },
      "$type": "typography",
      "$description": "Typography style for title lg."
    },
    "title-md": {
      "$value": {
        "fontFamily": "Haas Groot Disp, Haas, sans-serif",
        "fontSize": "20px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for title md."
    },
    "title-sm": {
      "$value": {
        "fontFamily": "Haas, sans-serif",
        "fontSize": "18px",
        "fontWeight": 500,
        "lineHeight": 1.4,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for title sm."
    },
    "label-md": {
      "$value": {
        "fontFamily": "Haas, sans-serif",
        "fontSize": "16px",
        "fontWeight": 500,
        "lineHeight": 1.4,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for label md."
    },
    "button": {
      "$value": {
        "fontFamily": "Haas, sans-serif",
        "fontSize": "16px",
        "fontWeight": 500,
        "lineHeight": 1.4,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for button."
    },
    "body-md": {
      "$value": {
        "fontFamily": "Haas, sans-serif",
        "fontSize": "14px",
        "fontWeight": 400,
        "lineHeight": 1.25,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body md."
    },
    "caption": {
      "$value": {
        "fontFamily": "Haas, sans-serif",
        "fontSize": "14px",
        "fontWeight": 500,
        "lineHeight": 1.35,
        "letterSpacing": "0.16px"
      },
      "$type": "typography",
      "$description": "Typography style for caption."
    },
    "legal": {
      "$value": {
        "fontFamily": "Haas, sans-serif",
        "fontSize": "13.12px",
        "fontWeight": 600,
        "lineHeight": 1.2,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for legal."
    },
    "pricing-display": {
      "$value": {
        "fontFamily": "Inter Display, system-ui, sans-serif",
        "fontSize": "44.8px",
        "fontWeight": 475,
        "lineHeight": 1.1,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for pricing display."
    },
    "pricing-section": {
      "$value": {
        "fontFamily": "Inter Display, system-ui, sans-serif",
        "fontSize": "28px",
        "fontWeight": 475,
        "lineHeight": 1.2,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for pricing section."
    },
    "pricing-card-title": {
      "$value": {
        "fontFamily": "Inter Display, system-ui, sans-serif",
        "fontSize": "20px",
        "fontWeight": 475,
        "lineHeight": 1.3,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for pricing card title."
    }
  },
  "spacing": {
    "xxs": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Spacing step xxs."
    },
    "xs": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Spacing step xs."
    },
    "sm": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Spacing step sm."
    },
    "md": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Spacing step md."
    },
    "lg": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "Spacing step lg."
    },
    "xl": {
      "$value": "32px",
      "$type": "dimension",
      "$description": "Spacing step xl."
    },
    "xxl": {
      "$value": "48px",
      "$type": "dimension",
      "$description": "Spacing step xxl."
    },
    "section": {
      "$value": "96px",
      "$type": "dimension",
      "$description": "Spacing step section."
    }
  },
  "radius": {
    "xs": {
      "$value": "2px",
      "$type": "dimension",
      "$description": "Border radius xs."
    },
    "sm": {
      "$value": "6px",
      "$type": "dimension",
      "$description": "Border radius sm."
    },
    "md": {
      "$value": "10px",
      "$type": "dimension",
      "$description": "Border radius md."
    },
    "lg": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Border radius lg."
    },
    "pill": {
      "$value": "9999px",
      "$type": "dimension",
      "$description": "Border radius pill."
    },
    "full": {
      "$value": "9999px",
      "$type": "dimension",
      "$description": "Border radius full."
    }
  },
  "shadow": {},
  "$extensions": {
    "com.design-md-editor.source": {
      "url": "https://www.airtable.com/",
      "note": "Official brand website used for visual comparison."
    }
  }
}