Upload from GitHub Actions: Refresh dashboard UI: design tokens, indigo accent, research footer

Introduce a CSS design-token layer (palette, type, spacing, shadows) in index.css and apply it across the app:

- Hero: system-sans headline and flat indigo primary + outline secondary buttons, replacing the gradient/emoji buttons; quiet GitHub link
- Cool off-white background with a single restrained indigo accent on links, primary button, active filter states and the active carousel dot
- Harmonized table header tints and softened card/chart-panel chrome; data tables, score bars, medals and world-map encodings unchanged
- Refreshed About/Contribute dialogs and added a footer with the paper citation (arXiv:2507.08538) and BMZ/GIZ/DFKI credits
- Fix chart carousel overflow so the indicator dots no longer overlap the footer
- Drop the external web-font dependency (system fonts only)

frontend/public/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%221em%22 font-size=%2280%22>🌍</text></svg>">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+    <meta name="theme-color" content="#fbfbfd" />
     <meta
       name="description"
       content="AI Language Benchmarks – model evaluations for every language in the world"

frontend/src/App.js

@@ -1,6 +1,5 @@
 import { useState, useEffect } from 'react'
 import { PrimeReactProvider } from 'primereact/api'
-import 'primereact/resources/themes/lara-light-cyan/theme.css'
 import ModelTable from './components/ModelTable'
 import LanguageTable from './components/LanguageTable'
 import DatasetTable from './components/DatasetTable'
@@ -12,6 +11,7 @@ import HistoryPlot from './components/HistoryPlot'
 import LanguageTierHistoryPlot from './components/LanguageTierHistoryPlot'
 import LicenseHistoryPlot from './components/LicenseHistoryPlot'
 import CostPlot from './components/CostPlot'
+import Footer from './components/Footer'
 import { Carousel } from 'primereact/carousel'
 import { Dialog } from 'primereact/dialog'
 import { Button } from 'primereact/button'
