From b65d2fed026b6949eca4cb0a4414842c6bd2877f Mon Sep 17 00:00:00 2001
From: peterschmidt85 <andrey.cheptsov@gmail.com>
Date: Sun, 7 Sep 2025 22:32:15 +0200
Subject: [PATCH] [UI] Minor styling changes

---
 frontend/public/index.html                     | 1 +
 frontend/src/App/Login/LoginByGithub/index.tsx | 8 ++++----
 frontend/src/index.tsx                         | 6 +++++-
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/frontend/public/index.html b/frontend/public/index.html
index 2664902290..c661f9de7b 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -34,6 +34,7 @@
       data-modal-image="/logo-notext.svg"
       data-modal-z-index="1100"
       data-modal-title="Ask me anything"
+      data-font-family='metro-web, Metro, -apple-system, "system-ui", "Segoe UI", Roboto'
       data-project-logo="/assets/images/kapa.svg"
       data-modal-disclaimer="This is a custom LLM for dstack with access to Documentation, API references and GitHub issues. This feature is experimental - Give it a try!"
       data-user-analytics-fingerprint-enabled="true"
diff --git a/frontend/src/App/Login/LoginByGithub/index.tsx b/frontend/src/App/Login/LoginByGithub/index.tsx
index 5843c2823a..1263efb70c 100644
--- a/frontend/src/App/Login/LoginByGithub/index.tsx
+++ b/frontend/src/App/Login/LoginByGithub/index.tsx
@@ -193,10 +193,10 @@ function HeroHeader() {
 function ProductOverview() {
     return (
         <section className={styles.pageSection} aria-label="Product overview">
-            <Header variant="h2">
-                <span id="overview">Overview</span>
-            </Header>
             <SpaceBetween size="m">
+                <Header variant="h2">
+                    <span id="overview">Overview</span>
+                </Header>
                 <div>
                     <Box variant="p">
                         <strong>dstack</strong> is an open-source container orchestrator that lets ML teams easily manage
@@ -316,7 +316,7 @@ function ProductOverview() {
                     </Header>
                     <SpaceBetween size="m">
                         <Box variant="p">
-                            Want to learn more about dstack? Check out the{' '}
+                            Want to learn more about <strong>dstack</strong>? Check out the{' '}
                             <Link href="https://dstack.ai/docs/" variant="primary" external={true}>
                                 documentation
                             </Link>
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 1f92f308cb..f2ec642051 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -19,7 +19,11 @@ const container = document.getElementById('root');
 
 const theme: Theme = {
     tokens: {
-        fontFamilyBase: "'Roboto', 'Open Sans', 'Helvetica Neue', Arial, sans-serif",
+        fontFamilyBase: 'metro-web, Metro, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif',
+        fontSizeHeadingS: '15px',
+        fontSizeHeadingL: '19px',
+        fontSizeHeadingXl: '22px',
+        fontSizeDisplayL: '40px',
     },
 };