Redraw the flyer as a drafting sheet and put Silver Q's mark in the title block

design/README.md

@@ -4,10 +4,19 @@
 not served by the site; it lives here so the flyer can be regenerated rather
 than re-designed when a detail changes.
 
-US Letter, one page, printed on white on purpose: a full-bleed dark flyer drinks
+US Letter, one page, composed as a drafting sheet: thin frame, registration
-toner and collapses to a solid block on the mono laser printers in most campus
+ticks, the break drawing bleeding off the right edge, and a real title block
-libraries. The blueprint line art carries the brand and survives a black-and-white
+along the bottom holding venue, address, admission and the RSVP code. The title
-print intact.
+block is the concept, not decoration, which is what stops it reading as four
+centred boxes stacked down a column.
+
+Printed on white on purpose: a full-bleed dark flyer drinks toner and collapses
+to a solid block on the mono laser printers in most campus libraries. The line
+art carries the brand and survives a black-and-white print intact. Corners are
+sharp throughout to match the drawing language.
+
+`silverq-black.png` is Silver Q's own mark, their original black-on-white logo
+trimmed and given an alpha channel. Do not recolour it.
 
 Regenerate after editing (needs Chrome and playwright):
 

design/flyer.html

@@ -5,162 +5,190 @@
 <title>The Founder's Break - printable flyer</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 <style>
-  /* US Letter. Paper-white on purpose: a full-bleed dark flyer drinks toner and
+  /* The Founder's Break - US Letter flyer.
-     collapses to a solid block on the mono laser printers in most campus
+     Composed as a drafting sheet: a thin frame, registration ticks, the break
-     libraries. The blueprint line art carries the brand instead, and it survives
+     drawing bleeding off the right edge, and a real title block along the
-     a black-and-white print intact. */
+     bottom carrying venue, address, admission and the RSVP code. The title
-  @page { size: 8.5in 11in; margin: 0; }
+     block is the concept rather than decoration, which is what keeps this from
+     being four centred boxes stacked down a column.
 
+     White paper on purpose: a full-bleed dark flyer drinks toner and collapses
+     to a solid block on the mono laser printers in most campus libraries.
+     Corners are sharp everywhere, matching the drawing language. */
+
+  @page { size: 8.5in 11in; margin: 0; }
   * { box-sizing: border-box; margin: 0; padding: 0; }
 
   :root {
     --ink: #06060b;
-    --accent: #047857;      /* deeper than the screen emerald so it holds on paper */
+    --accent: #047857;       /* deeper than the screen emerald so it holds in ink */
-    --accent-soft: #ecfdf5;
+    --hair: #c9c8d2;
-    --rule: #d9d8e0;
+    --muted: #5a5870;
-    --muted: #55536a;
+    --frame: 0.34in;
   }
 
   html, body { width: 8.5in; height: 11in; }
   body {
     font-family: "Inter", -apple-system, system-ui, sans-serif;
-    color: var(--ink);
+    color: var(--ink); background: #fff;
-    background: #fff;
+    -webkit-print-color-adjust: exact; print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
-    print-color-adjust: exact;
   }
 