@@ -153,7 +153,7 @@ function App () {
           minHeight: '100vh',
           display: 'flex',
           flexDirection: 'column',
-          width: '100vw'
+          width: '100%'
         }}
       >
         {/* <div
@@ -184,24 +184,7 @@ function App () {
             href='https://github.com/datenlabor-bmz/evals-for-every-language'
             target='_blank'
             rel='noopener noreferrer'
-            style={{
-              textDecoration: 'none',
-              color: '#6c757d',
-              fontSize: '1rem',
-              fontWeight: '500',
-              padding: '0.5rem 1rem',
-              borderRadius: '0.375rem',
-              backgroundColor: '#f8f9fa',
-              border: '1px solid #e9ecef',
-              display: 'flex',
-              alignItems: 'center',
-              gap: '0.5rem',
-              transition: 'all 0.2s ease',
-              ':hover': {
-                backgroundColor: '#e9ecef',
-                color: '#495057'
-              }
-            }}
+            className='ghost-link'
           >
             <i className='pi pi-github' title='View on GitHub' />
             GitHub
@@ -228,21 +211,11 @@ function App () {
               🌍
             </span>
           </div>
-          <h1
-            style={{
-              fontSize: '2.5rem',
-              fontWeight: '600',
-              margin: '1rem 0 0.5rem 0',
-              color: '#333',
-              letterSpacing: '-0.01em'
-            }}
-          >
-            AI Language Benchmarks
-          </h1>
+          <h1 className='hero-title'>AI Language Benchmarks</h1>
           <p
             style={{
-              fontSize: '1.1rem',
-              color: '#666',
+              fontSize: '1.15rem',
+              color: 'var(--ink-muted)',
               margin: '0 0 2.5rem 0',
               fontWeight: '400',
               maxWidth: '700px',
@@ -263,68 +236,16 @@ function App () {
           >
             <button
               onClick={() => setAboutVisible(true)}
-              style={{
-                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
-                color: 'white',
-                border: 'none',
-                padding: '0.75rem 1.5rem',
-                borderRadius: '12px',
-                fontSize: '0.95rem',
-                fontWeight: '500',
-                cursor: 'pointer',
-                display: 'flex',
-                alignItems: 'center',
-                gap: '0.5rem',
-                boxShadow: '0 4px 15px rgba(102, 126, 234, 0.25)',
-                transition: 'all 0.3s ease',
-                ':hover': {
-                  transform: 'translateY(-2px)',
-                  boxShadow: '0 8px 25px rgba(102, 126, 234, 0.35)'
-                }
-              }}
-              onMouseEnter={(e) => {
-                e.target.style.transform = 'translateY(-2px)';
-                e.target.style.boxShadow = '0 8px 25px rgba(102, 126, 234, 0.35)';
-              }}
-              onMouseLeave={(e) => {
-                e.target.style.transform = 'translateY(0)';
-                e.target.style.boxShadow = '0 4px 15px rgba(102, 126, 234, 0.25)';
-              }}
+              className='btn btn-primary'
             >
-              <span style={{ fontSize: '1.1rem' }}>📚</span>
               About this tool
             </button>
 
             <button
               onClick={() => setContributeVisible(true)}
               title='This feature is on our roadmap and will be available soon.'
-              style={{
-                background: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%)',
-                color: '#6b46c1',
-                border: 'none',
-                padding: '0.75rem 1.5rem',
-                borderRadius: '12px',
-                fontSize: '0.95rem',
-                fontWeight: '500',
-                cursor: 'pointer',
-                display: 'flex',
-                alignItems: 'center',
-                gap: '0.5rem',
-                boxShadow: '0 4px 15px rgba(255, 154, 158, 0.25)',
-                transition: 'all 0.3s ease',
-                position: 'relative',
-                overflow: 'hidden'
-              }}
-              onMouseEnter={(e) => {
-                e.target.style.transform = 'translateY(-2px)';
-                e.target.style.boxShadow = '0 8px 25px rgba(255, 154, 158, 0.35)';
-              }}
-              onMouseLeave={(e) => {
-                e.target.style.transform = 'translateY(0)';
-                e.target.style.boxShadow = '0 4px 15px rgba(255, 154, 158, 0.25)';
-              }}
+              className='btn btn-secondary'
             >
-              <span style={{ fontSize: '1.1rem' }}>🚀</span>
               Add your model/benchmark
             </button>
           </div>
@@ -428,6 +349,7 @@ function App () {
             </>
           )}
         </main>
+        <Footer />
 
         {/* About Dialog */}
         <Dialog
