feat: establish shared Ekklesia design system

surfaces/shell/src/browser/HostApp.tsx

@@ -114,11 +114,22 @@ export interface HostAppProps {
 const shellStyles = {
   actions: { display: "flex", gap: designToken("spacing.sm"), justifyContent: "center" },
   aside: {
+    background: designToken("background.canvas"),
     borderRight: `${designToken("border.width")} solid ${designToken("border.divider")}`,
     boxSizing: "border-box",
-    minWidth: "13rem",
-    padding: designToken("spacing.lg"),
-    width: "13rem",
+    minWidth: "15rem",
+    overflowY: "auto",
+    padding: designToken("spacing.xl"),
+    width: "15rem",
+  },
+  brand: { alignItems: "center", display: "flex", gap: designToken("spacing.sm") },
+  brandMark: {
+    background: designToken("accent.base"),
+    borderRadius: designToken("radius.md"),
+    boxShadow: `inset 0 0 0 ${designToken("border.width")} ${designToken("accent.active")}`,
+    display: "block",
+    height: designToken("spacing.xl"),
+    width: designToken("spacing.xl"),
   },
   groupLabel: {
     color: designToken("text.muted"),
@@ -129,20 +140,25 @@ const shellStyles = {
   },
   header: {
     alignItems: "center",
+    background: designToken("background.surface"),
     borderBottom: `${designToken("border.width")} solid ${designToken("border.divider")}`,
     display: "flex",
     fontWeight: designToken("typography.weight-bold"),
     gridColumn: "1 / -1",
     justifyContent: "space-between",
-    padding: `${designToken("spacing.md")} ${designToken("spacing.lg")}`,
+    padding: `${designToken("spacing.md")} ${designToken("spacing.xl")}`,
+  },
+  heading: {
+    fontSize: designToken("typography.size-lg"),
+    fontWeight: designToken("typography.weight-bold"),
+    margin: 0,
   },
-  heading: { font: "inherit", margin: 0 },
   layout: {
     background: designToken("background.page"),
     color: designToken("text.primary"),
     display: "grid",
     fontFamily: designToken("typography.family-sans"),
-    gridTemplateColumns: "13rem minmax(0, 1fr)",
+    gridTemplateColumns: "15rem minmax(0, 1fr)",
     gridTemplateRows: "auto minmax(0, 1fr)",
     minHeight: "100vh",
     minWidth: 0,
@@ -152,7 +168,7 @@ const shellStyles = {
     boxSizing: "border-box",
     minWidth: 0,
     overflowX: "auto",
-    padding: designToken("spacing.lg"),
+    padding: designToken("spacing.xl"),
   },
   message: {
     color: designToken("text.secondary"),
@@ -543,8 +559,11 @@ export function HostApp(props: HostAppProps): ReactElement {
   return (
     <div data-testid="host-shell" style={shellStyles.layout}>
       <header style={shellStyles.header}>
-        <h1 style={shellStyles.heading}>Ekklesia</h1>
-        <Button data-testid="host-logout" onClick={() => void signOut()}>
+        <div style={shellStyles.brand}>
+          <span aria-hidden="true" style={shellStyles.brandMark} />
+          <h1 style={shellStyles.heading}>Ekklesia</h1>
+        </div>
+        <Button data-testid="host-logout" onClick={() => void signOut()} size="sm">
           Sign out
         </Button>
       </header>
@@ -555,7 +574,7 @@ export function HostApp(props: HostAppProps): ReactElement {
             No installed module provides a user interface.
           </p>
         ) : (
-          <nav aria-label="Modules" style={{ display: "grid", gap: "1rem" }}>
+          <nav aria-label="Modules" style={{ display: "grid", gap: designToken("spacing.xl") }}>
             {groups.map((group) => (
               <section data-testid={`group-${group.id}`} key={group.id}>
                 <h2 style={shellStyles.groupLabel}>{group.label}</h2>