-  .sheet {
+  .sheet { position: relative; width: 8.5in; height: 11in; overflow: hidden; }
-    width: 8.5in; height: 11in;
+
-    padding: 0.62in 0.66in 0.5in;
+  /* ── Drafting frame + registration ticks ── */
+  .frame {
+    position: absolute; inset: var(--frame);
+    border: 1px solid var(--ink); pointer-events: none;
+  }
+  .tick { position: absolute; background: var(--ink); }
+  .tick.h { width: 0.3in; height: 1px; }
+  .tick.v { width: 1px; height: 0.3in; }
+
+  /* ── The drawing, cropped by the sheet edge ── */
+  .drawing {
+    position: absolute; top: 1.95in; right: -2.85in;
+    width: 9.5in; opacity: 0.46;
+  }
+  .drawing img { width: 100%; height: auto; display: block; }
+
+  /* ── Content column, held clear of the drawing ── */
+  .body {
+    position: absolute; inset: var(--frame);
+    padding: 0.42in 0.46in 1.8in;
     display: flex; flex-direction: column;
   }
 
-  /* ── Masthead ── */
+  .kicker {
-  .eyebrow {
+    font-family: "JetBrains Mono", ui-monospace, monospace;
-    font-size: 10.5pt; font-weight: 700; letter-spacing: 0.2em;
+    font-size: 8.5pt; letter-spacing: 0.19em; text-transform: uppercase;
-    text-transform: uppercase; color: var(--accent);
+    color: var(--accent); font-weight: 500;
   }
+
   h1 {
     font-family: "Space Grotesk", sans-serif;
-    font-size: 54pt; font-weight: 700; line-height: 0.95;
+    font-size: 64pt; font-weight: 700; line-height: 0.85;
-    letter-spacing: -0.03em; margin-top: 0.1in;
+    letter-spacing: -0.042em; margin-top: 0.2in;
-  }
+    text-transform: uppercase;
-  .strap {
-    font-size: 13pt; color: var(--muted); margin-top: 0.14in;
-    max-width: 6.2in; line-height: 1.45;
   }
 
-  .rule { height: 3px; background: var(--accent); margin: 0.26in 0 0; width: 1.5in; border-radius: 2px; }
+  /* The loudest thing after the name. A flyer is read at ten feet and the day
-
+     is the one fact someone has to walk away with. */
-  /* ── Diagram ── */
+  .when { margin-top: 0.44in; }
-  /* Height-capped, not width-driven: at full width the drawing is 3.9in tall
+  .when span {
-     and pushes the QR off the page. */
+    display: block;
-  .diagram { margin: 0.18in 0 0.12in; text-align: center; }
-  .diagram img { max-height: 2.3in; max-width: 100%; width: auto; height: auto; display: block; margin: 0 auto; }
-
-  /* ── Details ── */
-  .details {
-    display: grid; grid-template-columns: repeat(4, 1fr);
-    border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
-  }
-  .detail { padding: 0.17in 0.14in; }
-  .detail + .detail { border-left: 1px solid var(--rule); }
-  .detail dt {
-    font-size: 8pt; font-weight: 700; letter-spacing: 0.13em;
-    text-transform: uppercase; color: var(--muted); margin-bottom: 0.05in;
-  }
-  .detail dd {
     font-family: "Space Grotesk", sans-serif;
-    font-size: 14pt; font-weight: 600; line-height: 1.2;
+    font-size: 37pt; font-weight: 700; line-height: 1.02;
+    letter-spacing: -0.022em; text-transform: uppercase;
   }
-  .detail dd small { display: block; font-size: 10pt; font-weight: 500; color: var(--muted); margin-top: 2px; }
+  .when .time { color: var(--accent); }
 
-  /* ── Pitch + QR ── */
+  .say { margin-top: auto; max-width: 4.6in; }
-  .lower {
+  .say .lead {
-    flex: 1; display: grid; grid-template-columns: 1fr 2.15in;
-    gap: 0.34in; align-items: start; padding-top: 0.26in;
-  }
-  .kicker {
     font-family: "Space Grotesk", sans-serif;
-    font-size: 19pt; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em;
+    font-size: 16.5pt; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em;
   }
-  .kicker em { font-style: normal; color: var(--accent); }
+  .say p { margin-top: 0.13in; font-size: 11pt; line-height: 1.5; color: var(--muted); }
-  .points { margin-top: 0.2in; display: grid; gap: 0.11in; }
-  .point { display: flex; gap: 0.1in; font-size: 11pt; line-height: 1.45; }
-  .point b { font-weight: 700; }
-  .tick { color: var(--accent); font-weight: 700; }
 
-  .qr-block {
+  /* ── Title block ── */
-    border: 1.5px solid var(--ink); border-radius: 10px;
+  .title-block {
-    padding: 0.16in; text-align: center; background: #fff;
+    position: absolute; left: var(--frame); right: var(--frame); bottom: var(--frame);
+    border-top: 1px solid var(--ink);
+    display: grid; grid-template-columns: 1.66in 1fr 1.02in 1.6in;
+    height: 1.58in; background: #fff;
   }
-  .qr-block img { width: 100%; height: auto; display: block; }
+  .cell { padding: 0.14in 0.15in; }
-  .qr-label {
+  .cell + .cell { border-left: 1px solid var(--hair); }
+  .cell dt {
+    font-family: "JetBrains Mono", ui-monospace, monospace;
+    font-size: 7pt; letter-spacing: 0.16em; text-transform: uppercase;
+    color: var(--muted); margin-bottom: 0.07in;
+  }
+  .cell dd {
     font-family: "Space Grotesk", sans-serif;
-    font-size: 12pt; font-weight: 700; margin-top: 0.1in;
+    font-size: 12.5pt; font-weight: 600; line-height: 1.25;
+  }
+  .cell dd span {
+    display: block; font-family: "Inter", sans-serif;
+    font-size: 9.5pt; font-weight: 400; color: var(--muted); margin-top: 0.04in; line-height: 1.35;
   }
-  .qr-url { font-size: 7.4pt; color: var(--muted); margin-top: 3px; white-space: nowrap; letter-spacing: -0.01em; }
 
-  /* ── Footer ── */
+  .venue-cell { display: flex; flex-direction: column; }
-  footer {
+  .venue-cell img { height: 0.82in; width: auto; align-self: flex-start; }
-    margin-top: 0.24in; padding-top: 0.14in;
+
-    border-top: 1px solid var(--rule);
+  .free { font-size: 19pt !important; letter-spacing: -0.02em; }
-    display: flex; justify-content: space-between; align-items: center;
+
-    font-size: 9.5pt; color: var(--muted);
+  .qr-cell { display: flex; align-items: center; gap: 0.12in; }
+  .qr-cell img { width: 1.04in; height: 1.04in; display: block; }
+  .qr-cell .qr-text {
+    font-family: "JetBrains Mono", ui-monospace, monospace;
+    font-size: 7pt; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
+    writing-mode: vertical-rl; transform: rotate(180deg);
+  }
+
+  /* Credit line, sitting under the frame like a sheet reference. */
+  .credit {
+    position: absolute; left: var(--frame); right: var(--frame);
+    bottom: 0.115in;
+    display: flex; justify-content: space-between;
+    font-family: "JetBrains Mono", ui-monospace, monospace;
+    font-size: 7.5pt; letter-spacing: 0.1em; color: var(--muted);
+    text-transform: uppercase;
   }
-  footer strong { color: var(--ink); font-weight: 600; }
-  .host { display: flex; align-items: center; gap: 0.08in; }
-  .host img { width: 15px; height: 15px; }
 </style>
 </head>
 <body>
 <div class="sheet">
 
-  <header>
+  <div class="drawing"><img src="flyer-diagram.png" alt=""></div>
-    <p class="eyebrow">UF Startup Pool Social</p>
-    <h1>The Founder&rsquo;s<br>Break</h1>
-    <p class="strap">Engineers, designers, business minds and anyone building something from the ground up. Same bar, same tables, every week.</p>
-    <div class="rule"></div>
-  </header>
 
-  <div class="diagram">
+  <div class="frame"></div>
-    <img src="flyer-diagram.png" alt="">
+  <div class="tick h" style="top: 0.34in; left: 0;"></div>
+  <div class="tick h" style="top: 0.34in; right: 0;"></div>
+  <div class="tick v" style="left: 0.34in; top: 0;"></div>
+  <div class="tick v" style="right: 0.34in; top: 0;"></div>
+
+  <div class="body">
+    <p class="kicker">UF Startup Pool Social &nbsp;/&nbsp; Gainesville</p>
+
+    <h1>The<br>Founder&rsquo;s<br>Break</h1>
+
+    <div class="when">
+      <span class="day">Every Thursday</span>
+      <span class="time">7 to 9 PM</span>
     </div>
 
-  <dl class="details">
+    <div class="say">
-    <div class="detail"><dt>When</dt><dd>Every Thursday</dd></div>
+      <p class="lead">Zero pool skills required. We are here to build startups, not run the table.</p>
-    <div class="detail"><dt>Time</dt><dd>7:00 to 9:00 PM</dd></div>
+      <p>Engineers, designers, business minds and anyone building something from the ground up. No pitches, no entry fee, no name tags.</p>
-    <div class="detail"><dt>Where</dt><dd>Silver Q<small>225 W University Ave</small></dd></div>
+    </div>
-    <div class="detail"><dt>Entry</dt><dd>Free<small>18 and over, bring ID</small></dd></div>
+  </div>
+
+  <dl class="title-block">
+    <div class="cell venue-cell">
+      <dt>Venue</dt>
+      <img src="silverq-black.png" alt="Silver Q">
+    </div>
+    <div class="cell">
+      <dt>Location</dt>
+      <dd>225 W University Ave<span>Gainesville, FL 32601</span></dd>
+    </div>
+    <div class="cell">
+      <dt>Entry</dt>
+      <dd class="free">Free<span>18 and over<br>Bring ID</span></dd>
+    </div>
+    <div class="cell qr-cell">
+      <img src="qr-print.png" alt="">
+      <span class="qr-text">Scan to RSVP</span>
+    </div>
   </dl>
 
-  <div class="lower">
+  <div class="credit">
-    <div>
+    <span>Hosted by OneTouch Studio</span>
-      <p class="kicker">We are building Gainesville&rsquo;s startup culture, <em>one terrible pool shot at a time.</em></p>
+    <span>foundersbreak.onetouch.studio</span>
-      <div class="points">
-        <p class="point"><span class="tick">&#10003;</span><span><b>Zero pool skills required.</b> Most of us are not good at this.</span></p>
-        <p class="point"><span class="tick">&#10003;</span><span><b>No pitches, no entry fee, no name tags.</b> Grab a cue and talk shop.</span></p>
-        <p class="point"><span class="tick">&#10003;</span><span><b>Meet your next co-founder.</b> Technical, design and business people in one room.</span></p>
   </div>
-    </div>
-
-    <div class="qr-block">
-      <img src="qr-print.png" alt="">
-      <p class="qr-label">Scan to RSVP</p>
-      <p class="qr-url">foundersbreak.onetouch.studio</p>
-    </div>
-  </div>
-
-  <footer>
-    <span class="host">
-      <img src="onetouch-flyer-mark.svg" alt="">
-      Hosted by <strong>OneTouch Studio</strong>
-    </span>
-    <span>Bring your ideas and a valid ID.</span>
-  </footer>
 
 </div>
 </body>

design/onetouch-flyer-mark.svg

@@ -1,37 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 672 672" width="672" height="672">
-  <g transform="translate(336 336)">
-    <!-- target rings -->
-    <circle cx="0" cy="0" r="160" fill="none" stroke="#06060b" stroke-width="5.5"/>
-    <circle cx="0" cy="0" r="223" fill="none" stroke="#06060b" stroke-width="7.5"/>
-    <circle cx="0" cy="0" r="279" fill="none" stroke="#06060b" stroke-width="5.5"/>
-
-    <!-- central wireframe cube -->
-    <g transform="scale(0.72)" fill="none" stroke="#06060b" stroke-width="8" stroke-linecap="round" stroke-linejoin="round">
-      <polygon points="0,-34 30,-14 0,6 -30,-14"/>
-      <polygon points="0,6 30,-14 30,20 0,40 -30,20 -30,-14"/>
-      <line x1="0" y1="-34" x2="0" y2="6"/>
-      <line x1="0" y1="6" x2="0" y2="40"/>
-      <line x1="-30" y1="-14" x2="-30" y2="20"/>
-      <line x1="30" y1="-14" x2="30" y2="20"/>
-    </g>
-
-    <!-- nodes aligned to circle tangents -->
-    <!-- top node on outer ring -->
-    <circle cx="0" cy="-279" r="9" fill="#06060b"/>
-    <!-- right node on middle ring -->
-    <circle cx="223" cy="0" r="9" fill="#06060b"/>
-    <!-- bottom node on middle ring -->
-    <circle cx="0" cy="223" r="9" fill="#06060b"/>
-    <!-- upper-left small node on outer ring -->
-    <circle cx="-197.28" cy="-197.28" r="6.5" fill="#06060b"/>
-    <!-- lower-right small node on inner ring -->
-    <circle cx="113.14" cy="113.14" r="5.5" fill="#06060b"/>
-
-    <!-- tiny tangent ticks to emphasize engineered orbital placement -->
-    <line x1="-12" y1="-279" x2="12" y2="-279" stroke="#06060b" stroke-width="3" stroke-linecap="round"/>
-    <line x1="223" y1="-12" x2="223" y2="12" stroke="#06060b" stroke-width="3" stroke-linecap="round"/>
-    <line x1="-12" y1="223" x2="12" y2="223" stroke="#06060b" stroke-width="3" stroke-linecap="round"/>
-    <line x1="-205.76" y1="-188.80" x2="-188.80" y2="-205.76" stroke="#06060b" stroke-width="2.5" stroke-linecap="round"/>
-    <line x1="108.19" y1="118.09" x2="118.09" y2="108.19" stroke="#06060b" stroke-width="2.5" stroke-linecap="round"/>
-  </g>
-</svg>