@@ -441,7 +363,7 @@ function App () {
             <p>
               <i>languagebench</i> provides AI model evaluations for every language in the world.
             </p>
-            <h4>👥 Who is this for?</h4>
+            <h4>Who is this for?</h4>
             <ul>
               <li>
                 <b>Practitioners</b> can pick the best model for a given
@@ -455,7 +377,7 @@ function App () {
                 <b>Model developers</b> can compete on our benchmarks.
               </li>
             </ul>
-            <h4>⚡ Live Updates</h4>
+            <h4>Live Updates</h4>
             <p>
               Benchmark results automatically refresh every night and include
               the most popular models from{' '}
@@ -468,11 +390,11 @@ function App () {
               </a>
               , plus community-submitted models.
             </p>
-            <h4>⚠️ Note on interpretation</h4>
+            <h4>Note on interpretation</h4>
             <p>
               Results are currently based on a sample of 10 sentences per language and task to keep computation affordable. For this reason, we report confidence intervals and recommend treating small differences between models with caution. In future iterations, we plan to add more benchmark datasets and richer visualisations, with large-scale evaluations across many more prompts and tasks as a longer-term goal.
             </p>
-            <h4>✍️ Authors</h4>
+            <h4>Authors</h4>
             <p>
               languagebench is a collaboration between
               BMZ's{' '}
@@ -513,7 +435,7 @@ function App () {
               </a>{' '}
               of DFKI's Multilinguality and Language Technology Lab.
             </p>
-            <h4>🔗 Links</h4>
+            <h4>Links</h4>
             <p>
               <a
                 href='https://github.com/datenlabor-bmz/evals-for-every-language'
@@ -543,7 +465,7 @@ function App () {
           header='Contribute your Model/Benchmark'
         >
           <div>
-            <h4>🚀 Submit Your Model</h4>
+            <h4>Submit Your Model</h4>
             <p>
               Have a custom fine-tuned model you'd like to see on the
               leaderboard or a new benchmark you think should be added?
@@ -553,13 +475,13 @@ function App () {
                 href='https://forms.gle/ckvY9pS7XLcHYnaV8'
                 target='_blank'
                 rel='noopener noreferrer'
-                style={{ color: '#28a745', fontWeight: 'bold' }}
+                style={{ color: 'var(--accent)', fontWeight: 'bold' }}
               >
                 → Submit your model here
               </a>
             </p>
 
-            <h4>🔧 Contribute to Development</h4>
+            <h4>Contribute to Development</h4>
             <p>
               Help us expand language coverage and add new evaluation tasks:
             </p>
@@ -568,7 +490,7 @@ function App () {
                 href='https://github.com/datenlabor-bmz/evals-for-every-language/blob/main/CONTRIBUTING.md'
                 target='_blank'
                 rel='noopener noreferrer'
-                style={{ color: '#007bff', fontWeight: 'bold' }}
+                style={{ color: 'var(--accent)', fontWeight: 'bold' }}
               >
                 → Contribution guidelines
               </a>

frontend/src/components/AutoComplete.js

@@ -114,12 +114,12 @@ const AutoComplete = ({ languages, onComplete }) => {
   }
 
   const buttonStyle = {
-    color: selectedLanguage ? '#333' : '#666',
-    border: '1px solid #ddd',
+    color: selectedLanguage ? 'var(--ink)' : 'var(--ink-muted)',
+    border: '1px solid var(--border)',
     padding: '0.75rem 1rem',
-    borderRadius: '4px',
+    borderRadius: 'var(--radius-sm)',
     fontSize: '0.95rem',
-    backgroundColor: '#fff',
+    backgroundColor: 'var(--surface)',
     cursor: 'pointer',
     display: 'flex',
     alignItems: 'center',
@@ -135,7 +135,7 @@ const AutoComplete = ({ languages, onComplete }) => {
     fontSize: '0.95rem',
     width: '100%',
     backgroundColor: 'transparent',
-    color: '#333'
+    color: 'var(--ink)'
   }
 
   const dropdownStyle = {
@@ -143,20 +143,20 @@ const AutoComplete = ({ languages, onComplete }) => {
     top: '100%',
     left: 0,
     right: 0,
-    backgroundColor: '#fff',
-    border: '1px solid #ddd',
+    backgroundColor: 'var(--surface)',
+    border: '1px solid var(--border)',
     borderTop: 'none',
-    borderRadius: '0 0 4px 4px',
+    borderRadius: '0 0 var(--radius-sm) var(--radius-sm)',
     maxHeight: '300px',
     overflowY: 'auto',
     zIndex: 1000,
-    boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)'
+    boxShadow: 'var(--shadow-md)'
   }
 
   const itemStyle = {
     padding: '0.75rem 1rem',
     cursor: 'pointer',
-    borderBottom: '1px solid #f0f0f0',
+    borderBottom: '1px solid var(--hairline)',
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
@@ -166,7 +166,7 @@ const AutoComplete = ({ languages, onComplete }) => {
   const clearButtonStyle = {
     background: 'none',
     border: 'none',
-    color: '#999',
+    color: 'var(--ink-subtle)',
     cursor: 'pointer',
     padding: '0.25rem',
     borderRadius: '50%',
@@ -186,11 +186,11 @@ const AutoComplete = ({ languages, onComplete }) => {
         onClick={handleContainerClick}
         onMouseEnter={e => {
           if (!selectedLanguage) {
-            e.target.style.borderColor = '#bbb'
+            e.target.style.borderColor = 'var(--accent)'
           }
         }}
         onMouseLeave={e => {
-          e.target.style.borderColor = '#ddd'
+          e.target.style.borderColor = 'var(--border)'
         }}
       >
         {selectedLanguage && !isOpen ? (
@@ -202,7 +202,7 @@ const AutoComplete = ({ languages, onComplete }) => {
               style={clearButtonStyle}
               onClick={handleClear}
               onMouseEnter={e => {
-                e.target.style.backgroundColor = '#f0f0f0'
+                e.target.style.backgroundColor = 'var(--accent-wash)'
               }}
               onMouseLeave={e => {
                 e.target.style.backgroundColor = 'transparent'
@@ -229,7 +229,7 @@ const AutoComplete = ({ languages, onComplete }) => {
           <span>Go to leaderboard for specific language...</span>
         )}
         {(!selectedLanguage || isOpen) && (
-          <span style={{ color: '#999', fontSize: '12px' }}>
+          <span style={{ color: 'var(--ink-subtle)', fontSize: '12px' }}>
             {isOpen ? '▲' : '▼'}
           </span>
         )}
@@ -238,7 +238,7 @@ const AutoComplete = ({ languages, onComplete }) => {
       {isOpen && (
         <div style={dropdownStyle}>
           {filteredLanguages.length === 0 ? (
-            <div style={{ ...itemStyle, color: '#999', cursor: 'default' }}>
+            <div style={{ ...itemStyle, color: 'var(--ink-subtle)', cursor: 'default' }}>
               No languages found
             </div>
           ) : (
@@ -248,7 +248,7 @@ const AutoComplete = ({ languages, onComplete }) => {
                 style={itemStyle}
                 onClick={() => handleSelect(language)}
                 onMouseEnter={e => {
-                  e.target.style.backgroundColor = '#f8f9fa'
+                  e.target.style.backgroundColor = 'var(--accent-wash)'
                 }}
                 onMouseLeave={e => {
                   e.target.style.backgroundColor = 'transparent'
@@ -258,11 +258,11 @@ const AutoComplete = ({ languages, onComplete }) => {
                   <div style={{ fontWeight: '500', marginBottom: '2px' }}>
                     {language.language_name} Leaderboard
                   </div>
-                  <div style={{ fontSize: '0.85rem', color: '#666' }}>
+                  <div style={{ fontSize: '0.85rem', color: 'var(--ink-muted)' }}>
                     {language.autonym}
                   </div>
                 </div>
-                <div style={{ color: '#999', fontSize: '0.8rem' }}>
+                <div style={{ color: 'var(--ink-subtle)', fontSize: '0.8rem' }}>
                   {language.bcp_47}
                 </div>
               </div>
@@ -272,7 +272,7 @@ const AutoComplete = ({ languages, onComplete }) => {
             <div
               style={{
                 ...itemStyle,
-                color: '#999',
+                color: 'var(--ink-subtle)',
                 cursor: 'default',
                 fontStyle: 'italic'
               }}

frontend/src/components/DatasetTable.js

@@ -106,7 +106,7 @@ const DatasetTable = ({ data }) => {
       groupRowsBy='group'
       header={
         <span>
-          <span style={{ fontWeight: 'bold', fontSize: '1.1em' }}>Datasets</span>
+          <span style={{ fontWeight: 600, fontSize: '1.15em', color: 'var(--ink)' }}>Datasets</span>
           <span style={{ fontSize: '0.85em', marginLeft: '0.5rem' }}>
             Multilingual datasets used for this evaluation, and beyond
           </span>

frontend/src/components/Footer.js

@@ -0,0 +1,147 @@
+const linkStyle = {
+  color: 'var(--accent)',
+  textDecoration: 'none',
+  fontWeight: 500
+}
+
+const Footer = () => {
+  return (
+    <footer
+      style={{
+        borderTop: '1px solid var(--border)',
+        background: 'var(--surface-warm)',
+        padding: '3rem 15vw'
+      }}
+    >
+      <div
+        style={{
+          maxWidth: '900px',
+          margin: '0 auto',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '1.25rem'
+        }}
+      >
+        <div>
+          <div
+            style={{
+              fontWeight: 600,
+              fontSize: '1.2rem',
+              letterSpacing: '-0.01em',
+              color: 'var(--ink)'
+            }}
+          >
+            AI Language Benchmarks
+          </div>
+          <div
+            style={{
+              color: 'var(--ink-muted)',
+              fontSize: '0.95rem',
+              marginTop: '0.25rem'
+            }}
+          >
+            AI model evaluations for every language in the world.
+          </div>
+        </div>
+
+        <p
+          style={{
+            color: 'var(--ink-muted)',
+            fontSize: '0.9rem',
+            lineHeight: 1.6,
+            margin: 0
+          }}
+        >
+          Pomerenke, D., Nothnagel, J., &amp; Ostermann, S. (2025).{' '}
+          <a
+            href='https://arxiv.org/abs/2507.08538'
+            target='_blank'
+            rel='noopener noreferrer'
+            style={{ ...linkStyle, fontStyle: 'italic' }}
+          >
+            The AI Language Proficiency Monitor – Tracking the Progress of LLMs
+            on Multilingual Benchmarks
+          </a>
+          . arXiv:2507.08538.
+        </p>
+
+        <p
+          style={{
+            color: 'var(--ink-muted)',
+            fontSize: '0.9rem',
+            lineHeight: 1.6,
+            margin: 0
+          }}
+        >
+          A collaboration of{' '}
+          <a
+            href='https://www.bmz-digital.global/en/overview-of-initiatives/the-bmz-data-lab/'
+            target='_blank'
+            rel='noopener noreferrer'
+            style={linkStyle}
+          >
+            BMZ Data Lab
+          </a>
+          ,{' '}
+          <a
+            href='https://www.bmz-digital.global/en/overview-of-initiatives/fair-forward/'
+            target='_blank'
+            rel='noopener noreferrer'
+            style={linkStyle}
+          >
+            GIZ Fair Forward
+          </a>
+          , and the{' '}
+          <a
+            href='https://www.dfki.de/en/web/research/research-departments/multilinguality-and-language-technology/ee-team'
+            target='_blank'
+            rel='noopener noreferrer'
+            style={linkStyle}
+          >
+            DFKI
+          </a>{' '}
+          Multilinguality and Language Technology Lab.
+        </p>
+
+        <div
+          style={{
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: '1.75rem',
+            fontSize: '0.9rem',
+            paddingTop: '1rem',
+            borderTop: '1px solid var(--border)'
+          }}
+        >
+          <a
+            href='https://github.com/datenlabor-bmz/evals-for-every-language'
+            target='_blank'
+            rel='noopener noreferrer'
+            style={linkStyle}
+          >
+            <i className='pi pi-github' style={{ marginRight: '0.4rem' }} />
+            GitHub
+          </a>
+          <a
+            href='https://huggingface.co/spaces/fair-forward/languagebench'
+            target='_blank'
+            rel='noopener noreferrer'
+            style={linkStyle}
+          >
+            Hugging Face Space
+          </a>
+          <a
+            href='https://arxiv.org/abs/2507.08538'
+            target='_blank'
+            rel='noopener noreferrer'
+            style={linkStyle}
+          >
+            Read the paper
+          </a>
+        </div>
+      </div>
+    </footer>
+  )
+}
+
+export default Footer

frontend/src/components/LanguageTable.js

@@ -125,7 +125,7 @@ const LanguageTable = ({ data, selectedLanguages, setSelectedLanguages, totalMod
       dataKey='bcp_47'
       header={
         <span>
-          <span style={{ fontWeight: 'bold', fontSize: '1.1em' }}>Languages</span>
+          <span style={{ fontWeight: 600, fontSize: '1.15em', color: 'var(--ink)' }}>Languages</span>
           <span style={{ fontSize: '0.85em', marginLeft: '0.5rem' }}>
             Average performance of {totalModels} evaluated AI models
           </span>

frontend/src/components/ModelTable.js

@@ -194,7 +194,7 @@ const ModelTable = ({ data, selectedLanguages = [], allLanguages = [], machineTr
     if (selectedLanguages.length === 0) {
       return (
         <span>
-          <span style={{ fontWeight: 'bold', fontSize: '1.1em' }}>AI Models</span>
+          <span style={{ fontWeight: 600, fontSize: '1.15em', color: 'var(--ink)' }}>AI Models</span>
           <span style={{ fontSize: '0.85em', marginLeft: '0.5rem' }}>
             Performance across {evaluatedLanguagesCount} evaluated languages
           </span>
@@ -203,7 +203,7 @@ const ModelTable = ({ data, selectedLanguages = [], allLanguages = [], machineTr
     } else if (selectedLanguages.length === 1) {
       return (
         <span>
-          <span style={{ fontWeight: 'bold', fontSize: '1.1em' }}>AI Models</span>
+          <span style={{ fontWeight: 600, fontSize: '1.15em', color: 'var(--ink)' }}>AI Models</span>
           <span style={{ fontSize: '0.85em', marginLeft: '0.5rem' }}>
             {selectedLanguages[0].language_name} performance
           </span>
@@ -213,7 +213,7 @@ const ModelTable = ({ data, selectedLanguages = [], allLanguages = [], machineTr
       const languageNames = selectedLanguages.map(lang => lang.language_name).join(', ')
       return (
         <span>
-          <span style={{ fontWeight: 'bold', fontSize: '1.1em' }}>AI Models</span>
+          <span style={{ fontWeight: 600, fontSize: '1.15em', color: 'var(--ink)' }}>AI Models</span>
           <span style={{ fontSize: '0.85em', marginLeft: '0.5rem' }}>
             Performance for {languageNames}
           </span>

frontend/src/index.css

@@ -1,21 +1,162 @@
+/* ============================================================
+   Design tokens
+   ============================================================ */
+:root {
+  /* Surfaces */
+  --bg: #fbfbfd;            /* soft cool off-white page background */
+  --surface: #ffffff;       /* cards, tables */
+  --surface-warm: #f7f8fc;  /* chart panel, subtle fills, row hover */
+
+  /* Ink */
+  --ink: #1b1d24;           /* headings + primary text (slate-ink) */
+  --ink-muted: #5e626e;     /* subtitles, secondary */
+  --ink-subtle: #9296a1;    /* tertiary labels */
+
+  /* Accent — indigo, used sparingly */
+  --accent: #4350c4;
+  --accent-hover: #343fa0;
+  --accent-wash: rgba(67, 80, 196, 0.08);
+
+  /* Lines */
+  --border: #e5e6ec;        /* structural borders, card edges */
+  --border-strong: #d4d6de;
+  --hairline: #eff0f4;      /* faint inner row separators */
+
+  /* Warmed, ivory-friendly table accents (replace blue/green/orange) */
+  --tbl-model-border: #d7daec; --tbl-model-head: #eef0f8;  /* soft periwinkle */
+  --tbl-lang-border:  #cde3cd; --tbl-lang-head:  #eff6ee;  /* soft sage */
+  --tbl-data-border:  #ecd9c5; --tbl-data-head:  #faf2e9;  /* soft sand */
+
+  /* Soft, warm-tinted shadows */
+  --shadow-sm: 0 1px 2px rgba(40, 33, 28, 0.05);
+  --shadow-md: 0 6px 20px rgba(40, 33, 28, 0.07);
+
+  /* Radius */
+  --radius: 12px;
+  --radius-sm: 8px;
+
+  /* Type */
+  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; /* clean system serif, headings */
+  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --font-mono: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+/* ============================================================
+   Base
+   ============================================================ */
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: var(--font-sans);
+  background: var(--bg);
+  color: var(--ink);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  font-family: var(--font-mono);
 }
 
 html, body, #root {
   height: 100%;
 }
 
+a {
+  color: var(--accent);
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+
+a:hover {
+  color: var(--accent-hover);
+  text-decoration: underline;
+}
+
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* Serif display headline (hero) */
+.hero-title {
+  font-family: var(--font-sans);
+  font-weight: 600;
+  font-size: clamp(2.25rem, 4vw, 2.75rem);
+  line-height: 1.12;
+  letter-spacing: -0.02em;
+  color: var(--ink);
+  margin: 1.25rem 0 0.75rem 0;
+}
+
+/* ============================================================
+   Buttons (replace inline gradients + JS hover handlers)
+   ============================================================ */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.7rem 1.4rem;
+  border-radius: 10px;
+  font-family: var(--font-sans);
+  font-size: 0.95rem;
+  font-weight: 500;
+  line-height: 1;
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition: background-color 0.15s ease, border-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.btn-primary {
+  background: var(--accent);
+  color: #fff;
+  box-shadow: var(--shadow-sm);
+}
+
+.btn-primary:hover {
+  background: var(--accent-hover);
+  color: #fff;
+}
+
+.btn-secondary {
+  background: transparent;
+  color: var(--ink);
+  border-color: var(--border-strong);
+}
+
+.btn-secondary:hover {
+  background: var(--accent-wash);
+  border-color: var(--accent);
+  color: var(--accent-hover);
+}
+
+/* Quiet ghost link (top-right GitHub) */
+.ghost-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.9rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: var(--ink-muted);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  transition: background-color 0.15s ease, color 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.ghost-link:hover {
+  background: var(--accent-wash);
+  border-color: var(--accent);
+  color: var(--accent-hover);
+  text-decoration: none;
+}
+
+/* ============================================================
+   PrimeReact base tweaks
+   ============================================================ */
 .p-component, .pi {
   font-size: 0.8rem;
 }
@@ -26,7 +167,7 @@ html, body, #root {
 }
 
 .p-datatable-wrapper {
-  scrollbar-color: #f0f0f0 rgba(0, 0, 0, 0);
+  scrollbar-color: var(--border) transparent;
   border-radius: 0 0 6px 6px;
 }
 
@@ -35,92 +176,187 @@ html, body, #root {
 }
 
 .p-datatable .p-datatable-tbody > tr:hover {
-  background-color: #fafafa !important;
+  background-color: var(--surface-warm) !important;
 }
 
 .p-datatable .p-datatable-thead > tr > th {
-  border-bottom: 1px solid #e0e0e0;
-  background-color: #fafafa;
+  border-bottom: 1px solid var(--border);
+  background-color: var(--surface-warm);
   font-weight: 500;
-  color: #555;
+  color: var(--ink-muted);
   padding: 0.75rem 1rem;
 }
 
 .p-datatable .p-datatable-tbody > tr > td {
   padding: 0.75rem 1rem;
-  border-bottom: 1px solid #f5f5f5;
+  border-bottom: 1px solid var(--hairline);
 }
 
-#model-table {
-  border: 2px solid #d1d5ff;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+/* ============================================================
+   Table cards — IDs keep specificity over the PrimeReact theme
+   ============================================================ */
+#model-table, #language-table, #dataset-table {
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-sm);
+  background: var(--surface);
 }
 
-#model-table .p-datatable-header {
-  border-top-width: 0px;
+#model-table { border: 1px solid var(--tbl-model-border); }
+#language-table { border: 1px solid var(--tbl-lang-border); }
+#dataset-table { border: 1px solid var(--tbl-data-border); }
+
+#model-table .p-datatable-header,
+#language-table .p-datatable-header,
+#dataset-table .p-datatable-header {
+  border-top-width: 0;
   border-radius: 6px 6px 0 0;
-  background: #f0f3ff;
-  color: #333;
-  border-bottom: 2px solid #d1d5ff;
+  color: var(--ink);
   padding: 1rem 1.25rem;
   font-weight: 500;
 }
 
-#language-table {
-  border: 2px solid #c8f2c8;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+#model-table .p-datatable-header {
+  background: var(--tbl-model-head);
+  border-bottom: 1px solid var(--tbl-model-border);
 }
 
 #language-table .p-datatable-header {
-  border-top-width: 0px;
-  border-radius: 6px 6px 0 0;
-  background: #f0fff0;
-  color: #333;
-  border-bottom: 2px solid #c8f2c8;
-  padding: 1rem 1.25rem;
-  font-weight: 500;
-}
-
-#dataset-table {
-  border: 2px solid #ffe4cc;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  background: var(--tbl-lang-head);
+  border-bottom: 1px solid var(--tbl-lang-border);
 }
 
 #dataset-table .p-datatable-header {
-  border-top-width: 0px;
-  border-radius: 6px 6px 0 0;
-  background: #fff8f0;
-  color: #333;
-  border-bottom: 2px solid #ffe4cc;
-  padding: 1rem 1.25rem;
-  font-weight: 500;
+  background: var(--tbl-data-head);
+  border-bottom: 1px solid var(--tbl-data-border);
 }
 
+/* Chart panel */
 #figure {
   width: 100%;
   min-width: 600px;
-  height: 600px;
-  border: 2px solid #e0e0e0;
-  border-radius: 8px;
-  padding: 1rem;
-  background: #fafafa;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  height: auto;
+  min-height: 700px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1rem 1rem 1.5rem;
+  background: var(--surface-warm);
+  box-shadow: var(--shadow-md);
+  font-family: var(--font-sans);
 }
 
+/* Legacy PrimeReact autocomplete input — soften the dated hard shadow */
 .p-autocomplete-input {
   width: max(100%, 40vw);
   margin-top: 2vh;
-  border-radius: 0px;
-  border: 1px solid rgba(0, 0, 0, 0.7);
-  box-shadow: 3px 3px 1px 0px rgba(0, 0, 0, 0.2);;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-sm);
 }
 
+/* Carousel indicators */
 .p-carousel-indicators button.p-link {
-  border-radius: 5px;
-  width: 10px;
-  height: 10px;
-  background-color: #000000;
-}
+  border-radius: 999px;
+  width: 8px;
+  height: 8px;
+  background-color: var(--border-strong);
+}
+
+.p-carousel-indicators .p-carousel-indicator.p-highlight button.p-link {
+  background-color: var(--accent);
+}
+
+/* ============================================================
+   PrimeReact accent harmonization (cyan -> clay).
+   index.css is imported AFTER theme.css (see index.js), so these
+   equal-specificity rules win without !important.
+   ============================================================ */
+.p-checkbox .p-checkbox-box.p-highlight {
+  background: var(--accent);
+  border-color: var(--accent);
+}
+
+.p-checkbox .p-checkbox-box.p-highlight:hover {
+  background: var(--accent-hover);
+  border-color: var(--accent-hover);
+}
+
+.p-radiobutton .p-radiobutton-box.p-highlight {
+  background: var(--accent);
+  border-color: var(--accent);
+}
+
+.p-slider .p-slider-range {
+  background: var(--accent);
+}
+
+.p-slider .p-slider-handle {
+  border-color: var(--accent);
+}
+
+.p-slider .p-slider-handle:hover {
+  background: var(--accent);
+}
+
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight,
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+  background: var(--accent-wash);
+  color: var(--accent-hover);
+}
+
+.p-multiselect .p-multiselect-token {
+  background: var(--accent-wash);
+  color: var(--accent-hover);
+}
+
+.p-datatable .p-datatable-tbody > tr.p-highlight {
+  background: var(--accent-wash);
+  color: var(--ink);
+}
+
+.p-inputtext:enabled:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px var(--accent-wash);
+}
+
+/* ============================================================
+   Dialogs — cohesive with the hero (serif headings, clean chrome)
+   ============================================================ */
+.p-dialog {
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-md);
+  overflow: hidden;
+}
+
+.p-dialog .p-dialog-header {
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  padding: 1.25rem 1.5rem;
+}
+
+.p-dialog .p-dialog-header .p-dialog-title {
+  font-family: var(--font-sans);
+  font-weight: 600;
+  font-size: 1.3rem;
+  letter-spacing: -0.01em;
+  color: var(--ink);
+}
+
+.p-dialog .p-dialog-content {
+  padding: 0 1.5rem 1.5rem;
+  color: var(--ink);
+}
+
+.p-dialog .p-dialog-content h4 {
+  font-family: var(--font-sans);
+  font-weight: 600;
+  font-size: 1.05rem;
+  color: var(--ink);
+  margin: 1.6rem 0 0.5rem;
+}
+
+.p-dialog .p-dialog-content p,
+.p-dialog .p-dialog-content li {
+  color: var(--ink-muted);
+  line-height: 1.6;
+}

frontend/src/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import 'primereact/resources/themes/lara-light-cyan/theme.css';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';