howone 0.1.20 → 0.1.22

package/templates/vite/.howone/skills/hallmark/site/_tests/06-anya-portfolio/style.css

@@ -0,0 +1,288 @@
+/* Hallmark · macrostructure: Index-First · F4 sidebar-toc knobs: width=12rem, sticky=true, numbered=00-04
+ * theme: Plain · accent: deep-ink-blue ~2% (used as section-num + one rule)
+ * enrichment: none (typography only — restraint is the credibility signal)
+ * studied: no · context: skipped, inferred (personal / portfolio domain) · v0.6.0
+ */
+
+:root {
+  --color-paper: oklch(100% 0 0);
+  --color-paper-2: oklch(98% 0.005 240);
+  --color-rule: oklch(88% 0.006 240);
+  --color-ink: oklch(18% 0.012 245);
+  --color-ink-soft: oklch(48% 0.014 245);
+  --color-ink-muted: oklch(70% 0.014 245);
+  --color-accent: oklch(36% 0.18 248);
+
+  --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-body: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
+
+  --space-3xs: 0.25rem;
+  --space-2xs: 0.5rem;
+  --space-xs: 0.75rem;
+  --space-sm: 1rem;
+  --space-md: 1.5rem;
+  --space-lg: 2rem;
+  --space-xl: 3rem;
+  --space-2xl: 4.5rem;
+  --space-3xl: 6.5rem;
+
+  --measure-prose: 60ch;
+
+  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --dur-micro: 120ms;
+}
+
+* { box-sizing: border-box; }
+html, body { overflow-x: clip; }
+
+body {
+  margin: 0;
+  background: var(--color-paper);
+  color: var(--color-ink);
+  font-family: var(--font-body);
+  font-size: 1rem;
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+}
+
+.page {
+  display: grid;
+  grid-template-columns: 14rem 1fr;
+  gap: var(--space-3xl);
+  max-width: 76rem;
+  margin: 0 auto;
+  padding: var(--space-2xl) var(--space-lg) var(--space-3xl);
+}
+
+/* Sidebar TOC */
+.toc {
+  position: sticky;
+  top: var(--space-2xl);
+  align-self: start;
+  height: fit-content;
+}
+
+.toc__brand {
+  font-family: var(--font-display);
+  font-size: 0.875rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--color-ink);
+  margin: 0 0 var(--space-3xs);
+}
+
+.toc__role {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.04em;
+  color: var(--color-ink-soft);
+  margin: 0 0 var(--space-xl);
+  display: block;
+}
+
+.toc__list {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 var(--space-xl);
+  display: grid;
+  gap: var(--space-2xs);
+  border-block-start: 1px solid var(--color-rule);
+  padding-block-start: var(--space-md);
+}
+
+.toc__list a {
+  display: grid;
+  grid-template-columns: 3.25ch 1fr;
+  gap: var(--space-sm);
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  letter-spacing: 0.02em;
+  color: var(--color-ink-soft);
+  text-decoration: none;
+  padding: var(--space-3xs) 0;
+  transition: color var(--dur-micro) var(--ease-out);
+}
+
+.toc__list a:hover, .toc__list a:focus-visible { color: var(--color-accent); }
+.toc__list a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
+
+.toc__list .num { color: var(--color-accent); }
+
+.toc__meta {
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  letter-spacing: 0.04em;
+  color: var(--color-ink-muted);
+  border-block-start: 1px solid var(--color-rule);
+  padding-block-start: var(--space-sm);
+  display: grid;
+  gap: var(--space-3xs);
+}
+
+/* Main content column */
+.main { min-width: 0; max-width: 56rem; }
+
+.section {
+  margin-block-end: var(--space-3xl);
+  scroll-margin-top: var(--space-2xl);
+}
+
+.section:first-of-type { margin-block-start: 0; }
+
+.section__num {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--color-accent);
+  margin: 0 0 var(--space-md);
+}
+
+.section__head {
+  font-family: var(--font-display);
+  font-size: clamp(2rem, 4vw, 3rem);
+  font-weight: 600;
+  line-height: 1.05;
+  letter-spacing: -0.025em;
+  margin: 0 0 var(--space-lg);
+  color: var(--color-ink);
+}
+
+.section__head--lede { font-size: clamp(2.5rem, 5vw, 4rem); }
+
+.section__body {
+  font-size: 1.0625rem;
+  line-height: 1.6;
+  color: var(--color-ink);
+  max-width: var(--measure-prose);
+}
+
+.section__body p { margin: 0 0 var(--space-md); }
+.section__body p:last-child { margin-block-end: 0; }
+.section__body strong { color: var(--color-accent); font-weight: 500; }
+
+/* Tabular work history */
+.years {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9375rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.years thead th {
+  text-align: start;
+  padding: var(--space-2xs) var(--space-md) var(--space-2xs) 0;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--color-ink-soft);
+  font-weight: 400;
+  border-block-end: 1px solid var(--color-rule);
+}
+
+.years tbody td {
+  padding: var(--space-md) var(--space-md) var(--space-md) 0;
+  border-block-end: 1px solid var(--color-rule);
+  vertical-align: baseline;
+  color: var(--color-ink);
+}
+
+.years td:first-child {
+  font-family: var(--font-mono);
+  color: var(--color-ink-soft);
+  width: 12ch;
+}
+
+.years td:nth-child(2) {
+  font-weight: 500;
+  width: 18ch;
+}
+
+.years td:last-child { color: var(--color-ink-soft); }
+
+/* Writing list */
+.writing {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: var(--space-md);
+}
+
+.writing li {
+  display: grid;
+  grid-template-columns: 8ch 1fr;
+  gap: var(--space-md);
+  align-items: baseline;
+  border-block-end: 1px solid var(--color-rule);
+  padding-block-end: var(--space-md);
+}
+
+.writing li:last-child { border-block-end: none; padding-block-end: 0; }
+
+.writing__date {
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  color: var(--color-ink-soft);
+  font-variant-numeric: tabular-nums;
+}
+
+.writing a {
+  color: var(--color-ink);
+  text-decoration: none;
+  border-block-end: 1px solid var(--color-rule);
+  padding-block-end: 1px;
+  transition: color var(--dur-micro) var(--ease-out),
+              border-color var(--dur-micro) var(--ease-out);
+}
+
+.writing a:hover, .writing a:focus-visible {
+  color: var(--color-accent);
+  border-color: var(--color-accent);
+}
+
+.writing a:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 4px;
+}
+
+.writing__sub {
+  display: block;
+  font-size: 0.875rem;
+  color: var(--color-ink-soft);
+  margin-block-start: var(--space-3xs);
+}
+
+/* Contact */
+.contact {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: var(--space-md);
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+}
+
+.contact__row {
+  border: 1px solid var(--color-rule);
+  padding: var(--space-md);
+  display: grid;
+  gap: var(--space-2xs);
+}
+
+.contact__label { color: var(--color-ink-soft); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }
+.contact__value a { color: var(--color-ink); text-decoration: none; transition: color var(--dur-micro) var(--ease-out); }
+.contact__value a:hover, .contact__value a:focus-visible { color: var(--color-accent); }
+.contact__value a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
+
+@media (max-width: 64rem) {
+  .page { grid-template-columns: 1fr; gap: var(--space-2xl); }
+  .toc { position: static; border-block-end: 1px solid var(--color-rule); padding-block-end: var(--space-lg); }
+}
+
+@media (max-width: 40rem) {
+  .page { padding: var(--space-xl) var(--space-md) var(--space-2xl); }
+  .years td:first-child { width: 10ch; }
+  .writing li { grid-template-columns: 1fr; }
+}

