design tweaks (#1591)

* revert to normal font-weight

* consolidate fonts, colors

Author: mbostock

docs/index.md

@@ -11,15 +11,11 @@ index: false
 
 .hero h1 {
   font-size: 56px;
-  max-width: fit-content;
+  max-width: none;
   line-height: 1;
   margin: 2rem 0;
 }
 
-.phosphate {
-  color: var(--theme-phosphate);
-}
-
 .hero h2 {
   font-style: normal;
   font-size: 18px;
@@ -103,11 +99,11 @@ index: false
 </style>
 
 <div class="hero">
-  <h1>The best dashboards are built with <span class="phosphate">code.</span></h1>
+  <h1>The best dashboards are built with <span style="color: var(--theme-foreground-focus);">code.</span></h1>
   <h2>Create fast, beautiful data apps, dashboards, and reports from the command line. Write Markdown, JavaScript, SQL, Python, R… and any language you like. Free and open-source.</h2>
   <div class="cta">
     <pre data-copy>npx <span class="win">"</span>@observablehq/framework@latest<span class="win">"</span> create</pre>
-    <a href="./getting-started" class="small arrow" style="color: var(--theme-red);">Get started</a>
+    <a href="./getting-started" class="small arrow" style="color: var(--theme-foreground-focus);">Get started</a>
   </div>
 </div>
 

docs/style.css

@@ -3,15 +3,21 @@
 @import url("observablehq:theme-near-midnight.css") (prefers-color-scheme: dark);
 
 :root {
-  --sans-mono: "Spline Sans Mono", var(--monospace);
-  --sans-text: Inter, var(--sans-serif);
-  --theme-phosphate: #148576;
+  --sans-serif: Inter, -apple-system, BlinkMacSystemFont, "avenir next", avenir, helvetica, "helvetica neue", ubuntu, roboto,
+    noto, "segoe ui", arial, sans-serif;
+  --monospace: "Spline Sans Mono", Menlo, Consolas, monospace;
+  --theme-foreground-focus: #148576;
+}
+
+code,
+tt {
+  font-size: inherit;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --theme-foreground: #f5f5f5;
-    --theme-phosphate: #37d5be;
+    --theme-foreground-focus: #37d5be;
   }
 }
 
@@ -53,10 +59,8 @@
   color: var(--theme-foreground-focus);
 }
 
-#observablehq-main {
-  font-family: var(--sans-text);
-  font-size: 16px;
-  font-weight: 500;
+body {
+  font: 16px/1.5 var(--sans-serif);
 }
 
 #observablehq-main {
@@ -69,7 +73,7 @@
 }
 
 h1 {
-  font-family: var(--sans-mono);
+  font-family: var(--monospace);
   font-weight: 500;
 }