Align color scheme with OpenHands brand

- Update primary accent from mint green to yellow (#FFE165)
- Update secondary accent to green (#BCFF8C)
- Update dark mode background to grey scale (#18191C)
- Change font from Manrope to Outfit (OpenHands brand font)
- Update CSS variables to match openhands-ui/tokens.css
- Update chart colors (efficiency frontier, trend lines, hover labels)

Co-authored-by: openhands <openhands@all-hands.dev>

app.py

@@ -121,55 +121,69 @@ const tooltipInterval = setInterval(() => {
 </script>
 """
 # --- Theme Definition ---
+# Color scheme aligned with OpenHands brand (from openhands-ui/tokens.css)
+# Primary: Yellow (#FFE165), Neutral: Grey scale, Accents: Green (#BCFF8C), Red (#FF684E)
 theme = gr.themes.Base(
-    primary_hue=gr.themes.Color(c100="#CFF5E8", c200="#B7EFDD", c300="#9FEAD1", c400="#87E5C5", c50="#E7FAF3", c500="#6FE0BA", c600="#57DBAF", c700="#3FD5A3", c800="#27D09C", c900="#0FCB8C", c950="#0fcb8c"),
-    secondary_hue=gr.themes.Color(c100="#FCDCEB", c200="#FBCBE1", c300="#F9BAD7", c400="#F7A8CD", c50="#FDEEF5", c500="#F697C4", c600="#F586BA", c700="#F375B0", c800="#F263A6", c900="#F0529C", c950="#F0529C"),
-    neutral_hue=gr.themes.Color(c100="#FDF9F4", c200="#C9C9C3", c300="#B0B5AF", c400="#97A09C", c50="#FAF2E9", c500="#7F8C89", c600="#667876", c700="#344F4F", c800="#1C3A3C", c900="#032629", c950="032629"),
-    font=[gr.themes.GoogleFont('Manrope'), 'ui-sans-serif', 'sans-serif', 'sans-serif'],
-    font_mono=[gr.themes.GoogleFont('Roboto Mono'), 'ui-monospace', 'monospace', 'monospace'],
+    # Primary hue - Yellow (OpenHands brand color)
+    primary_hue=gr.themes.Color(
+        c50="#FFFCF0", c100="#FFF3C0", c200="#FFEEAA", c300="#FFEA92", c400="#FFE57B",
+        c500="#FFE165", c600="#DCC257", c700="#BBA54A", c800="#99873D", c900="#76682F", c950="#534921"
+    ),
+    # Secondary hue - Green accent (from OpenHands palette)
+    secondary_hue=gr.themes.Color(
+        c50="#F8FFF4", c100="#E4FFD0", c200="#DAFFBF", c300="#CFFFAD", c400="#C6FF9D",
+        c500="#BCFF8C", c600="#A2DC79", c700="#8ABB67", c800="#719954", c900="#577641", c950="#3D532E"
+    ),
+    # Neutral hue - Grey scale (OpenHands dark mode colors)
+    neutral_hue=gr.themes.Color(
+        c50="#F7F8FB", c100="#EBEDF3", c200="#D4D8E7", c300="#B1B9D3", c400="#82889B",
+        c500="#525662", c600="#3A3C45", c700="#2F3137", c800="#222328", c900="#18191C", c950="#0D0D0F"
+    ),
+    font=[gr.themes.GoogleFont('Outfit'), 'ui-sans-serif', 'sans-serif'],
+    font_mono=[gr.themes.GoogleFont('IBM Plex Mono'), 'ui-monospace', 'monospace'],
 ).set(
     body_text_color='*neutral_950',
-    body_text_color_subdued='*neutral_950',
-    body_text_color_subdued_dark='*neutral_50',
+    body_text_color_subdued='*neutral_700',
+    body_text_color_subdued_dark='*neutral_300',
     body_text_color_dark='*neutral_50',
     background_fill_primary='*neutral_50',
     background_fill_primary_dark='*neutral_900',
     background_fill_secondary='*neutral_100',
     background_fill_secondary_dark='*neutral_800',
-    border_color_accent='*secondary_900',
-    border_color_accent_subdued='*neutral_400',
-    border_color_accent_subdued_dark='*neutral_400',
-    color_accent='*primary_900',
+    border_color_accent='*primary_500',
+    border_color_accent_subdued='*neutral_300',
+    border_color_accent_subdued_dark='*neutral_600',
+    color_accent='*primary_500',
     color_accent_soft='*neutral_200',
     color_accent_soft_dark='*neutral_800',
-    link_text_color='#555555',
-    link_text_color_dark='#cccccc',
-    link_text_color_active_dark='#bbbbbb',
-    link_text_color_hover_dark='#dddddd',
-    link_text_color_visited_dark='#bbbbbb',
+    link_text_color='*neutral_700',
+    link_text_color_dark='*neutral_300',
+    link_text_color_active_dark='*primary_500',
+    link_text_color_hover_dark='*primary_400',
+    link_text_color_visited_dark='*neutral_400',
     table_even_background_fill='*neutral_100',
     table_even_background_fill_dark='*neutral_800',
-    button_primary_background_fill='*secondary_900',
-    button_primary_background_fill_dark='*primary_900',
-    button_primary_background_fill_hover='*secondary_600',
-    button_primary_background_fill_hover_dark='*primary_600',
-    button_secondary_background_fill="#9FEAD1",
-    button_secondary_background_fill_dark="#9FEAD1",
-    button_secondary_text_color="*neutral_900",
-    button_secondary_text_color_dark="*neutral_900",
-    block_title_text_color="*neutral_900",
+    button_primary_background_fill='*primary_500',
+    button_primary_background_fill_dark='*primary_500',
+    button_primary_background_fill_hover='*primary_400',
+    button_primary_background_fill_hover_dark='*primary_400',
+    button_secondary_background_fill='*secondary_500',
+    button_secondary_background_fill_dark='*secondary_600',
+    button_secondary_text_color='*neutral_900',
+    button_secondary_text_color_dark='*neutral_900',
+    block_title_text_color='*neutral_900',
     button_primary_text_color='*neutral_900',
-    block_title_text_color_dark="#ffffff",
+    block_title_text_color_dark='*neutral_50',
     button_primary_text_color_dark='*neutral_900',
-    block_border_color="#032629",
-    block_border_color_dark="#9fead1",
-    block_background_fill_dark="#032629",
-    block_background_fill="#FAF2E9",
-    checkbox_label_text_color="#032629",
-    checkbox_label_background_fill="#D8D6CF",
-    checkbox_label_background_fill_dark="#254243",
-    checkbox_background_color_selected="#F0529C",
-    checkbox_background_color_selected_dark="#0FCB8C",
+    block_border_color='*neutral_300',
+    block_border_color_dark='*neutral_700',
+    block_background_fill_dark='*neutral_900',
+    block_background_fill='*neutral_50',
+    checkbox_label_text_color='*neutral_900',
+    checkbox_label_background_fill='*neutral_200',
+    checkbox_label_background_fill_dark='*neutral_700',
+    checkbox_background_color_selected='*primary_500',
+    checkbox_background_color_selected_dark='*primary_500',
 )
 try:
     with open(LOGO_PATH, "r") as f:

content.py

@@ -236,17 +236,38 @@ def hf_uri_to_web_url(uri: str) -> str:
 
 
 css = """
-/* CSS Color Variables using All-Hands-AI color scheme */
+/* CSS Color Variables aligned with OpenHands brand (openhands-ui/tokens.css) */
 :root {
-    --color-primary-accent: #FFE165; /* Yellow accent from All-Hands-AI */
-    --color-primary-link: #555555; /* Dark grey links for light mode */
-    --color-primary-link-dark: #cccccc; /* Light grey links for dark mode */
-    --color-neutral-light: #D4CABD; /* Tan placeholder */
-    --color-background-light: #F1EAE0; /* Beige/cream background */
-    --color-background-dark: #292A36; /* Dark gray */
-    --color-text-dark: #292A36; /* Dark gray text */
-    --color-text-light: #F1EAE0; /* Light text for dark backgrounds */
-    --color-button-hover: #4B5563; /* Darker gray for hover states */
+    /* Primary - Yellow */
+    --color-primary-accent: #FFE165;
+    --color-primary-light: #FFF3C0;
+    --color-primary-dark: #BBA54A;
+    
+    /* Secondary - Green */
+    --color-secondary-accent: #BCFF8C;
+    --color-secondary-dark: #577641;
+    
+    /* Neutral - Grey scale */
+    --color-neutral-50: #F7F8FB;
+    --color-neutral-100: #EBEDF3;
+    --color-neutral-200: #D4D8E7;
+    --color-neutral-300: #B1B9D3;
+    --color-neutral-700: #2F3137;
+    --color-neutral-800: #222328;
+    --color-neutral-900: #18191C;
+    --color-neutral-950: #0D0D0F;
+    
+    /* Semantic colors */
+    --color-primary-link: #2F3137;
+    --color-primary-link-dark: #B1B9D3;
+    --color-background-light: #F7F8FB;
+    --color-background-dark: #18191C;
+    --color-text-dark: #0D0D0F;
+    --color-text-light: #F7F8FB;
+    --color-button-hover: #222328;
+    
+    /* Danger/Error - Red */
+    --color-danger: #FF684E;
 }
 
 /* This makes space for the huggingface header bar which must shown on HF spaces. */
@@ -847,15 +868,16 @@ span.wrap[tabindex="0"][role="button"][data-editable="false"] {
     justify-content: space-between;
     align-items: center;
     flex-grow: 1; 
-    background-color: #083c40; 
+    background-color: var(--color-neutral-800);
     padding: 16px 20px;
     font-weight: 600;
     border-radius: 12px;
     text-decoration: none; 
     transition: background-color 0.2s ease-in-out;
+    color: var(--color-text-light);
 }
 .link-button:hover {
-    background-color: #0a4c52; 
+    background-color: var(--color-neutral-700);
 }
 .external-link-icon {
     font-size: 20px;
@@ -883,8 +905,8 @@ html {
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: #FAF2E9; 
-    color: #F0529C;          
+    background-color: var(--color-neutral-100);
+    color: var(--color-primary-accent);
     border-radius: 8px;
     font-size: 14px;
     text-align: center;
@@ -900,13 +922,13 @@ html {
     min-height: 572px;
     background-color: #fff;
     padding: 24px 32px;
-    border: 1px solid black;
+    border: 1px solid var(--color-neutral-300);
     border-radius: 4px;
 }
 
 .dark .plot-legend-container {
-    background: rgba(250, 242, 233, 0.1);
-    border-color: rgb(159, 234, 209);
+    background: rgba(247, 248, 251, 0.1);
+    border-color: var(--color-neutral-700);
 }
 
 #plot-legend-logo {
@@ -975,22 +997,22 @@ h3 .header-link-icon {
     border-collapse: collapse;
     font-size: 13px;
     background: #fff;
-    border: 1px solid #032629;
+    border: 1px solid var(--color-neutral-300);
     border-radius: 12px;
     overflow: hidden;
 }
 
 .dark .winners-unified-table {
-    background: rgba(250, 242, 233, 0.05);
-    border-color: #9fead1;
+    background: rgba(247, 248, 251, 0.05);
+    border-color: var(--color-neutral-700);
 }
 
 .winners-unified-table thead tr {
-    background: linear-gradient(to right, rgba(240, 82, 156, 0.1), rgba(15, 203, 140, 0.1));
+    background: linear-gradient(to right, rgba(255, 225, 101, 0.15), rgba(188, 255, 140, 0.15));
 }
 
 .dark .winners-unified-table thead tr {
-    background: linear-gradient(to right, rgba(240, 82, 156, 0.2), rgba(15, 203, 140, 0.2));
+    background: linear-gradient(to right, rgba(255, 225, 101, 0.2), rgba(188, 255, 140, 0.2));
 }
 
 .winners-unified-table .category-header {
@@ -998,16 +1020,16 @@ h3 .header-link-icon {
     text-align: center;
     font-weight: 700;
     font-size: 13px;
-    color: #032629;
-    border-bottom: 2px solid #F0529C;
+    color: var(--color-text-dark);
+    border-bottom: 2px solid var(--color-primary-accent);
     border-right: 1px solid #eee;
     white-space: nowrap;
 }
 
 .dark .winners-unified-table .category-header {
     color: #fff;
-    border-bottom-color: #0FCB8C;
-    border-right-color: #2a3a3a;
+    border-bottom-color: var(--color-primary-accent);
+    border-right-color: var(--color-neutral-700);
 }
 
 .winners-unified-table .category-header:last-child {
@@ -1036,16 +1058,16 @@ h3 .header-link-icon {
 }
 
 .winners-unified-table tbody tr:hover {
-    background: rgba(240, 82, 156, 0.05);
+    background: rgba(255, 225, 101, 0.1);
 }
 
 .dark .winners-unified-table tbody tr:hover {
-    background: rgba(15, 203, 140, 0.1);
+    background: rgba(255, 225, 101, 0.15);
 }
 
 .winners-unified-table .model-cell {
     white-space: nowrap;
-    color: #032629;
+    color: var(--color-text-dark);
     font-weight: 500;
     border-right: none;
 }
@@ -1057,15 +1079,15 @@ h3 .header-link-icon {
 .winners-unified-table .score-cell {
     text-align: right;
     font-weight: 700;
-    color: #F0529C;
+    color: var(--color-primary-dark);
     padding-right: 12px;
     border-right: 1px solid #eee;
     min-width: 50px;
 }
 
 .dark .winners-unified-table .score-cell {
-    color: #0FCB8C;
-    border-right-color: #2a3a3a;
+    color: var(--color-primary-accent);
+    border-right-color: var(--color-neutral-700);
 }
 
 .winners-unified-table td:nth-last-child(1) {

leaderboard_transformer.py

@@ -504,7 +504,7 @@ def _plot_scatter_plotly(
                 mode='lines',
                 name='Efficiency Frontier',
                 showlegend=False,
-                line=dict(color='#0FCB8C', width=2, dash='dash'),
+                line=dict(color='#FFE165', width=2, dash='dash'),  # primary yellow
                 hoverinfo='skip'
             ))
 
@@ -696,8 +696,8 @@ def _plot_scatter_plotly(
                 yshift=25,  # Move label higher above the icon
                 font=dict(
                     size=10,
-                    color='#032629',
-                    family='Manrope'
+                    color='#0D0D0F',  # neutral-950
+                    family='Outfit'
                 ),
                 xanchor='center',
                 yanchor='bottom'
@@ -717,21 +717,21 @@ def _plot_scatter_plotly(
     else:
         plot_title = f"OpenHands Index {name} Cost/Performance"
 
-    # Build layout configuration
+    # Build layout configuration - colors aligned with OpenHands brand
     layout_config = dict(
         template="plotly_white",
         title=plot_title,
         xaxis=xaxis_config,
         yaxis=dict(title="Average score", range=[y_min, y_max]),  # Match domain calculation
         legend=dict(
-            bgcolor='#FAF2E9',
+            bgcolor='#F7F8FB',  # neutral-50
         ),
         height=572,
         hoverlabel=dict(
-            bgcolor="#105257",
+            bgcolor="#222328",  # neutral-800
             font_size=12,
-            font_family="Manrope",
-            font_color="#d3dedc",
+            font_family="Outfit",
+            font_color="#F7F8FB",  # neutral-50
         ),
     )
     

visualizations.py

@@ -13,25 +13,26 @@ import aliases
 from ui_components import get_company_from_model, get_svg_as_data_uri
 
 # Standard layout configuration matching existing charts
+# Colors aligned with OpenHands brand
 STANDARD_LAYOUT = dict(
     template="plotly_white",
     height=572,
     hoverlabel=dict(
-        bgcolor="#105257",
+        bgcolor="#222328",  # neutral-800
         font_size=12,
-        font_family="Manrope",
-        font_color="#d3dedc",
+        font_family="Outfit",
+        font_color="#F7F8FB",  # neutral-50
     ),
     legend=dict(
-        bgcolor='#FAF2E9',
+        bgcolor='#F7F8FB',  # neutral-50
     ),
 )
 
 # Standard font for annotations
 STANDARD_FONT = dict(
     size=10,
-    color='#032629',
-    family='Manrope'
+    color='#0D0D0F',  # neutral-950
+    family='Outfit'
 )
 
 
@@ -125,7 +126,7 @@ def create_evolution_over_time_chart(df: pd.DataFrame) -> go.Figure:
             x=plot_df['release_date'],
             y=plot_df[score_col],
             mode='lines',
-            line=dict(color='#0FCB8C', width=2, dash='dash'),
+            line=dict(color='#FFE165', width=2, dash='dash'),  # primary yellow
             name='Trend',
             hoverinfo='skip',
             showlegend=False