@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+
+export interface SurfaceProps {
+  /** Warm paper, the base surface for the whole site, or the rare night surface. */
+  tone?: 'paper' | 'night';
+  children?: ReactNode;
+}
+
+/** The root of every screen: sets the paper or night ground and the base type. */
+export function Surface({ tone = 'paper', children }: SurfaceProps) {
+  return (
+    <div
+      className={tone === 'night' ? 'night' : undefined}
+      style={{
+        fontFamily: 'var(--font-sans)',
+        fontSize: 'var(--step-body)',
+        lineHeight: 'var(--leading-body)',
+        fontWeight: 'var(--weight-regular)',
+        background: tone === 'night' ? undefined : 'var(--paper)',
+        color: tone === 'night' ? undefined : 'var(--ink)',
+      }}
+    >
+      {children}
+    </div>
+  );
+}