@area17/a17-tailwind-plugins/docs/frontend.config.json

A collection of Tailwind plugins to help build responsive design systems in collaboration with A17 design and development build methodologies

{
  "structure": {
    "breakpoints": {
      "xs": "0",
      "sm": "544px",
      "md": "650px",
      "lg": "990px",
      "xl": "1300px",
      "xxl": "1520px"
    },
    "columns": {
      "xs": "4",
      "sm": "4",
      "md": "8",
      "lg": "12",
      "xl": "12",
      "xxl": "12"
    },
    "container": {
      "xs": "auto",
      "sm": "auto",
      "md": "auto",
      "lg": "auto",
      "xl": "auto",
      "xxl": "1440px"
    },
    "gutters": {
      "inner": {
        "xs": "10px",
        "sm": "15px",
        "md": "20px",
        "lg": "30px",
        "xl": "40px",
        "xxl": "40px"
      },
      "outer": {
        "xs": "20px",
        "sm": "30px",
        "md": "40px",
        "lg": "40px",
        "xl": "40px",
        "xxl": "0px"
      }
    }
  },
  "ratios": {
    "1x1": "1:1",
    "16x9": "16:9"
  },
  "spacing": {
    "tokens": {
      "scaler": 4,
      "arbitraries": {
        "400": "400px",
        "600": "600px"
      }
    },
    "groups": {
      "outer-1": {
        "xs": 64,
        "lg": 96
      },
      "inner-1": {
        "xs": 24,
        "md": 40,
        "lg": 64
      },
      "inner-2": {
        "xs": 16,
        "md": 24,
        "lg": 32
      }
    }
  },
  "color": {
    "tokens": {
      "white": "#fff",
      "grey-3": "#f8f8f8",
      "grey-5": "#f2f2f2",
      "grey-10": "#e6e6e6",
      "grey-15": "#d9d9d9",
      "grey-30": "#b3b3b3",
      "grey-54": "#757575",
      "grey-90": "#1a1a1a",
      "black": "#000",
      "blue-01": "#0A152B",
      "blue-02": "#001F5C",
      "blue-03": "#004F91",
      "blue-04": "#313BFB",
      "blue-05": "#81EEF3",
      "blue-06": "#ADD8E6",
      "red-01": "#f00"
    },
    "border": {
      "primary": "grey-90",
      "secondary": "grey-30",
      "tertiary": "grey-54",
      "quaternary": "blue-05",
      "code-example-filename": "blue-05"
    },
    "text": {
      "title": "black",
      "primary": "grey-90",
      "inverse": "white",
      "secondary": "grey-54",
      "accent": "blue-03",
      "code": "black",
      "code-example": "grey-3",
      "code-example-filename": "blue-05",
      "error": "red-01"
    },
    "background": {
      "primary": "grey-10",
      "header": "grey-10",
      "container-demo": "white",
      "footer": "grey-10",
      "banner": "grey-90",
      "accent": "blue-03",
      "column": "blue-05",
      "column-alt": "blue-04",
      "code": "white",
      "code-example": "grey-90",
      "quote": "grey-5"
    },
    "underline": {
      "primary": "grey-54",
      "secondary": "blue-03"
    },
    "scrollbar": {
      "track": {
        "primary": "blue-06"
      },
      "thumb": {
        "primary": "blue-03"
      }
    }
  },
  "typography": {
    "families": {
      "sans": "SuisseIntl, Helvetica, Arial, sans-serif",
      "serif": "\"Times New Roman\", Georgia, serif",
      "mono": "\"Lucida Console\", Courier, monospace"
    },
    "typesets": {
      "h1": {
        "xs": {
          "font-family": "var(--font-sans)",
          "font-weight": "500",
          "bold-weight": "500",
          "font-size": "32px",
          "line-height": "1.2",
          "letter-spacing": "-0.02em",
          "font-smoothing": "true"
        },
        "md": {
          "font-size": "36px"
        },
        "lg": {
          "font-size": "48px"
        }
      },
      "h2": {
        "xs": {
          "font-family": "var(--font-sans)",
          "font-weight": "500",
          "bold-weight": "500",
          "font-size": "20px",
          "line-height": "1.2",
          "letter-spacing": "-0.02em",
          "font-smoothing": "true"
        },
        "md": {
          "font-size": "24px"
        },
        "lg": {
          "font-size": "28px"
        }
      },
      "h3": {
        "xs": {
          "font-family": "var(--font-sans)",
          "bold-weight": "500",
          "font-weight": "500",
          "font-size": "16px",
          "line-height": "1.2",
          "letter-spacing": "-0.02em",
          "font-smoothing": "true"
        },
        "md": {
          "font-size": "20px"
        }
      },
      "h4": {
        "xs": {
          "font-family": "var(--font-sans)",
          "bold-weight": "600",
          "font-weight": "600",
          "font-size": "14px",
          "line-height": "1.2",
          "letter-spacing": "-0.02em",
          "font-smoothing": "true"
        },
        "md": {
          "font-size": "16px"
        }
      },
      "body": {
        "xs": {
          "font-family": "var(--font-sans)",
          "bold-weight": "600",
          "font-size": "14px",
          "line-height": "1.7",
          "font-smoothing": "true"
        },
        "md": {
          "font-size": "16px"
        }
      },
      "ui": {
        "xs": {
          "font-family": "var(--font-sans)",
          "font-size": "12px",
          "line-height": 1.2,
          "font-weight": 400
        }
      },
      "code": {
        "xs": {
          "font-family": "var(--font-mono)",
          "font-size": "14px",
          "line-height": 1.2,
          "font-weight": 400
        }
      }
    }
  }
}