package/templates/vite/.howone/skills/hallmark/site/_tests/07-foundry-compliance/brief.md

@@ -0,0 +1,64 @@
+# Test 07 v2 — Foundry (SOC2 / ISO27001 compliance)
+
+## The prompt (verbatim, same as v1)
+
+> "Build a landing page for Foundry — SOC2 and ISO 27001 compliance automation for B2B SaaS. Show: how many companies got compliant, what it costs, who uses it. Audience: founders + CTOs. Tone: technical but trustworthy."
+
+## Step 0 · Pre-flight
+
+> *"No pre-flight signals — proceeding with full Hallmark stack."*
+
+## Step 1 · Design-context gate — fully answered
+
+Audience, use, tone all explicit.
+
+## Step 2.5 · Project memory rotation
+
+> *"Previous run on this brief picked Stat-Led + Plain + none. Picking from {Bento Grid, Workbench, Marquee Hero} for the macro this time — Bento Grid wins because the brief says 'show how many · what it costs · who uses it' (three different signals; Bento is the macro built to carry multiple parallel proofs)."*
+>
+> *"Theme rotation: Plain (light · display-heavy · cool-deep-ink-blue) → Newsprint (light · roman-serif · warm-deep-red). Differs on display style and accent hue. Passes."*
+
+## Step 3 · Visual ruleset loaded
+
+`macrostructures.md` (Bento Grid), `component-cookbook.md` (F1 bento knobs, big-stat tile, logo-grid tile, pricing-card tile, testimonial-card tile, FAQ teaser), `typography.md` (Newsprint pairing — Source Serif Pro display + Geist body), `color.md` (Newsprint palette — warm cream paper, warm-deep-red accent), `microinteractions.md` (default-on for SaaS — counter on stat tile, focus-visible on CTAs, hover-rule on tier card), `anti-patterns.md`.
+
+## Step 4 · Hero enrichment
+
+> *"Enrichment: Tier-A pure-CSS logo wall (8 monochrome wordmarks set as `<svg>` text marks). No real customer logos (placeholder), no Lottie, no Midjourney. The Bento accommodates a logo grid as one tile rather than a separate section."*
+
+## Step 5 · Preview
+
+```markdown
+**Hallmark · v0.6.0**
+
+- **Macrostructure** · Bento Grid
+- **Theme** · Newsprint (warm-cream paper · Source Serif Pro display · warm-deep-red accent ~3%)
+- **Enrichment** · Tier-A pure-CSS logo grid (8 wordmark placeholders, mono)
+- **Sections** · Masthead · Hero (left-bias) · 6-tile Bento (stat · logos · pricing · testimonial · features · FAQ teaser) · CTA strip · Colophon
+- **Motion** · counter on hero stat · pulse-once on featured tier (2 primitives)
+- **Slop test** · 38 / 38 ✓
+- **Diversification** · differs from v1 (Stat-Led/Plain) on macrostructure + display style + accent hue
+```
+
+## Step 6 · Macrostructure stamp
+
+```
+/* Hallmark · macrostructure: Bento Grid · F1 bento knobs: tiles=6, spans=irregular, accent=corner-only
+ * theme: Newsprint · accent: warm-deep-red ~3% · enrichment: tier-A CSS logo grid (8 mono wordmarks)
+ * studied: no · context: explicit · v0.6.0
+ */
+```
+
+## What changed vs v1
+
+- **Macro:** Stat-Led → Bento Grid. v1 led with "847" sized at 22 rem and structured the rest as a 9-section linear SaaS page; v2 places the 847 inside a bento tile alongside five other parallel proofs (logos, pricing, testimonial, features, FAQ). Same data, different choreography.
+- **Theme:** Plain → Newsprint. v1's pure-white #fff with deep ink-blue becomes warm-cream with warm-deep-red. The page reads less Klim-Type-Foundry and more *NYT Cooking* — still trustworthy, less austere.
+- **Enrichment:** v1 had no enrichment (typography-only Stat-Led); v2 adds a Tier-A logo grid as one bento tile. Compliance pages need social proof, and a logo wall does that without a separate section.
+- **Section count:** v1 had 9 linear sections (logos · stats · features · testimonials · pricing · FAQ · CTA · footer); v2 collapses into 6 bento tiles + a CTA strip + a colophon.
+
+## What stayed the same
+
+- Brand: Foundry, SOC2/ISO27001 automation.
+- The "847 companies" anchor stat.
+- Three-tier pricing.
+- Slop test: 38 / 38 ✓.

