Improve generated service storefronts

DESIGN.md

@@ -82,11 +82,11 @@ Every renderer consumes the same resolved semantic tokens and emits the same
 information regions. Presets change composition and visual tone, not service
 semantics:
 
-| Preset    | Posture                | Scheme | Layout character                              |
-| --------- | ---------------------- | ------ | --------------------------------------------- |
-| `dossier` | Quiet technical record | Dark   | Existing 320px offering rail and mono density |
-| `folio`   | Editorial field guide  | Light  | Large serif identity and card-like contracts  |
-| `console` | Dense operator console | Dark   | Compact grid and high-information scan lines  |
+| Preset    | Posture                | Scheme | Layout character                                  |
+| --------- | ---------------------- | ------ | ------------------------------------------------- |
+| `dossier` | Quiet technical record | Dark   | Monospaced identity and restrained record density |
+| `folio`   | Editorial field guide  | Light  | Cool, spacious catalog with crisp type hierarchy  |
+| `console` | Dense operator console | Dark   | Compact grid and high-information scan lines      |
 
 The root `service-ui.config.ts` is the single user-owned configuration file.
 `defineServiceUi()` gives it contextual types; `resolveServiceUi()` validates it
@@ -132,12 +132,11 @@ signature material.
 
 ## Responsive and accessible behavior
 
-- Dossier uses a 320px desktop rail; Folio and Console use their own responsive
-  grid while preserving the same semantic reading order.
-- Between 768px and 1199px, the rail compacts and the workspace remains primary.
-- Below 768px, selecting an offering drills into its workspace.
-- Below 480px, code editors become edge-to-edge and the primary action remains
-  reachable in a sticky action row.
+- Desktop presets use a wide endpoint directory with stable method, payment,
+  and price alignment.
+- Below 680px, each table row becomes a complete record while preserving table
+  semantics, so payment method, network, and price remain visible without
+  horizontal scrolling.
 - Controls provide a minimum 44px target.
 - Body copy starts at 16px and auxiliary labels at 12px.
 - Selection is represented in the URL and invocation state remains in memory.

packages/cli/adapters/ui/src/components/service-storefront.tsx

@@ -124,7 +124,7 @@ export function ServiceStorefront({
                           {row.description}
                         </div>
                       </td>
-                      <td>
+                      <td data-label="Payment method">
                         <span className="payment-method">
                           {row.paymentMethod}
                         </span>
@@ -134,7 +134,7 @@ export function ServiceStorefront({
                           </span>
                         ) : null}
                       </td>
-                      <td className="endpoint-price">
+                      <td className="endpoint-price" data-label="Price">
                         {row.operation.price ?? 'Free'}
                       </td>
                     </tr>

packages/http/src/__tests__/landing-page.test.ts

@@ -150,7 +150,7 @@ describe('renderLandingPage', () => {
   it('applies every preset and safe font stylesheet through the same renderer', async () => {
     for (const [preset, colorScheme, canvas] of [
       ['dossier', 'dark', '#0B0D0C'],
-      ['folio', 'light', '#F4F0E8'],
+      ['folio', 'light', '#F7F8FA'],
       ['console', 'dark', '#07111A'],
     ] as const) {
       const page = await render(card, { ok: true }, { preset });

packages/http/src/__tests__/service-ui.test.ts

@@ -60,15 +60,20 @@ describe('service UI configuration', () => {
       colorScheme: 'light',
       tokens: {
         colors: {
-          canvas: '#F4F0E8',
-          surface: '#FFFCF5',
-          text: '#1D201E',
-          accent: '#1859C9',
+          canvas: '#F7F8FA',
+          surface: '#FFFFFF',
+          text: '#111827',
+          accent: '#145BCC',
         },
         fonts: {
-          display: ['Instrument Serif', 'Iowan Old Style', 'Georgia', 'serif'],
+          display: [
+            'Avenir Next',
+            'Segoe UI',
+            'Helvetica Neue',
+            'Arial',
+            'sans-serif',
+          ],
           body: [
-            'Source Sans 3',
             'Avenir Next',
             'Segoe UI',
             'Helvetica Neue',
@@ -171,9 +176,9 @@ describe('service UI configuration', () => {
       resolveServiceUi({ preset: 'folio' })
     );
 
-    expect(css).toContain('--service-canvas: #F4F0E8;');
+    expect(css).toContain('--service-canvas: #F7F8FA;');
     expect(css).toContain(
-      '--service-display: "Instrument Serif", "Iowan Old Style", "Georgia", serif;'
+      '--service-display: "Avenir Next", "Segoe UI", "Helvetica Neue", "Arial", sans-serif;'
     );
     expect(css).toContain('[data-service-ui-preset="folio"] h1');
     expect(css).toContain('.endpoint-table');

packages/http/src/landing-page.ts

@@ -148,7 +148,7 @@ export async function renderLandingPage({
                                 ${row.description}
                               </div>
                             </td>
-                            <td>
+                            <td data-label="Payment method">
                               <span class="payment-method"
                                 >${row.paymentMethod}</span
                               >
@@ -158,7 +158,7 @@ export async function renderLandingPage({
                                   >`
                                 : ''}
                             </td>
-                            <td class="endpoint-price">
+                            <td class="endpoint-price" data-label="Price">
                               ${row.operation.price ?? 'Free'}
                             </td>
                           </tr>`

packages/http/src/service-ui/presets.ts

@@ -44,23 +44,28 @@ const FOLIO: ResolvedServiceUi = {
   colorScheme: 'light',
   tokens: {
     colors: {
-      canvas: '#F4F0E8',
-      surface: '#FFFCF5',
-      surfaceRaised: '#FFFFFF',
-      text: '#1D201E',
-      textMuted: '#656A66',
-      border: '#D6D0C4',
-      accent: '#1859C9',
+      canvas: '#F7F8FA',
+      surface: '#FFFFFF',
+      surfaceRaised: '#F1F3F6',
+      text: '#111827',
+      textMuted: '#667085',
+      border: '#D7DCE2',
+      accent: '#145BCC',
       accentText: '#FFFFFF',
-      success: '#147A4A',
-      warning: '#9A6700',
+      success: '#137A50',
+      warning: '#956000',
       danger: '#B42318',
-      code: '#ECE7DE',
+      code: '#EEF1F4',
     },
     fonts: {
-      display: ['Instrument Serif', 'Iowan Old Style', 'Georgia', 'serif'],
+      display: [
+        'Avenir Next',
+        'Segoe UI',
+        'Helvetica Neue',
+        'Arial',
+        'sans-serif',
+      ],
       body: [
-        'Source Sans 3',
         'Avenir Next',
         'Segoe UI',
         'Helvetica Neue',