sa-sigquote-hairline v2026-06-10
Minimal signature-quote hairline. Foundry-orange left rule, no background, payoff on its own line, lowercase '- sam aguiar' sized to the quote. Default Poppins; add .sq-georgia for the serif version.
Source skill: sa-signature-quote (refined 2026-06-09; lowercase founder signature, payoff on own line) · Updated 2026-06-10 14:25:03
When to use
Low-footprint inline use: a sidebar, an email-signature block, or just above the footer on a page that already has a heavy hero.
Rules & constraints
- Tokens only: Foundry orange #D97706, Foundry Deep #B45309, Navy #0B212D. Orange is text/rule/glyph only, never a fill.
- Quote wording is fixed: Our job isn't done until clients leave saying, 'Wow, that was an amazing experience.' Do not paraphrase.
- The payoff phrase 'Wow, that was an amazing experience.' always breaks onto its own line.
- Author line is intentionally lowercase '- sam aguiar' (founder signature, NOT a Google reviewer, so the ALL-CAPS reviewer-name rule does not apply here).
- Author line is set to the same font-size as the quote.
- One font family per instance. Default shown; swap with the .sq-poppins or .sq-georgia modifier. Never mix two families in one element.
Deployment notes
Drop-in block. Default Poppins; add 'sq-georgia' to .sq-hair for the Georgia/Times serif version. Run pre-publish-qa + playwright-visual-qa after deploy.
HTML
<div class="sq-hair">
<blockquote>Our job isn’t done until clients say,<br><em>‘Wow, that was an amazing experience.’</em></blockquote>
<div class="sq-hair__by">- Sam Aguiar</div>
</div>CSS
.sq-hair{--nv:#0B212D;--or:#D97706;--ord:#B45309;font-family:'Poppins',system-ui,sans-serif;max-width:760px;border-left:3px solid var(--or);padding:6px 0 6px 26px;}
.sq-hair.sq-georgia{font-family:Georgia,'Times New Roman',serif;}
.sq-hair blockquote{font-weight:500;font-size:clamp(20px,2.4vw,26px);line-height:1.35;letter-spacing:-.01em;color:var(--nv);border:0;margin:0;}
.sq-hair em{font-style:italic;color:var(--ord);}
.sq-hair__by{margin-top:14px;font-weight:500;font-size:clamp(20px,2.4vw,26px);line-height:1.1;color:var(--nv);}