Loading files
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Patternflow — styleguide v2</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<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@300;400;500;600&family=JetBrains+Mono:wght@400;500&family=Newsreader:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="patternflow.css">
<style>
/* Pretendard — wordmark (Bold) + LED synthesizer kicker (400) */
@font-face{
font-family:'Pretendard';font-weight:400;font-style:normal;font-display:swap;
src:url('https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/static/woff2/Pretendard-Regular.woff2') format('woff2');
}
@font-face{
font-family:'Pretendard';font-weight:700;font-style:normal;font-display:swap;
src:url('https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/static/woff2/Pretendard-Bold.woff2') format('woff2');
}
.pf-wordmark{ font-family:'Pretendard',ui-sans-serif,system-ui,sans-serif;font-style:normal;font-weight:700 }
.pf-kicker-lg{ font-family:'Pretendard',ui-sans-serif,system-ui,sans-serif;font-weight:400 }
/* page-only styleguide chrome */
.swatches{ display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:8px }
.sw{ display:flex;flex-direction:column;gap:8px }
.sw .chip{ height:64px;border:1px solid var(--pf-rule) }
.sw .lbl{ font-family:var(--pf-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--pf-ink-muted) }
.sw .hex{ font-family:var(--pf-mono);font-size:11px;color:var(--pf-ink) }
pre.code{
font-family:var(--pf-mono);font-size:11.5px;line-height:1.6;color:var(--pf-ink);
background:var(--pf-cream-2);border:1px solid var(--pf-rule);padding:14px 16px;overflow:auto;
margin:14px 0 0;
}
.type-row{ display:grid;grid-template-columns:160px 1fr;gap:24px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--pf-rule) }
.type-row:first-child{ border-top:1px solid var(--pf-rule) }
.type-row .name{ font-family:var(--pf-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--pf-ink-muted) }
.demo-frame{ border:1px solid var(--pf-rule);background:var(--pf-cream);margin-top:18px;overflow:hidden }
.demo-frame .pf-hero{ min-height:auto;padding:64px 56px }
.demo-frame .pf-panel{ min-height:auto;padding:56px 48px }
.demo-frame .pf-journal{ width:auto;padding:48px 56px }
</style>
</head>
<body>
<div class="pf-version-tag"><span class="pf-led-dot"></span>styleguide · v2</div>
<div class="pf-doc">
<header class="pf-doc-head">
<h1>Patternflow — styleguide <span class="pf-mono" style="margin-left:8px">v2</span></h1>
<div class="pf-meta">hero + panel + journal + a4/c2</div>
</header>
<!-- TOKENS -->
<section class="pf-section" data-screen-label="01 Tokens">
<h2 class="pf-h2">Tokens.</h2>
<p class="pf-sub">Cream + ink + muted + ghost + one accent. Three type families by zone.</p>
<div class="pf-block">
<span class="pf-kicker">Color</span>
<div class="swatches">
<div class="sw"><div class="chip" style="background:#F4EFE6"></div><div class="lbl">cream</div><div class="hex">#F4EFE6</div></div>
<div class="sw"><div class="chip" style="background:#EDE7DB"></div><div class="lbl">cream-2</div><div class="hex">#EDE7DB</div></div>
<div class="sw"><div class="chip" style="background:#141414"></div><div class="lbl">ink</div><div class="hex">#141414</div></div>
<div class="sw"><div class="chip" style="background:#6B655A"></div><div class="lbl">ink-muted</div><div class="hex">#6B655A</div></div>
<div class="sw"><div class="chip" style="background:#A69F90"></div><div class="lbl">ink-faint</div><div class="hex">#A69F90</div></div>
<div class="sw"><div class="chip" style="background:#C9C2B0"></div><div class="lbl">ink-ghost</div><div class="hex">#C9C2B0</div></div>
<div class="sw"><div class="chip" style="background:#D9D1C0"></div><div class="lbl">rule</div><div class="hex">#D9D1C0</div></div>
<div class="sw"><div class="chip" style="background:#E5DDC9"></div><div class="lbl">rule-soft</div><div class="hex">#E5DDC9</div></div>
<div class="sw"><div class="chip" style="background:#E8552E;box-shadow:0 0 0 1px #D9D1C0 inset"></div><div class="lbl">led · accent</div><div class="hex">#E8552E</div></div>
</div>
</div>
<div class="pf-block">
<span class="pf-kicker">Type by zone</span>
<div class="type-row"><div class="name">hero h1 / 88</div><div style="font-family:'Pretendard',sans-serif;font-size:64px;font-weight:700;letter-spacing:-.035em;line-height:1;font-style:normal">Patternflow</div></div>
<div class="type-row"><div class="name">hero kicker / 28</div><div style="font-family:'Pretendard',sans-serif;font-size:28px;font-weight:400;letter-spacing:-.015em">An LED synthesizer.</div></div>
<div class="type-row"><div class="name">panel h2 / 64</div><div style="font-size:48px;font-weight:500;letter-spacing:-.035em;line-height:1">Build your own.</div></div>
<div class="type-row"><div class="name">compact h2 / 34</div><div style="font-size:34px;font-weight:500;letter-spacing:-.025em">Section headline.</div></div>
<div class="type-row"><div class="name">journal h1 / 58</div><div style="font-family:var(--pf-serif);font-size:42px;font-weight:400;letter-spacing:-.022em;line-height:1.02">Notes from the build.</div></div>
<div class="type-row"><div class="name">journal lede / 22</div><div style="font-family:var(--pf-serif);font-size:20px;font-style:italic;color:var(--pf-ink-muted)">An italic lede in serif sets the journal apart.</div></div>
<div class="type-row"><div class="name">body / 13.5</div><div>Body sans, Inter 400, 13.5/1.55.</div></div>
<div class="type-row"><div class="name">mono / 11</div><div class="pf-mono">KICKER · META · TAG</div></div>
</div>
</section>
<!-- HERO ZONE -->
<section class="pf-section" data-screen-label="02 Hero">
<h2 class="pf-h2">Hero.</h2>
<p class="pf-sub">Top-of-page lockup. Wordmark in Pretendard Bold, kicker in Pretendard 400. The version tag and tooltip live here too.</p>
<div class="demo-frame">
<section class="pf-hero">
<div class="pf-hero-copy">
<h1><em class="pf-wordmark">Patternflow</em></h1>
<div class="pf-kicker-lg">An LED synthesizer.</div>
<p class="pf-lede">
Play light patterns with your fingertips.<br />
<a class="pf-has-tip" data-tip="Opens GitHub" href="#" style="border-bottom:1px solid var(--pf-ink);padding-bottom:1px">An open-source</a>
reinterpretation of <span style="font-weight:500">Nam June Paik</span>'s <em style="font-style:italic">Participation TV</em> (1963).
</p>
<p class="pf-hero-note">Build it from the files, or get the finished product.</p>
<a class="pf-hero-cta pf-has-tip" data-tip="Opens Crowd Supply" href="#">Get One</a>
</div>
</section>
</div>
<div class="pf-block">
<span class="pf-kicker">Markup</span>
<pre class="code"><section class="pf-hero">
<div class="pf-hero-copy">
<h1><em class="pf-wordmark">Patternflow</em></h1>
<div class="pf-kicker-lg">An LED synthesizer.</div>
<p class="pf-lede">…</p>
<p class="pf-hero-note">Build it from the files, or get the finished product.</p>
<a class="pf-hero-cta pf-has-tip" data-tip="Opens Crowd Supply" href="…">
Get One
</a>
</div>
</section></pre>
</div>
</section>
<!-- PANEL ZONE -->
<section class="pf-section" data-screen-label="03 Panel section">
<h2 class="pf-h2">Panel section.</h2>
<p class="pf-sub">Build / Pattern / Inside content panels. h2 = 64px. Houses ghost-numeral lists and comment marquees.</p>
<div class="demo-frame">
<section class="pf-panel">
<header class="pf-panel-header">
<h2>Build your own.</h2>
<p class="pf-sub-lg">Print the case. Order the parts. Flash the firmware.</p>
</header>
<div class="pf-block">
<span class="pf-kicker">Four steps</span>
<div class="pf-row on"><span class="pf-ghost">01</span><div class="pf-row-t">Print the case</div><div class="pf-row-d">Three plates, any FDM printer.</div></div>
<div class="pf-row"><span class="pf-ghost">02</span><div class="pf-row-t">Solder the PCB</div><div class="pf-row-d">Through-hole + a few SMD parts.</div></div>
<div class="pf-row"><span class="pf-ghost">03</span><div class="pf-row-t">Assemble</div><div class="pf-row-d">Encoders, matrix, screws.</div></div>
<div class="pf-row"><span class="pf-ghost">04</span><div class="pf-row-t">Flash and power on</div><div class="pf-row-d">Web flasher in the Pattern section.</div></div>
</div>
<div class="pf-block">
<div class="pf-head">
<span class="pf-kicker">Reddit response</span>
<span class="pf-count">8 of ~3,400</span>
</div>
<div class="pf-marquee fade"><div class="pf-track" id="track"></div></div>
</div>
</section>
</div>
</section>
<!-- JOURNAL ZONE -->
<section class="pf-section" data-screen-label="04 Journal">
<h2 class="pf-h2">Journal.</h2>
<p class="pf-sub">The only zone where serif is allowed. Newsreader for body, italic for lede + blockquote.</p>
<div class="demo-frame">
<article class="pf-journal">
<h1>Notes from the build.</h1>
<p class="pf-jrn-lede">A field report from the first 100 units — what broke, what shipped, what got rewritten at 2 a.m.</p>
<div class="pf-journal-dateline"><span>Sangwoo Lee</span><span>2025-04-12 · 5 min read</span></div>
<div class="pf-journal-body" style="margin-top:32px">
<p>The cases came in from the printer with a 0.3 mm bow on the long axis — enough that the encoder shafts wouldn't seat. <a href="#">We rewrote the slicer profile</a> overnight and the second batch was within tolerance.</p>
<blockquote>Patternflow is not a product yet. It's a permission slip — to print, to solder, to mess it up.</blockquote>
<p>By the time the firmware was ready, the LED matrix had gone through three revisions. Each one was a lesson in voltage drop.</p>
</div>
</article>
</div>
</section>
<!-- DON'TS -->
<section class="pf-section" data-screen-label="05 Don'ts">
<h2 class="pf-h2">Don'ts.</h2>
<p class="pf-sub">If you reach for one of these, you're off-system.</p>
<div class="pf-block">
<div class="pf-row"><span class="pf-ghost">01</span><div class="pf-row-t">No border-radius, ever</div><div class="pf-row-d">Sharp corners only.</div></div>
<div class="pf-row"><span class="pf-ghost">02</span><div class="pf-row-t">No box-shadow, no gradients</div><div class="pf-row-d">Hairlines do all the dividing.</div></div>
<div class="pf-row"><span class="pf-ghost">03</span><div class="pf-row-t">LED orange is reserved</div><div class="pf-row-d">Version dot · journal hover · "live" signals only.</div></div>
<div class="pf-row"><span class="pf-ghost">04</span><div class="pf-row-t">Serif is journal-only</div><div class="pf-row-d">Newsreader does not appear in panels or hero.</div></div>
<div class="pf-row"><span class="pf-ghost">05</span><div class="pf-row-t">Italic outside journal</div><div class="pf-row-d">Wordmark is Pretendard Bold, not italic. No.</div></div>
<div class="pf-row"><span class="pf-ghost">06</span><div class="pf-row-t">No emoji, no icons in rows</div><div class="pf-row-d">The ghost numeral is the icon.</div></div>
<div class="pf-row"><span class="pf-ghost">07</span><div class="pf-row-t">No filler stat strips</div><div class="pf-row-d">Don't pad the design with informational chrome.</div></div>
</div>
</section>
<section class="pf-section" data-screen-label="06 Files">
<h2 class="pf-h2">Files.</h2>
<p class="pf-sub">The whole system, ready to hand off.</p>
<div class="pf-block">
<div class="pf-row on"><span class="pf-ghost">01</span><div class="pf-row-t">patternflow.css</div><div class="pf-row-d">Drop-in stylesheet — every token + component.</div></div>
<div class="pf-row"><span class="pf-ghost">02</span><div class="pf-row-t">patternflow-spec.md</div><div class="pf-row-d">Prose spec — principles, tokens, patterns, don'ts.</div></div>
<div class="pf-row"><span class="pf-ghost">03</span><div class="pf-row-t">patternflow-styleguide.html</div><div class="pf-row-d">This file — live demos of every component.</div></div>
<div class="pf-row"><span class="pf-ghost">04</span><div class="pf-row-t">unified-sections-A-variations.html</div><div class="pf-row-d">A4 = canonical numbered-row reference.</div></div>
<div class="pf-row"><span class="pf-ghost">05</span><div class="pf-row-t">unified-sections-A4-comments.html</div><div class="pf-row-d">C2 = canonical comment-band reference.</div></div>
</div>
</section>
</div>
<script>
const QUOTES = [
{q:"Remember some years ago Teenage Engineering did a simple LED matrix music visualizer with IKEA and it was super lame. Your thing is much closer to what it should have been.", u:"u/frumperino", s:"r/arduino"},
{q:"That is the coolest most useless thing on the planet.", u:"u/NeedleworkerFew5205", s:"r/arduino"},
{q:"Out of hundreds of projects in a similar category, yours is the first that I must freaking have.", u:"u/LegendOfVlad", s:"r/arduino"},
{q:"This is one of those ultra-niche things I just love.", u:"u/zebadrabbit", s:"r/arduino"},
{q:"More love to this post please!!!", u:"u/ShamanOnTech", s:"r/arduino"},
{q:"So uh… so when are you selling this? Can't wait.", u:"u/C4TT4", s:"r/somethingimade"},
{q:"Another up is not enough. I'm gonna try to build one.", u:"u/Sandisbad", s:"r/arduino"},
{q:"Incredibly cool. I'd love to have this in my home.", u:"u/SawdustedPatios", s:"r/somethingimade"},
];
const items = [...QUOTES, ...QUOTES];
document.getElementById('track').innerHTML = items.map((it,i)=>{
const n = String((i % QUOTES.length) + 1).padStart(2,'0');
const dup = i >= QUOTES.length ? 'aria-hidden="true"' : '';
return `<a class="pf-comment" href="#" ${dup}>
<span class="pf-ghost">${n}</span>
<p>${it.q}</p>
<div class="pf-comment-meta"><span>${it.u}</span><span>${it.s}</span></div>
</a>`;
}).join('');
</script>
</body>
</html>
927764820This file is pinned to the selected release. Download the original to open it in your design tool.