[{"data":1,"prerenderedAt":2447},["ShallowReactive",2],{"i-lucide:search":3,"i-lucide:code-2":8,"i-lucide:trending-up":10,"i-lucide:layers":12,"i-lucide:git-compare":14,"i-lucide:check":16,"i-lucide:plus":18,"i-lucide:arrow-right":20,"i-lucide:chevron-down":22,"i-lucide:sun":24,"i-lucide:moon":26,"i-lucide:menu":28,"i-lucide:split":30,"i-lucide:hand-coins":32,"i-lucide:file-lock-2":34,"i-lucide:server-off":37,"i-lucide:unplug":39,"i-lucide:layout-panel-left":41,"i-lucide:scan-barcode":43,"i-lucide:cloud":45,"i-lucide:arrow-up-right":47,"i-lucide:graduation-cap":49,"i-lucide:activity":51,"i-lucide:banknote":53,"i-lucide:truck":55,"i-lucide:store":57,"i-lucide:shopping-bag":59,"i-lucide:building-2":61,"i-lucide:users":63,"i-lucide:file-stack":65,"i-lucide:contact-round":67,"i-lucide:bar-chart-3":69,"i-lucide:landmark":71,"i-lucide:pen-tool":73,"i-lucide:rocket":75,"i-lucide:life-buoy":77,"i-lucide:palette":79,"i-lucide:component":81,"i-lucide:file-code-2":83,"i-lucide:variable":85,"i-lucide:table-2":87,"i-lucide:accessibility":89,"i-simple-icons:figma":91,"i-simple-icons:storybook":93,"i-simple-icons:framer":95,"i-simple-icons:vuedotjs":97,"i-simple-icons:nuxt":99,"i-simple-icons:react":101,"i-simple-icons:typescript":103,"i-simple-icons:tailwindcss":105,"i-lucide:move-3d":107,"i-simple-icons:nodedotjs":109,"i-simple-icons:postgresql":111,"i-simple-icons:supabase":113,"i-simple-icons:vercel":115,"i-simple-icons:cloudflare":117,"i-simple-icons:anthropic":119,"i-lucide:workflow":121,"i-lucide:database":123,"i-lucide:mail":125,"i-simple-icons:x":127,"i-simple-icons:linkedin":129,"i-simple-icons:dribbble":131,"i-simple-icons:github":133,"hero-latest-post":135,"i-lucide:lock":138,"i-lucide:type":140,"i-lucide:ruler":142,"i-lucide:zap":144,"home-learn-counts":146,"i-lucide:book-open":149,"i-lucide:circle-check-big":151,"i-lucide:printer":153,"i-lucide:languages":155,"home-blog":157},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"m21 21l-4.34-4.34\"\u002F>\u003Ccircle cx=\"11\" cy=\"11\" r=\"8\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m18 16l4-4l-4-4M6 8l-4 4l4 4m8.5-12l-5 16\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M16 7h6v6\"\u002F>\u003Cpath d=\"m22 7l-8.5 8.5l-5-5L2 17\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":13},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z\"\u002F>\u003Cpath d=\"M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12\"\u002F>\u003Cpath d=\"M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":15},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Ccircle cx=\"18\" cy=\"18\" r=\"3\"\u002F>\u003Ccircle cx=\"6\" cy=\"6\" r=\"3\"\u002F>\u003Cpath d=\"M13 6h3a2 2 0 0 1 2 2v7m-7 3H8a2 2 0 0 1-2-2V9\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":17},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20 6L9 17l-5-5\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":19},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 12h14m-7-7v14\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":21},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 12h14m-7-7l7 7l-7 7\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":23},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m6 9l6 6l6-6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":25},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"4\"\u002F>\u003Cpath d=\"M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":27},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":29},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 5h16M4 12h16M4 19h16\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":31},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M16 3h5v5M8 3H3v5\"\u002F>\u003Cpath d=\"M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3m12 6l6-6\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":33},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M11 15h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 17\"\u002F>\u003Cpath d=\"m7 21l1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9M2 16l6 6\"\u002F>\u003Ccircle cx=\"16\" cy=\"9\" r=\"2.9\"\u002F>\u003Ccircle cx=\"6\" cy=\"5\" r=\"3\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":35,"hidden":36},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v1\"\u002F>\u003Cpath d=\"M14 2v4a2 2 0 0 0 2 2h4\"\u002F>\u003Crect width=\"8\" height=\"5\" x=\"2\" y=\"13\" rx=\"1\"\u002F>\u003Cpath d=\"M8 13v-2a2 2 0 1 0-4 0v2\"\u002F>\u003C\u002Fg>",true,{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":38},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 2h13a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-5m-5 0L2.5 2.5C2 2 2 2.5 2 5v3a2 2 0 0 0 2 2zm12 7v-1a2 2 0 0 0-2-2h-1M4 14a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h16.5l1-.5l.5.5l-8-8zm2 4h.01M2 2l20 20\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":40},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m19 5l3-3M2 22l3-3m1.3 1.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6l-2.3 2.3a2.4 2.4 0 0 0 0 3.4Zm1.2-6.8L10 11m.5 5.5L13 14m-1-8l6 6l2.3-2.3a2.4 2.4 0 0 0 0-3.4l-2.6-2.6a2.4 2.4 0 0 0-3.4 0Z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":42},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Crect width=\"7\" height=\"18\" x=\"3\" y=\"3\" rx=\"1\"\u002F>\u003Crect width=\"7\" height=\"7\" x=\"14\" y=\"3\" rx=\"1\"\u002F>\u003Crect width=\"7\" height=\"7\" x=\"14\" y=\"14\" rx=\"1\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":44},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 7V5a2 2 0 0 1 2-2h2m10 0h2a2 2 0 0 1 2 2v2m0 10v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2M8 7v10m4-10v10m5-10v10\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":46},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":48},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 7h10v10M7 17L17 7\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":50},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0zM22 10v6\"\u002F>\u003Cpath d=\"M6 12.5V16a6 3 0 0 0 12 0v-3.5\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":52},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":54},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Crect width=\"20\" height=\"12\" x=\"2\" y=\"6\" rx=\"2\"\u002F>\u003Ccircle cx=\"12\" cy=\"12\" r=\"2\"\u002F>\u003Cpath d=\"M6 12h.01M18 12h.01\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":56},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2m10 0H9m10 0h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14\"\u002F>\u003Ccircle cx=\"17\" cy=\"18\" r=\"2\"\u002F>\u003Ccircle cx=\"7\" cy=\"18\" r=\"2\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":58},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M15 21v-5a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v5m8.774-10.69a1.12 1.12 0 0 0-1.549 0a2.5 2.5 0 0 1-3.451 0a1.12 1.12 0 0 0-1.548 0a2.5 2.5 0 0 1-3.452 0a1.12 1.12 0 0 0-1.549 0a2.5 2.5 0 0 1-3.77-3.248l2.889-4.184A2 2 0 0 1 7 2h10a2 2 0 0 1 1.653.873l2.895 4.192a2.5 2.5 0 0 1-3.774 3.244\"\u002F>\u003Cpath d=\"M4 10.95V19a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8.05\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":60},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M16 10a4 4 0 0 1-8 0M3.103 6.034h17.794\"\u002F>\u003Cpath d=\"M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":62},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M10 12h4m-4-4h4m0 13v-3a2 2 0 0 0-4 0v3\"\u002F>\u003Cpath d=\"M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2\"\u002F>\u003Cpath d=\"M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":64},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M16 3.128a4 4 0 0 1 0 7.744M22 21v-2a4 4 0 0 0-3-3.87\"\u002F>\u003Ccircle cx=\"9\" cy=\"7\" r=\"4\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":66},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M11 21a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1m12 4a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1m12-1a2 2 0 0 0-.586-1.414l-2-2A2 2 0 0 0 17 2h-3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":68},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M16 2v2m1.915 17a6 6 0 1 0-12 0M8 2v2\"\u002F>\u003Ccircle cx=\"12\" cy=\"11\" r=\"4\"\u002F>\u003Crect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":70,"hidden":36},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 3v18h18m-3-4V9m-5 8V5M8 17v-3\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":72},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 18v-7m1.119-8.795a2 2 0 0 1 1.762 0l7.84 3.846A.5.5 0 0 1 20.5 7h-17a.5.5 0 0 1-.22-.949zM14 18v-7m4 7v-7M3 22h18M6 18v-7\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":74},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M15.707 21.293a1 1 0 0 1-1.414 0l-1.586-1.586a1 1 0 0 1 0-1.414l5.586-5.586a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414z\"\u002F>\u003Cpath d=\"m18 13l-1.375-6.874a1 1 0 0 0-.746-.776L3.235 2.028a1 1 0 0 0-1.207 1.207L5.35 15.879a1 1 0 0 0 .776.746L13 18M2.3 2.3l7.286 7.286\"\u002F>\u003Ccircle cx=\"11\" cy=\"11\" r=\"2\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":76},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09\"\u002F>\u003Cpath d=\"M9 12a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.4 22.4 0 0 1-4 2z\"\u002F>\u003Cpath d=\"M9 12H4s.55-3.03 2-4c1.62-1.08 5 .05 5 .05\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":78},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"10\"\u002F>\u003Cpath d=\"m4.93 4.93l4.24 4.24m5.66 0l4.24-4.24m-4.24 9.9l4.24 4.24m-9.9-4.24l-4.24 4.24\"\u002F>\u003Ccircle cx=\"12\" cy=\"12\" r=\"4\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":80},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M12 22a1 1 0 0 1 0-20a10 9 0 0 1 10 9a5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z\"\u002F>\u003Ccircle cx=\"13.5\" cy=\"6.5\" r=\".5\" fill=\"currentColor\"\u002F>\u003Ccircle cx=\"17.5\" cy=\"10.5\" r=\".5\" fill=\"currentColor\"\u002F>\u003Ccircle cx=\"6.5\" cy=\"12.5\" r=\".5\" fill=\"currentColor\"\u002F>\u003Ccircle cx=\"8.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":82},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15.536 11.293a1 1 0 0 0 0 1.414l2.376 2.377a1 1 0 0 0 1.414 0l2.377-2.377a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0zm-13.239 0a1 1 0 0 0 0 1.414l2.377 2.377a1 1 0 0 0 1.414 0l2.377-2.377a1 1 0 0 0 0-1.414L6.088 8.916a1 1 0 0 0-1.414 0zm6.619 6.619a1 1 0 0 0 0 1.415l2.377 2.376a1 1 0 0 0 1.414 0l2.377-2.376a1 1 0 0 0 0-1.415l-2.377-2.376a1 1 0 0 0-1.414 0zm0-13.238a1 1 0 0 0 0 1.414l2.377 2.376a1 1 0 0 0 1.414 0l2.377-2.376a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":84,"hidden":36},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4\"\u002F>\u003Cpath d=\"M14 2v4a2 2 0 0 0 2 2h4M5 12l-3 3l3 3m4 0l3-3l-3-3\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":86},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 21s-4-3-4-9s4-9 4-9m8 0s4 3 4 9s-4 9-4 9M15 9l-6 6m0-6l6 6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":88},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":90},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Ccircle cx=\"16\" cy=\"4\" r=\"1\"\u002F>\u003Cpath d=\"m18 19l1-7l-6 1M5 8l3-3l5.5 3l-2.36 3.5m-6.9 3a5 5 0 0 0 6.88 6\"\u002F>\u003Cpath d=\"M13.76 17.5a5 5 0 0 0-6.88-6\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":92},"\u003Cpath fill=\"currentColor\" d=\"M15.852 8.981h-4.588V0h4.588c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.491-4.49 4.491M12.735 7.51h3.117c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019h-3.117zm0 1.471H8.148c-2.476 0-4.49-2.014-4.49-4.49S5.672 0 8.148 0h4.588v8.981zm-4.587-7.51c-1.665 0-3.019 1.355-3.019 3.019s1.354 3.02 3.019 3.02h3.117V1.471zm4.587 15.019H8.148c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h4.588v8.98zM8.148 8.981c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h3.117V8.981zM8.172 24c-2.489 0-4.515-2.014-4.515-4.49s2.014-4.49 4.49-4.49h4.588v4.441c0 2.503-2.047 4.539-4.563 4.539m-.024-7.51a3.023 3.023 0 0 0-3.019 3.019c0 1.665 1.365 3.019 3.044 3.019c1.705 0 3.093-1.376 3.093-3.068v-2.97zm7.704 0h-.098c-2.476 0-4.49-2.014-4.49-4.49s2.014-4.49 4.49-4.49h.098c2.476 0 4.49 2.014 4.49 4.49s-2.014 4.49-4.49 4.49m-.097-7.509c-1.665 0-3.019 1.355-3.019 3.019s1.355 3.019 3.019 3.019h.098c1.665 0 3.019-1.355 3.019-3.019s-1.355-3.019-3.019-3.019z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":94},"\u003Cpath fill=\"currentColor\" d=\"m16.71.243l-.12 2.71a.18.18 0 0 0 .29.15l1.06-.8l.9.7a.18.18 0 0 0 .28-.14l-.1-2.76l1.33-.1a1.2 1.2 0 0 1 1.279 1.2v21.596a1.2 1.2 0 0 1-1.26 1.2l-16.096-.72a1.2 1.2 0 0 1-1.15-1.16l-.75-19.797a1.2 1.2 0 0 1 1.13-1.27L16.7.222zM13.64 9.3c0 .47 3.16.24 3.59-.08c0-3.2-1.72-4.89-4.859-4.89c-3.15 0-4.899 1.72-4.899 4.29c0 4.45 5.999 4.53 5.999 6.959c0 .7-.32 1.1-1.05 1.1c-.96 0-1.35-.49-1.3-2.16c0-.36-3.649-.48-3.769 0c-.27 4.03 2.23 5.2 5.099 5.2c2.79 0 4.969-1.49 4.969-4.18c0-4.77-6.099-4.64-6.099-6.999c0-.97.72-1.1 1.13-1.1c.45 0 1.25.07 1.19 1.87z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":96},"\u003Cpath fill=\"currentColor\" d=\"M4 0h16v8h-8zm0 8h8l8 8H4zm0 8h8v8z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":98},"\u003Cpath fill=\"currentColor\" d=\"M24 1.61h-9.94L12 5.16L9.94 1.61H0l12 20.78ZM12 14.08L5.16 2.23h4.43L12 6.41l2.41-4.18h4.43Z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":100},"\u003Cpath fill=\"currentColor\" d=\"M13.464 19.83h8.922c.283 0 .562-.073.807-.21a1.6 1.6 0 0 0 .591-.574a1.53 1.53 0 0 0 .216-.783a1.53 1.53 0 0 0-.217-.782L17.792 7.414a1.6 1.6 0 0 0-.591-.573a1.65 1.65 0 0 0-.807-.21c-.283 0-.562.073-.807.21a1.6 1.6 0 0 0-.59.573L13.463 9.99L10.47 4.953a1.6 1.6 0 0 0-.591-.573a1.65 1.65 0 0 0-.807-.21c-.284 0-.562.073-.807.21a1.6 1.6 0 0 0-.591.573L.216 17.481a1.53 1.53 0 0 0-.217.782c0 .275.074.545.216.783a1.6 1.6 0 0 0 .59.574c.246.137.525.21.808.21h5.6c2.22 0 3.856-.946 4.982-2.79l2.733-4.593l1.464-2.457l4.395 7.382h-5.859Zm-6.341-2.46l-3.908-.002l5.858-9.842l2.923 4.921l-1.957 3.29c-.748 1.196-1.597 1.632-2.916 1.632\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":102},"\u003Cpath fill=\"currentColor\" d=\"M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236a2.236 2.236 0 0 1-2.236-2.236a2.236 2.236 0 0 1 2.235-2.236a2.236 2.236 0 0 1 2.236 2.236m2.648-10.69c-1.346 0-3.107.96-4.888 2.622c-1.78-1.653-3.542-2.602-4.887-2.602c-.41 0-.783.093-1.106.278c-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03c-.704 3.113-.39 5.588.988 6.38c.32.187.69.275 1.102.275c1.345 0 3.107-.96 4.888-2.624c1.78 1.654 3.542 2.603 4.887 2.603c.41 0 .783-.09 1.106-.275c1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032c.704-3.11.39-5.587-.988-6.38a2.17 2.17 0 0 0-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127c.666.382.955 1.835.73 3.704c-.054.46-.142.945-.25 1.44a23.5 23.5 0 0 0-3.107-.534A24 24 0 0 0 12.769 4.7c1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28c-.686.72-1.37 1.537-2.02 2.442a23 23 0 0 0-3.113.538a15 15 0 0 1-.254-1.42c-.23-1.868.054-3.32.714-3.707c.19-.09.4-.127.563-.132zm4.882 3.05q.684.704 1.36 1.564c-.44-.02-.89-.034-1.345-.034q-.691-.001-1.36.034c.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093q.61.874 1.183 1.86q.557.961 1.018 1.946c-.308.655-.646 1.31-1.013 1.95c-.38.66-.773 1.288-1.18 1.87a25.6 25.6 0 0 1-4.412.005a27 27 0 0 1-1.183-1.86q-.557-.961-1.018-1.946a25 25 0 0 1 1.013-1.954c.38-.66.773-1.286 1.18-1.868A25 25 0 0 1 12 8.098zm-3.635.254c-.24.377-.48.763-.704 1.16q-.336.585-.635 1.174c-.265-.656-.49-1.31-.676-1.947c.64-.15 1.315-.283 2.015-.386zm7.26 0q1.044.153 2.006.387c-.18.632-.405 1.282-.66 1.933a26 26 0 0 0-1.345-2.32zm3.063.675q.727.226 1.375.498c1.732.74 2.852 1.708 2.852 2.476c-.005.768-1.125 1.74-2.857 2.475c-.42.18-.88.342-1.355.493a24 24 0 0 0-1.1-2.98c.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98a23 23 0 0 0-1.086 2.964c-.484-.15-.944-.318-1.37-.5c-1.732-.737-2.852-1.706-2.852-2.474s1.12-1.742 2.852-2.476c.42-.18.88-.342 1.356-.494m11.678 4.28c.265.657.49 1.312.676 1.948c-.64.157-1.316.29-2.016.39a26 26 0 0 0 1.341-2.338zm-9.945.02c.2.392.41.783.64 1.175q.345.586.705 1.143a22 22 0 0 1-2.006-.386c.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423c.23 1.868-.054 3.32-.714 3.708c-.147.09-.338.128-.563.128c-1.012 0-2.514-.807-4.11-2.28c.686-.72 1.37-1.536 2.02-2.44c1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532c.66.905 1.345 1.727 2.035 2.446c-1.595 1.483-3.092 2.295-4.11 2.295a1.2 1.2 0 0 1-.553-.132c-.666-.38-.955-1.834-.73-3.703c.054-.46.142-.944.25-1.438zm4.56.64q.661.032 1.345.034q.691.001 1.36-.034c-.44.572-.895 1.095-1.345 1.565q-.684-.706-1.36-1.565\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":104},"\u003Cpath fill=\"currentColor\" d=\"M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75q.918 0 1.627.111a6.4 6.4 0 0 1 1.306.34v2.458a4 4 0 0 0-.643-.361a5 5 0 0 0-.717-.26a5.5 5.5 0 0 0-1.426-.2q-.45 0-.819.086a2.1 2.1 0 0 0-.623.242q-.254.156-.393.374a.9.9 0 0 0-.14.49q0 .294.156.529q.156.234.443.444c.287.21.423.276.696.41q.41.203.926.416q.705.296 1.266.628q.561.333.963.753q.402.418.614.957q.213.538.214 1.253q0 .986-.373 1.656a3 3 0 0 1-1.012 1.085a4.4 4.4 0 0 1-1.487.596q-.85.18-1.79.18a10 10 0 0 1-1.84-.164a5.5 5.5 0 0 1-1.512-.493v-2.63a5.03 5.03 0 0 0 3.237 1.2q.5 0 .872-.09q.373-.09.623-.25q.249-.162.373-.38a1.02 1.02 0 0 0-.074-1.089a2.1 2.1 0 0 0-.537-.5a5.6 5.6 0 0 0-.807-.444a28 28 0 0 0-1.007-.436q-1.377-.575-2.053-1.405t-.676-2.005q0-.92.369-1.582q.368-.662 1.004-1.089a4.5 4.5 0 0 1 1.47-.629a7.5 7.5 0 0 1 1.77-.201m-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":106},"\u003Cpath fill=\"currentColor\" d=\"M12.001 4.8q-4.8 0-6 4.8q1.8-2.4 4.2-1.8c.913.228 1.565.89 2.288 1.624C13.666 10.618 15.027 12 18.001 12q4.8 0 6-4.8q-1.8 2.4-4.2 1.8c-.913-.228-1.565-.89-2.288-1.624C16.337 6.182 14.976 4.8 12.001 4.8m-6 7.2q-4.8 0-6 4.8q1.8-2.4 4.2-1.8c.913.228 1.565.89 2.288 1.624c1.177 1.194 2.538 2.576 5.512 2.576q4.8 0 6-4.8q-1.8 2.4-4.2 1.8c-.913-.228-1.565-.89-2.288-1.624C10.337 13.382 8.976 12 6.001 12\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":108},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M5 3v16h16M5 19l6-6\"\u002F>\u003Cpath d=\"m2 6l3-3l3 3m10 10l3 3l-3 3\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":110},"\u003Cpath fill=\"currentColor\" d=\"M11.998 24c-.321 0-.641-.084-.922-.247L8.14 22.016c-.438-.245-.224-.332-.08-.383c.585-.203.703-.25 1.328-.604c.065-.037.151-.023.218.017l2.256 1.339a.29.29 0 0 0 .272 0l8.795-5.076a.28.28 0 0 0 .134-.238V6.921a.28.28 0 0 0-.137-.242l-8.791-5.072a.28.28 0 0 0-.271 0L3.075 6.68a.28.28 0 0 0-.139.241v10.15a.27.27 0 0 0 .139.235l2.409 1.392c1.307.654 2.108-.116 2.108-.89V7.787c0-.142.114-.253.256-.253h1.115c.139 0 .255.112.255.253v10.021c0 1.745-.95 2.745-2.604 2.745c-.508 0-.909 0-2.026-.551L2.28 18.675a1.86 1.86 0 0 1-.922-1.604V6.921c0-.659.353-1.275.922-1.603L11.075.236a1.93 1.93 0 0 1 1.848 0l8.794 5.082c.57.329.924.944.924 1.603v10.15a1.86 1.86 0 0 1-.924 1.604l-8.794 5.078c-.28.163-.599.247-.925.247m7.101-10.007c0-1.9-1.284-2.406-3.987-2.763c-2.731-.361-3.009-.548-3.009-1.187c0-.528.235-1.233 2.258-1.233c1.807 0 2.473.389 2.747 1.607a.254.254 0 0 0 .247.199h1.141a.26.26 0 0 0 .186-.081a.26.26 0 0 0 .067-.196c-.177-2.098-1.571-3.076-4.388-3.076c-2.508 0-4.004 1.058-4.004 2.833c0 1.925 1.488 2.457 3.895 2.695c2.88.282 3.103.703 3.103 1.269c0 .983-.789 1.402-2.642 1.402c-2.327 0-2.839-.584-3.011-1.742a.255.255 0 0 0-.253-.215h-1.137a.25.25 0 0 0-.254.253c0 1.482.806 3.248 4.655 3.248c2.788.001 4.386-1.096 4.386-3.013\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":112},"\u003Cpath fill=\"currentColor\" d=\"M23.56 14.723a.5.5 0 0 0-.057-.12q-.21-.395-1.007-.231c-1.654.34-2.294.13-2.526-.02c1.342-2.048 2.445-4.522 3.041-6.83c.272-1.05.798-3.523.122-4.73a1.6 1.6 0 0 0-.15-.236C21.693.91 19.8.025 17.51.001c-1.495-.016-2.77.346-3.116.479a10 10 0 0 0-.516-.082a8 8 0 0 0-1.312-.127c-1.182-.019-2.203.264-3.05.84C8.66.79 4.729-.534 2.296 1.19C.935 2.153.309 3.873.43 6.304c.041.818.507 3.334 1.243 5.744q.69 2.26 1.433 3.582q.83 1.493 1.714 1.79c.448.148 1.133.143 1.858-.729a56 56 0 0 1 1.945-2.206c.435.235.906.362 1.39.377v.004a11 11 0 0 0-.247.305c-.339.43-.41.52-1.5.745c-.31.064-1.134.233-1.146.811a.6.6 0 0 0 .091.327c.227.423.922.61 1.015.633c1.335.333 2.505.092 3.372-.679c-.017 2.231.077 4.418.345 5.088c.221.553.762 1.904 2.47 1.904q.375.001.829-.094c1.782-.382 2.556-1.17 2.855-2.906c.15-.87.402-2.875.539-4.101c.017-.07.036-.12.057-.136c0 0 .07-.048.427.03l.044.007l.254.022l.015.001c.847.039 1.911-.142 2.531-.43c.644-.3 1.806-1.033 1.595-1.67M2.37 11.876c-.744-2.435-1.178-4.885-1.212-5.571c-.109-2.172.417-3.683 1.562-4.493c1.837-1.299 4.84-.54 6.108-.13l-.01.01C6.795 3.734 6.843 7.226 6.85 7.44c0 .082.006.199.016.36c.034.586.1 1.68-.074 2.918c-.16 1.15.194 2.276.973 3.089q.12.126.252.237c-.347.371-1.1 1.193-1.903 2.158c-.568.682-.96.551-1.088.508c-.392-.13-.813-.587-1.239-1.322c-.48-.839-.963-2.032-1.415-3.512m6.007 5.088a1.6 1.6 0 0 1-.432-.178c.089-.039.237-.09.483-.14c1.284-.265 1.482-.451 1.915-1a8 8 0 0 1 .367-.443a.4.4 0 0 0 .074-.13c.17-.151.272-.11.436-.042c.156.065.308.26.37.475c.03.102.062.295-.045.445c-.904 1.266-2.222 1.25-3.168 1.013m2.094-3.988l-.052.14c-.133.357-.257.689-.334 1.004c-.667-.002-1.317-.288-1.81-.803c-.628-.655-.913-1.566-.783-2.5c.183-1.308.116-2.447.08-3.059l-.013-.22c.296-.262 1.666-.996 2.643-.772c.446.102.718.406.83.928c.585 2.704.078 3.83-.33 4.736a9 9 0 0 0-.23.546m7.364 4.572q-.024.266-.062.596l-.146.438a.4.4 0 0 0-.018.108c-.006.475-.054.649-.115.87a4.8 4.8 0 0 0-.18 1.057c-.11 1.414-.878 2.227-2.417 2.556c-1.515.325-1.784-.496-2.02-1.221a7 7 0 0 0-.078-.227c-.215-.586-.19-1.412-.157-2.555c.016-.561-.025-1.901-.33-2.646q.006-.44.019-.892a.4.4 0 0 0-.016-.113a2 2 0 0 0-.044-.208c-.122-.428-.42-.786-.78-.935c-.142-.059-.403-.167-.717-.087c.067-.276.183-.587.309-.925l.053-.142c.06-.16.134-.325.213-.5c.426-.948 1.01-2.246.376-5.178c-.237-1.098-1.03-1.634-2.232-1.51c-.72.075-1.38.366-1.709.532a6 6 0 0 0-.196.104c.092-1.106.439-3.174 1.736-4.482a4 4 0 0 1 .303-.276a.35.35 0 0 0 .145-.064c.752-.57 1.695-.85 2.802-.833q.616.01 1.174.081c1.94.355 3.244 1.447 4.036 2.383c.814.962 1.255 1.931 1.431 2.454c-1.323-.134-2.223.127-2.68.78c-.992 1.418.544 4.172 1.282 5.496c.135.242.252.452.289.54c.24.583.551.972.778 1.256c.07.087.138.171.189.245c-.4.116-1.12.383-1.055 1.717a35 35 0 0 1-.084.815c-.046.208-.07.46-.1.766m.89-1.621c-.04-.832.27-.919.597-1.01l.135-.041a1 1 0 0 0 .134.103c.57.376 1.583.421 3.007.134c-.202.177-.519.4-.953.601c-.41.19-1.096.333-1.747.364c-.72.034-1.086-.08-1.173-.151m.57-9.271a7 7 0 0 1-.105 1.001c-.055.358-.112.728-.127 1.177c-.014.436.04.89.093 1.33c.107.887.216 1.8-.207 2.701a4 4 0 0 1-.188-.385a8 8 0 0 0-.325-.617c-.616-1.104-2.057-3.69-1.32-4.744c.38-.543 1.342-.566 2.179-.463m.228 7.013l-.085-.107l-.035-.044c.726-1.2.584-2.387.457-3.439c-.052-.432-.1-.84-.088-1.222c.013-.407.066-.755.118-1.092c.064-.415.13-.844.111-1.35a.6.6 0 0 0 .012-.19c-.046-.486-.6-1.938-1.73-3.253a7.8 7.8 0 0 0-2.688-2.04A9.3 9.3 0 0 1 17.62.746c2.052.046 3.675.814 4.824 2.283a1 1 0 0 1 .067.1c.723 1.356-.276 6.275-2.987 10.54m-8.816-6.116c-.025.18-.31.423-.621.423l-.081-.006a.8.8 0 0 1-.506-.315c-.046-.06-.12-.178-.106-.285a.22.22 0 0 1 .093-.149c.118-.089.352-.122.61-.086c.316.044.642.193.61.418m7.93-.411c.011.08-.049.2-.153.31a.72.72 0 0 1-.408.223l-.075.005c-.293 0-.541-.234-.56-.371c-.024-.177.264-.31.56-.352c.298-.042.612.009.636.185\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":114},"\u003Cpath fill=\"currentColor\" d=\"M11.9 1.036c-.015-.986-1.26-1.41-1.874-.637L.764 12.05C-.33 13.427.65 15.455 2.409 15.455h9.579l.113 7.51c.014.985 1.259 1.408 1.873.636l9.262-11.653c1.093-1.375.113-3.403-1.645-3.403h-9.642z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":116},"\u003Cpath fill=\"currentColor\" d=\"m12 1.608l12 20.784H0Z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":118},"\u003Cpath fill=\"currentColor\" d=\"M16.509 16.845c.147-.507.09-.971-.155-1.316c-.225-.316-.605-.499-1.062-.52l-8.66-.113a.16.16 0 0 1-.133-.07a.2.2 0 0 1-.02-.156a.24.24 0 0 1 .203-.156l8.736-.113c1.035-.049 2.16-.886 2.554-1.913l.499-1.302a.27.27 0 0 0 .014-.168a5.689 5.689 0 0 0-10.937-.584a2.58 2.58 0 0 0-1.794-.498a2.56 2.56 0 0 0-2.223 3.18A3.634 3.634 0 0 0 0 16.751q.002.264.035.527a.174.174 0 0 0 .17.148h15.98a.22.22 0 0 0 .204-.155zm2.757-5.564c-.077 0-.161 0-.239.011c-.056 0-.105.042-.127.098l-.337 1.174c-.148.507-.092.971.154 1.317c.225.316.605.498 1.062.52l1.844.113c.056 0 .105.026.133.07a.2.2 0 0 1 .021.156a.24.24 0 0 1-.204.156l-1.92.112c-1.042.049-2.159.887-2.553 1.914l-.141.358c-.028.072.021.142.099.142h6.597a.174.174 0 0 0 .17-.126a5 5 0 0 0 .175-1.28a4.74 4.74 0 0 0-4.734-4.727\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":120},"\u003Cpath fill=\"currentColor\" d=\"M17.304 3.541h-3.672l6.696 16.918H24Zm-10.608 0L0 20.459h3.744l1.37-3.553h7.005l1.369 3.553h3.744L10.536 3.541Zm-.371 10.223L8.616 7.82l2.291 5.945Z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":122},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Crect width=\"8\" height=\"8\" x=\"3\" y=\"3\" rx=\"2\"\u002F>\u003Cpath d=\"M7 11v4a2 2 0 0 0 2 2h4\"\u002F>\u003Crect width=\"8\" height=\"8\" x=\"13\" y=\"13\" rx=\"2\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":124},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\"\u002F>\u003Cpath d=\"M3 5v14a9 3 0 0 0 18 0V5\"\u002F>\u003Cpath d=\"M3 12a9 3 0 0 0 18 0\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":126},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"m22 7l-8.991 5.727a2 2 0 0 1-2.009 0L2 7\"\u002F>\u003Crect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":128},"\u003Cpath fill=\"currentColor\" d=\"M14.234 10.162L22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299l-.929-1.329L3.076 1.56h3.182l5.965 8.532l.929 1.329l7.754 11.09h-3.182z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":130,"hidden":36},"\u003Cpath fill=\"currentColor\" d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037c-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85c3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.06 2.06 0 0 1-2.063-2.065a2.064 2.064 0 1 1 2.063 2.065m1.782 13.019H3.555V9h3.564zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":132},"\u003Cpath fill=\"currentColor\" d=\"M12 24C5.385 24 0 18.615 0 12S5.385 0 12 0s12 5.385 12 12s-5.385 12-12 12m10.12-10.358c-.35-.11-3.17-.953-6.384-.438c1.34 3.684 1.887 6.684 1.992 7.308a10.28 10.28 0 0 0 4.395-6.87zm-6.115 7.808c-.153-.9-.75-4.032-2.19-7.77l-.066.02c-5.79 2.015-7.86 6.025-8.04 6.4a10.16 10.16 0 0 0 6.29 2.166c1.42 0 2.77-.29 4-.814zm-11.62-2.58c.232-.4 3.045-5.055 8.332-6.765q.202-.067.405-.12q-.392-.879-.832-1.74C7.17 11.775 2.206 11.71 1.756 11.7l-.004.312c0 2.633.998 5.037 2.634 6.855zm-2.42-8.955c.46.008 4.683.026 9.477-1.248a66 66 0 0 0-3.8-5.928a10.28 10.28 0 0 0-5.676 7.17zM9.6 2.052c.282.38 2.145 2.914 3.822 6c3.645-1.365 5.19-3.44 5.373-3.702A10.2 10.2 0 0 0 12 1.764c-.825 0-1.63.1-2.4.285zm10.335 3.483c-.218.29-1.935 2.493-5.724 4.04c.24.49.47.985.68 1.486c.08.18.15.36.22.53c3.41-.43 6.8.26 7.14.33c-.02-2.42-.88-4.64-2.31-6.38z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":134},"\u003Cpath fill=\"currentColor\" d=\"M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\u002F>",{"path":136,"title":137},"\u002Fblog\u002Fbn\u002Fbangla-typography-on-the-web","ওয়েবে বাংলা টাইপোগ্রাফি — যে সমস্যাগুলো নিয়ে কেউ লেখে না",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":139},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Crect width=\"18\" height=\"11\" x=\"3\" y=\"11\" rx=\"2\" ry=\"2\"\u002F>\u003Cpath d=\"M7 11V7a5 5 0 0 1 10 0v4\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":141},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 4v16M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2M9 20h6\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":143},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Zm-6.8-2.8l2-2m-5-1l2-2m-5-1l2-2m7 11l2-2\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":145},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15.914 4a1.5 1.5 0 0 0-2.474-1.561l-9 9A1.5 1.5 0 0 0 5.5 14h4.002a.5.5 0 0 1 .471.666L8.086 20a1.5 1.5 0 0 0 2.475 1.56l9-9A1.5 1.5 0 0 0 18.5 10h-3.997a.5.5 0 0 1-.472-.667z\"\u002F>",{"topics":147,"docs":148,"library":5},6,12,{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":150},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 5v16m8.001-2A2 2 0 0 0 22 17V5a2 2 0 0 0-1.999-2L16 3.002A5 5 0 0 0 12 5a5 5 0 0 0-4-2H4a2 2 0 0 0-2 2v12a2 2 0 0 0 1.999 2H8a5 5 0 0 1 4 2a5 5 0 0 1 4-2z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":152},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M21.801 10A10 10 0 1 1 17 3.335\"\u002F>\u003Cpath d=\"m9 11l3 3L22 4\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":154},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6\"\u002F>\u003Crect width=\"12\" height=\"8\" x=\"6\" y=\"14\" rx=\"1\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":156},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m5 8l6 6m-7 0l6-6l2-3M2 5h12M7 2h1m14 20l-5-10l-5 10m2-4h6\"\u002F>",[158,1162,1855],{"id":159,"title":137,"author":160,"body":163,"category":1149,"cover":1150,"coverAlt":137,"date":1151,"description":1152,"draft":6,"extension":1153,"featured":36,"lang":399,"meta":1154,"navigation":36,"path":136,"readingTime":351,"seo":1155,"stem":1156,"tags":1157,"__hash__":1161},"blog\u002Fblog\u002Fbn\u002Fbangla-typography-on-the-web.md",{"name":161,"role":162},"তাসনিম আরা","প্রোডাক্ট ডিজাইনার",{"type":164,"value":165,"toc":1139},"minimark",[166,170,173,178,181,240,247,369,376,381,384,430,433,436,496,499,503,506,513,566,574,581,584,682,689,693,700,711,782,785,789,792,830,838,842,845,848,884,887,894,1081,1084,1088,1095,1124,1135],[167,168,169],"p",{},"একটা ডিজাইন সিস্টেম ল্যাটিন স্ক্রিপ্টের জন্য বানানো হলে সেটা বাংলায় ভাঙে — কিন্তু এমনভাবে ভাঙে যে প্রথম দেখায় বোঝা যায় না। পেজ লোড হয়, লেখা পড়া যায়, কিছু একটা \"ঠিক লাগছে না\" — এইটুকুই।",[167,171,172],{},"এই সাইটে বাংলা ট্র্যাক যোগ করতে গিয়ে যে পাঁচটা জিনিস আলাদা করে ঠিক করতে হয়েছিল, সেগুলোই এখানে। প্রতিটার কারণ স্ক্রিপ্টের গঠনে, রুচিতে নয়।",[174,175,177],"h2",{"id":176},"১-ফন্টে-গ্লিফই-নেই","১. ফন্টে গ্লিফই নেই",[167,179,180],{},"সবচেয়ে বড় সমস্যাটা সবচেয়ে সহজ। Inter, Geist, Satoshi — এদের কারও মধ্যে বাংলা গ্লিফ নেই। বাংলা লেখা এই ফন্টে রেন্ডার করতে দিলে ব্রাউজার fallback খোঁজে, আর সেটা যা পায় তা-ই দেখায়: সিস্টেম ফন্ট, বা টোফু বক্স।",[182,183,188],"pre",{"className":184,"code":185,"language":186,"meta":187,"style":187},"language-css shiki shiki-themes github-dark-dimmed github-dark-dimmed","\u002F* যথেষ্ট নয় *\u002F\nbody {\n font-family: 'Inter', sans-serif;\n}\n","css","",[189,190,191,200,211,234],"code",{"__ignoreMap":187},[192,193,196],"span",{"class":194,"line":195},"line",1,[192,197,199],{"class":198},"s0RzX","\u002F* যথেষ্ট নয় *\u002F\n",[192,201,203,207],{"class":194,"line":202},2,[192,204,206],{"class":205},"sza-u","body",[192,208,210],{"class":209},"sM9_K"," {\n",[192,212,214,218,221,225,228,231],{"class":194,"line":213},3,[192,215,217],{"class":216},"sQdni"," font-family",[192,219,220],{"class":209},": ",[192,222,224],{"class":223},"szYpP","'Inter'",[192,226,227],{"class":209},", ",[192,229,230],{"class":216},"sans-serif",[192,232,233],{"class":209},";\n",[192,235,237],{"class":194,"line":236},4,[192,238,239],{"class":209},"}\n",[167,241,242,243,246],{},"বাংলার জন্য আলাদা ফন্ট লাগবেই, আর সেটা ",[189,244,245],{},"subset"," ধরে আনতে হবে:",[182,248,252],{"className":249,"code":250,"language":251,"meta":187,"style":187},"language-ts shiki shiki-themes github-dark-dimmed github-dark-dimmed","fonts: {\n defaults: { subsets: ['latin'] },\n families: [\n { name: 'Inter', provider: 'google' },\n {\n name: 'Noto Sans Bengali',\n provider: 'google',\n subsets: ['bengali'], \u002F\u002F গ্লোবাল ডিফল্ট latin — এখানে override না করলে\n }, \u002F\u002F যে ফাইলটা আসবে তাতে একটাও দরকারি গ্লিফ নেই\n ],\n}\n","ts",[189,253,254,263,283,291,307,313,324,334,349,358,364],{"__ignoreMap":187},[192,255,256,260],{"class":194,"line":195},[192,257,259],{"class":258},"siJwO","fonts",[192,261,262],{"class":209},": {\n",[192,264,265,268,271,274,277,280],{"class":194,"line":202},[192,266,267],{"class":258}," defaults",[192,269,270],{"class":209},": { ",[192,272,273],{"class":258},"subsets",[192,275,276],{"class":209},": [",[192,278,279],{"class":223},"'latin'",[192,281,282],{"class":209},"] },\n",[192,284,285,288],{"class":194,"line":213},[192,286,287],{"class":258}," families",[192,289,290],{"class":209},": [\n",[192,292,293,296,298,301,304],{"class":194,"line":236},[192,294,295],{"class":209}," { name: ",[192,297,224],{"class":223},[192,299,300],{"class":209},", provider: ",[192,302,303],{"class":223},"'google'",[192,305,306],{"class":209}," },\n",[192,308,310],{"class":194,"line":309},5,[192,311,312],{"class":209}," {\n",[192,314,315,318,321],{"class":194,"line":147},[192,316,317],{"class":209}," name: ",[192,319,320],{"class":223},"'Noto Sans Bengali'",[192,322,323],{"class":209},",\n",[192,325,327,330,332],{"class":194,"line":326},7,[192,328,329],{"class":209}," provider: ",[192,331,303],{"class":223},[192,333,323],{"class":209},[192,335,337,340,343,346],{"class":194,"line":336},8,[192,338,339],{"class":209}," subsets: [",[192,341,342],{"class":223},"'bengali'",[192,344,345],{"class":209},"], ",[192,347,348],{"class":198},"\u002F\u002F গ্লোবাল ডিফল্ট latin — এখানে override না করলে\n",[192,350,352,355],{"class":194,"line":351},9,[192,353,354],{"class":209}," }, ",[192,356,357],{"class":198},"\u002F\u002F যে ফাইলটা আসবে তাতে একটাও দরকারি গ্লিফ নেই\n",[192,359,361],{"class":194,"line":360},10,[192,362,363],{"class":209}," ],\n",[192,365,367],{"class":194,"line":366},11,[192,368,239],{"class":209},[167,370,371,372,375],{},"শেষ লাইনটা আসল ফাঁদ। গ্লোবাল ",[189,373,374],{},"subsets: ['latin']"," থাকলে Noto Sans Bengali-ও latin subset নিয়ে আসবে — ফাইলটা ডাউনলোড হবে, ওজন যোগ হবে, আর একটা বাংলা অক্ষরও দেখাবে না।",[377,378,380],"h3",{"id":379},"fallback-এর-ক্রমটাও-ভাবার-বিষয়","fallback-এর ক্রমটাও ভাবার বিষয়",[167,382,383],{},"বাংলা পেজে ইংরেজিও থাকে — কোড, প্রোডাক্টের নাম, সংখ্যা। ব্রাউজার প্রতি-গ্লিফ ধরে fallback করে, তাই ক্রম ঠিক করে দিলে দুটোই ঠিক ফন্ট পায়:",[182,385,387],{"className":184,"code":386,"language":186,"meta":187,"style":187},":lang(bn) {\n font-family: 'Noto Sans Bengali', 'Inter', ui-sans-serif, sans-serif;\n}\n",[189,388,389,403,426],{"__ignoreMap":187},[192,390,391,394,397,400],{"class":194,"line":195},[192,392,393],{"class":216},":lang",[192,395,396],{"class":209},"(",[192,398,399],{"class":216},"bn",[192,401,402],{"class":209},") {\n",[192,404,405,407,409,411,413,415,417,420,422,424],{"class":194,"line":202},[192,406,217],{"class":216},[192,408,220],{"class":209},[192,410,320],{"class":223},[192,412,227],{"class":209},[192,414,224],{"class":223},[192,416,227],{"class":209},[192,418,419],{"class":216},"ui-sans-serif",[192,421,227],{"class":209},[192,423,230],{"class":216},[192,425,233],{"class":209},[192,427,428],{"class":194,"line":213},[192,429,239],{"class":209},[167,431,432],{},"Noto আগে, তাই বাংলা Noto পায়। ইংরেজি অক্ষর Noto-র ল্যাটিন সেটে আছে বটে, কিন্তু সেটা দেখতে অন্যরকম — পাতায় আলাদা রঙের মতো লাগে। Inter দ্বিতীয়তে থাকায় ল্যাটিন গ্লিফগুলো Inter-এই পড়ে।",[167,434,435],{},"কোড কিন্তু দুই ট্র্যাকেই ল্যাটিন থাকা উচিত:",[182,437,439],{"className":184,"code":438,"language":186,"meta":187,"style":187},":lang(bn) :is(code, pre, kbd, samp) {\n font-family: var(--font-mono);\n}\n",[189,440,441,475,492],{"__ignoreMap":187},[192,442,443,445,447,449,452,455,457,459,461,463,465,468,470,473],{"class":194,"line":195},[192,444,393],{"class":216},[192,446,396],{"class":209},[192,448,399],{"class":216},[192,450,451],{"class":209},") ",[192,453,454],{"class":216},":is",[192,456,396],{"class":209},[192,458,189],{"class":205},[192,460,227],{"class":209},[192,462,182],{"class":205},[192,464,227],{"class":209},[192,466,467],{"class":205},"kbd",[192,469,227],{"class":209},[192,471,472],{"class":205},"samp",[192,474,402],{"class":209},[192,476,477,479,481,484,486,489],{"class":194,"line":202},[192,478,217],{"class":216},[192,480,220],{"class":209},[192,482,483],{"class":216},"var",[192,485,396],{"class":209},[192,487,488],{"class":258},"--font-mono",[192,490,491],{"class":209},");\n",[192,493,494],{"class":194,"line":213},[192,495,239],{"class":209},[167,497,498],{},"একটা shell কমান্ড বাংলা ফন্টে রেন্ডার করার কোনো কারণ নেই, আর কোড ব্লকের লেআউট মনোস্পেসের গ্লিফ-প্রস্থ ধরে বানানো।",[174,500,502],{"id":501},"২-মাত্রা-উপরে-নিচে-জায়গা-চায়","২. মাত্রা উপরে-নিচে জায়গা চায়",[167,504,505],{},"এইটা সবচেয়ে কম আলোচিত, আর সবচেয়ে বেশি চোখে লাগে।",[167,507,508,509,512],{},"বাংলায় কার-চিহ্ন বেসলাইনের উপরে আর নিচে বসে — ি, ী, ু, ূ, ৃ, ে, ৈ, ো, ৌ, রেফ, হসন্ত, যুক্তাক্ষরের নিচের অংশ। ল্যাটিন প্রোজে যে ",[189,510,511],{},"line-height: 1.6"," স্বাভাবিক, বাংলায় সেই মাপে পরপর দুই লাইনের চিহ্নগুলো একে অপরকে ছুঁয়ে ফেলে।",[182,514,516],{"className":184,"code":515,"language":186,"meta":187,"style":187},":lang(bn) .ux-prose :is(p, li, blockquote) {\n line-height: 1.9;\n}\n",[189,517,518,550,562],{"__ignoreMap":187},[192,519,520,522,524,526,528,531,534,536,538,540,543,545,548],{"class":194,"line":195},[192,521,393],{"class":216},[192,523,396],{"class":209},[192,525,399],{"class":216},[192,527,451],{"class":209},[192,529,530],{"class":216},".ux-prose",[192,532,533],{"class":216}," :is",[192,535,396],{"class":209},[192,537,167],{"class":205},[192,539,227],{"class":209},[192,541,542],{"class":205},"li",[192,544,227],{"class":209},[192,546,547],{"class":205},"blockquote",[192,549,402],{"class":209},[192,551,552,555,557,560],{"class":194,"line":202},[192,553,554],{"class":216}," line-height",[192,556,220],{"class":209},[192,558,559],{"class":216},"1.9",[192,561,233],{"class":209},[192,563,564],{"class":194,"line":213},[192,565,239],{"class":209},[167,567,568,569,573],{},"কিন্তু ",[570,571,572],"strong",{},"সব সাইজে এক মান বসানো ভুল"," — আর এই ভুলটা আমরা করেছিলাম।",[167,575,576,577,580],{},"প্রথমে লেখা ছিল ",[189,578,579],{},":lang(bn) :is(h1, h2, h3) { line-height: 1.45 }","। বডি টেক্সটের মাপে এটা ঠিক। কিন্তু পেজ টাইটেল ক্ল্যাম্প হয়ে ৬৪px-এ যায় — সেখানে ১.৪৫ মানে দুই লাইনের মাঝে ৯৩px ফাঁক। দুই শব্দের একটা হেডিং দেখাচ্ছিল যেন ডাবল-স্পেসড।",[167,582,583],{},"টাইপ যত বড়, আনুপাতিক লিডিং তত কম দরকার। একটা fixed multiplier ঠিক উল্টোটা করে। তাই প্রতিটা ধাপে আলাদা:",[182,585,587],{"className":184,"code":586,"language":186,"meta":187,"style":187},":lang(bn) {\n --text-hero--line-height: 1.16; \u002F* ল্যাটিনের চেয়ে সামান্যই বেশি *\u002F\n --text-section--line-height: 1.22;\n --text-title--line-height: 1.35;\n --text-lg--line-height: 1.75;\n --text-base--line-height: 1.8; \u002F* পড়ার মাপে উদার *\u002F\n --text-sm--line-height: 1.65;\n}\n",[189,588,589,599,615,627,639,651,666,678],{"__ignoreMap":187},[192,590,591,593,595,597],{"class":194,"line":195},[192,592,393],{"class":216},[192,594,396],{"class":209},[192,596,399],{"class":216},[192,598,402],{"class":209},[192,600,601,604,606,609,612],{"class":194,"line":202},[192,602,603],{"class":258}," --text-hero--line-height",[192,605,220],{"class":209},[192,607,608],{"class":216},"1.16",[192,610,611],{"class":209},"; ",[192,613,614],{"class":198},"\u002F* ল্যাটিনের চেয়ে সামান্যই বেশি *\u002F\n",[192,616,617,620,622,625],{"class":194,"line":213},[192,618,619],{"class":258}," --text-section--line-height",[192,621,220],{"class":209},[192,623,624],{"class":216},"1.22",[192,626,233],{"class":209},[192,628,629,632,634,637],{"class":194,"line":236},[192,630,631],{"class":258}," --text-title--line-height",[192,633,220],{"class":209},[192,635,636],{"class":216},"1.35",[192,638,233],{"class":209},[192,640,641,644,646,649],{"class":194,"line":309},[192,642,643],{"class":258}," --text-lg--line-height",[192,645,220],{"class":209},[192,647,648],{"class":216},"1.75",[192,650,233],{"class":209},[192,652,653,656,658,661,663],{"class":194,"line":147},[192,654,655],{"class":258}," --text-base--line-height",[192,657,220],{"class":209},[192,659,660],{"class":216},"1.8",[192,662,611],{"class":209},[192,664,665],{"class":198},"\u002F* পড়ার মাপে উদার *\u002F\n",[192,667,668,671,673,676],{"class":194,"line":326},[192,669,670],{"class":258}," --text-sm--line-height",[192,672,220],{"class":209},[192,674,675],{"class":216},"1.65",[192,677,233],{"class":209},[192,679,680],{"class":194,"line":336},[192,681,239],{"class":209},[167,683,684,685,688],{},"টোকেনটা রিডিফাইন করাই যথেষ্ট, কারণ ইউটিলিটিগুলো ",[189,686,687],{},"line-height: var(--text-\u003Csize>--line-height)","-এ কম্পাইল হয়। কোনো সিলেক্টর লিখতে হয় না, আর ওই ধাপ ব্যবহার করা প্রতিটা এলিমেন্ট আপনাআপনি ঠিক হয়ে যায়।",[174,690,692],{"id":691},"৩-uppercase-বাংলায়-একটা-no-op","৩. uppercase বাংলায় একটা no-op",[167,694,695,696,699],{},"বাংলায় বড় হাতের অক্ষর নেই। ",[189,697,698],{},"text-transform: uppercase"," কিছুই বদলায় না।",[167,701,702,703,706,707,710],{},"সমস্যা হলো, eyebrow বা badge-এর স্টাইলে ",[189,704,705],{},"uppercase"," একা আসে না — সাথে ",[189,708,709],{},"letter-spacing"," আসে। ল্যাটিনে বড় হাতের অক্ষর ফাঁক ফাঁক করে বসালে ভালো লাগে। বাংলায় ট্র্যাকিং বাড়ালে যুক্তাক্ষর টেনে আলাদা হয়ে যায়, আর লেবেলটা ভাঙা দেখায়।",[182,712,714],{"className":184,"code":713,"language":186,"meta":187,"style":187},":lang(bn) :is(.ux-eyebrow, .uppercase, [class*='tracking-']) {\n text-transform: none;\n letter-spacing: normal;\n}\n",[189,715,716,754,766,778],{"__ignoreMap":187},[192,717,718,720,722,724,726,728,730,733,735,738,741,744,748,751],{"class":194,"line":195},[192,719,393],{"class":216},[192,721,396],{"class":209},[192,723,399],{"class":216},[192,725,451],{"class":209},[192,727,454],{"class":216},[192,729,396],{"class":209},[192,731,732],{"class":216},".ux-eyebrow",[192,734,227],{"class":209},[192,736,737],{"class":216},".uppercase",[192,739,740],{"class":209},", [",[192,742,743],{"class":216},"class",[192,745,747],{"class":746},"sEYkB","*=",[192,749,750],{"class":223},"'tracking-'",[192,752,753],{"class":209},"]) {\n",[192,755,756,759,761,764],{"class":194,"line":202},[192,757,758],{"class":216}," text-transform",[192,760,220],{"class":209},[192,762,763],{"class":216},"none",[192,765,233],{"class":209},[192,767,768,771,773,776],{"class":194,"line":213},[192,769,770],{"class":216}," letter-spacing",[192,772,220],{"class":209},[192,774,775],{"class":216},"normal",[192,777,233],{"class":209},[192,779,780],{"class":194,"line":236},[192,781,239],{"class":209},[167,783,784],{},"দুটোই বাতিল করা হয়েছে, নতুন করে স্টাইল করা হয়নি — ইংরেজি ট্র্যাক তার নিজের ট্রিটমেন্ট অক্ষত রাখে।",[174,786,788],{"id":787},"৪-একই-px-এ-বাংলা-ছোট-দেখায়","৪. একই px-এ বাংলা ছোট দেখায়",[167,790,791],{},"একই ফন্ট-সাইজে বাংলার x-height ল্যাটিনের তুলনায় কম, তাই পাশাপাশি রাখলে বাংলাটা ছোট লাগে। খুব সামান্য একটা বাম্প দুই ট্র্যাককে একই ডিজাইন সিস্টেমের মতো দেখায়:",[182,793,795],{"className":184,"code":794,"language":186,"meta":187,"style":187},":lang(bn) .ux-prose {\n font-size: 1.03em;\n}\n",[189,796,797,811,826],{"__ignoreMap":187},[192,798,799,801,803,805,807,809],{"class":194,"line":195},[192,800,393],{"class":216},[192,802,396],{"class":209},[192,804,399],{"class":216},[192,806,451],{"class":209},[192,808,530],{"class":216},[192,810,210],{"class":209},[192,812,813,816,818,821,824],{"class":194,"line":202},[192,814,815],{"class":216}," font-size",[192,817,220],{"class":209},[192,819,820],{"class":216},"1.03",[192,822,823],{"class":746},"em",[192,825,233],{"class":209},[192,827,828],{"class":194,"line":213},[192,829,239],{"class":209},[167,831,832,227,834,837],{},[189,833,823],{},[189,835,836],{},"px"," নয় — যাতে ব্যবহারকারীর নিজের ফন্ট-সাইজ সেটিং কাজ করতে থাকে।",[174,839,841],{"id":840},"৫-সংখ্যার-হাইড্রেশন-মিসম্যাচ","৫. সংখ্যার হাইড্রেশন মিসম্যাচ",[167,843,844],{},"এইটা টাইপোগ্রাফির সমস্যা নয়, কিন্তু একই কাজ করতে গিয়ে ধরা পড়ে।",[167,846,847],{},"বাংলা সংখ্যা ফরম্যাট করতে স্বাভাবিক পছন্দ:",[182,849,851],{"className":249,"code":850,"language":251,"meta":187,"style":187},"new Intl.NumberFormat('bn-BD').format(12480)\n",[189,852,853],{"__ignoreMap":187},[192,854,855,858,861,865,867,870,873,876,878,881],{"class":194,"line":195},[192,856,857],{"class":746},"new",[192,859,860],{"class":209}," Intl.",[192,862,864],{"class":863},"s-wk_","NumberFormat",[192,866,396],{"class":209},[192,868,869],{"class":223},"'bn-BD'",[192,871,872],{"class":209},").",[192,874,875],{"class":863},"format",[192,877,396],{"class":209},[192,879,880],{"class":216},"12480",[192,882,883],{"class":209},")\n",[167,885,886],{},"কিন্তু ICU বিল্ডগুলো একমত নয় — কেউ হাজার ধরে গ্রুপ করে (১২,৪৮০), কেউ লাখ ধরে (১২,৪৮০ বনাম ১,২৪৮০ ধরনের পার্থক্য)। Node-এর ICU আর ব্রাউজারের ICU আলাদা হলে সার্ভার একরকম লেখে, ক্লায়েন্ট আরেকরকম — আর prerendered পেজে সেটা সরাসরি hydration mismatch।",[167,888,889,890,893],{},"তাই গ্রুপিংটা ",[189,891,892],{},"en-US"," থেকে নিয়ে শুধু অঙ্কগুলো বদলানো হয়:",[182,895,897],{"className":249,"code":896,"language":251,"meta":187,"style":187},"const BN_DIGITS = ['০', '১', '২', '৩', '৪', '৫', '৬', '৭', '৮', '৯']\n\nexport function formatBnNumber(value: number): string {\n return new Intl.NumberFormat('en-US')\n .format(value)\n .replace(\u002F\\d\u002Fg, (d) => BN_DIGITS[Number(d)]!)\n}\n",[189,898,899,964,969,1001,1020,1030,1077],{"__ignoreMap":187},[192,900,901,904,907,910,913,916,918,921,923,926,928,931,933,936,938,941,943,946,948,951,953,956,958,961],{"class":194,"line":195},[192,902,903],{"class":746},"const",[192,905,906],{"class":216}," BN_DIGITS",[192,908,909],{"class":746}," =",[192,911,912],{"class":209}," [",[192,914,915],{"class":223},"'০'",[192,917,227],{"class":209},[192,919,920],{"class":223},"'১'",[192,922,227],{"class":209},[192,924,925],{"class":223},"'২'",[192,927,227],{"class":209},[192,929,930],{"class":223},"'৩'",[192,932,227],{"class":209},[192,934,935],{"class":223},"'৪'",[192,937,227],{"class":209},[192,939,940],{"class":223},"'৫'",[192,942,227],{"class":209},[192,944,945],{"class":223},"'৬'",[192,947,227],{"class":209},[192,949,950],{"class":223},"'৭'",[192,952,227],{"class":209},[192,954,955],{"class":223},"'৮'",[192,957,227],{"class":209},[192,959,960],{"class":223},"'৯'",[192,962,963],{"class":209},"]\n",[192,965,966],{"class":194,"line":202},[192,967,968],{"emptyLinePlaceholder":36},"\n",[192,970,971,974,977,980,982,985,988,991,994,996,999],{"class":194,"line":213},[192,972,973],{"class":746},"export",[192,975,976],{"class":746}," function",[192,978,979],{"class":863}," formatBnNumber",[192,981,396],{"class":209},[192,983,984],{"class":258},"value",[192,986,987],{"class":746},":",[192,989,990],{"class":216}," number",[192,992,993],{"class":209},")",[192,995,987],{"class":746},[192,997,998],{"class":216}," string",[192,1000,210],{"class":209},[192,1002,1003,1006,1009,1011,1013,1015,1018],{"class":194,"line":236},[192,1004,1005],{"class":746}," return",[192,1007,1008],{"class":746}," new",[192,1010,860],{"class":209},[192,1012,864],{"class":863},[192,1014,396],{"class":209},[192,1016,1017],{"class":223},"'en-US'",[192,1019,883],{"class":209},[192,1021,1022,1025,1027],{"class":194,"line":309},[192,1023,1024],{"class":209}," .",[192,1026,875],{"class":863},[192,1028,1029],{"class":209},"(value)\n",[192,1031,1032,1034,1037,1039,1042,1045,1047,1050,1053,1056,1058,1061,1063,1066,1069,1072,1075],{"class":194,"line":147},[192,1033,1024],{"class":209},[192,1035,1036],{"class":863},"replace",[192,1038,396],{"class":209},[192,1040,1041],{"class":223},"\u002F",[192,1043,1044],{"class":216},"\\d",[192,1046,1041],{"class":223},[192,1048,1049],{"class":746},"g",[192,1051,1052],{"class":209},", (",[192,1054,1055],{"class":258},"d",[192,1057,451],{"class":209},[192,1059,1060],{"class":746},"=>",[192,1062,906],{"class":216},[192,1064,1065],{"class":209},"[",[192,1067,1068],{"class":863},"Number",[192,1070,1071],{"class":209},"(d)]",[192,1073,1074],{"class":746},"!",[192,1076,883],{"class":209},[192,1078,1079],{"class":194,"line":326},[192,1080,239],{"class":209},[167,1082,1083],{},"দেখতে হ্যাক লাগে। কিন্তু এটা deterministic, আর দুই রানটাইমে এক আউটপুট দেয় — যেটাই আসল দাবি।",[174,1085,1087],{"id":1086},"সব-মিলিয়ে","সব মিলিয়ে",[167,1089,1090,1091,1094],{},"লক্ষ্য করার মতো ব্যাপার: এর কোনোটাই \"বাংলার জন্য আলাদা ডিজাইন\" নয়। সবগুলো ",[189,1092,1093],{},":lang(bn)","-এর ভেতরে, একটা আলাদা ফাইলে, সবার শেষে ইমপোর্ট করা — যাতে ল্যাটিন ডিফল্টের উপরে জেতে।",[182,1096,1098],{"className":184,"code":1097,"language":186,"meta":187,"style":187},"@import '.\u002Fprose.css';\n\u002F* সবার শেষে, যাতে :lang(bn) আগেরগুলোকে override করে *\u002F\n@import '.\u002Fbangla.css';\n",[189,1099,1100,1110,1115],{"__ignoreMap":187},[192,1101,1102,1105,1108],{"class":194,"line":195},[192,1103,1104],{"class":746},"@import",[192,1106,1107],{"class":223}," '.\u002Fprose.css'",[192,1109,233],{"class":209},[192,1111,1112],{"class":194,"line":202},[192,1113,1114],{"class":198},"\u002F* সবার শেষে, যাতে :lang(bn) আগেরগুলোকে override করে *\u002F\n",[192,1116,1117,1119,1122],{"class":194,"line":213},[192,1118,1104],{"class":746},[192,1120,1121],{"class":223}," '.\u002Fbangla.css'",[192,1123,233],{"class":209},[167,1125,1126,1127,1130,1131,1134],{},"ইংরেজি ট্র্যাক এই ফাইলটার একটা লাইনও ছোঁয় না। আর ",[189,1128,1129],{},"\u003Chtml lang>"," ভুল হলে পুরো স্টাইলশিটটা চুপচাপ নিষ্ক্রিয় হয়ে যায় — উপসর্গ দেখায় \"বাংলা ভুল ফন্টে রেন্ডার হচ্ছে\", যেটা আসল কারণ থেকে অনেক দূরে। তাই ",[189,1132,1133],{},"lang"," অ্যাট্রিবিউটটা রুট থেকে সেট হয়, প্রতি পেজে নয়, আর একটা নতুন রুট সেটা ভুলে যেতে পারে না।",[1136,1137,1138],"style",{},"html pre.shiki code .s0RzX, html code.shiki .s0RzX{--shiki-default:#768390;--shiki-dark:#768390}html pre.shiki code .sza-u, html code.shiki .sza-u{--shiki-default:#8DDB8C;--shiki-dark:#8DDB8C}html pre.shiki code .sM9_K, html code.shiki .sM9_K{--shiki-default:#ADBAC7;--shiki-dark:#ADBAC7}html pre.shiki code .sQdni, html code.shiki .sQdni{--shiki-default:#6CB6FF;--shiki-dark:#6CB6FF}html pre.shiki code .szYpP, html code.shiki .szYpP{--shiki-default:#96D0FF;--shiki-dark:#96D0FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .siJwO, html code.shiki .siJwO{--shiki-default:#F69D50;--shiki-dark:#F69D50}html pre.shiki code .sEYkB, html code.shiki .sEYkB{--shiki-default:#F47067;--shiki-dark:#F47067}html pre.shiki code .s-wk_, html code.shiki .s-wk_{--shiki-default:#DCBDFB;--shiki-dark:#DCBDFB}",{"title":187,"searchDepth":213,"depth":213,"links":1140},[1141,1144,1145,1146,1147,1148],{"id":176,"depth":202,"text":177,"children":1142},[1143],{"id":379,"depth":213,"text":380},{"id":501,"depth":202,"text":502},{"id":691,"depth":202,"text":692},{"id":787,"depth":202,"text":788},{"id":840,"depth":202,"text":841},{"id":1086,"depth":202,"text":1087},"design","\u002Fcovers\u002Fblog\u002Fbn\u002Fbangla-typography-on-the-web.webp","2026-07-22","লাইন-হাইট, মাত্রার সংঘর্ষ, uppercase-এর অর্থহীনতা আর ফন্ট ফলব্যাক। ল্যাটিনের জন্য বানানো একটা ডিজাইন সিস্টেমে বাংলা বসাতে গিয়ে যা যা ঠিক করতে হয়েছিল।","md",{},{"title":137,"description":1152},"blog\u002Fbn\u002Fbangla-typography-on-the-web",[1158,1159,1160],"টাইপোগ্রাফি","বাংলা","CSS","3-22xvnVCGspPollS842CYIXXRW-Q1sYELaRo6T-o3U",{"id":1163,"title":1164,"author":1165,"body":1168,"category":1842,"cover":1843,"coverAlt":1164,"date":1844,"description":1845,"draft":6,"extension":1153,"featured":6,"lang":399,"meta":1846,"navigation":36,"path":1847,"readingTime":336,"seo":1848,"stem":1849,"tags":1850,"__hash__":1854},"blog\u002Fblog\u002Fbn\u002Fdesign-system-mistakes.md","ডিজাইন সিস্টেম বানানোর আগে যে ভুলগুলো এড়ানো দরকার",{"name":1166,"role":1167},"নাফিস রহমান","ডিজাইন সিস্টেম লিড",{"type":164,"value":1169,"toc":1833},[1170,1173,1177,1180,1298,1308,1314,1318,1325,1533,1544,1547,1593,1600,1604,1613,1625,1629,1632,1682,1696,1699,1703,1706,1709,1713,1716,1807,1814,1818,1824,1827,1830],[167,1171,1172],{},"একটা ডিজাইন সিস্টেম হয় তার প্রথম রিব্র্যান্ড পার করে, নয়তো পারে না। বেশিরভাগ পারে না — আর কারণটা প্রায় সবসময় একই: সিস্টেমে দুইটা লেয়ার আছে, যেখানে দরকার ছিল তিনটা।",[174,1174,1176],{"id":1175},"দুই-লেয়ারের-ফাঁদ","দুই-লেয়ারের ফাঁদ",[167,1178,1179],{},"প্রায় প্রতিটা টোকেন সিস্টেম এইভাবে শুরু হয়। একটা প্যালেট, আর কম্পোনেন্ট যেগুলো সেটা ব্যবহার করে।",[182,1181,1183],{"className":184,"code":1182,"language":186,"meta":187,"style":187},":root {\n --blue-500: #00d4ff;\n --gray-900: #18181b;\n}\n\n.card {\n background: var(--gray-900);\n border-color: var(--gray-800);\n}\n\n.button-primary {\n background: var(--blue-500);\n}\n",[189,1184,1185,1192,1204,1216,1220,1224,1231,1247,1263,1267,1271,1278,1293],{"__ignoreMap":187},[192,1186,1187,1190],{"class":194,"line":195},[192,1188,1189],{"class":216},":root",[192,1191,210],{"class":209},[192,1193,1194,1197,1199,1202],{"class":194,"line":202},[192,1195,1196],{"class":258}," --blue-500",[192,1198,220],{"class":209},[192,1200,1201],{"class":216},"#00d4ff",[192,1203,233],{"class":209},[192,1205,1206,1209,1211,1214],{"class":194,"line":213},[192,1207,1208],{"class":258}," --gray-900",[192,1210,220],{"class":209},[192,1212,1213],{"class":216},"#18181b",[192,1215,233],{"class":209},[192,1217,1218],{"class":194,"line":236},[192,1219,239],{"class":209},[192,1221,1222],{"class":194,"line":309},[192,1223,968],{"emptyLinePlaceholder":36},[192,1225,1226,1229],{"class":194,"line":147},[192,1227,1228],{"class":216},".card",[192,1230,210],{"class":209},[192,1232,1233,1236,1238,1240,1242,1245],{"class":194,"line":326},[192,1234,1235],{"class":216}," background",[192,1237,220],{"class":209},[192,1239,483],{"class":216},[192,1241,396],{"class":209},[192,1243,1244],{"class":258},"--gray-900",[192,1246,491],{"class":209},[192,1248,1249,1252,1254,1256,1258,1261],{"class":194,"line":336},[192,1250,1251],{"class":216}," border-color",[192,1253,220],{"class":209},[192,1255,483],{"class":216},[192,1257,396],{"class":209},[192,1259,1260],{"class":258},"--gray-800",[192,1262,491],{"class":209},[192,1264,1265],{"class":194,"line":351},[192,1266,239],{"class":209},[192,1268,1269],{"class":194,"line":360},[192,1270,968],{"emptyLinePlaceholder":36},[192,1272,1273,1276],{"class":194,"line":366},[192,1274,1275],{"class":216},".button-primary",[192,1277,210],{"class":209},[192,1279,1280,1282,1284,1286,1288,1291],{"class":194,"line":148},[192,1281,1235],{"class":216},[192,1283,220],{"class":209},[192,1285,483],{"class":216},[192,1287,396],{"class":209},[192,1289,1290],{"class":258},"--blue-500",[192,1292,491],{"class":209},[192,1294,1296],{"class":194,"line":1295},13,[192,1297,239],{"class":209},[167,1299,1300,1301,1303,1304,1307],{},"দেখতে পরিষ্কার। ছয় মাস ভালোই চলে। তারপর ব্র্যান্ড বদলায় — নীল থেকে সবুজ — আর তখন বোঝা যায় ",[189,1302,1290],{}," নামটাই সমস্যা। এখন হয় সবুজ রঙ একটা ",[189,1305,1306],{},"blue"," নামের ভেরিয়েবলে রাখতে হবে, নয়তো কোডবেসে ৪০০টা জায়গায় খুঁজে বদলাতে হবে।",[167,1309,1310,1311,1313],{},"আরও খারাপ ব্যাপারটা হলো ডার্ক মোড। ",[189,1312,1244],{}," ডার্ক থিমে ব্যাকগ্রাউন্ড, লাইট থিমে টেক্সট। একই টোকেন, দুইটা উল্টো ভূমিকা। কম্পোনেন্ট যখন সরাসরি প্যালেট ছোঁয়, তখন প্রতিটা কম্পোনেন্টকে জানতে হয় থিম কী — আর সেটাই সিস্টেমটার মৃত্যু।",[174,1315,1317],{"id":1316},"তৃতীয়-লেয়ারটা-ভূমিকা","তৃতীয় লেয়ারটা: ভূমিকা",[167,1319,1320,1321,1324],{},"মাঝখানে যা দরকার, সেটা রঙ নয় — ",[570,1322,1323],{},"ভূমিকা","।",[182,1326,1328],{"className":184,"code":1327,"language":186,"meta":187,"style":187},"\u002F* লেয়ার ১ — প্রিমিটিভ। কোনো প্রোডাক্ট-অর্থ নেই। *\u002F\n:root {\n --cyan-400: #22d3ee;\n --cyan-600: #0891b2;\n --zinc-50: #fafafa;\n --zinc-900: #18181b;\n}\n\n\u002F* লেয়ার ২ — সিমান্টিক। থিম অনুযায়ী বদলায়। *\u002F\n:root {\n --surface: var(--zinc-50);\n --foreground: var(--zinc-900);\n --primary: var(--cyan-600);\n}\n\n[data-theme='dark'] {\n --surface: var(--zinc-900);\n --foreground: var(--zinc-50);\n --primary: var(--cyan-400);\n}\n",[189,1329,1330,1335,1341,1353,1365,1377,1388,1392,1396,1401,1407,1423,1439,1455,1460,1465,1482,1497,1512,1528],{"__ignoreMap":187},[192,1331,1332],{"class":194,"line":195},[192,1333,1334],{"class":198},"\u002F* লেয়ার ১ — প্রিমিটিভ। কোনো প্রোডাক্ট-অর্থ নেই। *\u002F\n",[192,1336,1337,1339],{"class":194,"line":202},[192,1338,1189],{"class":216},[192,1340,210],{"class":209},[192,1342,1343,1346,1348,1351],{"class":194,"line":213},[192,1344,1345],{"class":258}," --cyan-400",[192,1347,220],{"class":209},[192,1349,1350],{"class":216},"#22d3ee",[192,1352,233],{"class":209},[192,1354,1355,1358,1360,1363],{"class":194,"line":236},[192,1356,1357],{"class":258}," --cyan-600",[192,1359,220],{"class":209},[192,1361,1362],{"class":216},"#0891b2",[192,1364,233],{"class":209},[192,1366,1367,1370,1372,1375],{"class":194,"line":309},[192,1368,1369],{"class":258}," --zinc-50",[192,1371,220],{"class":209},[192,1373,1374],{"class":216},"#fafafa",[192,1376,233],{"class":209},[192,1378,1379,1382,1384,1386],{"class":194,"line":147},[192,1380,1381],{"class":258}," --zinc-900",[192,1383,220],{"class":209},[192,1385,1213],{"class":216},[192,1387,233],{"class":209},[192,1389,1390],{"class":194,"line":326},[192,1391,239],{"class":209},[192,1393,1394],{"class":194,"line":336},[192,1395,968],{"emptyLinePlaceholder":36},[192,1397,1398],{"class":194,"line":351},[192,1399,1400],{"class":198},"\u002F* লেয়ার ২ — সিমান্টিক। থিম অনুযায়ী বদলায়। *\u002F\n",[192,1402,1403,1405],{"class":194,"line":360},[192,1404,1189],{"class":216},[192,1406,210],{"class":209},[192,1408,1409,1412,1414,1416,1418,1421],{"class":194,"line":366},[192,1410,1411],{"class":258}," --surface",[192,1413,220],{"class":209},[192,1415,483],{"class":216},[192,1417,396],{"class":209},[192,1419,1420],{"class":258},"--zinc-50",[192,1422,491],{"class":209},[192,1424,1425,1428,1430,1432,1434,1437],{"class":194,"line":148},[192,1426,1427],{"class":258}," --foreground",[192,1429,220],{"class":209},[192,1431,483],{"class":216},[192,1433,396],{"class":209},[192,1435,1436],{"class":258},"--zinc-900",[192,1438,491],{"class":209},[192,1440,1441,1444,1446,1448,1450,1453],{"class":194,"line":1295},[192,1442,1443],{"class":258}," --primary",[192,1445,220],{"class":209},[192,1447,483],{"class":216},[192,1449,396],{"class":209},[192,1451,1452],{"class":258},"--cyan-600",[192,1454,491],{"class":209},[192,1456,1458],{"class":194,"line":1457},14,[192,1459,239],{"class":209},[192,1461,1463],{"class":194,"line":1462},15,[192,1464,968],{"emptyLinePlaceholder":36},[192,1466,1468,1470,1473,1476,1479],{"class":194,"line":1467},16,[192,1469,1065],{"class":209},[192,1471,1472],{"class":216},"data-theme",[192,1474,1475],{"class":746},"=",[192,1477,1478],{"class":223},"'dark'",[192,1480,1481],{"class":209},"] {\n",[192,1483,1485,1487,1489,1491,1493,1495],{"class":194,"line":1484},17,[192,1486,1411],{"class":258},[192,1488,220],{"class":209},[192,1490,483],{"class":216},[192,1492,396],{"class":209},[192,1494,1436],{"class":258},[192,1496,491],{"class":209},[192,1498,1500,1502,1504,1506,1508,1510],{"class":194,"line":1499},18,[192,1501,1427],{"class":258},[192,1503,220],{"class":209},[192,1505,483],{"class":216},[192,1507,396],{"class":209},[192,1509,1420],{"class":258},[192,1511,491],{"class":209},[192,1513,1515,1517,1519,1521,1523,1526],{"class":194,"line":1514},19,[192,1516,1443],{"class":258},[192,1518,220],{"class":209},[192,1520,483],{"class":216},[192,1522,396],{"class":209},[192,1524,1525],{"class":258},"--cyan-400",[192,1527,491],{"class":209},[192,1529,1531],{"class":194,"line":1530},20,[192,1532,239],{"class":209},[167,1534,1535,1536,1539,1540,1543],{},"খেয়াল করুন ",[189,1537,1538],{},"--primary"," দুই থিমে ",[570,1541,1542],{},"আলাদা hex","। এটা ভুল নয়, এটাই মূল কথা। ডার্ক মোডের উজ্জ্বল সায়ান সাদা ব্যাকগ্রাউন্ডে কনট্রাস্ট পরীক্ষায় ফেল করে। \"একটা ব্র্যান্ড কালার সব জায়গায়\" — এই ধারণাটাই অ্যাক্সেসিবিলিটির সাথে সাংঘর্ষিক।",[167,1545,1546],{},"কম্পোনেন্ট এখন শুধু ভূমিকা ব্যবহার করে:",[182,1548,1550],{"className":184,"code":1549,"language":186,"meta":187,"style":187},".card {\n background: var(--surface);\n color: var(--foreground);\n}\n",[189,1551,1552,1558,1573,1589],{"__ignoreMap":187},[192,1553,1554,1556],{"class":194,"line":195},[192,1555,1228],{"class":216},[192,1557,210],{"class":209},[192,1559,1560,1562,1564,1566,1568,1571],{"class":194,"line":202},[192,1561,1235],{"class":216},[192,1563,220],{"class":209},[192,1565,483],{"class":216},[192,1567,396],{"class":209},[192,1569,1570],{"class":258},"--surface",[192,1572,491],{"class":209},[192,1574,1575,1578,1580,1582,1584,1587],{"class":194,"line":213},[192,1576,1577],{"class":216}," color",[192,1579,220],{"class":209},[192,1581,483],{"class":216},[192,1583,396],{"class":209},[192,1585,1586],{"class":258},"--foreground",[192,1588,491],{"class":209},[192,1590,1591],{"class":194,"line":236},[192,1592,239],{"class":209},[167,1594,1595,1596,1599],{},"রিব্র্যান্ড এখন ",[570,1597,1598],{},"লেয়ার দুইয়ের একটা এডিট","। কম্পোনেন্ট একটাও ছুঁতে হয় না।",[174,1601,1603],{"id":1602},"ভুল-১-টোকেনের-নাম-রঙ-দিয়ে-রাখা","ভুল ১ — টোকেনের নাম রঙ দিয়ে রাখা",[167,1605,1606,1609,1610,1612],{},[189,1607,1608],{},"--brand-blue"," একটা টাইম বোমা। ",[189,1611,1538],{}," নয়।",[167,1614,1615,1616,227,1618,227,1621,1624],{},"নিয়মটা সহজ: টোকেনের নামে যদি এমন কিছু থাকে যা রিব্র্যান্ডে মিথ্যা হয়ে যেতে পারে, নামটা ভুল। ",[189,1617,1306],{},[189,1619,1620],{},"large",[189,1622,1623],{},"top-nav"," — সবগুলোই কোনো না কোনো দিন মিথ্যা হয়।",[174,1626,1628],{"id":1627},"ভুল-২-বিল্ড-টাইমে-রিজলভ-করা","ভুল ২ — বিল্ড টাইমে রিজলভ করা",[167,1630,1631],{},"Tailwind v4-এ এইটা নিঃশব্দে কামড় দেয়।",[182,1633,1635],{"className":184,"code":1634,"language":186,"meta":187,"style":187},"\u002F* ভুল — টগল কাজ করা বন্ধ করে দেয় *\u002F\n@theme {\n --color-surface: var(--surface);\n}\n\n\u002F* ঠিক *\u002F\n@theme inline {\n --color-surface: var(--surface);\n}\n",[189,1636,1637,1642,1649,1654,1658,1662,1667,1674,1678],{"__ignoreMap":187},[192,1638,1639],{"class":194,"line":195},[192,1640,1641],{"class":198},"\u002F* ভুল — টগল কাজ করা বন্ধ করে দেয় *\u002F\n",[192,1643,1644,1647],{"class":194,"line":202},[192,1645,1646],{"class":746},"@theme",[192,1648,210],{"class":209},[192,1650,1651],{"class":194,"line":213},[192,1652,1653],{"class":209}," --color-surface: var(--surface);\n",[192,1655,1656],{"class":194,"line":236},[192,1657,239],{"class":209},[192,1659,1660],{"class":194,"line":309},[192,1661,968],{"emptyLinePlaceholder":36},[192,1663,1664],{"class":194,"line":147},[192,1665,1666],{"class":198},"\u002F* ঠিক *\u002F\n",[192,1668,1669,1671],{"class":194,"line":326},[192,1670,1646],{"class":746},[192,1672,1673],{"class":209}," inline {\n",[192,1675,1676],{"class":194,"line":336},[192,1677,1653],{"class":209},[192,1679,1680],{"class":194,"line":351},[192,1681,239],{"class":209},[167,1683,1684,1685,1687,1688,1691,1692,1695],{},"সাধারণ ",[189,1686,1646],{}," ব্লক মানটা বিল্ড টাইমে রিজলভ করে ফেলে — অর্থাৎ ",[189,1689,1690],{},"bg-surface"," কম্পাইল হয়ে একটা fixed hex-এ পরিণত হয়। থিম অ্যাট্রিবিউট বদলালে ভেরিয়েবল বদলায়, কিন্তু ক্লাসটা আর ভেরিয়েবল পড়ছেই না। ",[189,1693,1694],{},"inline"," কি-ওয়ার্ডটা রেফারেন্সটা রানটাইম পর্যন্ত টিকিয়ে রাখে।",[167,1697,1698],{},"লক্ষণটা বিভ্রান্তিকর: থিম টগল \"কাজ করে না\", অথচ ভেরিয়েবলগুলো DevTools-এ ঠিকঠাক বদলাচ্ছে।",[174,1700,1702],{"id":1701},"ভুল-৩-অনেক-বেশি-টোকেন","ভুল ৩ — অনেক বেশি টোকেন",[167,1704,1705],{},"একটা সিস্টেমে ২০০টা স্পেসিং টোকেন থাকলে সেটা সিস্টেম নয়, সেটা একটা অভিধান। কেউ মুখস্থ করবে না, সবাই কাছাকাছি একটা বেছে নেবে, আর ফলাফল হবে ইনকনসিস্টেন্সি — ঠিক যেটা ঠেকাতে সিস্টেমটা বানানো।",[167,1707,1708],{},"কম টোকেন, কড়া নিয়ম। যদি একটা মান বছরে একবার লাগে, সেটা টোকেন নয় — সেটা ওই এক জায়গার একটা মান।",[174,1710,1712],{"id":1711},"ভুল-৪-কম্পোনেন্ট-api-টা-লিখে-না-রাখা","ভুল ৪ — কম্পোনেন্ট API-টা লিখে না রাখা",[167,1714,1715],{},"টোকেন ঠিক থাকলেও কম্পোনেন্ট যদি যা খুশি ক্লাস নেয়, সিস্টেমটা ফাঁকা। প্রতিটা ভ্যারিয়েন্ট এক জায়গায় ঘোষিত থাকা দরকার:",[182,1717,1719],{"className":249,"code":1718,"language":251,"meta":187,"style":187},"const button = tv({\n base: 'inline-flex items-center justify-center rounded-lg',\n variants: {\n variant: {\n primary: 'bg-primary text-on-primary',\n ghost: 'bg-transparent hover:bg-surface-hover',\n },\n size: { sm: 'h-8 px-3', md: 'h-10 px-4' },\n },\n})\n",[189,1720,1721,1736,1746,1751,1756,1766,1776,1781,1797,1802],{"__ignoreMap":187},[192,1722,1723,1725,1728,1730,1733],{"class":194,"line":195},[192,1724,903],{"class":746},[192,1726,1727],{"class":216}," button",[192,1729,909],{"class":746},[192,1731,1732],{"class":863}," tv",[192,1734,1735],{"class":209},"({\n",[192,1737,1738,1741,1744],{"class":194,"line":202},[192,1739,1740],{"class":209}," base: ",[192,1742,1743],{"class":223},"'inline-flex items-center justify-center rounded-lg'",[192,1745,323],{"class":209},[192,1747,1748],{"class":194,"line":213},[192,1749,1750],{"class":209}," variants: {\n",[192,1752,1753],{"class":194,"line":236},[192,1754,1755],{"class":209}," variant: {\n",[192,1757,1758,1761,1764],{"class":194,"line":309},[192,1759,1760],{"class":209}," primary: ",[192,1762,1763],{"class":223},"'bg-primary text-on-primary'",[192,1765,323],{"class":209},[192,1767,1768,1771,1774],{"class":194,"line":147},[192,1769,1770],{"class":209}," ghost: ",[192,1772,1773],{"class":223},"'bg-transparent hover:bg-surface-hover'",[192,1775,323],{"class":209},[192,1777,1778],{"class":194,"line":326},[192,1779,1780],{"class":209}," },\n",[192,1782,1783,1786,1789,1792,1795],{"class":194,"line":336},[192,1784,1785],{"class":209}," size: { sm: ",[192,1787,1788],{"class":223},"'h-8 px-3'",[192,1790,1791],{"class":209},", md: ",[192,1793,1794],{"class":223},"'h-10 px-4'",[192,1796,306],{"class":209},[192,1798,1799],{"class":194,"line":351},[192,1800,1801],{"class":209}," },\n",[192,1803,1804],{"class":194,"line":360},[192,1805,1806],{"class":209},"})\n",[167,1808,1809,1810,1813],{},"টেবিলে না থাকলে ভ্যারিয়েন্টটা ",[570,1811,1812],{},"নেই","। এটাই একমাত্র নিয়ম যেটা সিস্টেমকে দুই বছর পরেও সিস্টেম রাখে।",[174,1815,1817],{"id":1816},"যাচাই-করার-উপায়","যাচাই করার উপায়",[167,1819,1820,1821],{},"সিস্টেমটা টিকবে কি না, তার একটাই সৎ পরীক্ষা: ",[570,1822,1823],{},"প্রাইমারি রঙটা বদলে দিন।",[167,1825,1826],{},"একটা ফাইলে একটা লাইন বদলে যদি পুরো প্রোডাক্ট বদলে যায় — দুই থিমেই, কনট্রাস্ট ভেঙে না গিয়ে — তাহলে তিনটা লেয়ার ঠিক আছে। যদি খুঁজে খুঁজে বদলাতে হয়, তাহলে এখনো দুইটা লেয়ার, আর প্রথম রিব্র্যান্ডেই এটা ভাঙবে।",[167,1828,1829],{},"এই পরীক্ষাটা করতে এক দিন লাগে। রিব্র্যান্ডের পর করতে হলে এক কোয়ার্টার লাগে।",[1136,1831,1832],{},"html pre.shiki code .sQdni, html code.shiki .sQdni{--shiki-default:#6CB6FF;--shiki-dark:#6CB6FF}html pre.shiki code .sM9_K, html code.shiki .sM9_K{--shiki-default:#ADBAC7;--shiki-dark:#ADBAC7}html pre.shiki code .siJwO, html code.shiki .siJwO{--shiki-default:#F69D50;--shiki-dark:#F69D50}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s0RzX, html code.shiki .s0RzX{--shiki-default:#768390;--shiki-dark:#768390}html pre.shiki code .sEYkB, html code.shiki .sEYkB{--shiki-default:#F47067;--shiki-dark:#F47067}html pre.shiki code .szYpP, html code.shiki .szYpP{--shiki-default:#96D0FF;--shiki-dark:#96D0FF}html pre.shiki code .s-wk_, html code.shiki .s-wk_{--shiki-default:#DCBDFB;--shiki-dark:#DCBDFB}",{"title":187,"searchDepth":213,"depth":213,"links":1834},[1835,1836,1837,1838,1839,1840,1841],{"id":1175,"depth":202,"text":1176},{"id":1316,"depth":202,"text":1317},{"id":1602,"depth":202,"text":1603},{"id":1627,"depth":202,"text":1628},{"id":1701,"depth":202,"text":1702},{"id":1711,"depth":202,"text":1712},{"id":1816,"depth":202,"text":1817},"design-systems","\u002Fcovers\u002Fblog\u002Fbn\u002Fdesign-system-mistakes.webp","2026-07-04","বেশিরভাগ টোকেন সিস্টেম প্রথম রিব্র্যান্ডেই ভেঙে পড়ে। কারণটা প্রায় সবসময় এক — দুইটা লেয়ার আছে, দরকার ছিল তিনটা।",{},"\u002Fblog\u002Fbn\u002Fdesign-system-mistakes",{"title":1164,"description":1845},"blog\u002Fbn\u002Fdesign-system-mistakes",[1851,1852,1853],"ডিজাইন সিস্টেম","টোকেন","Tailwind","_t10HyFYNMKbFM1KZ69e8oB9eMINx6xpy20k22vHQ5s",{"id":1856,"title":1857,"author":1858,"body":1861,"category":1842,"cover":2435,"coverAlt":1857,"date":2436,"description":2437,"draft":6,"extension":1153,"featured":36,"lang":2438,"meta":2439,"navigation":36,"path":2440,"readingTime":326,"seo":2441,"stem":2442,"tags":2443,"__hash__":2446},"blog\u002Fblog\u002Fen\u002Fdesign-tokens-that-survive-a-rebrand.md","Design tokens that survive a rebrand",{"name":1859,"role":1860},"Elena Marsh","Design Systems Lead",{"type":164,"value":1862,"toc":2427},[1863,1866,1870,1873,1950,1953,1967,1973,1977,1988,2257,2260,2270,2274,2277,2332,2336,2345,2374,2394,2402,2406,2409,2414,2417,2421,2424],[167,1864,1865],{},"A design system survives its first rebrand or it does not. Most do not, and the reason is almost always the same: the system has two layers where it needs three.",[174,1867,1869],{"id":1868},"the-two-layer-trap","The two-layer trap",[167,1871,1872],{},"Here is the shape nearly every token system starts with. A palette, and components that consume it.",[182,1874,1876],{"className":184,"code":1875,"language":186,"meta":187,"style":187},":root {\n --blue-500: #00d4ff;\n --gray-900: #18181b;\n}\n\n.card {\n background: var(--gray-900);\n border-color: var(--blue-500);\n}\n",[189,1877,1878,1884,1894,1904,1908,1912,1918,1932,1946],{"__ignoreMap":187},[192,1879,1880,1882],{"class":194,"line":195},[192,1881,1189],{"class":216},[192,1883,210],{"class":209},[192,1885,1886,1888,1890,1892],{"class":194,"line":202},[192,1887,1196],{"class":258},[192,1889,220],{"class":209},[192,1891,1201],{"class":216},[192,1893,233],{"class":209},[192,1895,1896,1898,1900,1902],{"class":194,"line":213},[192,1897,1208],{"class":258},[192,1899,220],{"class":209},[192,1901,1213],{"class":216},[192,1903,233],{"class":209},[192,1905,1906],{"class":194,"line":236},[192,1907,239],{"class":209},[192,1909,1910],{"class":194,"line":309},[192,1911,968],{"emptyLinePlaceholder":36},[192,1913,1914,1916],{"class":194,"line":147},[192,1915,1228],{"class":216},[192,1917,210],{"class":209},[192,1919,1920,1922,1924,1926,1928,1930],{"class":194,"line":326},[192,1921,1235],{"class":216},[192,1923,220],{"class":209},[192,1925,483],{"class":216},[192,1927,396],{"class":209},[192,1929,1244],{"class":258},[192,1931,491],{"class":209},[192,1933,1934,1936,1938,1940,1942,1944],{"class":194,"line":336},[192,1935,1251],{"class":216},[192,1937,220],{"class":209},[192,1939,483],{"class":216},[192,1941,396],{"class":209},[192,1943,1290],{"class":258},[192,1945,491],{"class":209},[192,1947,1948],{"class":194,"line":351},[192,1949,239],{"class":209},[167,1951,1952],{},"This is already better than hardcoded hexes, and it feels like the job is done. It is not, and the failure mode is specific.",[167,1954,1955,1956,1958,1959,1962,1963,1966],{},"Six months in, someone asks for a light theme. ",[189,1957,1244],{}," is the card background in dark mode and needs to be near-white in light mode. So you either rename the variable to something that is now a lie, or you write ",[189,1960,1961],{},"--gray-900: #ffffff"," under ",[189,1964,1965],{},"[data-theme=\"light\"]",", which is worse.",[167,1968,1969,1970,1972],{},"Then the rebrand lands, blue becomes violet, and you discover ",[189,1971,1290],{}," is referenced in 340 places — some of which meant \"our brand colour\" and some of which meant \"the colour of a link\" and some of which meant \"this particular chart series.\" Those are three different concepts that happened to share a hex.",[174,1974,1976],{"id":1975},"the-layer-you-are-missing","The layer you are missing",[167,1978,1979,1980,1983,1984,1987],{},"Primitives describe what a value ",[823,1981,1982],{},"is",". Semantics describe what it is ",[823,1985,1986],{},"for",". You need both, and components may only touch the second.",[182,1989,1991],{"className":184,"code":1990,"language":186,"meta":187,"style":187},"\u002F* 1. Primitives — raw values, no product meaning *\u002F\n:root {\n --cyan-500: #00d4ff;\n --neutral-900: #18181b;\n --neutral-0: #ffffff;\n}\n\n\u002F* 2. Semantics — roles, which flip per theme *\u002F\n:root,\n[data-theme='dark'] {\n --surface: var(--neutral-900);\n --primary: var(--cyan-500);\n --border: rgb(255 255 255 \u002F 0.08);\n}\n\n[data-theme='light'] {\n --surface: var(--neutral-0);\n --primary: #0093b8;\n --border: rgb(9 9 11 \u002F 0.09);\n}\n\n\u002F* 3. Components — roles only *\u002F\n.card {\n background: var(--surface);\n border-color: var(--border);\n}\n",[189,1992,1993,1998,2004,2015,2026,2038,2042,2046,2051,2057,2069,2084,2099,2127,2131,2135,2148,2163,2174,2200,2204,2209,2215,2222,2236,2252],{"__ignoreMap":187},[192,1994,1995],{"class":194,"line":195},[192,1996,1997],{"class":198},"\u002F* 1. Primitives — raw values, no product meaning *\u002F\n",[192,1999,2000,2002],{"class":194,"line":202},[192,2001,1189],{"class":216},[192,2003,210],{"class":209},[192,2005,2006,2009,2011,2013],{"class":194,"line":213},[192,2007,2008],{"class":258}," --cyan-500",[192,2010,220],{"class":209},[192,2012,1201],{"class":216},[192,2014,233],{"class":209},[192,2016,2017,2020,2022,2024],{"class":194,"line":236},[192,2018,2019],{"class":258}," --neutral-900",[192,2021,220],{"class":209},[192,2023,1213],{"class":216},[192,2025,233],{"class":209},[192,2027,2028,2031,2033,2036],{"class":194,"line":309},[192,2029,2030],{"class":258}," --neutral-0",[192,2032,220],{"class":209},[192,2034,2035],{"class":216},"#ffffff",[192,2037,233],{"class":209},[192,2039,2040],{"class":194,"line":147},[192,2041,239],{"class":209},[192,2043,2044],{"class":194,"line":326},[192,2045,968],{"emptyLinePlaceholder":36},[192,2047,2048],{"class":194,"line":336},[192,2049,2050],{"class":198},"\u002F* 2. Semantics — roles, which flip per theme *\u002F\n",[192,2052,2053,2055],{"class":194,"line":351},[192,2054,1189],{"class":216},[192,2056,323],{"class":209},[192,2058,2059,2061,2063,2065,2067],{"class":194,"line":360},[192,2060,1065],{"class":209},[192,2062,1472],{"class":216},[192,2064,1475],{"class":746},[192,2066,1478],{"class":223},[192,2068,1481],{"class":209},[192,2070,2071,2073,2075,2077,2079,2082],{"class":194,"line":366},[192,2072,1411],{"class":258},[192,2074,220],{"class":209},[192,2076,483],{"class":216},[192,2078,396],{"class":209},[192,2080,2081],{"class":258},"--neutral-900",[192,2083,491],{"class":209},[192,2085,2086,2088,2090,2092,2094,2097],{"class":194,"line":148},[192,2087,1443],{"class":258},[192,2089,220],{"class":209},[192,2091,483],{"class":216},[192,2093,396],{"class":209},[192,2095,2096],{"class":258},"--cyan-500",[192,2098,491],{"class":209},[192,2100,2101,2104,2106,2109,2111,2114,2117,2119,2122,2125],{"class":194,"line":1295},[192,2102,2103],{"class":258}," --border",[192,2105,220],{"class":209},[192,2107,2108],{"class":216},"rgb",[192,2110,396],{"class":209},[192,2112,2113],{"class":216},"255",[192,2115,2116],{"class":216}," 255",[192,2118,2116],{"class":216},[192,2120,2121],{"class":209}," \u002F ",[192,2123,2124],{"class":216},"0.08",[192,2126,491],{"class":209},[192,2128,2129],{"class":194,"line":1457},[192,2130,239],{"class":209},[192,2132,2133],{"class":194,"line":1462},[192,2134,968],{"emptyLinePlaceholder":36},[192,2136,2137,2139,2141,2143,2146],{"class":194,"line":1467},[192,2138,1065],{"class":209},[192,2140,1472],{"class":216},[192,2142,1475],{"class":746},[192,2144,2145],{"class":223},"'light'",[192,2147,1481],{"class":209},[192,2149,2150,2152,2154,2156,2158,2161],{"class":194,"line":1484},[192,2151,1411],{"class":258},[192,2153,220],{"class":209},[192,2155,483],{"class":216},[192,2157,396],{"class":209},[192,2159,2160],{"class":258},"--neutral-0",[192,2162,491],{"class":209},[192,2164,2165,2167,2169,2172],{"class":194,"line":1499},[192,2166,1443],{"class":258},[192,2168,220],{"class":209},[192,2170,2171],{"class":216},"#0093b8",[192,2173,233],{"class":209},[192,2175,2176,2178,2180,2182,2184,2187,2190,2193,2195,2198],{"class":194,"line":1514},[192,2177,2103],{"class":258},[192,2179,220],{"class":209},[192,2181,2108],{"class":216},[192,2183,396],{"class":209},[192,2185,2186],{"class":216},"9",[192,2188,2189],{"class":216}," 9",[192,2191,2192],{"class":216}," 11",[192,2194,2121],{"class":209},[192,2196,2197],{"class":216},"0.09",[192,2199,491],{"class":209},[192,2201,2202],{"class":194,"line":1530},[192,2203,239],{"class":209},[192,2205,2207],{"class":194,"line":2206},21,[192,2208,968],{"emptyLinePlaceholder":36},[192,2210,2212],{"class":194,"line":2211},22,[192,2213,2214],{"class":198},"\u002F* 3. Components — roles only *\u002F\n",[192,2216,2218,2220],{"class":194,"line":2217},23,[192,2219,1228],{"class":216},[192,2221,210],{"class":209},[192,2223,2224,2226,2228,2230,2232,2234],{"class":194,"line":5},[192,2225,1235],{"class":216},[192,2227,220],{"class":209},[192,2229,483],{"class":216},[192,2231,396],{"class":209},[192,2233,1570],{"class":258},[192,2235,491],{"class":209},[192,2237,2239,2241,2243,2245,2247,2250],{"class":194,"line":2238},25,[192,2240,1251],{"class":216},[192,2242,220],{"class":209},[192,2244,483],{"class":216},[192,2246,396],{"class":209},[192,2248,2249],{"class":258},"--border",[192,2251,491],{"class":209},[192,2253,2255],{"class":194,"line":2254},26,[192,2256,239],{"class":209},[167,2258,2259],{},"Now the light theme is a block of overrides in one place, and the rebrand is an edit to the semantic layer. The 340 call sites do not move, because they were never asking for blue. They were asking for \"primary,\" and primary is now violet.",[167,2261,2262,2263,2265,2266,2269],{},"Note also that ",[189,2264,1538],{}," is not the same hex in both themes. ",[189,2267,2268],{},"#00D4FF"," on white fails contrast badly; the light theme needs a darker cyan to clear WCAG AA. A two-layer system cannot express that without a conditional at every call site. A three-layer system expresses it once.",[174,2271,2273],{"id":2272},"naming-the-semantic-layer","Naming the semantic layer",[167,2275,2276],{},"The semantic layer is only useful if the names describe roles rather than appearance. Some rules that hold up:",[2278,2279,2280,2300,2306,2322],"ul",{},[542,2281,2282,2285,2286,2289,2290,2292,2293,2289,2296,2299],{},[570,2283,2284],{},"Name the job, not the look."," ",[189,2287,2288],{},"--surface-raised",", not ",[189,2291,1260],{},". ",[189,2294,2295],{},"--danger",[189,2297,2298],{},"--red",".",[542,2301,2302,2305],{},[570,2303,2304],{},"Pair foreground with background."," Every surface token gets a matching foreground token, checked for contrast once, so no component has to think about it.",[542,2307,2308,2285,2311,227,2314,2317,2318,2321],{},[570,2309,2310],{},"Encode state in the name.",[189,2312,2313],{},"--surface-hover",[189,2315,2316],{},"--surface-active",". If hover is derived at the call site with ",[189,2319,2320],{},"color-mix"," or an opacity modifier, you have leaked appearance logic back into components.",[542,2323,2324,2327,2328,2331],{},[570,2325,2326],{},"Resist the urge to add a third brand colour."," Most systems that end up with ",[189,2329,2330],{},"--tertiary"," did so because someone needed a specific shade once. That is what a one-off class is for.",[174,2333,2335],{"id":2334},"wiring-it-to-tailwind-v4","Wiring it to Tailwind v4",[167,2337,2338,2339,2341,2342,2344],{},"Tailwind v4's ",[189,2340,1646],{}," generates utilities from CSS variables, and it has an ",[189,2343,1694],{}," variant that matters here.",[182,2346,2348],{"className":184,"code":2347,"language":186,"meta":187,"style":187},"@theme inline {\n --color-surface: var(--surface);\n --color-primary: var(--primary);\n --color-border: var(--border);\n}\n",[189,2349,2350,2356,2360,2365,2370],{"__ignoreMap":187},[192,2351,2352,2354],{"class":194,"line":195},[192,2353,1646],{"class":746},[192,2355,1673],{"class":209},[192,2357,2358],{"class":194,"line":202},[192,2359,1653],{"class":209},[192,2361,2362],{"class":194,"line":213},[192,2363,2364],{"class":209}," --color-primary: var(--primary);\n",[192,2366,2367],{"class":194,"line":236},[192,2368,2369],{"class":209}," --color-border: var(--border);\n",[192,2371,2372],{"class":194,"line":309},[192,2373,239],{"class":209},[167,2375,2376,2379,2380,2383,2384,2386,2387,2390,2391,2393],{},[189,2377,2378],{},"@theme inline"," keeps the ",[189,2381,2382],{},"var()"," reference live in the generated utility, so ",[189,2385,1690],{}," emits ",[189,2388,2389],{},"background-color: var(--surface)"," and re-resolves when the theme attribute changes. Without ",[189,2392,1694],{},", Tailwind resolves the value at build time and your theme switch silently does nothing — a bug that is genuinely unpleasant to track down because the CSS looks correct.",[167,2395,2396,2397,2399,2400,2299],{},"Static scales that never flip — spacing, radius, duration, easing — go in a plain ",[189,2398,1646],{}," block. Only the colour roles need ",[189,2401,1694],{},[174,2403,2405],{"id":2404},"the-test","The test",[167,2407,2408],{},"There is one question that tells you whether your token layer is real:",[547,2410,2411],{},[167,2412,2413],{},"If the brand colour changed tomorrow, how many files would you edit?",[167,2415,2416],{},"If the answer is more than one, you have a naming convention, not an architecture. The gap between those two is roughly a day of work, and it is the difference between a rebrand being a variable change and a rebrand being a quarter.",[174,2418,2420],{"id":2419},"where-this-stops-being-worth-it","Where this stops being worth it",[167,2422,2423],{},"For a marketing site with six components, three layers is overhead. The break-even is somewhere around the point where you have a second theme, a second product, or a second team — whichever arrives first. Below that, a flat palette is fine and you should not let anyone tell you otherwise.",[1136,2425,2426],{},"html pre.shiki code .sQdni, html code.shiki .sQdni{--shiki-default:#6CB6FF;--shiki-dark:#6CB6FF}html pre.shiki code .sM9_K, html code.shiki .sM9_K{--shiki-default:#ADBAC7;--shiki-dark:#ADBAC7}html pre.shiki code .siJwO, html code.shiki .siJwO{--shiki-default:#F69D50;--shiki-dark:#F69D50}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s0RzX, html code.shiki .s0RzX{--shiki-default:#768390;--shiki-dark:#768390}html pre.shiki code .sEYkB, html code.shiki .sEYkB{--shiki-default:#F47067;--shiki-dark:#F47067}html pre.shiki code .szYpP, html code.shiki .szYpP{--shiki-default:#96D0FF;--shiki-dark:#96D0FF}",{"title":187,"searchDepth":213,"depth":213,"links":2428},[2429,2430,2431,2432,2433,2434],{"id":1868,"depth":202,"text":1869},{"id":1975,"depth":202,"text":1976},{"id":2272,"depth":202,"text":2273},{"id":2334,"depth":202,"text":2335},{"id":2404,"depth":202,"text":2405},{"id":2419,"depth":202,"text":2420},"\u002Fcovers\u002Fblog\u002Fen\u002Fdesign-tokens-that-survive-a-rebrand.webp","2026-06-18","Most token systems break the first time the brand changes. The fix is a layer most teams skip — and it costs about a day to add.","en",{},"\u002Fblog\u002Fen\u002Fdesign-tokens-that-survive-a-rebrand",{"title":1857,"description":2437},"blog\u002Fen\u002Fdesign-tokens-that-survive-a-rebrand",[2444,2445,1853],"Design Tokens","Architecture","7dPa213uoSmziFZ1uEs730NPYoCBRpGHOQQ_ovl_Bs0",1787594491550]