[{"data":1,"prerenderedAt":1447},["ShallowReactive",2],{"design-doc:tux":3},{"data":4,"body":7,"toc":1427},{"title":5,"description":6},"tux — design system","tux (\u002Ftʌks\u002F, rhymes with \"ducks\" — like the suit) is the design\nsystem behind tti-ux. The name nods at \"tuxedo\" by way of TTI's maroon",{"type":8,"children":9},"root",[10,18,30,47,54,152,158,325,331,336,343,379,385,414,420,433,439,490,790,800,806,874,880,899,1051,1056,1110,1137,1142,1156,1184,1198,1220,1234,1256,1316,1322,1374,1380],{"type":11,"tag":12,"props":13,"children":15},"element","h1",{"id":14},"tux-design-system",[16],{"type":17,"value":5},"text",{"type":11,"tag":19,"props":20,"children":21},"p",{},[22,28],{"type":11,"tag":23,"props":24,"children":25},"strong",{},[26],{"type":17,"value":27},"tux",{"type":17,"value":29}," (\u002Ftʌks\u002F, rhymes with \"ducks\" — like the suit) is the design\nsystem behind tti-ux. The name nods at \"tuxedo\" by way of TTI's maroon",{"type":11,"tag":31,"props":32,"children":33},"ul",{},[34],{"type":11,"tag":35,"props":36,"children":37},"li",{},[38,40,45],{"type":17,"value":39},"gold formal-wear palette and the literal tuxedo glyph in the logo\nmark. It ships with a ",{"type":11,"tag":23,"props":41,"children":42},{},[43],{"type":17,"value":44},"TTI flavor",{"type":17,"value":46}," out of the box and re-themes\ncleanly for any Texas A&M University System member institution — or\nany institution outside TAMUS that wants to borrow the pattern.",{"type":11,"tag":48,"props":49,"children":51},"h2",{"id":50},"principles",[52],{"type":17,"value":53},"Principles",{"type":11,"tag":55,"props":56,"children":57},"ol",{},[58,77,95,132,142],{"type":11,"tag":35,"props":59,"children":60},{},[61,66,68,75],{"type":11,"tag":23,"props":62,"children":63},{},[64],{"type":17,"value":65},"Editorial, not dashboard-y.",{"type":17,"value":67}," TTI's marketing output (reviewed in\n",{"type":11,"tag":69,"props":70,"children":72},"code",{"className":71},[],[73],{"type":17,"value":74},"design\u002Fpalette.md",{"type":17,"value":76},") reads as an institutional research report, not a\nSaaS dashboard. tux follows: generous white space, real photography\nin marketing surfaces, restrained color, authoritative headline\ntreatments.",{"type":11,"tag":35,"props":78,"children":79},{},[80,85,87,93],{"type":11,"tag":23,"props":81,"children":82},{},[83],{"type":17,"value":84},"Data-dense where it counts.",{"type":17,"value":86}," Research and institutional apps can\nshow thousands of rows at a time. When we get dense, we get dense\n",{"type":11,"tag":88,"props":89,"children":90},"em",{},[91],{"type":17,"value":92},"well",{"type":17,"value":94}," — virtualized tables, clear hierarchy, no flicker.",{"type":11,"tag":35,"props":96,"children":97},{},[98,103,105,110,112,117,119,130],{"type":11,"tag":23,"props":99,"children":100},{},[101],{"type":17,"value":102},"Accessible by default.",{"type":17,"value":104}," ",{"type":11,"tag":23,"props":106,"children":107},{},[108],{"type":17,"value":109},"WCAG 2.2 Level AA",{"type":17,"value":111}," is the floor;\ncolor contrast is verified at ",{"type":11,"tag":23,"props":113,"children":114},{},[115],{"type":17,"value":116},"AAA",{"type":17,"value":118}," (7:1 normal text, 4.5:1 large)\nacross all three themes by automated audit on every commit. Texas\nstate agencies have §2054.459 obligations; every color token ships\nwith a documented contrast pair. See ",{"type":11,"tag":120,"props":121,"children":123},"a",{"href":122},"..\u002Fapp\u002Fpages\u002Faccessibility.vue",[124],{"type":11,"tag":69,"props":125,"children":127},{"className":126},[],[128],{"type":17,"value":129},"\u002Faccessibility",{"type":17,"value":131},"\nfor the formal statement and the per-criterion coverage table.",{"type":11,"tag":35,"props":133,"children":134},{},[135,140],{"type":11,"tag":23,"props":136,"children":137},{},[138],{"type":17,"value":139},"Themeable by institution.",{"type":17,"value":141}," Brand colors are the only thing that\nchanges. Spacing, typography scale, component behavior — identical\neverywhere. Clone the TTI token file, swap four hex values, ship a\nsibling-institution build.",{"type":11,"tag":35,"props":143,"children":144},{},[145,150],{"type":11,"tag":23,"props":146,"children":147},{},[148],{"type":17,"value":149},"Framework-light.",{"type":17,"value":151}," Headless primitives (Nuxt UI \u002F Reka UI) +\nTailwind v4 + CSS custom properties. If a future consumer ever needs\na React or Svelte port, the token layer ports cleanly.",{"type":11,"tag":48,"props":153,"children":155},{"id":154},"stack",[156],{"type":17,"value":157},"Stack",{"type":11,"tag":159,"props":160,"children":161},"table",{},[162,186],{"type":11,"tag":163,"props":164,"children":165},"thead",{},[166],{"type":11,"tag":167,"props":168,"children":169},"tr",{},[170,176,181],{"type":11,"tag":171,"props":172,"children":173},"th",{},[174],{"type":17,"value":175},"Layer",{"type":11,"tag":171,"props":177,"children":178},{},[179],{"type":17,"value":180},"Tool",{"type":11,"tag":171,"props":182,"children":183},{},[184],{"type":17,"value":185},"Why",{"type":11,"tag":187,"props":188,"children":189},"tbody",{},[190,213,237,255,273,299],{"type":11,"tag":167,"props":191,"children":192},{},[193,199,208],{"type":11,"tag":194,"props":195,"children":196},"td",{},[197],{"type":17,"value":198},"Tokens source",{"type":11,"tag":194,"props":200,"children":201},{},[202],{"type":11,"tag":69,"props":203,"children":205},{"className":204},[],[206],{"type":17,"value":207},"design\u002Ftokens.json",{"type":11,"tag":194,"props":209,"children":210},{},[211],{"type":17,"value":212},"Single source of truth (Style Dictionary transforms → CSS vars, Figma JSON)",{"type":11,"tag":167,"props":214,"children":215},{},[216,221,226],{"type":11,"tag":194,"props":217,"children":218},{},[219],{"type":17,"value":220},"Utilities",{"type":11,"tag":194,"props":222,"children":223},{},[224],{"type":17,"value":225},"Tailwind v4",{"type":11,"tag":194,"props":227,"children":228},{},[229,235],{"type":11,"tag":69,"props":230,"children":232},{"className":231},[],[233],{"type":17,"value":234},"@theme",{"type":17,"value":236}," directive consumes CSS custom properties directly",{"type":11,"tag":167,"props":238,"children":239},{},[240,245,250],{"type":11,"tag":194,"props":241,"children":242},{},[243],{"type":17,"value":244},"Primitives",{"type":11,"tag":194,"props":246,"children":247},{},[248],{"type":17,"value":249},"Nuxt UI 4 (on Reka UI)",{"type":11,"tag":194,"props":251,"children":252},{},[253],{"type":17,"value":254},"Headless, a11y-complete Vue primitives with theming layer",{"type":11,"tag":167,"props":256,"children":257},{},[258,263,268],{"type":11,"tag":194,"props":259,"children":260},{},[261],{"type":17,"value":262},"Tables",{"type":11,"tag":194,"props":264,"children":265},{},[266],{"type":17,"value":267},"TanStack Table v8 + TanStack Virtual",{"type":11,"tag":194,"props":269,"children":270},{},[271],{"type":17,"value":272},"Headless, virtualized — composes with our styling",{"type":11,"tag":167,"props":274,"children":275},{},[276,281,294],{"type":11,"tag":194,"props":277,"children":278},{},[279],{"type":17,"value":280},"Icons",{"type":11,"tag":194,"props":282,"children":283},{},[284,286,292],{"type":17,"value":285},"Iconify via ",{"type":11,"tag":69,"props":287,"children":289},{"className":288},[],[290],{"type":17,"value":291},"@nuxt\u002Ficon",{"type":17,"value":293},", Lucide set",{"type":11,"tag":194,"props":295,"children":296},{},[297],{"type":17,"value":298},"On-demand, 1,700+ icons bundled — extensible to any Iconify family",{"type":11,"tag":167,"props":300,"children":301},{},[302,307,312],{"type":11,"tag":194,"props":303,"children":304},{},[305],{"type":17,"value":306},"Catalog",{"type":11,"tag":194,"props":308,"children":309},{},[310],{"type":17,"value":311},"This Nuxt app",{"type":11,"tag":194,"props":313,"children":314},{},[315,317,323],{"type":17,"value":316},"The living style guide IS the documentation; ",{"type":11,"tag":69,"props":318,"children":320},{"className":319},[],[321],{"type":17,"value":322},"npm run dev",{"type":17,"value":324}," shows it",{"type":11,"tag":48,"props":326,"children":328},{"id":327},"signature-moves",[329],{"type":17,"value":330},"Signature moves",{"type":11,"tag":19,"props":332,"children":333},{},[334],{"type":17,"value":335},"Three visual ideas make tux recognizably TTI\u002FTAMUS and not generic\nshadcn:",{"type":11,"tag":337,"props":338,"children":340},"h3",{"id":339},"the-gold-bar",[341],{"type":17,"value":342},"The gold bar",{"type":11,"tag":19,"props":344,"children":345},{},[346,348,353,355,361,363,369,371,377],{"type":17,"value":347},"Under every editorial heading: a slim ",{"type":11,"tag":23,"props":349,"children":350},{},[351],{"type":17,"value":352},"TTI gold",{"type":17,"value":354}," rule (64×3px under\n",{"type":11,"tag":69,"props":356,"children":358},{"className":357},[],[359],{"type":17,"value":360},"heading--bold",{"type":17,"value":362},", 88×3px under ",{"type":11,"tag":69,"props":364,"children":366},{"className":365},[],[367],{"type":17,"value":368},"heading--display",{"type":17,"value":370},", with a 1.5px\nborder-radius). Earlier drafts used a 100×8px slab; the slim hairline\nreads more \"refined editorial\" and less \"marketing 2010\" without\nlosing the editorial-weight signal. ",{"type":11,"tag":69,"props":372,"children":374},{"className":373},[],[375],{"type":17,"value":376},"TuxSectionHeader",{"type":17,"value":378}," uses a 2px\nmaroon underline scoped to text-width as a third variant.",{"type":11,"tag":337,"props":380,"children":382},{"id":381},"the-card-corner-drop",[383],{"type":17,"value":384},"The card corner-drop",{"type":11,"tag":19,"props":386,"children":387},{},[388,390,396,398,404,406,412],{"type":17,"value":389},"Linked ",{"type":11,"tag":69,"props":391,"children":393},{"className":392},[],[394],{"type":17,"value":395},"TuxCard",{"type":17,"value":397}," on hover: translates ",{"type":11,"tag":69,"props":399,"children":401},{"className":400},[],[402],{"type":17,"value":403},"+6px",{"type":17,"value":405}," right and ",{"type":11,"tag":69,"props":407,"children":409},{"className":408},[],[410],{"type":17,"value":411},"-6px",{"type":17,"value":413}," up while a\nmaroon slab box-shadow drops into the gap left behind. Signals\nnavigation without the cargo-cult hover-lift every SaaS uses.",{"type":11,"tag":337,"props":415,"children":417},{"id":416},"the-eyebrow-subhead-rhythm",[418],{"type":17,"value":419},"The eyebrow + subhead rhythm",{"type":11,"tag":19,"props":421,"children":422},{},[423,425,431],{"type":17,"value":424},"Small ALL-CAPS tracked-out labels above or below a heading — pulled\nfrom TTI's print collateral. The component showcase pages dogfood this\nheavily via ",{"type":11,"tag":69,"props":426,"children":428},{"className":427},[],[429],{"type":17,"value":430},"TuxPageHeader",{"type":17,"value":432},".",{"type":11,"tag":48,"props":434,"children":436},{"id":435},"theme-variants",[437],{"type":17,"value":438},"Theme variants",{"type":11,"tag":19,"props":440,"children":441},{},[442,444,449,451,457,459,465,467,473,475,481,483,489],{"type":17,"value":443},"Themes ship in ",{"type":11,"tag":69,"props":445,"children":447},{"className":446},[],[448],{"type":17,"value":207},{"type":17,"value":450}," under ",{"type":11,"tag":69,"props":452,"children":454},{"className":453},[],[455],{"type":17,"value":456},"themes.*",{"type":17,"value":458}," and in\n",{"type":11,"tag":69,"props":460,"children":462},{"className":461},[],[463],{"type":17,"value":464},"app\u002Fassets\u002Fcss\u002Ftokens.css",{"type":17,"value":466}," as ",{"type":11,"tag":69,"props":468,"children":470},{"className":469},[],[471],{"type":17,"value":472},"[data-theme=\"\u003Cname>\"]",{"type":17,"value":474}," blocks. Swap by\nsetting ",{"type":11,"tag":69,"props":476,"children":478},{"className":477},[],[479],{"type":17,"value":480},"data-theme",{"type":17,"value":482}," on ",{"type":11,"tag":69,"props":484,"children":486},{"className":485},[],[487],{"type":17,"value":488},"\u003Chtml>",{"type":17,"value":432},{"type":11,"tag":159,"props":491,"children":492},{},[493,519],{"type":11,"tag":163,"props":494,"children":495},{},[496],{"type":11,"tag":167,"props":497,"children":498},{},[499,504,509,514],{"type":11,"tag":171,"props":500,"children":501},{},[502],{"type":17,"value":503},"Theme",{"type":11,"tag":171,"props":505,"children":506},{},[507],{"type":17,"value":508},"Anchor",{"type":11,"tag":171,"props":510,"children":511},{},[512],{"type":17,"value":513},"Accent",{"type":11,"tag":171,"props":515,"children":516},{},[517],{"type":17,"value":518},"Notes",{"type":11,"tag":187,"props":520,"children":521},{},[522,561,602,640,676,718,754],{"type":11,"tag":167,"props":523,"children":524},{},[525,534,545,556],{"type":11,"tag":194,"props":526,"children":527},{},[528],{"type":11,"tag":69,"props":529,"children":531},{"className":530},[],[532],{"type":17,"value":533},"tti",{"type":11,"tag":194,"props":535,"children":536},{},[537,539],{"type":17,"value":538},"maroon ",{"type":11,"tag":69,"props":540,"children":542},{"className":541},[],[543],{"type":17,"value":544},"#5C0025",{"type":11,"tag":194,"props":546,"children":547},{},[548,550],{"type":17,"value":549},"gold ",{"type":11,"tag":69,"props":551,"children":553},{"className":552},[],[554],{"type":17,"value":555},"#DDAC37",{"type":11,"tag":194,"props":557,"children":558},{},[559],{"type":17,"value":560},"Default light theme. AAA-verified contrast.",{"type":11,"tag":167,"props":562,"children":563},{},[564,573,584,589],{"type":11,"tag":194,"props":565,"children":566},{},[567],{"type":11,"tag":69,"props":568,"children":570},{"className":569},[],[571],{"type":17,"value":572},"tti-dark",{"type":11,"tag":194,"props":574,"children":575},{},[576,578],{"type":17,"value":577},"teal ",{"type":11,"tag":69,"props":579,"children":581},{"className":580},[],[582],{"type":17,"value":583},"#6BB4C0",{"type":11,"tag":194,"props":585,"children":586},{},[587],{"type":17,"value":588},"gold",{"type":11,"tag":194,"props":590,"children":591},{},[592,594,600],{"type":17,"value":593},"Warm-charcoal dark theme; lifted TTI teal anchors (lightened maroon reads pink on dark — see tokens.json rationale; maroon presence stays via ",{"type":11,"tag":69,"props":595,"children":597},{"className":596},[],[598],{"type":17,"value":599},"brand.fill",{"type":17,"value":601}," + chart-1 wine). AAA-verified contrast.",{"type":11,"tag":167,"props":603,"children":604},{},[605,614,625,635],{"type":11,"tag":194,"props":606,"children":607},{},[608],{"type":11,"tag":69,"props":609,"children":611},{"className":610},[],[612],{"type":17,"value":613},"tti-hc",{"type":11,"tag":194,"props":615,"children":616},{},[617,619],{"type":17,"value":618},"dark-red ",{"type":11,"tag":69,"props":620,"children":622},{"className":621},[],[623],{"type":17,"value":624},"#500000",{"type":11,"tag":194,"props":626,"children":627},{},[628,629],{"type":17,"value":549},{"type":11,"tag":69,"props":630,"children":632},{"className":631},[],[633],{"type":17,"value":634},"#DCAA37",{"type":11,"tag":194,"props":636,"children":637},{},[638],{"type":17,"value":639},"High-contrast variant. AAA across the board.",{"type":11,"tag":167,"props":641,"children":642},{},[643,652,661,666],{"type":11,"tag":194,"props":644,"children":645},{},[646],{"type":11,"tag":69,"props":647,"children":649},{"className":648},[],[650],{"type":17,"value":651},"tamu",{"type":11,"tag":194,"props":653,"children":654},{},[655,656],{"type":17,"value":538},{"type":11,"tag":69,"props":657,"children":659},{"className":658},[],[660],{"type":17,"value":624},{"type":11,"tag":194,"props":662,"children":663},{},[664],{"type":17,"value":665},"white \u002F gray",{"type":11,"tag":194,"props":667,"children":668},{},[669,671],{"type":17,"value":670},"Texas A&M University primary ",{"type":11,"tag":88,"props":672,"children":673},{},[674],{"type":17,"value":675},"(placeholder, unverified)",{"type":11,"tag":167,"props":677,"children":678},{},[679,688,699,709],{"type":11,"tag":194,"props":680,"children":681},{},[682],{"type":11,"tag":69,"props":683,"children":685},{"className":684},[],[686],{"type":17,"value":687},"pvamu",{"type":11,"tag":194,"props":689,"children":690},{},[691,693],{"type":17,"value":692},"purple ",{"type":11,"tag":69,"props":694,"children":696},{"className":695},[],[697],{"type":17,"value":698},"#500778",{"type":11,"tag":194,"props":700,"children":701},{},[702,703],{"type":17,"value":549},{"type":11,"tag":69,"props":704,"children":706},{"className":705},[],[707],{"type":17,"value":708},"#FFD700",{"type":11,"tag":194,"props":710,"children":711},{},[712,714],{"type":17,"value":713},"Prairie View A&M ",{"type":11,"tag":88,"props":715,"children":716},{},[717],{"type":17,"value":675},{"type":11,"tag":167,"props":719,"children":720},{},[721,730,740,745],{"type":11,"tag":194,"props":722,"children":723},{},[724],{"type":11,"tag":69,"props":725,"children":727},{"className":726},[],[728],{"type":17,"value":729},"tarleton",{"type":11,"tag":194,"props":731,"children":732},{},[733,734],{"type":17,"value":692},{"type":11,"tag":69,"props":735,"children":737},{"className":736},[],[738],{"type":17,"value":739},"#4C1D95",{"type":11,"tag":194,"props":741,"children":742},{},[743],{"type":17,"value":744},"white",{"type":11,"tag":194,"props":746,"children":747},{},[748,750],{"type":17,"value":749},"Tarleton State ",{"type":11,"tag":88,"props":751,"children":752},{},[753],{"type":17,"value":675},{"type":11,"tag":167,"props":755,"children":756},{},[757,766,776,781],{"type":11,"tag":194,"props":758,"children":759},{},[760],{"type":11,"tag":69,"props":761,"children":763},{"className":762},[],[764],{"type":17,"value":765},"wtamu",{"type":11,"tag":194,"props":767,"children":768},{},[769,770],{"type":17,"value":538},{"type":11,"tag":69,"props":771,"children":773},{"className":772},[],[774],{"type":17,"value":775},"#642667",{"type":11,"tag":194,"props":777,"children":778},{},[779],{"type":17,"value":780},"navy",{"type":11,"tag":194,"props":782,"children":783},{},[784,786],{"type":17,"value":785},"West Texas A&M ",{"type":11,"tag":88,"props":787,"children":788},{},[789],{"type":17,"value":675},{"type":11,"tag":19,"props":791,"children":792},{},[793,798],{"type":11,"tag":23,"props":794,"children":795},{},[796],{"type":17,"value":797},"Placeholder themes have unverified hex values",{"type":17,"value":799}," — don't ship a release\nfor that institution until their brand\u002Fmarketing team confirms.",{"type":11,"tag":48,"props":801,"children":803},{"id":802},"adding-a-new-institution",[804],{"type":17,"value":805},"Adding a new institution",{"type":11,"tag":55,"props":807,"children":808},{},[809,837,855],{"type":11,"tag":35,"props":810,"children":811},{},[812,814,820,822,827,829,835],{"type":17,"value":813},"Add a block under ",{"type":11,"tag":69,"props":815,"children":817},{"className":816},[],[818],{"type":17,"value":819},"themes.\u003Cname>",{"type":17,"value":821}," in ",{"type":11,"tag":69,"props":823,"children":825},{"className":824},[],[826],{"type":17,"value":207},{"type":17,"value":828}," — override\nonly ",{"type":11,"tag":69,"props":830,"children":832},{"className":831},[],[833],{"type":17,"value":834},"brand.*",{"type":17,"value":836}," slots.",{"type":11,"tag":35,"props":838,"children":839},{},[840,842,847,849,854],{"type":17,"value":841},"Add a matching ",{"type":11,"tag":69,"props":843,"children":845},{"className":844},[],[846],{"type":17,"value":472},{"type":17,"value":848}," block to\n",{"type":11,"tag":69,"props":850,"children":852},{"className":851},[],[853],{"type":17,"value":464},{"type":17,"value":432},{"type":11,"tag":35,"props":856,"children":857},{},[858,860,866,867,872],{"type":17,"value":859},"Switch via ",{"type":11,"tag":69,"props":861,"children":863},{"className":862},[],[864],{"type":17,"value":865},"data-theme=\"\u003Cname>\"",{"type":17,"value":482},{"type":11,"tag":69,"props":868,"children":870},{"className":869},[],[871],{"type":17,"value":488},{"type":17,"value":873}," and every token rebinds.",{"type":11,"tag":48,"props":875,"children":877},{"id":876},"typography",[878],{"type":17,"value":879},"Typography",{"type":11,"tag":19,"props":881,"children":882},{},[883,885,890,892,897],{"type":17,"value":884},"tux uses ",{"type":11,"tag":23,"props":886,"children":887},{},[888],{"type":17,"value":889},"four type families",{"type":17,"value":891},", with ",{"type":11,"tag":23,"props":893,"children":894},{},[895],{"type":17,"value":896},"one rule each",{"type":17,"value":898},". Rigidly\nenforced — if you find yourself using a family outside its lane, you're\noff-system.",{"type":11,"tag":159,"props":900,"children":901},{},[902,923],{"type":11,"tag":163,"props":903,"children":904},{},[905],{"type":11,"tag":167,"props":906,"children":907},{},[908,913,918],{"type":11,"tag":171,"props":909,"children":910},{},[911],{"type":17,"value":912},"Token",{"type":11,"tag":171,"props":914,"children":915},{},[916],{"type":17,"value":917},"Family",{"type":11,"tag":171,"props":919,"children":920},{},[921],{"type":17,"value":922},"Where it lives",{"type":11,"tag":187,"props":924,"children":925},{},[926,951,976,1001,1026],{"type":11,"tag":167,"props":927,"children":928},{},[929,938,946],{"type":11,"tag":194,"props":930,"children":931},{},[932],{"type":11,"tag":69,"props":933,"children":935},{"className":934},[],[936],{"type":17,"value":937},"--font-body",{"type":11,"tag":194,"props":939,"children":940},{},[941],{"type":11,"tag":23,"props":942,"children":943},{},[944],{"type":17,"value":945},"Open Sans",{"type":11,"tag":194,"props":947,"children":948},{},[949],{"type":17,"value":950},"Default body copy, paragraphs, eyebrows, subheads, H4–H6. Anywhere at any size.",{"type":11,"tag":167,"props":952,"children":953},{},[954,963,971],{"type":11,"tag":194,"props":955,"children":956},{},[957],{"type":11,"tag":69,"props":958,"children":960},{"className":959},[],[961],{"type":17,"value":962},"--font-display",{"type":11,"tag":194,"props":964,"children":965},{},[966],{"type":11,"tag":23,"props":967,"children":968},{},[969],{"type":17,"value":970},"Oswald",{"type":11,"tag":194,"props":972,"children":973},{},[974],{"type":17,"value":975},"Default-style H1–H3 only. Condensed, uppercase. Never body — illegible under ~18px.",{"type":11,"tag":167,"props":977,"children":978},{},[979,988,996],{"type":11,"tag":194,"props":980,"children":981},{},[982],{"type":11,"tag":69,"props":983,"children":985},{"className":984},[],[986],{"type":17,"value":987},"--font-bold",{"type":11,"tag":194,"props":989,"children":990},{},[991],{"type":11,"tag":23,"props":992,"children":993},{},[994],{"type":17,"value":995},"Work Sans",{"type":11,"tag":194,"props":997,"children":998},{},[999],{"type":17,"value":1000},"Bold-style H1–H3, plus buttons, inputs, selects everywhere. Never long-form.",{"type":11,"tag":167,"props":1002,"children":1003},{},[1004,1013,1021],{"type":11,"tag":194,"props":1005,"children":1006},{},[1007],{"type":11,"tag":69,"props":1008,"children":1010},{"className":1009},[],[1011],{"type":17,"value":1012},"--font-elegant",{"type":11,"tag":194,"props":1014,"children":1015},{},[1016],{"type":11,"tag":23,"props":1017,"children":1018},{},[1019],{"type":17,"value":1020},"Georgia",{"type":11,"tag":194,"props":1022,"children":1023},{},[1024],{"type":17,"value":1025},"Elegant-style H1–H3 only. System font — no @font-face needed. Never body copy.",{"type":11,"tag":167,"props":1027,"children":1028},{},[1029,1038,1046],{"type":11,"tag":194,"props":1030,"children":1031},{},[1032],{"type":11,"tag":69,"props":1033,"children":1035},{"className":1034},[],[1036],{"type":17,"value":1037},"--font-mono",{"type":11,"tag":194,"props":1039,"children":1040},{},[1041],{"type":11,"tag":23,"props":1042,"children":1043},{},[1044],{"type":17,"value":1045},"JetBrains Mono",{"type":11,"tag":194,"props":1047,"children":1048},{},[1049],{"type":17,"value":1050},"Paths, IDs, code, numeric stats in tables.",{"type":11,"tag":19,"props":1052,"children":1053},{},[1054],{"type":17,"value":1055},"Scale follows a 1.25 modular scale anchored at 16px body.",{"type":11,"tag":19,"props":1057,"children":1058},{},[1059,1064,1066,1071,1073,1079,1081,1086,1088,1093,1095,1101,1103,1108],{"type":11,"tag":23,"props":1060,"children":1061},{},[1062],{"type":17,"value":1063},"Public Sans note.",{"type":17,"value":1065}," Earlier drafts of tux defaulted to ",{"type":11,"tag":23,"props":1067,"children":1068},{},[1069],{"type":17,"value":1070},"Public Sans",{"type":17,"value":1072},"\n(USWDS) as a Franklin-Gothic-adjacent open-source heading face. The\nfour-family rule above supersedes that — as of v1.8.0 the body default\nand ",{"type":11,"tag":69,"props":1074,"children":1076},{"className":1075},[],[1077],{"type":17,"value":1078},".heading--display",{"type":17,"value":1080}," actually follow it (",{"type":11,"tag":69,"props":1082,"children":1084},{"className":1083},[],[1085],{"type":17,"value":937},{"type":17,"value":1087}," \u002F Oswald via\n",{"type":11,"tag":69,"props":1089,"children":1091},{"className":1090},[],[1092],{"type":17,"value":962},{"type":17,"value":1094},"). ",{"type":11,"tag":69,"props":1096,"children":1098},{"className":1097},[],[1099],{"type":17,"value":1100},"--font-sans",{"type":17,"value":1102}," (Public Sans) remains defined and\nself-hosted for legacy consumers but is ",{"type":11,"tag":23,"props":1104,"children":1105},{},[1106],{"type":17,"value":1107},"deprecated",{"type":17,"value":1109},": new work commits\nto the Oswald \u002F Work Sans \u002F Open Sans \u002F Georgia stack.",{"type":11,"tag":337,"props":1111,"children":1113},{"id":1112},"three-section-styles-default-bold-elegant",[1114,1116,1122,1124,1130,1131],{"type":17,"value":1115},"Three section styles — ",{"type":11,"tag":69,"props":1117,"children":1119},{"className":1118},[],[1120],{"type":17,"value":1121},"default",{"type":17,"value":1123},", ",{"type":11,"tag":69,"props":1125,"children":1127},{"className":1126},[],[1128],{"type":17,"value":1129},"bold",{"type":17,"value":1123},{"type":11,"tag":69,"props":1132,"children":1134},{"className":1133},[],[1135],{"type":17,"value":1136},"elegant",{"type":11,"tag":19,"props":1138,"children":1139},{},[1140],{"type":17,"value":1141},"tux ships with three style variants that change the character of a\nsurface. The product — a research dashboard, a chat window, a marketing\nsplash, a policy page — usually sits in one style and stays there, but\na page can mix: a bold hero on a default-style dashboard is fair game.",{"type":11,"tag":19,"props":1143,"children":1144},{},[1145,1150,1151],{"type":11,"tag":23,"props":1146,"children":1147},{},[1148],{"type":17,"value":1149},"Default style",{"type":17,"value":104},{"type":11,"tag":88,"props":1152,"children":1153},{},[1154],{"type":17,"value":1155},"(used most often)",{"type":11,"tag":31,"props":1157,"children":1158},{},[1159,1168,1179],{"type":11,"tag":35,"props":1160,"children":1161},{},[1162,1166],{"type":11,"tag":23,"props":1163,"children":1164},{},[1165],{"type":17,"value":970},{"type":17,"value":1167}," heads the page — condensed, uppercase, tight tracking.",{"type":11,"tag":35,"props":1169,"children":1170},{},[1171,1173,1178],{"type":17,"value":1172},"Less embellishment. Maroon underline on ",{"type":11,"tag":69,"props":1174,"children":1176},{"className":1175},[],[1177],{"type":17,"value":376},{"type":17,"value":432},{"type":11,"tag":35,"props":1180,"children":1181},{},[1182],{"type":17,"value":1183},"Right for: dashboards, admin chrome, tables, internal tooling, most\nproduct surfaces.",{"type":11,"tag":19,"props":1185,"children":1186},{},[1187,1192,1193],{"type":11,"tag":23,"props":1188,"children":1189},{},[1190],{"type":17,"value":1191},"Bold style",{"type":17,"value":104},{"type":11,"tag":88,"props":1194,"children":1195},{},[1196],{"type":17,"value":1197},"(eye-catching)",{"type":11,"tag":31,"props":1199,"children":1200},{},[1201,1210,1215],{"type":11,"tag":35,"props":1202,"children":1203},{},[1204,1208],{"type":11,"tag":23,"props":1205,"children":1206},{},[1207],{"type":17,"value":995},{"type":17,"value":1209}," heads the page — heavy (800), mixed-case, italic hero\nflourish.",{"type":11,"tag":35,"props":1211,"children":1212},{},[1213],{"type":17,"value":1214},"Rectangular top dividers (6–8px maroon bars above headings),\ndot-grid accents.",{"type":11,"tag":35,"props":1216,"children":1217},{},[1218],{"type":17,"value":1219},"Right for: marketing splashes, athletic\u002Fstudent-oriented surfaces,\nlanding pages, event pages.",{"type":11,"tag":19,"props":1221,"children":1222},{},[1223,1228,1229],{"type":11,"tag":23,"props":1224,"children":1225},{},[1226],{"type":17,"value":1227},"Elegant style",{"type":17,"value":104},{"type":11,"tag":88,"props":1230,"children":1231},{},[1232],{"type":17,"value":1233},"(refined, stately)",{"type":11,"tag":31,"props":1235,"children":1236},{},[1237,1246,1251],{"type":11,"tag":35,"props":1238,"children":1239},{},[1240,1244],{"type":11,"tag":23,"props":1241,"children":1242},{},[1243],{"type":17,"value":1020},{"type":17,"value":1245}," heads the page — serif, mixed-case, normal weight.",{"type":11,"tag":35,"props":1247,"children":1248},{},[1249],{"type":17,"value":1250},"Hash-pattern accents (diagonal maroon hash blocks), dotted maroon\nborders on cards.",{"type":11,"tag":35,"props":1252,"children":1253},{},[1254],{"type":17,"value":1255},"Right for: administrative pages, research publications, annual\nreports, faculty bios, policy documents, award announcements.",{"type":11,"tag":19,"props":1257,"children":1258},{},[1259,1261,1267,1268,1274,1276,1282,1284,1290,1292,1298,1300,1306,1308,1314],{"type":17,"value":1260},"Opt in with ",{"type":11,"tag":69,"props":1262,"children":1264},{"className":1263},[],[1265],{"type":17,"value":1266},".style--default",{"type":17,"value":1123},{"type":11,"tag":69,"props":1269,"children":1271},{"className":1270},[],[1272],{"type":17,"value":1273},".style--bold",{"type":17,"value":1275},", or ",{"type":11,"tag":69,"props":1277,"children":1279},{"className":1278},[],[1280],{"type":17,"value":1281},".style--elegant",{"type":17,"value":1283}," on\nany ancestor (page-level default) or with a BEM ",{"type":11,"tag":69,"props":1285,"children":1287},{"className":1286},[],[1288],{"type":17,"value":1289},"--bold",{"type":17,"value":1291}," \u002F ",{"type":11,"tag":69,"props":1293,"children":1295},{"className":1294},[],[1296],{"type":17,"value":1297},"--elegant",{"type":17,"value":1299},"\nmodifier on an individual component (",{"type":11,"tag":69,"props":1301,"children":1303},{"className":1302},[],[1304],{"type":17,"value":1305},".card-static--elegant",{"type":17,"value":1307},",\n",{"type":11,"tag":69,"props":1309,"children":1311},{"className":1310},[],[1312],{"type":17,"value":1313},".section-header--bold",{"type":17,"value":1315},"). The modifier pattern lets you embed a bold\nhero or an elegant sidebar inside an otherwise default-style dashboard\nwithout leaking.",{"type":11,"tag":337,"props":1317,"children":1319},{"id":1318},"font-sources",[1320],{"type":17,"value":1321},"Font sources",{"type":11,"tag":19,"props":1323,"children":1324},{},[1325,1327,1332,1334,1340,1342,1348,1350,1356,1358,1364,1366,1372],{"type":17,"value":1326},"Open Sans, Oswald, and Work Sans are open-source and ",{"type":11,"tag":23,"props":1328,"children":1329},{},[1330],{"type":17,"value":1331},"self-hosted",{"type":17,"value":1333},":\n",{"type":11,"tag":69,"props":1335,"children":1337},{"className":1336},[],[1338],{"type":17,"value":1339},"scripts\u002Fsync-fonts.mjs",{"type":17,"value":1341}," copies woff2 files from the ",{"type":11,"tag":69,"props":1343,"children":1345},{"className":1344},[],[1346],{"type":17,"value":1347},"@fontsource\u002F*",{"type":17,"value":1349},"\npackages into ",{"type":11,"tag":69,"props":1351,"children":1353},{"className":1352},[],[1354],{"type":17,"value":1355},"public\u002Ffonts\u002F",{"type":17,"value":1357},", and ",{"type":11,"tag":69,"props":1359,"children":1361},{"className":1360},[],[1362],{"type":17,"value":1363},"app\u002Fassets\u002Fcss\u002Ffonts.css",{"type":17,"value":1365}," declares\nthe ",{"type":11,"tag":69,"props":1367,"children":1369},{"className":1368},[],[1370],{"type":17,"value":1371},"@font-face",{"type":17,"value":1373}," rules — zero runtime font fetches, air-gapped clean.\nGeorgia is a system font — shipped with every OS, no @font-face needed.\nJetBrains Mono is loaded the same way as the others. No license fees,\nno public-sector procurement questions.",{"type":11,"tag":48,"props":1375,"children":1377},{"id":1376},"what-were-deliberately-not-doing",[1378],{"type":17,"value":1379},"What we're deliberately not doing",{"type":11,"tag":31,"props":1381,"children":1382},{},[1383,1400,1410],{"type":11,"tag":35,"props":1384,"children":1385},{},[1386,1391,1393,1398],{"type":11,"tag":23,"props":1387,"children":1388},{},[1389],{"type":17,"value":1390},"Not copying shadcn.",{"type":17,"value":1392}," Fine system, but tux has an institutional\nvoice — editorial, not product-y. We draw ",{"type":11,"tag":88,"props":1394,"children":1395},{},[1396],{"type":17,"value":1397},"patterns",{"type":17,"value":1399}," from\nRadix\u002Fshadcn and put a TTI\u002FTAMUS skin on them.",{"type":11,"tag":35,"props":1401,"children":1402},{},[1403,1408],{"type":11,"tag":23,"props":1404,"children":1405},{},[1406],{"type":17,"value":1407},"Not Material.",{"type":17,"value":1409}," It's opinionated visually in ways that fight the\neditorial feel.",{"type":11,"tag":35,"props":1411,"children":1412},{},[1413,1418,1420,1425],{"type":11,"tag":23,"props":1414,"children":1415},{},[1416],{"type":17,"value":1417},"Not dark-mode-first.",{"type":17,"value":1419}," Most sites run during business hours on\nmanaged desktops. Dark mode is supported via ",{"type":11,"tag":69,"props":1421,"children":1423},{"className":1422},[],[1424],{"type":17,"value":480},{"type":17,"value":1426}," but isn't\nthe default.",{"title":1428,"searchDepth":1429,"depth":1429,"links":1430},"",2,[1431,1432,1433,1439,1440,1441,1446],{"id":50,"depth":1429,"text":53},{"id":154,"depth":1429,"text":157},{"id":327,"depth":1429,"text":330,"children":1434},[1435,1437,1438],{"id":339,"depth":1436,"text":342},3,{"id":381,"depth":1436,"text":384},{"id":416,"depth":1436,"text":419},{"id":435,"depth":1429,"text":438},{"id":802,"depth":1429,"text":805},{"id":876,"depth":1429,"text":879,"children":1442},[1443,1445],{"id":1112,"depth":1436,"text":1444},"Three section styles — default, bold, elegant",{"id":1318,"depth":1436,"text":1321},{"id":1376,"depth":1429,"text":1379},1788285282912]