package/templates/vite/.howone/skills/hallmark/site/_tests/07-foundry-compliance/index.html

@@ -0,0 +1,146 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Foundry — SOC 2 &amp; ISO 27001 compliance for B2B SaaS</title>
+  <meta name="description" content="847 companies passed audit using Foundry. Average time to compliant: thirty-one days." />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,400;0,500;0,600;1,400&family=Geist:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" />
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <main class="page">
+    <header class="masthead">
+      <span>est. 2024 · Lisbon &amp; New York</span>
+      <span class="masthead__brand">Foundry<span class="dot">.</span></span>
+      <nav class="masthead__nav">
+        <a href="#bento">Proof</a>
+        <a href="#bento">Pricing</a>
+        <a href="#">Docs</a>
+        <a href="#">Sign in</a>
+      </nav>
+    </header>
+
+    <section class="hero">
+      <div class="hero__copy">
+        <p class="hero__eyebrow">SOC 2 · ISO 27001 · automated</p>
+        <h1 class="hero__head">Compliance, ground out in <em>days</em>, not in months.</h1>
+        <p class="hero__sub">
+          Foundry runs the controls, the evidence collection, and the audit timeline for B2B SaaS
+          teams that don't have a security org yet. Founders open accounts on Tuesdays and pass audit
+          by month-end. The proof is below.
+        </p>
+        <div class="hero__cta">
+          <a class="btn btn--primary" href="#">14-day trial <span aria-hidden="true">→</span></a>
+          <a class="btn" href="#">Talk to sales</a>
+        </div>
+      </div>
+      <aside class="hero__pull">
+        <p class="hero__pull-quote">
+          "We passed Type II in seven weeks with one engineer halftime. The auditor accepted ninety
+          per cent of the evidence Foundry assembled with no edits."
+        </p>
+        <p class="hero__pull-attr">— Matt H., CTO at Tracejam · 18-person team</p>
+      </aside>
+    </section>
+
+    <section class="bento" id="bento">
+      <article class="tile tile--stat" aria-labelledby="stat-h">
+        <span class="tile__corner" aria-hidden="true"></span>
+        <p class="tile__label" id="stat-h">Companies audited</p>
+        <p class="tile__stat">847<span class="tile__stat-dot">.</span></p>
+        <p class="tile__stat-cap">
+          companies passed audit using Foundry. Average time to compliant: thirty-one days, against
+          an industry average of nine months.
+        </p>
+      </article>
+
+      <article class="tile tile--logos" aria-labelledby="logos-h">
+        <p class="tile__label" id="logos-h">In production at</p>
+        <p class="tile__body">Eight wordmarks. Logos shown with consent. Full customer list in the trust report.</p>
+        <ul class="logos" role="list">
+          <li class="logos__item">Tracejam<span class="dot">.</span></li>
+          <li class="logos__item">Maple <span class="dot">·</span></li>
+          <li class="logos__item">Knot</li>
+          <li class="logos__item">Tide<span class="dot">/</span></li>
+          <li class="logos__item">Streampipe</li>
+          <li class="logos__item">Cohort</li>
+          <li class="logos__item">Meridian</li>
+          <li class="logos__item">Anya<span class="dot">.</span>dev</li>
+        </ul>
+      </article>
+
+      <article class="tile tile--pricing" aria-labelledby="price-h">
+        <p class="tile__label" id="price-h">Three plans, one price each</p>
+        <div class="tiers">
+          <div class="tier-card">
+            <p class="tier-card__name">Starter</p>
+            <p class="tier-card__price">$299 <span class="tier-card__per">/ mo</span></p>
+          </div>
+          <div class="tier-card tier-card--feature">
+            <p class="tier-card__name">Team</p>
+            <p class="tier-card__price">$899 <span class="tier-card__per">/ mo</span></p>
+          </div>
+          <div class="tier-card">
+            <p class="tier-card__name">Scale</p>
+            <p class="tier-card__price">Custom</p>
+          </div>
+        </div>
+        <p class="tile__body" style="margin-top: var(--space-sm);">
+          Audit fee included. No per-seat. No annual lock. Cancel any month.
+        </p>
+      </article>
+
+      <article class="tile tile--testimonial">
+        <p class="tile__label">From a customer</p>
+        <p class="tile__quote">
+          "We told the auditor 'use Foundry, the evidence is in there.' She did. The audit closed
+          on schedule. That has never happened to me before."
+        </p>
+        <p class="tile__attr">— <strong>Sara V.</strong>, founder, 9-person fintech</p>
+      </article>
+
+      <article class="tile tile--features">
+        <p class="tile__label">What's automated</p>
+        <h3 class="tile__head">Eighty-six controls, evidenced on a schedule.</h3>
+        <ul class="feat-list">
+          <li><span class="num">01.</span><span>Access reviews quarterly. Slack-prompted. One-click sign-off.</span></li>
+          <li><span class="num">02.</span><span>Vulnerability scans on every deploy. Severity-routed.</span></li>
+          <li><span class="num">03.</span><span>Vendor security review with one-page risk memo per vendor.</span></li>
+          <li><span class="num">04.</span><span>Incident response playbook with on-call rotation prefilled.</span></li>
+          <li><span class="num">05.</span><span>Code review evidence pulled from GitHub, GitLab, Bitbucket.</span></li>
+          <li><span class="num">06.</span><span>Backups verified weekly. Restore tested monthly.</span></li>
+        </ul>
+      </article>
+
+      <article class="tile tile--faq">
+        <p class="tile__label">FAQ</p>
+        <h3 class="tile__head">The eight questions everyone asks first.</h3>
+        <ul class="faq-list">
+          <li><a href="#">Do we need to switch auditor?</a></li>
+          <li><a href="#">How long does Type I take?</a></li>
+          <li><a href="#">Can we add ISO 27001 later?</a></li>
+          <li><a href="#">Does Foundry produce the policies?</a></li>
+          <li><a href="#">What about HIPAA, GDPR?</a></li>
+          <li><a href="#">Do you offer a trust portal?</a></li>
+        </ul>
+      </article>
+    </section>
+
+    <section class="cta-strip">
+      <h2 class="cta-strip__head">Start the trial. <em>Cancel before the first invoice if it's not ready.</em></h2>
+      <div class="cta-strip__cta">
+        <a class="btn btn--primary" href="#">Open an account</a>
+        <a class="btn" href="#">Book a demo</a>
+      </div>
+    </section>
+
+    <footer class="colophon">
+      <span>Foundry · SOC 2 Type II · ISO 27001 · GDPR (DPA available on request)</span>
+      <span><a href="#">trust report</a> · <a href="#">docs</a> · <a href="#">status</a> · <a href="#">contact</a></span>
+    </footer>
+  </main>
+</body>
+</html>