umanggarg Claude Sonnet 4.6 commited on
Commit
7521e38
Β·
1 Parent(s): 6cc4192

style: switch to Geist + Geist Mono fonts, add antialiasing

Browse files

Replaces 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>

Files changed (1) hide show
  1. 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=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
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: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
66
- --mono: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;
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%),