anentrypoint-design 0.0.97 → 0.0.99

package/app-shell.css

@@ -258,7 +258,7 @@ html, body {
     margin: 16px 0;
 }
 .panel-head {
-    padding: 14px 22px;
+    padding: 10px 22px 18px 22px;
     background: var(--panel-1);
     font-family: var(--ff-ui);
     font-size: 13px;
@@ -268,9 +268,9 @@ html, body {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    gap: 12px;
+    gap: var(--tool-gutter);
 }
-.panel-body { padding: 12px 16px; background: var(--panel-1); }
+.panel-body { padding: 12px var(--tool-gutter); background: var(--panel-1); }
 .panel-body > .row, .panel-body > div > .row { border-radius: 0; margin-bottom: 0; }
 .panel-body > .row-form, .panel-body > form.row-form { margin-bottom: 0; }
 
@@ -1167,17 +1167,54 @@ input[type="number"]::placeholder, input:not([type])::placeholder { color: var(-
     font-size: 13px;
     line-height: 1.6;
 }
-.ds-work-body { margin: 0 0 12px 0; max-width: 64ch; }
-.ds-work-actions { display: flex; gap: 8px; }
+.ds-work-body { margin: 0; }
+.work-detail .ds-prose { margin: 0 0 var(--prose-stack-md) 0; }
+.ds-work-actions { display: flex; gap: var(--tool-gutter); }
 
 .panel.panel-inline { max-width: 560px; margin: 0; }
 .panel.panel-wide  { max-width: 900px; }
-.panel.panel-manifesto { /* width comes from style attr */ }
 
-.ds-manifesto { padding: 20px 24px; font-size: 14px; line-height: 1.7; color: var(--panel-text); }
-.ds-manifesto-para { margin: 0 0 12px 0; }
+/* ============================================================
+   .ds-prose — editorial prose surface. No chrome, no background,
+   capped measure, asymmetric heading rhythm. Headings hug their
+   own body (large space above, small space below).
+   ============================================================ */
+.ds-prose {
+    max-inline-size: var(--measure-prose);
+    color: var(--panel-text);
+    font-family: var(--ff-prose);
+    font-size: 15px;
+    line-height: 1.7;
+}
+.ds-prose > * { margin: 0; }
+.ds-prose > * + * { margin-top: var(--prose-stack-md); }
+.ds-prose > h1,
+.ds-prose > h2,
+.ds-prose > h3,
+.ds-prose > h4,
+.ds-prose > h5,
+.ds-prose > h6 {
+    margin-top: var(--prose-stack-lg);
+    margin-bottom: var(--prose-stack-sm);
+    line-height: 1.2;
+}
+.ds-prose > :first-child { margin-top: 0; }
+.ds-prose > h1 + *,
+.ds-prose > h2 + *,
+.ds-prose > h3 + *,
+.ds-prose > h4 + *,
+.ds-prose > h5 + *,
+.ds-prose > h6 + * { margin-top: var(--prose-stack-sm); }
+
+/* Manifesto rides .ds-prose; keep dim variant + para rhythm via prose-stack-md */
+.ds-manifesto { font-size: 15px; }
+.ds-manifesto-para { margin: 0; }
+.ds-manifesto-para + .ds-manifesto-para { margin-top: var(--prose-stack-md); }
 .ds-manifesto-para.dim { color: var(--panel-text-2); }
 
+/* Transparent section wrapper for prose-on-page placement (no .panel card) */
+.ds-prose-section { margin: var(--prose-stack-lg) 0; padding: 0; background: transparent; }
+
 .ds-pattern-notes {
     padding: 14px 20px;
     font-size: 13px;
@@ -1561,6 +1598,14 @@ tr.clickable:hover td { background: var(--panel-hover); }
     background: var(--panel-1);
     border-radius: 20px;
 }
+/* A section whose only direct child is a .ds-prose drops its card chrome —
+   prose surfaces are bare paper, not panel-wrapped. */
+.ds-section:has(> .ds-prose:only-child),
+.ds-section:has(> .ds-manifesto:only-child) {
+    background: transparent;
+    padding: 0;
+    margin: var(--prose-stack-lg) 0;
+}
 .ds-section .ds-section-title { margin-top: 0; }
 .ds-section .ds-lede { opacity: 0.8; max-width: 60ch; }
 .ds-section .row {

package/colors_and_type.css

@@ -80,6 +80,15 @@
 
   /* Measure */
   --measure:      72ch;
+  --measure-prose: 68ch;
+
+  /* Prose rhythm — asymmetric stack scale for editorial surfaces */
+  --prose-stack-sm: 12px;
+  --prose-stack-md: 24px;
+  --prose-stack-lg: 56px;
+
+  /* Tool rhythm — canonical gutter for dense panel internals */
+  --tool-gutter:  16px;
 
   /* Extended type scale */
   --fs-body:      15px;