add ui design ./ui/designs/ecomm-login-and-create-storefront-designs/

Claude Design export for SD-0001 (login + create-storefront surfaces): wf-*/hf-* screens, design-system bundle, offline preview. First artifact in the ui/designs/ collection (ecomm#8). Also ignore .DS_Store. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-06-10 21:53:43 -07:00
parent f4d6961792
commit afe36fd347
37 changed files with 5043 additions and 1 deletions
@@ -0,0 +1,79 @@
+// hf-storefront.jsx — Create storefront (PUC-4/5/7) hi-fi + states.
+const { HFScreen: FScreen, HFWordmark: FWordmark, HFTopBar: FTopBar, HFAccountChip: FChip,
+  HFFooter: FFooter, HFAuthCard: FAuthCard, HFField: FField, HFBanner: FBanner,
+  HFPrimary: FPrimary, HFStateCard: FStateCard, HFStates: FStates, HF_H: F, HF_DSC: FDS } = window;
+const { Eyebrow: FEyebrow } = FDS;
+
+function CreateForm({ s = {} }) {
+  return (
+    <>
+      <div>
+        <FEyebrow style={{ margin: '0 0 12px' }}>One storefront, fully yours</FEyebrow>
+        <h1 style={{ fontFamily: F.disp, fontWeight: 700, letterSpacing: '-0.015em', fontSize: 27, color: F.star, margin: '0 0 9px', lineHeight: 1.08 }}>
+          Create your storefront
+        </h1>
+        <p style={{ fontFamily: F.body, fontSize: 14.5, lineHeight: 1.55, color: F.soft, margin: 0 }}>
+          This is the one thing to do right now. It costs nothing and commits you to nothing.
+        </p>
+      </div>
+      {s.alreadyOwns && <FBanner title="Your account already has its storefront">
+        ecomm is one storefront per account today. <a className="lk" href="#">Go to your admin →</a>
+      </FBanner>}
+      <FField label="Storefront name" optional placeholder="e.g. Ben's Bets" value={s.name}
+        focus={!s.name && !s.blankPreview} error={s.nameError}
+        helper="You can leave this blank — we'll pick a placeholder name you can change any time." />
+      {s.blankPreview && (
+        <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginTop: -8, fontFamily: F.body, fontSize: 13, color: F.mute }}>
+          <span aria-hidden="true" style={{ color: F.lilac }}>◇</span>
+          Saves as <span style={{ color: F.soft, fontStyle: 'italic' }}>“ben's storefront”</span> — change it later.
+        </div>
+      )}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+        <FPrimary disabled={s.creating}>{s.creating ? 'Creating…' : 'Create storefront'}</FPrimary>
+        <p style={{ fontFamily: F.body, fontSize: 13, color: F.mute, lineHeight: 1.5, margin: 0 }}>
+          You can rename, configure, or close your storefront whenever you like.
+        </p>
+      </div>
+    </>
+  );
+}
+
+function HFCreate({ device = 'desktop', s = {} }) {
+  const desktop = device === 'desktop';
+  return (
+    <FScreen horizon>
+      <FTopBar pad={desktop ? '0 36px' : '0 20px'} left={<FWordmark size={desktop ? 22 : 20} />}
+        right={desktop ? <FChip /> : <button className="signout">Sign out</button>} />
+      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: desktop ? 32 : 18 }}>
+        <FAuthCard width={desktop ? 448 : '100%'}><CreateForm s={s} /></FAuthCard>
+      </div>
+      {desktop && <FFooter />}
+    </FScreen>
+  );
+}
+
+function HFCreateStates() {
+  return (
+    <FStates>
+      <FStateCard label="Blank name allowed" note="PUC-4 · default generated">
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+          <FField label="Storefront name" optional placeholder="e.g. Ben's Bets" helper="Leave blank and we'll name it for you." />
+          <div style={{ display: 'flex', alignItems: 'center', gap: 9, fontFamily: F.body, fontSize: 13, color: F.mute }}>
+            <span aria-hidden="true" style={{ color: F.lilac }}>◇</span>
+            Saves as <span style={{ color: F.soft, fontStyle: 'italic' }}>“ben's storefront”</span>
+          </div>
+        </div>
+      </FStateCard>
+      <FStateCard label="Creating" note="button busy, single submit">
+        <FPrimary disabled>Creating…</FPrimary>
+      </FStateCard>
+      <FStateCard label="Already owns one" note="409 · defense in depth (PUC-7)">
+        <FBanner title="Your account already has its storefront">
+          ecomm is one storefront per account today. <a className="lk" href="#">Go to your admin →</a>
+        </FBanner>
+      </FStateCard>
+    </FStates>
+  );
+}
+
+Object.assign(window, { HFCreate, HFCreateStates });