Spaces:
Sleeping
Sleeping
style: switch to Geist + Geist Mono fonts, add antialiasing
Browse filesReplaces Space Grotesk with Geist (Vercel's font, built for developer UIs)
and JetBrains Mono with Geist Mono for a cohesive, premium-grade look.
Geist is significantly more refined at small sizes β tighter spacing,
neutral geometry, and designed from the ground up for dark UI contexts.
Also adds -webkit-font-smoothing: antialiased and letter-spacing: -0.01em
which are the primary reasons premium SaaS fonts look sharp vs flat.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- ui/src/index.css +6 -3
ui/src/index.css
CHANGED
|
@@ -8,7 +8,7 @@
|
|
| 8 |
Warmer and earthier than amber, more "drawn" than digital.
|
| 9 |
Every surface is slightly warm β no cold values anywhere.
|
| 10 |
ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
|
| 11 |
-
@import url('https://fonts.googleapis.com/css2?family=
|
| 12 |
|
| 13 |
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
| 14 |
html { height: 100dvh; background: #1A1916; overflow: hidden; }
|
|
@@ -62,8 +62,8 @@ html { height: 100dvh; background: #1A1916; overflow: hidden; }
|
|
| 62 |
--pill-bg: var(--surface-3);
|
| 63 |
|
| 64 |
/* Typography */
|
| 65 |
-
--sans: "
|
| 66 |
-
--mono: "
|
| 67 |
|
| 68 |
/* Spacing (8px grid) */
|
| 69 |
--space-1: 4px; --space-2: 8px; --space-3: 12px;
|
|
@@ -103,6 +103,9 @@ body {
|
|
| 103 |
color: var(--text);
|
| 104 |
height: 100%;
|
| 105 |
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
| 106 |
/* Deep atmospheric bloom β LiteLLM style: bold primary bloom, counter-bloom, center warmth */
|
| 107 |
background-image:
|
| 108 |
radial-gradient(ellipse 70% 55% at -5% 0%, rgba(180, 80, 40, 0.32) 0%, transparent 65%),
|
|
|
|
| 8 |
Warmer and earthier than amber, more "drawn" than digital.
|
| 9 |
Every surface is slightly warm β no cold values anywhere.
|
| 10 |
ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */
|
| 11 |
+
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');
|
| 12 |
|
| 13 |
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
| 14 |
html { height: 100dvh; background: #1A1916; overflow: hidden; }
|
|
|
|
| 62 |
--pill-bg: var(--surface-3);
|
| 63 |
|
| 64 |
/* Typography */
|
| 65 |
+
--sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
| 66 |
+
--mono: "Geist Mono", "JetBrains Mono", "Fira Code", monospace;
|
| 67 |
|
| 68 |
/* Spacing (8px grid) */
|
| 69 |
--space-1: 4px; --space-2: 8px; --space-3: 12px;
|
|
|
|
| 103 |
color: var(--text);
|
| 104 |
height: 100%;
|
| 105 |
overflow: hidden;
|
| 106 |
+
-webkit-font-smoothing: antialiased;
|
| 107 |
+
-moz-osx-font-smoothing: grayscale;
|
| 108 |
+
letter-spacing: -0.01em;
|
| 109 |
/* Deep atmospheric bloom β LiteLLM style: bold primary bloom, counter-bloom, center warmth */
|
| 110 |
background-image:
|
| 111 |
radial-gradient(ellipse 70% 55% at -5% 0%, rgba(180, 80, 40, 0.32) 0%, transparent 65%),
|