[{"data":1,"prerenderedAt":2193},["ShallowReactive",2],{"design-doc:visual-language-evolution":3},{"data":4,"body":7,"toc":2167},{"title":5,"description":6},"Visual language evolution — tti-ux","A running ledger of token-level changes informed by external influence\nlibraries (Apple HIG, Ant Design, Microsoft Fabric, Material 3, shadcn\u002Fui,\nMCP Apps for Claude). Identity decisions — typography, palette, signature\nrules — are non-negotiable; what's tracked here is finishing details:\nfocus rings, motion, elevation, density, micro-interaction rhythm.",{"type":8,"children":9},"root",[10,18,32,59,63,70,75,82,108,185,195,205,215,221,239,350,359,376,382,399,481,506,515,524,530,540,693,702,711,717,742,814,830,839,845,866,915,933,942,951,954,960,1000,1029,1035,1126,1131,1155,1164,1175,1302,1323,1337,1342,1423,1436,1450,1469,1590,1619,1633,1638,1698,1703,1715,1720,1765,1774,1780,1821,1826,1933,1964,1967,1973,1986,2075,2086,2092,2112,2156,2161],{"type":11,"tag":12,"props":13,"children":15},"element","h1",{"id":14},"visual-language-evolution-tti-ux",[16],{"type":17,"value":5},"text",{"type":11,"tag":19,"props":20,"children":21},"p",{},[22,24,30],{"type":17,"value":23},"A running ledger of token-level changes informed by external influence\nlibraries (Apple HIG, Ant Design, Microsoft Fabric, Material 3, shadcn\u002Fui,\nMCP Apps for Claude). Identity decisions — typography, palette, signature\nrules — are non-negotiable; what's tracked here is ",{"type":11,"tag":25,"props":26,"children":27},"strong",{},[28],{"type":17,"value":29},"finishing details",{"type":17,"value":31},":\nfocus rings, motion, elevation, density, micro-interaction rhythm.",{"type":11,"tag":19,"props":33,"children":34},{},[35,37,43,45,50,52,57],{"type":17,"value":36},"Keep this short. Each entry should answer: ",{"type":11,"tag":38,"props":39,"children":40},"em",{},[41],{"type":17,"value":42},"what changed",{"type":17,"value":44},", ",{"type":11,"tag":38,"props":46,"children":47},{},[48],{"type":17,"value":49},"why",{"type":17,"value":51},",\n",{"type":11,"tag":38,"props":53,"children":54},{},[55],{"type":17,"value":56},"what we lifted from where",{"type":17,"value":58},".",{"type":11,"tag":60,"props":61,"children":62},"hr",{},[],{"type":11,"tag":64,"props":65,"children":67},"h2",{"id":66},"batch-e-prelude-2026-05",[68],{"type":17,"value":69},"Batch E-prelude — 2026-05",{"type":11,"tag":19,"props":71,"children":72},{},[73],{"type":17,"value":74},"A token-only refresh shipped before Batch E (data density). All component\nfamilies inherit the changes automatically; no per-component edits\nrequired for the base behavior.",{"type":11,"tag":76,"props":77,"children":79},"h3",{"id":78},"_1-two-ring-focus-token",[80],{"type":17,"value":81},"1 · Two-ring focus token",{"type":11,"tag":19,"props":83,"children":84},{},[85,90,92,99,101,106],{"type":11,"tag":25,"props":86,"children":87},{},[88],{"type":17,"value":89},"Before:",{"type":17,"value":91}," Single 3px maroon ring at 35% alpha (",{"type":11,"tag":93,"props":94,"children":96},"code",{"className":95},[],[97],{"type":17,"value":98},"--shadow-focus",{"type":17,"value":100},").\n",{"type":11,"tag":25,"props":102,"children":103},{},[104],{"type":17,"value":105},"After:",{"type":17,"value":107}," Outer 2px maroon (full opacity) + inner 2px sand halo.",{"type":11,"tag":109,"props":110,"children":115},"pre",{"className":111,"code":112,"language":113,"meta":114,"style":114},"language-css shiki shiki-themes material-theme-lighter github-light github-dark","--focus-ring-outer: var(--brand-primary);\n--focus-ring-inner: #F2E6C9;            \u002F* sand inner halo *\u002F\n--shadow-focus:\n  0 0 0 2px var(--focus-ring-inner),\n  0 0 0 4px var(--focus-ring-outer);\n","css","",[116],{"type":11,"tag":93,"props":117,"children":118},{"__ignoreMap":114},[119,131,158,167,176],{"type":11,"tag":120,"props":121,"children":124},"span",{"class":122,"line":123},"line",1,[125],{"type":11,"tag":120,"props":126,"children":128},{"style":127},"--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8",[129],{"type":17,"value":130},"--focus-ring-outer: var(--brand-primary);\n",{"type":11,"tag":120,"props":132,"children":134},{"class":122,"line":133},2,[135,140,146,152],{"type":11,"tag":120,"props":136,"children":137},{"style":127},[138],{"type":17,"value":139},"--focus-ring-inner: ",{"type":11,"tag":120,"props":141,"children":143},{"style":142},"--shiki-light:#39ADB5;--shiki-light-font-style:inherit;--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic",[144],{"type":17,"value":145},"#",{"type":11,"tag":120,"props":147,"children":149},{"style":148},"--shiki-light:#90A4AE;--shiki-light-font-style:inherit;--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic",[150],{"type":17,"value":151},"F2E6C9;",{"type":11,"tag":120,"props":153,"children":155},{"style":154},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#6A737D;--shiki-dark-font-style:inherit",[156],{"type":17,"value":157},"            \u002F* sand inner halo *\u002F\n",{"type":11,"tag":120,"props":159,"children":161},{"class":122,"line":160},3,[162],{"type":11,"tag":120,"props":163,"children":164},{"style":127},[165],{"type":17,"value":166},"--shadow-focus:\n",{"type":11,"tag":120,"props":168,"children":170},{"class":122,"line":169},4,[171],{"type":11,"tag":120,"props":172,"children":173},{"style":127},[174],{"type":17,"value":175},"  0 0 0 2px var(--focus-ring-inner),\n",{"type":11,"tag":120,"props":177,"children":179},{"class":122,"line":178},5,[180],{"type":11,"tag":120,"props":181,"children":182},{"style":127},[183],{"type":17,"value":184},"  0 0 0 4px var(--focus-ring-outer);\n",{"type":11,"tag":19,"props":186,"children":187},{},[188,193],{"type":11,"tag":25,"props":189,"children":190},{},[191],{"type":17,"value":192},"Why:",{"type":17,"value":194}," Reads cleanly on dense surfaces (data tables, form rows) where a\nsingle soft ring gets lost. The sand inner halo is the tux-specific\nsignature — Ant uses white inner, Fabric uses the surface color; we use\nsand to keep the maroon-and-sand color story coherent.",{"type":11,"tag":19,"props":196,"children":197},{},[198,203],{"type":11,"tag":25,"props":199,"children":200},{},[201],{"type":17,"value":202},"Variants:",{"type":17,"value":204}," Dark theme uses softened maroon outer + warm-gold inner\nhalo. HC theme uses pure black outer + white inner at 5px total width.",{"type":11,"tag":19,"props":206,"children":207},{},[208,213],{"type":11,"tag":25,"props":209,"children":210},{},[211],{"type":17,"value":212},"Lineage:",{"type":17,"value":214}," Anatomy from Ant Design (two-ring concept) and Fabric (focus\ndiscipline on data-rich surfaces). Color story is tux-original.",{"type":11,"tag":76,"props":216,"children":218},{"id":217},"_2-transportation-tempo-easings",[219],{"type":17,"value":220},"2 · Transportation-tempo easings",{"type":11,"tag":19,"props":222,"children":223},{},[224,229,231,237],{"type":11,"tag":25,"props":225,"children":226},{},[227],{"type":17,"value":228},"New tokens",{"type":17,"value":230}," (existing ",{"type":11,"tag":93,"props":232,"children":234},{"className":233},[],[235],{"type":17,"value":236},"--ease-standard\u002Femphasis\u002Fexit",{"type":17,"value":238}," retained as\nback-compat aliases):",{"type":11,"tag":240,"props":241,"children":242},"table",{},[243,267],{"type":11,"tag":244,"props":245,"children":246},"thead",{},[247],{"type":11,"tag":248,"props":249,"children":250},"tr",{},[251,257,262],{"type":11,"tag":252,"props":253,"children":254},"th",{},[255],{"type":17,"value":256},"Token",{"type":11,"tag":252,"props":258,"children":259},{},[260],{"type":17,"value":261},"Curve",{"type":11,"tag":252,"props":263,"children":264},{},[265],{"type":17,"value":266},"Use",{"type":11,"tag":268,"props":269,"children":270},"tbody",{},[271,298,324],{"type":11,"tag":248,"props":272,"children":273},{},[274,284,293],{"type":11,"tag":275,"props":276,"children":277},"td",{},[278],{"type":11,"tag":93,"props":279,"children":281},{"className":280},[],[282],{"type":17,"value":283},"--ease-survey",{"type":11,"tag":275,"props":285,"children":286},{},[287],{"type":11,"tag":93,"props":288,"children":290},{"className":289},[],[291],{"type":17,"value":292},"cubic-bezier(0.4, 0.0, 0.2, 1.0)",{"type":11,"tag":275,"props":294,"children":295},{},[296],{"type":17,"value":297},"Data tables, forms, disclosures",{"type":11,"tag":248,"props":299,"children":300},{},[301,310,319],{"type":11,"tag":275,"props":302,"children":303},{},[304],{"type":11,"tag":93,"props":305,"children":307},{"className":306},[],[308],{"type":17,"value":309},"--ease-corridor",{"type":11,"tag":275,"props":311,"children":312},{},[313],{"type":11,"tag":93,"props":314,"children":316},{"className":315},[],[317],{"type":17,"value":318},"cubic-bezier(0.2, 0.0, 0.0, 1.0)",{"type":11,"tag":275,"props":320,"children":321},{},[322],{"type":17,"value":323},"Page-level, sheets, modals",{"type":11,"tag":248,"props":325,"children":326},{},[327,336,345],{"type":11,"tag":275,"props":328,"children":329},{},[330],{"type":11,"tag":93,"props":331,"children":333},{"className":332},[],[334],{"type":17,"value":335},"--ease-arrival",{"type":11,"tag":275,"props":337,"children":338},{},[339],{"type":11,"tag":93,"props":340,"children":342},{"className":341},[],[343],{"type":17,"value":344},"cubic-bezier(0.0, 0.0, 0.2, 1.0)",{"type":11,"tag":275,"props":346,"children":347},{},[348],{"type":17,"value":349},"Toasts, banners, snapshots locking in",{"type":11,"tag":19,"props":351,"children":352},{},[353,357],{"type":11,"tag":25,"props":354,"children":355},{},[356],{"type":17,"value":192},{"type":17,"value":358}," Named for the system's research domain so picking one feels\nintentional rather than generic. Three distinct curves give us \"measured\n\u002F smooth \u002F decelerate-only\" coverage without overshoot, which suits\nresearch-data UIs where playful springs feel out of register.",{"type":11,"tag":19,"props":360,"children":361},{},[362,366,368,374],{"type":11,"tag":25,"props":363,"children":364},{},[365],{"type":17,"value":212},{"type":17,"value":367}," Material 3's standard-effects family — ",{"type":11,"tag":93,"props":369,"children":371},{"className":370},[],[372],{"type":17,"value":373},"0.2, 0.0, 0.0, 1.0",{"type":17,"value":375},"\nmaps directly to M3's \"emphasized\" curve. The naming is tux-original.",{"type":11,"tag":76,"props":377,"children":379},{"id":378},"_3-four-tier-elevation-system",[380],{"type":17,"value":381},"3 · Four-tier elevation system",{"type":11,"tag":19,"props":383,"children":384},{},[385,389,391,397],{"type":11,"tag":25,"props":386,"children":387},{},[388],{"type":17,"value":228},{"type":17,"value":390}," layered on top of existing ",{"type":11,"tag":93,"props":392,"children":394},{"className":393},[],[395],{"type":17,"value":396},"--shadow-sm\u002Fmd\u002Flg",{"type":17,"value":398},":",{"type":11,"tag":109,"props":400,"children":402},{"className":111,"code":401,"language":113,"meta":114,"style":114},"--elevation-flat:    none;                \u002F* border-only cards *\u002F\n--elevation-rest:    var(--shadow-sm);    \u002F* quietly lifted (tables, list rows) *\u002F\n--elevation-hover:   var(--shadow-md);    \u002F* + translateY(-1px) on hover *\u002F\n--elevation-overlay: var(--shadow-lg);    \u002F* popovers, sheets, modals *\u002F\n--elevation-pinned:  \u002F* bottom-shadow only *\u002F;  \u002F* sticky toolbars\u002Fheaders *\u002F\n",[403],{"type":11,"tag":93,"props":404,"children":405},{"__ignoreMap":114},[406,419,432,445,458],{"type":11,"tag":120,"props":407,"children":408},{"class":122,"line":123},[409,414],{"type":11,"tag":120,"props":410,"children":411},{"style":127},[412],{"type":17,"value":413},"--elevation-flat:    none;                ",{"type":11,"tag":120,"props":415,"children":416},{"style":154},[417],{"type":17,"value":418},"\u002F* border-only cards *\u002F\n",{"type":11,"tag":120,"props":420,"children":421},{"class":122,"line":133},[422,427],{"type":11,"tag":120,"props":423,"children":424},{"style":127},[425],{"type":17,"value":426},"--elevation-rest:    var(--shadow-sm);    ",{"type":11,"tag":120,"props":428,"children":429},{"style":154},[430],{"type":17,"value":431},"\u002F* quietly lifted (tables, list rows) *\u002F\n",{"type":11,"tag":120,"props":433,"children":434},{"class":122,"line":160},[435,440],{"type":11,"tag":120,"props":436,"children":437},{"style":127},[438],{"type":17,"value":439},"--elevation-hover:   var(--shadow-md);    ",{"type":11,"tag":120,"props":441,"children":442},{"style":154},[443],{"type":17,"value":444},"\u002F* + translateY(-1px) on hover *\u002F\n",{"type":11,"tag":120,"props":446,"children":447},{"class":122,"line":169},[448,453],{"type":11,"tag":120,"props":449,"children":450},{"style":127},[451],{"type":17,"value":452},"--elevation-overlay: var(--shadow-lg);    ",{"type":11,"tag":120,"props":454,"children":455},{"style":154},[456],{"type":17,"value":457},"\u002F* popovers, sheets, modals *\u002F\n",{"type":11,"tag":120,"props":459,"children":460},{"class":122,"line":178},[461,466,471,476],{"type":11,"tag":120,"props":462,"children":463},{"style":127},[464],{"type":17,"value":465},"--elevation-pinned:  ",{"type":11,"tag":120,"props":467,"children":468},{"style":154},[469],{"type":17,"value":470},"\u002F* bottom-shadow only *\u002F",{"type":11,"tag":120,"props":472,"children":473},{"style":127},[474],{"type":17,"value":475},";  ",{"type":11,"tag":120,"props":477,"children":478},{"style":154},[479],{"type":17,"value":480},"\u002F* sticky toolbars\u002Fheaders *\u002F\n",{"type":11,"tag":19,"props":482,"children":483},{},[484,488,490,496,498,504],{"type":11,"tag":25,"props":485,"children":486},{},[487],{"type":17,"value":192},{"type":17,"value":489}," Old system had ",{"type":11,"tag":93,"props":491,"children":493},{"className":492},[],[494],{"type":17,"value":495},"sm\u002Fmd\u002Flg",{"type":17,"value":497}," as primitives without role guidance —\nsome pages used ",{"type":11,"tag":93,"props":499,"children":501},{"className":500},[],[502],{"type":17,"value":503},"lg",{"type":17,"value":505}," for cards, others for modals, with no rule. The\nfour named tiers give every component a predictable elevation language.",{"type":11,"tag":19,"props":507,"children":508},{},[509,513],{"type":11,"tag":25,"props":510,"children":511},{},[512],{"type":17,"value":202},{"type":17,"value":514}," Dark theme reduces overlay alpha but keeps the same tier\ncount. HC theme nukes shadows and uses 2px borders for the overlay tier.",{"type":11,"tag":19,"props":516,"children":517},{},[518,522],{"type":11,"tag":25,"props":519,"children":520},{},[521],{"type":17,"value":212},{"type":17,"value":523}," Microsoft Fabric's elevation discipline (rest\u002Fhover\u002Flifted\u002F\ndragged). We collapsed their four into a more web-appropriate four with\ndifferent role splits.",{"type":11,"tag":76,"props":525,"children":527},{"id":526},"_4-warm-neutral-ramp-extension-12-18-stops",[528],{"type":17,"value":529},"4 · Warm-neutral ramp extension (12 → 18 stops)",{"type":11,"tag":19,"props":531,"children":532},{},[533,538],{"type":11,"tag":25,"props":534,"children":535},{},[536],{"type":17,"value":537},"Added intermediate stops",{"type":17,"value":539}," at 150, 250, 450, 550, 650, 750, 850. Tints\nwarmer\u002Fsand-leaning to harmonize with maroon over extended viewing.",{"type":11,"tag":240,"props":541,"children":542},{},[543,564],{"type":11,"tag":244,"props":544,"children":545},{},[546],{"type":11,"tag":248,"props":547,"children":548},{},[549,554,559],{"type":11,"tag":252,"props":550,"children":551},{},[552],{"type":17,"value":553},"Stop",{"type":11,"tag":252,"props":555,"children":556},{},[557],{"type":17,"value":558},"Hex",{"type":11,"tag":252,"props":560,"children":561},{},[562],{"type":17,"value":563},"Role",{"type":11,"tag":268,"props":565,"children":566},{},[567,585,603,621,639,657,675],{"type":11,"tag":248,"props":568,"children":569},{},[570,575,580],{"type":11,"tag":275,"props":571,"children":572},{},[573],{"type":17,"value":574},"150",{"type":11,"tag":275,"props":576,"children":577},{},[578],{"type":17,"value":579},"#EFEEED",{"type":11,"tag":275,"props":581,"children":582},{},[583],{"type":17,"value":584},"Row stripe (light), table hover surface",{"type":11,"tag":248,"props":586,"children":587},{},[588,593,598],{"type":11,"tag":275,"props":589,"children":590},{},[591],{"type":17,"value":592},"250",{"type":11,"tag":275,"props":594,"children":595},{},[596],{"type":17,"value":597},"#DCDBD8",{"type":11,"tag":275,"props":599,"children":600},{},[601],{"type":17,"value":602},"Sunken-2, sand-leaning",{"type":11,"tag":248,"props":604,"children":605},{},[606,611,616],{"type":11,"tag":275,"props":607,"children":608},{},[609],{"type":17,"value":610},"450",{"type":11,"tag":275,"props":612,"children":613},{},[614],{"type":17,"value":615},"#9B9A96",{"type":11,"tag":275,"props":617,"children":618},{},[619],{"type":17,"value":620},"Warm muted text",{"type":11,"tag":248,"props":622,"children":623},{},[624,629,634],{"type":11,"tag":275,"props":625,"children":626},{},[627],{"type":17,"value":628},"550",{"type":11,"tag":275,"props":630,"children":631},{},[632],{"type":17,"value":633},"#86847F",{"type":11,"tag":275,"props":635,"children":636},{},[637],{"type":17,"value":638},"Warm muted-2",{"type":11,"tag":248,"props":640,"children":641},{},[642,647,652],{"type":11,"tag":275,"props":643,"children":644},{},[645],{"type":17,"value":646},"650",{"type":11,"tag":275,"props":648,"children":649},{},[650],{"type":17,"value":651},"#6B6964",{"type":11,"tag":275,"props":653,"children":654},{},[655],{"type":17,"value":656},"Warm secondary",{"type":11,"tag":248,"props":658,"children":659},{},[660,665,670],{"type":11,"tag":275,"props":661,"children":662},{},[663],{"type":17,"value":664},"750",{"type":11,"tag":275,"props":666,"children":667},{},[668],{"type":17,"value":669},"#535048",{"type":11,"tag":275,"props":671,"children":672},{},[673],{"type":17,"value":674},"Warm primary-soft",{"type":11,"tag":248,"props":676,"children":677},{},[678,683,688],{"type":11,"tag":275,"props":679,"children":680},{},[681],{"type":17,"value":682},"850",{"type":11,"tag":275,"props":684,"children":685},{},[686],{"type":17,"value":687},"#3A3833",{"type":11,"tag":275,"props":689,"children":690},{},[691],{"type":17,"value":692},"Warm darkest non-black",{"type":11,"tag":19,"props":694,"children":695},{},[696,700],{"type":11,"tag":25,"props":697,"children":698},{},[699],{"type":17,"value":192},{"type":17,"value":701}," 6-stop ramp couldn't support row-stripe \u002F hover \u002F selected\nstates on data tables without using transparent tints (which compound\npoorly when stacked).",{"type":11,"tag":19,"props":703,"children":704},{},[705,709],{"type":11,"tag":25,"props":706,"children":707},{},[708],{"type":17,"value":212},{"type":17,"value":710}," shadcn's stone\u002Fzinc 12-stop ramps (anatomy reference). Our\nhex values are tux-original — warmer than shadcn's neutral grays.",{"type":11,"tag":76,"props":712,"children":714},{"id":713},"_5-survey-rhythm-density-baseline",[715],{"type":17,"value":716},"5 · Survey-rhythm density baseline",{"type":11,"tag":19,"props":718,"children":719},{},[720,725,727,732,734,740],{"type":11,"tag":25,"props":721,"children":722},{},[723],{"type":17,"value":724},"New rhythm tokens",{"type":17,"value":726}," for data-dense families. Use these ",{"type":11,"tag":38,"props":728,"children":729},{},[730],{"type":17,"value":731},"instead of",{"type":17,"value":733}," the\ngeneral ",{"type":11,"tag":93,"props":735,"children":737},{"className":736},[],[738],{"type":17,"value":739},"--space-*",{"type":17,"value":741}," ramp inside tables, forms, descriptions, lists.",{"type":11,"tag":109,"props":743,"children":745},{"className":111,"code":744,"language":113,"meta":114,"style":114},"--rhythm-tight:   4px;   \u002F* between input rows in tables; chip-to-chip *\u002F\n--rhythm-snug:    8px;   \u002F* cell padding, chip padding, icon gap *\u002F\n--rhythm-normal:  12px;  \u002F* button padding, list-item gap, label-to-input *\u002F\n--rhythm-loose:   16px;  \u002F* form field gap, card section padding *\u002F\n--rhythm-roomy:   24px;  \u002F* section breaks, descriptions row gap *\u002F\n",[746],{"type":11,"tag":93,"props":747,"children":748},{"__ignoreMap":114},[749,762,775,788,801],{"type":11,"tag":120,"props":750,"children":751},{"class":122,"line":123},[752,757],{"type":11,"tag":120,"props":753,"children":754},{"style":127},[755],{"type":17,"value":756},"--rhythm-tight:   4px;   ",{"type":11,"tag":120,"props":758,"children":759},{"style":154},[760],{"type":17,"value":761},"\u002F* between input rows in tables; chip-to-chip *\u002F\n",{"type":11,"tag":120,"props":763,"children":764},{"class":122,"line":133},[765,770],{"type":11,"tag":120,"props":766,"children":767},{"style":127},[768],{"type":17,"value":769},"--rhythm-snug:    8px;   ",{"type":11,"tag":120,"props":771,"children":772},{"style":154},[773],{"type":17,"value":774},"\u002F* cell padding, chip padding, icon gap *\u002F\n",{"type":11,"tag":120,"props":776,"children":777},{"class":122,"line":160},[778,783],{"type":11,"tag":120,"props":779,"children":780},{"style":127},[781],{"type":17,"value":782},"--rhythm-normal:  12px;  ",{"type":11,"tag":120,"props":784,"children":785},{"style":154},[786],{"type":17,"value":787},"\u002F* button padding, list-item gap, label-to-input *\u002F\n",{"type":11,"tag":120,"props":789,"children":790},{"class":122,"line":169},[791,796],{"type":11,"tag":120,"props":792,"children":793},{"style":127},[794],{"type":17,"value":795},"--rhythm-loose:   16px;  ",{"type":11,"tag":120,"props":797,"children":798},{"style":154},[799],{"type":17,"value":800},"\u002F* form field gap, card section padding *\u002F\n",{"type":11,"tag":120,"props":802,"children":803},{"class":122,"line":178},[804,809],{"type":11,"tag":120,"props":805,"children":806},{"style":127},[807],{"type":17,"value":808},"--rhythm-roomy:   24px;  ",{"type":11,"tag":120,"props":810,"children":811},{"style":154},[812],{"type":17,"value":813},"\u002F* section breaks, descriptions row gap *\u002F\n",{"type":11,"tag":19,"props":815,"children":816},{},[817,821,823,828],{"type":11,"tag":25,"props":818,"children":819},{},[820],{"type":17,"value":192},{"type":17,"value":822}," General ",{"type":11,"tag":93,"props":824,"children":826},{"className":825},[],[827],{"type":17,"value":739},{"type":17,"value":829}," is a 4px ramp going up to 96px — too coarse\ninside dense data UIs. The rhythm tokens give us a 4-8-12-16-24 baseline\nspecifically tuned for tables\u002Fforms\u002Fdescriptions, decoupled from\nsection\u002Fpage-level spacing decisions.",{"type":11,"tag":19,"props":831,"children":832},{},[833,837],{"type":11,"tag":25,"props":834,"children":835},{},[836],{"type":17,"value":212},{"type":17,"value":838}," Ant Design's 4\u002F8\u002F12\u002F16\u002F24 rhythm. Tokens are tux-original;\nthe underlying values match Ant exactly.",{"type":11,"tag":76,"props":840,"children":842},{"id":841},"_6-identity-primitives",[843],{"type":17,"value":844},"6 · Identity primitives",{"type":11,"tag":19,"props":846,"children":847},{},[848,850,856,858,864],{"type":17,"value":849},"New asset: ",{"type":11,"tag":93,"props":851,"children":853},{"className":852},[],[854],{"type":17,"value":855},"public\u002Fidentity-primitives.svg",{"type":17,"value":857},". Exports four ",{"type":11,"tag":93,"props":859,"children":861},{"className":860},[],[862],{"type":17,"value":863},"\u003Csymbol>",{"type":17,"value":865},"s:",{"type":11,"tag":867,"props":868,"children":869},"ul",{},[870,882,893,904],{"type":11,"tag":871,"props":872,"children":873},"li",{},[874,880],{"type":11,"tag":93,"props":875,"children":877},{"className":876},[],[878],{"type":17,"value":879},"#tux-star",{"type":17,"value":881}," — Lone-star reference, geometric 5-point",{"type":11,"tag":871,"props":883,"children":884},{},[885,891],{"type":11,"tag":93,"props":886,"children":888},{"className":887},[],[889],{"type":17,"value":890},"#tux-chevron",{"type":17,"value":892}," — TAMUS-style downward angle bracket",{"type":11,"tag":871,"props":894,"children":895},{},[896,902],{"type":11,"tag":93,"props":897,"children":899},{"className":898},[],[900],{"type":17,"value":901},"#tux-compass",{"type":17,"value":903}," — Compass rose for map-related families",{"type":11,"tag":871,"props":905,"children":906},{},[907,913],{"type":11,"tag":93,"props":908,"children":910},{"className":909},[],[911],{"type":17,"value":912},"#tux-row-grid",{"type":17,"value":914}," — Parallel-lines-getting-denser pavement-stripe pattern",{"type":11,"tag":19,"props":916,"children":917},{},[918,923,925,931],{"type":11,"tag":25,"props":919,"children":920},{},[921],{"type":17,"value":922},"Use:",{"type":17,"value":924}," ",{"type":11,"tag":93,"props":926,"children":928},{"className":927},[],[929],{"type":17,"value":930},"\u003Csvg>\u003Cuse href=\"\u002Fidentity-primitives.svg#tux-star\"\u002F>\u003C\u002Fsvg>",{"type":17,"value":932},",\nor inline-include the symbol in a host SVG. All draw with currentColor.",{"type":11,"tag":19,"props":934,"children":935},{},[936,940],{"type":11,"tag":25,"props":937,"children":938},{},[939],{"type":17,"value":192},{"type":17,"value":941}," We have logos and the wordmark, but no smaller-scale visual\nprimitives that read as \"TTI\u002FTAMUS\" without leaning on the full marks.\nThese are restraint-grade identity moves — corner accents, section\nbrackets, map decorators.",{"type":11,"tag":19,"props":943,"children":944},{},[945,949],{"type":11,"tag":25,"props":946,"children":947},{},[948],{"type":17,"value":212},{"type":17,"value":950}," None — these are tux-original visual moves.",{"type":11,"tag":60,"props":952,"children":953},{},[],{"type":11,"tag":64,"props":955,"children":957},{"id":956},"batch-j-2026-05",[958],{"type":17,"value":959},"Batch J — 2026-05",{"type":11,"tag":19,"props":961,"children":962},{},[963,968,970,975,977,983,984,990,992,998],{"type":11,"tag":25,"props":964,"children":965},{},[966],{"type":17,"value":967},"Visual-language application sweep.",{"type":17,"value":969}," A surface-level pass that applies\nthe Batch E-prelude tokens across the existing kit ",{"type":11,"tag":38,"props":971,"children":972},{},[973],{"type":17,"value":974},"without",{"type":17,"value":976}," needing to\nedit every component file. Everything in Batch J is opt-in via CSS\nattribute selectors (",{"type":11,"tag":93,"props":978,"children":980},{"className":979},[],[981],{"type":17,"value":982},"data-tux-overlay",{"type":17,"value":44},{"type":11,"tag":93,"props":985,"children":987},{"className":986},[],[988],{"type":17,"value":989},"data-tux-elevation",{"type":17,"value":991},", etc.) or\nnew utility classes; the one global rule (J.1) only sets a default\n",{"type":11,"tag":93,"props":993,"children":995},{"className":994},[],[996],{"type":17,"value":997},"transition-timing-function",{"type":17,"value":999},", which inline-declared transitions still\noverride.",{"type":11,"tag":19,"props":1001,"children":1002},{},[1003,1005,1011,1013,1019,1021,1027],{"type":17,"value":1004},"The CSS lives in ",{"type":11,"tag":93,"props":1006,"children":1008},{"className":1007},[],[1009],{"type":17,"value":1010},"app\u002Fassets\u002Fcss\u002Ftux.css",{"type":17,"value":1012}," under the ",{"type":11,"tag":93,"props":1014,"children":1016},{"className":1015},[],[1017],{"type":17,"value":1018},"BATCH J",{"type":17,"value":1020}," heading.\nThe matching tokens already shipped in ",{"type":11,"tag":93,"props":1022,"children":1024},{"className":1023},[],[1025],{"type":17,"value":1026},"app\u002Fassets\u002Fcss\u002Ftokens.css",{"type":17,"value":1028}," as\npart of the Batch E-prelude.",{"type":11,"tag":76,"props":1030,"children":1032},{"id":1031},"j1-transportation-tempo-easings-applied-to-common-controls",[1033],{"type":17,"value":1034},"J.1 · Transportation-tempo easings applied to common controls",{"type":11,"tag":19,"props":1036,"children":1037},{},[1038,1044,1045,1051,1052,1058,1059,1065,1066,1072,1073,1079,1080,1086,1087,1093,1094,1100,1102,1108,1110,1116,1118,1124],{"type":11,"tag":93,"props":1039,"children":1041},{"className":1040},[],[1042],{"type":17,"value":1043},"button",{"type":17,"value":44},{"type":11,"tag":93,"props":1046,"children":1048},{"className":1047},[],[1049],{"type":17,"value":1050},"a",{"type":17,"value":44},{"type":11,"tag":93,"props":1053,"children":1055},{"className":1054},[],[1056],{"type":17,"value":1057},"input",{"type":17,"value":44},{"type":11,"tag":93,"props":1060,"children":1062},{"className":1061},[],[1063],{"type":17,"value":1064},"select",{"type":17,"value":44},{"type":11,"tag":93,"props":1067,"children":1069},{"className":1068},[],[1070],{"type":17,"value":1071},"textarea",{"type":17,"value":44},{"type":11,"tag":93,"props":1074,"children":1076},{"className":1075},[],[1077],{"type":17,"value":1078},"[role=\"button\"]",{"type":17,"value":51},{"type":11,"tag":93,"props":1081,"children":1083},{"className":1082},[],[1084],{"type":17,"value":1085},"[role=\"tab\"]",{"type":17,"value":44},{"type":11,"tag":93,"props":1088,"children":1090},{"className":1089},[],[1091],{"type":17,"value":1092},"[role=\"option\"]",{"type":17,"value":44},{"type":11,"tag":93,"props":1095,"children":1097},{"className":1096},[],[1098],{"type":17,"value":1099},".tux-card",{"type":17,"value":1101},", and ",{"type":11,"tag":93,"props":1103,"children":1105},{"className":1104},[],[1106],{"type":17,"value":1107},".card-linked*",{"type":17,"value":1109},"\ninherit ",{"type":11,"tag":93,"props":1111,"children":1113},{"className":1112},[],[1114],{"type":17,"value":1115},"transition-timing-function: var(--ease-survey)",{"type":17,"value":1117}," with\n",{"type":11,"tag":93,"props":1119,"children":1121},{"className":1120},[],[1122],{"type":17,"value":1123},"transition-duration: var(--motion-base)",{"type":17,"value":1125}," when the user hasn't requested\nreduced motion. Inline JS transitions still win — this is just the\ndefault for any property animated without an explicit curve.",{"type":11,"tag":19,"props":1127,"children":1128},{},[1129],{"type":17,"value":1130},"Two opt-in attributes layer onto specific roles:",{"type":11,"tag":867,"props":1132,"children":1133},{},[1134,1144],{"type":11,"tag":871,"props":1135,"children":1136},{},[1137,1142],{"type":11,"tag":93,"props":1138,"children":1140},{"className":1139},[],[1141],{"type":17,"value":982},{"type":17,"value":1143}," → corridor curve (smoother acceleration, used by\nmodals \u002F sheets \u002F popovers \u002F command palette).",{"type":11,"tag":871,"props":1145,"children":1146},{},[1147,1153],{"type":11,"tag":93,"props":1148,"children":1150},{"className":1149},[],[1151],{"type":17,"value":1152},"data-tux-arrival",{"type":17,"value":1154}," → arrival curve (decelerate-only, used by toasts \u002F\nbanners \u002F snapshots locking in place).",{"type":11,"tag":19,"props":1156,"children":1157},{},[1158,1162],{"type":11,"tag":25,"props":1159,"children":1160},{},[1161],{"type":17,"value":192},{"type":17,"value":1163}," Most existing transitions were declared without a curve, which\nmeant the browser default ease was running. Pinning a curve at the\nsurface level produces consistent motion even on un-refit components.",{"type":11,"tag":76,"props":1165,"children":1167},{"id":1166},"j2-elevation-roles-via-data-tux-elevation",[1168,1170],{"type":17,"value":1169},"J.2 · Elevation roles via ",{"type":11,"tag":93,"props":1171,"children":1173},{"className":1172},[],[1174],{"type":17,"value":989},{"type":11,"tag":109,"props":1176,"children":1180},{"className":1177,"code":1178,"language":1179,"meta":114,"style":114},"language-html shiki shiki-themes material-theme-lighter github-light github-dark","\u003Cdiv data-tux-elevation=\"rest\">…\u003C\u002Fdiv>\n\u003Cdiv data-tux-elevation=\"overlay\">…\u003C\u002Fdiv>\n","html",[1181],{"type":11,"tag":93,"props":1182,"children":1183},{"__ignoreMap":114},[1184,1250],{"type":11,"tag":120,"props":1185,"children":1186},{"class":122,"line":123},[1187,1193,1199,1205,1210,1216,1222,1226,1231,1236,1241,1245],{"type":11,"tag":120,"props":1188,"children":1190},{"style":1189},"--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8",[1191],{"type":17,"value":1192},"\u003C",{"type":11,"tag":120,"props":1194,"children":1196},{"style":1195},"--shiki-light:#E53935;--shiki-default:#22863A;--shiki-dark:#85E89D",[1197],{"type":17,"value":1198},"div",{"type":11,"tag":120,"props":1200,"children":1202},{"style":1201},"--shiki-light:#9C3EDA;--shiki-default:#6F42C1;--shiki-dark:#B392F0",[1203],{"type":17,"value":1204}," data-tux-elevation",{"type":11,"tag":120,"props":1206,"children":1207},{"style":1189},[1208],{"type":17,"value":1209},"=",{"type":11,"tag":120,"props":1211,"children":1213},{"style":1212},"--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF",[1214],{"type":17,"value":1215},"\"",{"type":11,"tag":120,"props":1217,"children":1219},{"style":1218},"--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF",[1220],{"type":17,"value":1221},"rest",{"type":11,"tag":120,"props":1223,"children":1224},{"style":1212},[1225],{"type":17,"value":1215},{"type":11,"tag":120,"props":1227,"children":1228},{"style":1189},[1229],{"type":17,"value":1230},">",{"type":11,"tag":120,"props":1232,"children":1233},{"style":127},[1234],{"type":17,"value":1235},"…",{"type":11,"tag":120,"props":1237,"children":1238},{"style":1189},[1239],{"type":17,"value":1240},"\u003C\u002F",{"type":11,"tag":120,"props":1242,"children":1243},{"style":1195},[1244],{"type":17,"value":1198},{"type":11,"tag":120,"props":1246,"children":1247},{"style":1189},[1248],{"type":17,"value":1249},">\n",{"type":11,"tag":120,"props":1251,"children":1252},{"class":122,"line":133},[1253,1257,1261,1265,1269,1273,1278,1282,1286,1290,1294,1298],{"type":11,"tag":120,"props":1254,"children":1255},{"style":1189},[1256],{"type":17,"value":1192},{"type":11,"tag":120,"props":1258,"children":1259},{"style":1195},[1260],{"type":17,"value":1198},{"type":11,"tag":120,"props":1262,"children":1263},{"style":1201},[1264],{"type":17,"value":1204},{"type":11,"tag":120,"props":1266,"children":1267},{"style":1189},[1268],{"type":17,"value":1209},{"type":11,"tag":120,"props":1270,"children":1271},{"style":1212},[1272],{"type":17,"value":1215},{"type":11,"tag":120,"props":1274,"children":1275},{"style":1218},[1276],{"type":17,"value":1277},"overlay",{"type":11,"tag":120,"props":1279,"children":1280},{"style":1212},[1281],{"type":17,"value":1215},{"type":11,"tag":120,"props":1283,"children":1284},{"style":1189},[1285],{"type":17,"value":1230},{"type":11,"tag":120,"props":1287,"children":1288},{"style":127},[1289],{"type":17,"value":1235},{"type":11,"tag":120,"props":1291,"children":1292},{"style":1189},[1293],{"type":17,"value":1240},{"type":11,"tag":120,"props":1295,"children":1296},{"style":1195},[1297],{"type":17,"value":1198},{"type":11,"tag":120,"props":1299,"children":1300},{"style":1189},[1301],{"type":17,"value":1249},{"type":11,"tag":19,"props":1303,"children":1304},{},[1305,1307,1313,1315,1321],{"type":17,"value":1306},"Maps the five elevation tiers to a single attribute. Strictly additive —\nonly elements carrying the data-attr get the new shadows. The ",{"type":11,"tag":93,"props":1308,"children":1310},{"className":1309},[],[1311],{"type":17,"value":1312},"hover",{"type":17,"value":1314},"\nvalue also applies ",{"type":11,"tag":93,"props":1316,"children":1318},{"className":1317},[],[1319],{"type":17,"value":1320},"transform: translateY(-1px)",{"type":17,"value":1322}," so a one-line opt-in\nproduces the full hover lift.",{"type":11,"tag":76,"props":1324,"children":1326},{"id":1325},"j3-tux-hoverlift-utility",[1327,1329,1335],{"type":17,"value":1328},"J.3 · ",{"type":11,"tag":93,"props":1330,"children":1332},{"className":1331},[],[1333],{"type":17,"value":1334},".tux-hoverlift",{"type":17,"value":1336}," utility",{"type":11,"tag":19,"props":1338,"children":1339},{},[1340],{"type":17,"value":1341},"For surfaces that should lift on hover without writing the transition\nby hand:",{"type":11,"tag":109,"props":1343,"children":1345},{"className":1177,"code":1344,"language":1179,"meta":114,"style":114},"\u003Carticle class=\"tux-hoverlift\" data-tux-elevation=\"rest\">…\u003C\u002Farticle>\n",[1346],{"type":11,"tag":93,"props":1347,"children":1348},{"__ignoreMap":114},[1349],{"type":11,"tag":120,"props":1350,"children":1351},{"class":122,"line":123},[1352,1356,1361,1366,1370,1374,1379,1383,1387,1391,1395,1399,1403,1407,1411,1415,1419],{"type":11,"tag":120,"props":1353,"children":1354},{"style":1189},[1355],{"type":17,"value":1192},{"type":11,"tag":120,"props":1357,"children":1358},{"style":1195},[1359],{"type":17,"value":1360},"article",{"type":11,"tag":120,"props":1362,"children":1363},{"style":1201},[1364],{"type":17,"value":1365}," class",{"type":11,"tag":120,"props":1367,"children":1368},{"style":1189},[1369],{"type":17,"value":1209},{"type":11,"tag":120,"props":1371,"children":1372},{"style":1212},[1373],{"type":17,"value":1215},{"type":11,"tag":120,"props":1375,"children":1376},{"style":1218},[1377],{"type":17,"value":1378},"tux-hoverlift",{"type":11,"tag":120,"props":1380,"children":1381},{"style":1212},[1382],{"type":17,"value":1215},{"type":11,"tag":120,"props":1384,"children":1385},{"style":1201},[1386],{"type":17,"value":1204},{"type":11,"tag":120,"props":1388,"children":1389},{"style":1189},[1390],{"type":17,"value":1209},{"type":11,"tag":120,"props":1392,"children":1393},{"style":1212},[1394],{"type":17,"value":1215},{"type":11,"tag":120,"props":1396,"children":1397},{"style":1218},[1398],{"type":17,"value":1221},{"type":11,"tag":120,"props":1400,"children":1401},{"style":1212},[1402],{"type":17,"value":1215},{"type":11,"tag":120,"props":1404,"children":1405},{"style":1189},[1406],{"type":17,"value":1230},{"type":11,"tag":120,"props":1408,"children":1409},{"style":127},[1410],{"type":17,"value":1235},{"type":11,"tag":120,"props":1412,"children":1413},{"style":1189},[1414],{"type":17,"value":1240},{"type":11,"tag":120,"props":1416,"children":1417},{"style":1195},[1418],{"type":17,"value":1360},{"type":11,"tag":120,"props":1420,"children":1421},{"style":1189},[1422],{"type":17,"value":1249},{"type":11,"tag":19,"props":1424,"children":1425},{},[1426,1428,1434],{"type":17,"value":1427},"The class adds the easing + duration; the hover\u002Ffocus-within state pulls\nin ",{"type":11,"tag":93,"props":1429,"children":1431},{"className":1430},[],[1432],{"type":17,"value":1433},"--elevation-hover",{"type":17,"value":1435}," and the -1px translate.",{"type":11,"tag":76,"props":1437,"children":1439},{"id":1438},"j4-tux-mark-utility-for-identity-primitives",[1440,1442,1448],{"type":17,"value":1441},"J.4 · ",{"type":11,"tag":93,"props":1443,"children":1445},{"className":1444},[],[1446],{"type":17,"value":1447},".tux-mark",{"type":17,"value":1449}," utility for identity primitives",{"type":11,"tag":19,"props":1451,"children":1452},{},[1453,1455,1460,1462,1468],{"type":17,"value":1454},"Sizes and tints any of the four ",{"type":11,"tag":93,"props":1456,"children":1458},{"className":1457},[],[1459],{"type":17,"value":863},{"type":17,"value":1461}," primitives from\n",{"type":11,"tag":93,"props":1463,"children":1465},{"className":1464},[],[1466],{"type":17,"value":1467},"\u002Fidentity-primitives.svg",{"type":17,"value":398},{"type":11,"tag":109,"props":1470,"children":1472},{"className":1177,"code":1471,"language":1179,"meta":114,"style":114},"\u003Csvg class=\"tux-mark tux-mark--lg\" style=\"--mark-color: var(--brand-accent)\">\n  \u003Cuse href=\"\u002Fidentity-primitives.svg#tux-star\" \u002F>\n\u003C\u002Fsvg>\n",[1473],{"type":11,"tag":93,"props":1474,"children":1475},{"__ignoreMap":114},[1476,1535,1575],{"type":11,"tag":120,"props":1477,"children":1478},{"class":122,"line":123},[1479,1483,1488,1492,1496,1500,1505,1509,1514,1518,1522,1527,1531],{"type":11,"tag":120,"props":1480,"children":1481},{"style":1189},[1482],{"type":17,"value":1192},{"type":11,"tag":120,"props":1484,"children":1485},{"style":1195},[1486],{"type":17,"value":1487},"svg",{"type":11,"tag":120,"props":1489,"children":1490},{"style":1201},[1491],{"type":17,"value":1365},{"type":11,"tag":120,"props":1493,"children":1494},{"style":1189},[1495],{"type":17,"value":1209},{"type":11,"tag":120,"props":1497,"children":1498},{"style":1212},[1499],{"type":17,"value":1215},{"type":11,"tag":120,"props":1501,"children":1502},{"style":1218},[1503],{"type":17,"value":1504},"tux-mark tux-mark--lg",{"type":11,"tag":120,"props":1506,"children":1507},{"style":1212},[1508],{"type":17,"value":1215},{"type":11,"tag":120,"props":1510,"children":1511},{"style":1201},[1512],{"type":17,"value":1513}," style",{"type":11,"tag":120,"props":1515,"children":1516},{"style":1189},[1517],{"type":17,"value":1209},{"type":11,"tag":120,"props":1519,"children":1520},{"style":1212},[1521],{"type":17,"value":1215},{"type":11,"tag":120,"props":1523,"children":1524},{"style":1218},[1525],{"type":17,"value":1526},"--mark-color: var(--brand-accent)",{"type":11,"tag":120,"props":1528,"children":1529},{"style":1212},[1530],{"type":17,"value":1215},{"type":11,"tag":120,"props":1532,"children":1533},{"style":1189},[1534],{"type":17,"value":1249},{"type":11,"tag":120,"props":1536,"children":1537},{"class":122,"line":133},[1538,1543,1548,1553,1557,1561,1566,1570],{"type":11,"tag":120,"props":1539,"children":1540},{"style":1189},[1541],{"type":17,"value":1542},"  \u003C",{"type":11,"tag":120,"props":1544,"children":1545},{"style":1195},[1546],{"type":17,"value":1547},"use",{"type":11,"tag":120,"props":1549,"children":1550},{"style":1201},[1551],{"type":17,"value":1552}," href",{"type":11,"tag":120,"props":1554,"children":1555},{"style":1189},[1556],{"type":17,"value":1209},{"type":11,"tag":120,"props":1558,"children":1559},{"style":1212},[1560],{"type":17,"value":1215},{"type":11,"tag":120,"props":1562,"children":1563},{"style":1218},[1564],{"type":17,"value":1565},"\u002Fidentity-primitives.svg#tux-star",{"type":11,"tag":120,"props":1567,"children":1568},{"style":1212},[1569],{"type":17,"value":1215},{"type":11,"tag":120,"props":1571,"children":1572},{"style":1189},[1573],{"type":17,"value":1574}," \u002F>\n",{"type":11,"tag":120,"props":1576,"children":1577},{"class":122,"line":160},[1578,1582,1586],{"type":11,"tag":120,"props":1579,"children":1580},{"style":1189},[1581],{"type":17,"value":1240},{"type":11,"tag":120,"props":1583,"children":1584},{"style":1195},[1585],{"type":17,"value":1487},{"type":11,"tag":120,"props":1587,"children":1588},{"style":1189},[1589],{"type":17,"value":1249},{"type":11,"tag":19,"props":1591,"children":1592},{},[1593,1595,1601,1603,1609,1611,1617],{"type":17,"value":1594},"Defaults: 16×16, currentColor = ",{"type":11,"tag":93,"props":1596,"children":1598},{"className":1597},[],[1599],{"type":17,"value":1600},"--brand-primary",{"type":17,"value":1602},". Use ",{"type":11,"tag":93,"props":1604,"children":1606},{"className":1605},[],[1607],{"type":17,"value":1608},"tux-mark--lg",{"type":17,"value":1610},"\n(32px) for section accents, ",{"type":11,"tag":93,"props":1612,"children":1614},{"className":1613},[],[1615],{"type":17,"value":1616},"tux-mark--xl",{"type":17,"value":1618}," (56px) for hero marks.",{"type":11,"tag":76,"props":1620,"children":1622},{"id":1621},"j5-tux-section-divider-helper",[1623,1625,1631],{"type":17,"value":1624},"J.5 · ",{"type":11,"tag":93,"props":1626,"children":1628},{"className":1627},[],[1629],{"type":17,"value":1630},".tux-section-divider",{"type":17,"value":1632}," helper",{"type":11,"tag":19,"props":1634,"children":1635},{},[1636],{"type":17,"value":1637},"Eyebrow-with-trailing-rule pattern from the signature library, packaged\nas a one-class utility:",{"type":11,"tag":109,"props":1639,"children":1641},{"className":1177,"code":1640,"language":1179,"meta":114,"style":114},"\u003Cdiv class=\"tux-section-divider\">Section label\u003C\u002Fdiv>\n",[1642],{"type":11,"tag":93,"props":1643,"children":1644},{"__ignoreMap":114},[1645],{"type":11,"tag":120,"props":1646,"children":1647},{"class":122,"line":123},[1648,1652,1656,1660,1664,1668,1673,1677,1681,1686,1690,1694],{"type":11,"tag":120,"props":1649,"children":1650},{"style":1189},[1651],{"type":17,"value":1192},{"type":11,"tag":120,"props":1653,"children":1654},{"style":1195},[1655],{"type":17,"value":1198},{"type":11,"tag":120,"props":1657,"children":1658},{"style":1201},[1659],{"type":17,"value":1365},{"type":11,"tag":120,"props":1661,"children":1662},{"style":1189},[1663],{"type":17,"value":1209},{"type":11,"tag":120,"props":1665,"children":1666},{"style":1212},[1667],{"type":17,"value":1215},{"type":11,"tag":120,"props":1669,"children":1670},{"style":1218},[1671],{"type":17,"value":1672},"tux-section-divider",{"type":11,"tag":120,"props":1674,"children":1675},{"style":1212},[1676],{"type":17,"value":1215},{"type":11,"tag":120,"props":1678,"children":1679},{"style":1189},[1680],{"type":17,"value":1230},{"type":11,"tag":120,"props":1682,"children":1683},{"style":127},[1684],{"type":17,"value":1685},"Section label",{"type":11,"tag":120,"props":1687,"children":1688},{"style":1189},[1689],{"type":17,"value":1240},{"type":11,"tag":120,"props":1691,"children":1692},{"style":1195},[1693],{"type":17,"value":1198},{"type":11,"tag":120,"props":1695,"children":1696},{"style":1189},[1697],{"type":17,"value":1249},{"type":11,"tag":19,"props":1699,"children":1700},{},[1701],{"type":17,"value":1702},"Renders the label + a maroon-to-transparent gradient rule. The rule\nfades at the right edge, matching the default-style signature rhythm.",{"type":11,"tag":76,"props":1704,"children":1706},{"id":1705},"j6-row-grid-background-via-data-tux-rowgrid",[1707,1709],{"type":17,"value":1708},"J.6 · ROW grid background via ",{"type":11,"tag":93,"props":1710,"children":1712},{"className":1711},[],[1713],{"type":17,"value":1714},"data-tux-rowgrid",{"type":11,"tag":19,"props":1716,"children":1717},{},[1718],{"type":17,"value":1719},"Subtle vertical-line pattern at 6% maroon, applied as a background\nimage. Use on hero surfaces, large empty-state panels, or the section-\ndivider between major page zones. Off by default — opt in:",{"type":11,"tag":109,"props":1721,"children":1723},{"className":1177,"code":1722,"language":1179,"meta":114,"style":114},"\u003Csection data-tux-rowgrid>Hero content here\u003C\u002Fsection>\n",[1724],{"type":11,"tag":93,"props":1725,"children":1726},{"__ignoreMap":114},[1727],{"type":11,"tag":120,"props":1728,"children":1729},{"class":122,"line":123},[1730,1734,1739,1744,1748,1753,1757,1761],{"type":11,"tag":120,"props":1731,"children":1732},{"style":1189},[1733],{"type":17,"value":1192},{"type":11,"tag":120,"props":1735,"children":1736},{"style":1195},[1737],{"type":17,"value":1738},"section",{"type":11,"tag":120,"props":1740,"children":1741},{"style":1201},[1742],{"type":17,"value":1743}," data-tux-rowgrid",{"type":11,"tag":120,"props":1745,"children":1746},{"style":1189},[1747],{"type":17,"value":1230},{"type":11,"tag":120,"props":1749,"children":1750},{"style":127},[1751],{"type":17,"value":1752},"Hero content here",{"type":11,"tag":120,"props":1754,"children":1755},{"style":1189},[1756],{"type":17,"value":1240},{"type":11,"tag":120,"props":1758,"children":1759},{"style":1195},[1760],{"type":17,"value":1738},{"type":11,"tag":120,"props":1762,"children":1763},{"style":1189},[1764],{"type":17,"value":1249},{"type":11,"tag":19,"props":1766,"children":1767},{},[1768,1772],{"type":11,"tag":25,"props":1769,"children":1770},{},[1771],{"type":17,"value":192},{"type":17,"value":1773}," Carries the right-of-way visual DNA without requiring a host to\nembed the SVG sprite or manage opacity manually.",{"type":11,"tag":76,"props":1775,"children":1777},{"id":1776},"whats-not-in-j",[1778],{"type":17,"value":1779},"What's not in J",{"type":11,"tag":867,"props":1781,"children":1782},{},[1783,1804,1816],{"type":11,"tag":871,"props":1784,"children":1785},{},[1786,1788,1794,1796,1802],{"type":17,"value":1787},"No component file got rewritten. Everything lives in ",{"type":11,"tag":93,"props":1789,"children":1791},{"className":1790},[],[1792],{"type":17,"value":1793},"tux.css",{"type":17,"value":1795}," as\neither a global default (J.1 only, gated by ",{"type":11,"tag":93,"props":1797,"children":1799},{"className":1798},[],[1800],{"type":17,"value":1801},"prefers-reduced-motion",{"type":17,"value":1803},")\nor an opt-in attribute \u002F class.",{"type":11,"tag":871,"props":1805,"children":1806},{},[1807,1809,1815],{"type":17,"value":1808},"No new tokens added — Batch J consumes the existing prelude tokens\nfrom ",{"type":11,"tag":93,"props":1810,"children":1812},{"className":1811},[],[1813],{"type":17,"value":1814},"tokens.css",{"type":17,"value":58},{"type":11,"tag":871,"props":1817,"children":1818},{},[1819],{"type":17,"value":1820},"No JS changes — the application is pure CSS.",{"type":11,"tag":19,"props":1822,"children":1823},{},[1824],{"type":17,"value":1825},"If a future component wants the full visual-language treatment, the\ntypical opt-in pattern is:",{"type":11,"tag":109,"props":1827,"children":1831},{"className":1828,"code":1829,"language":1830,"meta":114,"style":114},"language-vue shiki shiki-themes material-theme-lighter github-light github-dark","\u003Caside\n  data-tux-overlay\n  data-tux-elevation=\"overlay\"\n  class=\"tux-hoverlift\">\n  …\n\u003C\u002Faside>\n","vue",[1832],{"type":11,"tag":93,"props":1833,"children":1834},{"__ignoreMap":114},[1835,1847,1855,1880,1908,1916],{"type":11,"tag":120,"props":1836,"children":1837},{"class":122,"line":123},[1838,1842],{"type":11,"tag":120,"props":1839,"children":1840},{"style":1189},[1841],{"type":17,"value":1192},{"type":11,"tag":120,"props":1843,"children":1844},{"style":1195},[1845],{"type":17,"value":1846},"aside\n",{"type":11,"tag":120,"props":1848,"children":1849},{"class":122,"line":133},[1850],{"type":11,"tag":120,"props":1851,"children":1852},{"style":1201},[1853],{"type":17,"value":1854},"  data-tux-overlay\n",{"type":11,"tag":120,"props":1856,"children":1857},{"class":122,"line":160},[1858,1863,1867,1871,1875],{"type":11,"tag":120,"props":1859,"children":1860},{"style":1201},[1861],{"type":17,"value":1862},"  data-tux-elevation",{"type":11,"tag":120,"props":1864,"children":1865},{"style":1189},[1866],{"type":17,"value":1209},{"type":11,"tag":120,"props":1868,"children":1869},{"style":1212},[1870],{"type":17,"value":1215},{"type":11,"tag":120,"props":1872,"children":1873},{"style":1218},[1874],{"type":17,"value":1277},{"type":11,"tag":120,"props":1876,"children":1877},{"style":1212},[1878],{"type":17,"value":1879},"\"\n",{"type":11,"tag":120,"props":1881,"children":1882},{"class":122,"line":169},[1883,1888,1892,1896,1900,1904],{"type":11,"tag":120,"props":1884,"children":1885},{"style":1201},[1886],{"type":17,"value":1887},"  class",{"type":11,"tag":120,"props":1889,"children":1890},{"style":1189},[1891],{"type":17,"value":1209},{"type":11,"tag":120,"props":1893,"children":1894},{"style":1212},[1895],{"type":17,"value":1215},{"type":11,"tag":120,"props":1897,"children":1898},{"style":1218},[1899],{"type":17,"value":1378},{"type":11,"tag":120,"props":1901,"children":1902},{"style":1212},[1903],{"type":17,"value":1215},{"type":11,"tag":120,"props":1905,"children":1906},{"style":1189},[1907],{"type":17,"value":1249},{"type":11,"tag":120,"props":1909,"children":1910},{"class":122,"line":178},[1911],{"type":11,"tag":120,"props":1912,"children":1913},{"style":127},[1914],{"type":17,"value":1915},"  …\n",{"type":11,"tag":120,"props":1917,"children":1919},{"class":122,"line":1918},6,[1920,1924,1929],{"type":11,"tag":120,"props":1921,"children":1922},{"style":1189},[1923],{"type":17,"value":1240},{"type":11,"tag":120,"props":1925,"children":1926},{"style":1195},[1927],{"type":17,"value":1928},"aside",{"type":11,"tag":120,"props":1930,"children":1931},{"style":1189},[1932],{"type":17,"value":1249},{"type":11,"tag":19,"props":1934,"children":1935},{},[1936,1941,1943,1949,1951,1956,1958,1963],{"type":11,"tag":25,"props":1937,"children":1938},{},[1939],{"type":17,"value":1940},"Path note:",{"type":17,"value":1942}," In the standalone skill payload these utilities use\n",{"type":11,"tag":93,"props":1944,"children":1946},{"className":1945},[],[1947],{"type":17,"value":1948},"assets\u002Fidentity-primitives.svg",{"type":17,"value":1950},". Here in the Nuxt repo the asset\nlives at ",{"type":11,"tag":93,"props":1952,"children":1954},{"className":1953},[],[1955],{"type":17,"value":855},{"type":17,"value":1957},", addressed at runtime as\n",{"type":11,"tag":93,"props":1959,"children":1961},{"className":1960},[],[1962],{"type":17,"value":1467},{"type":17,"value":58},{"type":11,"tag":60,"props":1965,"children":1966},{},[],{"type":11,"tag":64,"props":1968,"children":1970},{"id":1969},"batch-l-the-wash-ladder-2026-08-19",[1971],{"type":17,"value":1972},"Batch L — the wash ladder (2026-08-19)",{"type":11,"tag":19,"props":1974,"children":1975},{},[1976,1978,1984],{"type":17,"value":1977},"The transparent-tint washes (hover fills, focus washes, selected\nstates, hairline spines) had drifted to 22 distinct eyeballed\n",{"type":11,"tag":93,"props":1979,"children":1981},{"className":1980},[],[1982],{"type":17,"value":1983},"color-mix",{"type":17,"value":1985}," percentages across 84 sites — adjacent near-duplicates\nlike 4\u002F5\u002F6 and 8\u002F9\u002F10 proving nobody was choosing from a scale.\nRatified as law:",{"type":11,"tag":867,"props":1987,"children":1988},{},[1989,2007,2031,2041],{"type":11,"tag":871,"props":1990,"children":1991},{},[1992,1997,1999,2005],{"type":11,"tag":25,"props":1993,"children":1994},{},[1995],{"type":17,"value":1996},"The ladder: 4 · 6 · 8 · 12 · 18 · 22 · 35 · 50.",{"type":17,"value":1998}," Every\n",{"type":11,"tag":93,"props":2000,"children":2002},{"className":2001},[],[2003],{"type":17,"value":2004},"color-mix(… N%, transparent)",{"type":17,"value":2006}," wash below 60% uses a ladder\npercentage, whatever the base color.",{"type":11,"tag":871,"props":2008,"children":2009},{},[2010,2015,2016,2022,2024,2029],{"type":11,"tag":25,"props":2011,"children":2012},{},[2013],{"type":17,"value":2014},"Maroon washes use the named tokens",{"type":17,"value":924},{"type":11,"tag":93,"props":2017,"children":2019},{"className":2018},[],[2020],{"type":17,"value":2021},"--wash-brand-4 … 35",{"type":17,"value":2023},"\n(defined over ",{"type":11,"tag":93,"props":2025,"children":2027},{"className":2026},[],[2028],{"type":17,"value":1600},{"type":17,"value":2030},", so each theme's anchor rebind\nretints every wash automatically). 50% stays inline — at that\nweight it reads as a tint, and only two sites need it.",{"type":11,"tag":871,"props":2032,"children":2033},{},[2034,2039],{"type":11,"tag":25,"props":2035,"children":2036},{},[2037],{"type":17,"value":2038},"≥ 60% is a scrim\u002Ffill, not a wash",{"type":17,"value":2040}," — exempt from the ladder\n(modal scrims, frosted panels, image overlays).",{"type":11,"tag":871,"props":2042,"children":2043},{},[2044,2046,2052,2053,2059,2060,2066,2068,2073],{"type":17,"value":2045},"Other bases (",{"type":11,"tag":93,"props":2047,"children":2049},{"className":2048},[],[2050],{"type":17,"value":2051},"--brand-accent",{"type":17,"value":44},{"type":11,"tag":93,"props":2054,"children":2056},{"className":2055},[],[2057],{"type":17,"value":2058},"--brand-secondary",{"type":17,"value":51},{"type":11,"tag":93,"props":2061,"children":2063},{"className":2062},[],[2064],{"type":17,"value":2065},"--text-primary",{"type":17,"value":2067},", …) keep inline ",{"type":11,"tag":93,"props":2069,"children":2071},{"className":2070},[],[2072],{"type":17,"value":1983},{"type":17,"value":2074}," but on ladder\npercentages. Named tokens for a base earn their place when it\nreaches maroon-level usage.",{"type":11,"tag":19,"props":2076,"children":2077},{},[2078,2084],{"type":11,"tag":93,"props":2079,"children":2081},{"className":2080},[],[2082],{"type":17,"value":2083},"tests\u002Ftux-color.test.ts",{"type":17,"value":2085}," enforces the ladder in CI.",{"type":11,"tag":64,"props":2087,"children":2089},{"id":2088},"how-to-use-this-doc",[2090],{"type":17,"value":2091},"How to use this doc",{"type":11,"tag":19,"props":2093,"children":2094},{},[2095,2097,2102,2104,2110],{"type":17,"value":2096},"When you make a token-level change in ",{"type":11,"tag":93,"props":2098,"children":2100},{"className":2099},[],[2101],{"type":17,"value":1026},{"type":17,"value":2103}," (and\nits distributable mirror ",{"type":11,"tag":93,"props":2105,"children":2107},{"className":2106},[],[2108],{"type":17,"value":2109},"public\u002Fcolors_and_type.css",{"type":17,"value":2111},"), add an entry\nhere:",{"type":11,"tag":2113,"props":2114,"children":2115},"ol",{},[2116,2126,2136,2146],{"type":11,"tag":871,"props":2117,"children":2118},{},[2119,2124],{"type":11,"tag":25,"props":2120,"children":2121},{},[2122],{"type":17,"value":2123},"What changed",{"type":17,"value":2125}," (before → after, with code)",{"type":11,"tag":871,"props":2127,"children":2128},{},[2129,2134],{"type":11,"tag":25,"props":2130,"children":2131},{},[2132],{"type":17,"value":2133},"Why",{"type":17,"value":2135}," (the design pressure that made it necessary)",{"type":11,"tag":871,"props":2137,"children":2138},{},[2139,2144],{"type":11,"tag":25,"props":2140,"children":2141},{},[2142],{"type":17,"value":2143},"Variants",{"type":17,"value":2145}," (theme-specific overrides if any)",{"type":11,"tag":871,"props":2147,"children":2148},{},[2149,2154],{"type":11,"tag":25,"props":2150,"children":2151},{},[2152],{"type":17,"value":2153},"Lineage",{"type":17,"value":2155}," (what library informed the anatomy, if any; or \"tux-original\")",{"type":11,"tag":19,"props":2157,"children":2158},{},[2159],{"type":17,"value":2160},"Keep entries short. The point is a traceable history, not a manual.",{"type":11,"tag":2162,"props":2163,"children":2164},"style",{},[2165],{"type":17,"value":2166},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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);}",{"title":114,"searchDepth":133,"depth":133,"links":2168},[2169,2177,2191,2192],{"id":66,"depth":133,"text":69,"children":2170},[2171,2172,2173,2174,2175,2176],{"id":78,"depth":160,"text":81},{"id":217,"depth":160,"text":220},{"id":378,"depth":160,"text":381},{"id":526,"depth":160,"text":529},{"id":713,"depth":160,"text":716},{"id":841,"depth":160,"text":844},{"id":956,"depth":133,"text":959,"children":2178},[2179,2180,2182,2184,2186,2188,2190],{"id":1031,"depth":160,"text":1034},{"id":1166,"depth":160,"text":2181},"J.2 · Elevation roles via data-tux-elevation",{"id":1325,"depth":160,"text":2183},"J.3 · .tux-hoverlift utility",{"id":1438,"depth":160,"text":2185},"J.4 · .tux-mark utility for identity primitives",{"id":1621,"depth":160,"text":2187},"J.5 · .tux-section-divider helper",{"id":1705,"depth":160,"text":2189},"J.6 · ROW grid background via data-tux-rowgrid",{"id":1776,"depth":160,"text":1779},{"id":1969,"depth":133,"text":1972},{"id":2088,"depth":133,"text":2091},1788285289885]