{
  "source": "https://nethesis.github.io/design-system/",
  "typography": {
    "page": "https://nethesis.github.io/design-system/?page=typography",
    "typeface": {
      "family": "Poppins",
      "imports": ["@fontsource/poppins/400.css","@fontsource/poppins/500.css"]
    },
    "weights": [
      {"name":"Regular","value":400,"className":"font-normal","use":"Body text"},
      {"name":"Medium","value":500,"className":"font-medium","use":"Headings, labels and buttons"}
    ],
    "sizes": [
      {"name":"xxs","className":null,"size":10,"lineHeight":12},
      {"name":"xs","className":"text-xs","size":12,"lineHeight":16},
      {"name":"sm","className":"text-sm","size":14,"lineHeight":20},
      {"name":"base","className":"text-base","size":16,"lineHeight":24},
      {"name":"lg","className":"text-lg","size":18,"lineHeight":28},
      {"name":"xl","className":"text-xl","size":20,"lineHeight":28},
      {"name":"2xl","className":"text-2xl","size":24,"lineHeight":32},
      {"name":"3xl","className":"text-3xl","size":30,"lineHeight":36},
      {"name":"4xl","className":"text-4xl","size":36,"lineHeight":40},
      {"name":"5xl","className":"text-5xl","size":48,"lineHeight":48},
      {"name":"6xl","className":"text-6xl","size":60,"lineHeight":60},
      {"name":"7xl","className":"text-7xl","size":72,"lineHeight":72},
      {"name":"8xl","className":"text-8xl","size":96,"lineHeight":96}
    ],
    "textStyles": [
      {"title":"Headings","styles":[{"token":"Headings/H1","className":"text-4xl font-medium","size":36,"lineHeight":40,"weight":"Medium"},{"token":"Headings/H2","className":"text-3xl font-medium","size":30,"lineHeight":36,"weight":"Medium"},{"token":"Headings/H3","className":"text-2xl font-medium","size":24,"lineHeight":32,"weight":"Medium"},{"token":"Headings/H4","className":"text-xl font-medium","size":20,"lineHeight":28,"weight":"Medium"},{"token":"Headings/H5","className":"text-lg font-medium","size":18,"lineHeight":28,"weight":"Medium"},{"token":"Headings/H6","className":"text-base font-medium","size":16,"lineHeight":24,"weight":"Medium"},{"token":"Headings/H7","className":"text-sm/6 font-medium","size":14,"lineHeight":24,"weight":"Medium"}]},
      {"title":"Body","styles":[{"token":"Body/lg","className":"text-lg","size":18,"lineHeight":28,"weight":"Regular"},{"token":"Body/base","className":"text-base","size":16,"lineHeight":24,"weight":"Regular"},{"token":"Body/sm","className":"text-sm","size":14,"lineHeight":20,"weight":"Regular"},{"token":"Body/xs","className":"text-xs","size":12,"lineHeight":16,"weight":"Regular"},{"token":"Body/xxs","className":null,"size":10,"lineHeight":12,"weight":"Regular"}]},
      {"title":"UI elements","styles":[{"token":"UI/Button/lg","className":"text-sm font-medium","size":14,"lineHeight":20,"weight":"Medium"},{"token":"UI/Button/sm","className":"text-xs font-medium","size":12,"lineHeight":16,"weight":"Medium"}]},
      {"title":"Website","styles":[{"token":"Website/H1","className":"text-4xl font-medium","size":36,"lineHeight":40,"weight":"Medium"},{"token":"Website/H2","className":"text-3xl font-medium","size":30,"lineHeight":36,"weight":"Medium"},{"token":"Website/H3","className":null,"size":28,"lineHeight":36,"weight":"Medium"},{"token":"Website/H4","className":"text-2xl font-medium","size":24,"lineHeight":32,"weight":"Medium"},{"token":"Website/H5","className":"text-xl font-medium","size":20,"lineHeight":28,"weight":"Medium"},{"token":"Website/Paragraph","className":"text-base","size":16,"lineHeight":24,"weight":"Regular"},{"token":"UI/Button/xl website","className":"text-base font-medium","size":16,"lineHeight":24,"weight":"Medium"}]}
    ]
  },
  "iconography": {
    "page": "https://nethesis.github.io/design-system/?page=iconography",
    "note": "Free Font Awesome icons, Solid style, shown with FontAwesomeIcon from @fortawesome/vue-fontawesome. Use a Nethesis custom icon only when Font Awesome has none. Light custom icons are only for the inactive sections of the main sidebar. Hide icons next to a text label with aria-hidden=\"true\"; an icon without text needs a label and a tooltip.",
    "packages": [
      {"name":"@fortawesome/free-solid-svg-icons","version":"^6.7.2"},
      {"name":"@nethesis/nethesis-solid-svg-icons","version":"github:nethesis/Font-Awesome#ns-solid"},
      {"name":"@nethesis/nethesis-light-svg-icons","version":"github:nethesis/Font-Awesome#ns-light"},
      {"name":"@nethesis/nethesis-brands-svg-icons","version":"github:nethesis/Font-Awesome#ns-brands"}
    ],
    "sizes": [
      {"px":12,"className":"size-3","use":"Service icons, such as the check circle of a selection"},
      {"px":16,"className":"size-4","use":"The most used size: buttons, badges, tooltips, text inputs, comboboxes, dropdowns, tables"},
      {"px":20,"className":"size-5","use":"Rounded icon"},
      {"px":24,"className":"size-6","use":"Cards, sidebar and top bar"},
      {"px":32,"className":"size-8","use":"File input"},
      {"px":48,"className":"size-12","use":"Empty state"}
    ],
    "customIcons": {
      "solid": ["faAiSpark","faArrowsRepeat","faBlockBrickFire","faBrokenRepeat","faBuildings","faCameraSecurity","faChildTask","faCircleCompleting","faClose","faDisplaySlash","faDoubleExclamation","faEarListen","faElaborate","faEmptySet","faGrid2","faGridDividers","faGridOne","faGridRound","faHangup","faMissed","faOfficePhone","faOpen","faParentTask","faPhoneArrowDownLeft","faRecord","faShorten","faSum","faTrafficCone","faUnitGroups"],
      "light": ["faAddressBook","faBlockBrickFire","faBuilding","faCalendarDay","faChartLine","faCity","faClipboardList","faClockRotateLeft","faCloud","faCreditCard","faCubes","faEnvelope","faGear","faGlobe","faGrid2","faHeadset","faHouse","faList","faMessage","faNetworkWired","faOfficePhone","faPalette","faPuzzlePiece","faRoute","faServer","faShieldHalved","faStar","faTriangleExclamation","faUnitGroups","faUserGroup","faUsers","faWrench"],
      "brands": ["faGravatar","faNetflix","faNordVpn","faSquareXTwitter"]
    }
  },
  "spacingAndBorder": {
    "page": "https://nethesis.github.io/design-system/?page=spacing-and-border",
    "spacing": [
      {"step":0,"token":"space/0","px":0,"rem":"0 rem"},
      {"step":0.5,"token":"space/0,5","px":2,"rem":"0.125 rem"},
      {"step":1,"token":"space/1","px":4,"rem":"0.25 rem"},
      {"step":1.5,"token":"space/1,5","px":6,"rem":"0.375 rem"},
      {"step":2,"token":"space/2","px":8,"rem":"0.5 rem"},
      {"step":2.5,"token":"space/2,5","px":10,"rem":"0.625 rem"},
      {"step":3,"token":"space/3","px":12,"rem":"0.75 rem"},
      {"step":3.5,"token":"space/3,5","px":14,"rem":"0.875 rem"},
      {"step":4,"token":"space/4","px":16,"rem":"1 rem"},
      {"step":5,"token":"space/5","px":20,"rem":"1.25 rem"},
      {"step":6,"token":"space/6","px":24,"rem":"1.5 rem"},
      {"step":7,"token":"space/7","px":28,"rem":"1.75 rem"},
      {"step":8,"token":"space/8","px":32,"rem":"2 rem"},
      {"step":9,"token":"space/9","px":36,"rem":"2.25 rem"},
      {"step":10,"token":"space/10","px":40,"rem":"2.5 rem"},
      {"step":11,"token":"space/11","px":44,"rem":"2.75 rem"},
      {"step":12,"token":"space/12","px":48,"rem":"3 rem"},
      {"step":14,"token":"space/14","px":56,"rem":"3.5 rem"},
      {"step":16,"token":"space/16","px":64,"rem":"4 rem"},
      {"step":20,"token":"space/20","px":80,"rem":"5 rem"},
      {"step":24,"token":"space/24","px":96,"rem":"6 rem"},
      {"step":28,"token":"space/28","px":112,"rem":"7 rem"},
      {"step":32,"token":"space/32","px":128,"rem":"8 rem"},
      {"step":36,"token":"space/36","px":144,"rem":"9 rem"},
      {"step":40,"token":"space/40","px":160,"rem":"10 rem"},
      {"step":44,"token":"space/44","px":176,"rem":"11 rem"},
      {"step":48,"token":"space/48","px":192,"rem":"12 rem"},
      {"step":52,"token":"space/52","px":208,"rem":"13 rem"},
      {"step":56,"token":"space/56","px":224,"rem":"14 rem"},
      {"step":60,"token":"space/60","px":240,"rem":"15 rem"},
      {"step":64,"token":"space/64","px":256,"rem":"16 rem"},
      {"step":72,"token":"space/72","px":288,"rem":"18 rem"},
      {"step":80,"token":"space/80","px":320,"rem":"20 rem"},
      {"step":96,"token":"space/96","px":384,"rem":"24 rem"}
    ],
    "radii": [
      {"token":"radius/rounded-none","className":"rounded-none","px":0,"rem":"0 rem"},
      {"token":"radius/rounded-xs","className":"rounded-xs","px":2,"rem":"0.125 rem"},
      {"token":"radius/rounded-sm","className":"rounded-sm","px":4,"rem":"0.25 rem"},
      {"token":"radius/rounded-md","className":"rounded-md","px":6,"rem":"0.375 rem"},
      {"token":"radius/rounded-lg","className":"rounded-lg","px":8,"rem":"0.5 rem"},
      {"token":"radius/rounded-xl","className":"rounded-xl","px":12,"rem":"0.75 rem"},
      {"token":"radius/rounded-2xl","className":"rounded-2xl","px":16,"rem":"1 rem"},
      {"token":"radius/rounded-3xl","className":"rounded-3xl","px":24,"rem":"1.5 rem"},
      {"token":"radius/rounded-full","className":"rounded-full","px":9999,"rem":"–"}
    ],
    "borderWidths": [
      {"token":"width/border-0","className":"border-0","px":0},
      {"token":"width/border-1","className":"border","px":1},
      {"token":"width/border-2","className":"border-2","px":2},
      {"token":"width/border-4","className":"border-4","px":4},
      {"token":"width/border-8","className":"border-8","px":8}
    ],
    "focusRing": {
      "styles": {"Focus ring/1":"0 0 0 2px <ring color>","Focus ring/2":"0 0 0 2px <gap color, white by default>, 0 0 0 4px <ring color>, 0 1px 2px 0 rgb(0 0 0 / 0.05)"},
      "products": [{"name":"NethSecurity","ring":"#06b6d4","primary":"#0e7490","palette":"cyan"},{"name":"NethVoice","ring":"#10b981","primary":"#047857","palette":"emerald"},{"name":"NethLink","ring":"#3b82f6","primary":"#1d4ed8","palette":"blue"},{"name":"NethService","ring":"#f97316","primary":"#c2410c","palette":"orange"},{"name":"Website and My Nethesis","ring":"#0ea5e9","primary":"#0369a1","palette":"sky"}],
      "status": [{"name":"Info","ring":"#3b82f6","gap":"#dbeafe","className":"ring-blue-500 ring-offset-blue-100"},{"name":"Success","ring":"#22c55e","gap":"#dcfce7","className":"ring-green-500 ring-offset-green-100"},{"name":"Warning","ring":"#f59e0b","gap":"#fef3c7","className":"ring-amber-500 ring-offset-amber-100"},{"name":"Error","ring":"#f43f5e","gap":"#ffe4e6","className":"ring-rose-500 ring-offset-rose-100"}]
    }
  },
  "elevationAndShadow": {
    "page": "https://nethesis.github.io/design-system/?page=elevation-and-shadow",
    "elevation": [
      {"level":"L0","light":"white","dark":"gray-950","className":"bg-white dark:bg-gray-950"},
      {"level":"L1","light":"gray-50","dark":"gray-900","className":"bg-gray-50 dark:bg-gray-900"},
      {"level":"L2","light":"gray-100","dark":"gray-800","className":"bg-gray-100 dark:bg-gray-800"},
      {"level":"L3","light":"gray-200","dark":"gray-700","className":"bg-gray-200 dark:bg-gray-700"},
      {"level":"L4","light":"gray-300","dark":"gray-600","className":"bg-gray-300 dark:bg-gray-600"},
      {"level":"L2 invert","light":"white","dark":"gray-950","className":"bg-white dark:bg-gray-950"}
    ],
    "shadows": [
      {"token":"shadow/xs","className":"shadow-xs","light":"0 1px 2px 0 rgb(0 0 0 / 0.05)","dark":"0 1px 2px 0 rgb(75 85 99 / 0.05)"},
      {"token":"shadow/sm","className":"shadow-sm","light":"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)","dark":"0 1px 3px 0 rgb(75 85 99 / 0.1), 0 1px 2px -1px rgb(75 85 99 / 0.1)"},
      {"token":"shadow/md","className":"shadow-md","light":"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)","dark":"0 4px 6px -1px rgb(75 85 99 / 0.1), 0 2px 4px -2px rgb(75 85 99 / 0.1)"},
      {"token":"shadow/lg","className":"shadow-lg","light":"0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)","dark":"0 10px 15px -3px rgb(75 85 99 / 0.1), 0 4px 6px -4px rgb(75 85 99 / 0.1)"},
      {"token":"shadow/xl","className":"shadow-xl","light":"0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)","dark":"0 20px 25px -5px rgb(75 85 99 / 0.1), 0 8px 10px -6px rgb(75 85 99 / 0.1)"},
      {"token":"shadow/2xl","className":"shadow-2xl","light":"0 25px 50px -12px rgb(0 0 0 / 0.25)","dark":"0 25px 50px -12px rgb(75 85 99 / 0.25)"},
      {"token":"shadow/drawer","className":"shadow-[0px_20px_40px_0_rgba(0,0,0,0.2)] dark:shadow-[0px_20px_40px_0_rgba(0,0,0,0.6)]","light":"0 20px 40px 0 rgb(0 0 0 / 0.2)","dark":"0 20px 40px 0 rgb(0 0 0 / 0.6)"}
    ]
  }
}