IKHSAN
ENID Baca dalam Bahasa Indonesia

pixies

Public
Branch
master
Latest commit
9b0697f26 October 2026

showcase.html

Open raw
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pixies — logo exploration</title>
<style>
  :root { --ink:#0B0F14; --raised:#141A21; --line:#232B34; --pulse:#35E0A0; --deep:#04785C;
           --text:#E6EDF3; --muted:#93A1AE; --paper:#F4F7F4; --ink-on-paper:#0B0F14; }
  * { box-sizing:border-box; }
  body { margin:0; background:var(--ink); color:var(--text);
          font-family:Inter,"Segoe UI",system-ui,-apple-system,Arial,sans-serif; }
  .mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
  main { max-width:1180px; margin:0 auto; padding:64px 32px 96px; }
  header { border-bottom:1px solid var(--line); padding-bottom:32px; margin-bottom:40px; }
  h1 { font-size:15px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:500; margin:0 0 24px; }
  h2 { font-size:34px; letter-spacing:-.02em; font-weight:600; margin:0 0 10px; }
  header p { color:var(--muted); max-width:62ch; margin:0; line-height:1.6; }
  .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
  .card { background:var(--raised); border:1px solid var(--line); border-radius:14px; padding:24px;
           transition:border-color .2s ease, transform .2s ease; }
  .card:hover { border-color:#2F6B57; transform:translateY(-2px); }
  .mark { display:flex; align-items:center; justify-content:center; height:180px; color:var(--pulse); }
  .card h3 { font-size:14px; margin:16px 0 6px; text-transform:capitalize; letter-spacing:.01em; }
  .card p { font-size:13px; line-height:1.55; color:var(--muted); margin:0; }
  .final { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:48px; }
  .panel { border:1px solid var(--line); border-radius:14px; padding:32px; display:flex;
            align-items:center; justify-content:center; background:var(--raised); }
  .panel.light { background:var(--paper); border-color:#DDE4E0; }
  .panel .colored { color:var(--pulse); }
  .panel.light .colored { color:var(--deep); }
  .panel.light .wordmark { color:var(--ink-on-paper); }
  .panel .wordmark { color:var(--text); }
  .swatches { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin-top:48px; }
  .swatch { border-radius:10px; padding:14px; border:1px solid var(--line); font-size:12px; }
  .swatch span { display:block; opacity:.75; margin-top:4px; }
  footer { margin-top:56px; color:var(--muted); font-size:12px; }
</style>
</head>
<body>
<main>
  <header>
    <h1>Pixies · logo exploration</h1>
    <h2>Six directions, one winner</h2>
    <p>Pixies is a self-hosted speed-test analytics dashboard: scheduled tests, ping and jitter,
    graphs over a retention window, multiple servers, health alerts. The mark has to imply speed and
    network pulse without becoming another speedometer, and it has to survive a 16px favicon in one
    color.</p>
  </header>
  <section class="grid">
      <article class="card">
        <div class="mark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="img" aria-label="Pixies concept 1">
<path d="M16 62 H33 L45 24 L60 80 L72 50 H86" fill="none" stroke="currentColor"
    stroke-width="9" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
        <h3>pulse wave</h3>
        <p>Baseline, spike, decay. Instantly 'a measurement' but reads as a generic heartbeat icon.</p>
      </article>
      <article class="card">
        <div class="mark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="img" aria-label="Pixies concept 2">
<g fill="currentColor">
  <rect x="40.76" y="71.26" width="4.33" height="10" rx="5.00" transform="rotate(-5.25 42.92 76.26)"/>
  <rect x="38.65" y="64.15" width="4.33" height="10" rx="5.00" transform="rotate(-27.75 40.81 69.15)"/>
  <rect x="33.99" y="58.39" width="4.33" height="10" rx="5.00" transform="rotate(-50.25 36.15 63.39)"/>
  <rect x="27.47" y="54.85" width="4.33" height="10" rx="5.00" transform="rotate(-72.75 29.63 59.85)"/>
  <rect x="54.48" y="73.14" width="5.01" height="8" rx="4.00" transform="rotate(-1.50 56.99 77.14)"/>
  <rect x="53.14" y="64.63" width="5.01" height="8" rx="4.00" transform="rotate(-16.50 55.64 68.63)"/>
  <rect x="49.63" y="56.76" width="5.01" height="8" rx="4.00" transform="rotate(-31.50 52.14 60.76)"/>
  <rect x="44.21" y="50.06" width="5.01" height="8" rx="4.00" transform="rotate(-46.50 46.72 54.06)"/>
  <rect x="37.24" y="45.00" width="5.01" height="8" rx="4.00" transform="rotate(-61.50 39.75 49.00)"/>
  <rect x="29.20" y="41.91" width="5.01" height="8" rx="4.00" transform="rotate(-76.50 31.70 45.91)"/>
  <rect x="68.61" y="75.82" width="4.76" height="6" rx="3.00" transform="rotate(1.00 70.99 78.82)"/>
  <rect x="68.04" y="67.65" width="4.76" height="6" rx="3.00" transform="rotate(-9.00 70.42 70.65)"/>
  <rect x="66.06" y="59.70" width="4.76" height="6" rx="3.00" transform="rotate(-19.00 68.44 62.70)"/>
  <rect x="62.73" y="52.21" width="4.76" height="6" rx="3.00" transform="rotate(-29.00 65.11 55.21)"/>
  <rect x="58.15" y="45.42" width="4.76" height="6" rx="3.00" transform="rotate(-39.00 60.53 48.42)"/>
  <rect x="52.46" y="39.53" width="4.76" height="6" rx="3.00" transform="rotate(-49.00 54.83 42.53)"/>
  <rect x="45.83" y="34.71" width="4.76" height="6" rx="3.00" transform="rotate(-59.00 48.21 37.71)"/>
  <rect x="38.46" y="31.12" width="4.76" height="6" rx="3.00" transform="rotate(-69.00 40.84 34.12)"/>
  <rect x="30.59" y="28.86" width="4.76" height="6" rx="3.00" transform="rotate(-79.00 32.97 31.86)"/>
  </g>
</svg>
</div>
        <h3>signal arc</h3>
        <p>Three capsule arcs radiating from a corner: network signal, made of pixels. Strong at 512, mushy at 32.</p>
      </article>
      <article class="card">
        <div class="mark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="img" aria-label="Pixies concept 3">
<g fill="none" stroke="currentColor" stroke-width="10" stroke-linecap="round" stroke-linejoin="round">
    <path d="M32 20 V80"/>
    <path d="M32 32 H46 L58 18 L70 44 L58 58 H32"/>
  </g>
</svg>
</div>
        <h3>p monogram</h3>
        <p>Monogram P built from a pulse. Ambiguous: reads as D or a plug, bowl too wide.</p>
      </article>
      <article class="card">
        <div class="mark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="img" aria-label="Pixies concept 4">
<path d="M50 16 A34 34 0 1 1 32 78.6" fill="none" stroke="currentColor" stroke-width="11" stroke-linecap="round"/>
  <circle cx="76" cy="34" r="6" fill="currentColor"/>
</svg>
</div>
        <h3>punched ring</h3>
        <p>Open ring with an escaping reading. At 32px the gap collapses and it reads as a C.</p>
      </article>
      <article class="card">
        <div class="mark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="img" aria-label="Pixies concept 5">
<g fill="currentColor">
    <rect x="26" y="62" width="16" height="16" rx="5.1"/>
    <rect x="44" y="62" width="13" height="13" rx="4.2"/>
    <rect x="44" y="44" width="13" height="13" rx="4.2"/>
    <rect x="60" y="44" width="10" height="10" rx="3.2"/>
    <rect x="60" y="28" width="10" height="10" rx="3.2"/>
    <rect x="74" y="28" width="7" height="7" rx="2.2"/>
    <rect x="74" y="14" width="7" height="7" rx="2.2"/>
  </g>
</svg>
</div>
        <h3>pixel leaf</h3>
        <p>Rhythmic pixel trail on a diagonal. Alive, but no focal point and no measurement.</p>
      </article>
      <article class="card">
        <div class="mark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="img" aria-label="Pixies concept 6">
<g>
    <path d="M 21.4 37.5 A 33 33 0 0 0 34.5 24.9" fill="none" stroke="currentColor" stroke-width="9" stroke-linecap="round"/>
    <path d="M 43.1 21.7 A 33 33 0 0 0 61.3 23.0" fill="none" stroke="currentColor" stroke-width="9" stroke-linecap="round"/>
    <path d="M 69.4 27.3 A 33 33 0 0 0 80.6 41.6" fill="none" stroke="currentColor" stroke-width="9" stroke-linecap="round"/>
    <path d="M 82.8 50.6 A 33 33 0 0 0 79.7 68.5" fill="none" stroke="currentColor" stroke-width="9" stroke-linecap="round"/>
  </g>
</svg>
</div>
        <h3>split gauge</h3>
        <p>Four arc segments as a split gauge. Too close to the retired speedometer language.</p>
      </article>
  </section>
  <section class="final">
    <div class="panel colored"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="220" height="220" fill="none" role="img" aria-labelledby="t d">
  <title id="t">Pixies</title>
  <desc id="d">Pixies mark: a speed pulse rising into two pixel squares.</desc>
  <g>
    <g><path d="M15 63H33L45 23L59 77L69 52" fill="none" stroke="currentColor" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/><rect x="66" y="34" width="16" height="16" rx="6" fill="currentColor"/><rect x="78" y="19" width="9" height="9" rx="3" fill="currentColor"/></g>
  </g>
</svg>
</div>
    <div class="panel light"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="220" height="220" fill="none" role="img" aria-labelledby="t d">
  <title id="t">Pixies</title>
  <desc id="d">Pixies mark: a speed pulse rising into two pixel squares.</desc>
  <g>
    <g><path d="M15 63H33L45 23L59 77L69 52" fill="none" stroke="#04785C" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/><rect x="66" y="34" width="16" height="16" rx="6" fill="#04785C"/><rect x="78" y="19" width="9" height="9" rx="3" fill="#04785C"/></g>
  </g>
</svg>
</div>
  </section>
  <section class="final">
    <div class="panel wordmark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 266 140" width="420" height="221" fill="none" role="img" aria-labelledby="t d">
  <title id="t">Pixies wordmark</title>
  <desc id="d">Pixies mark with outlined Pixies wordmark. Inherits currentColor.</desc>
  <g>
    <g transform="translate(-3.52 21.90) scale(0.952)"><path d="M15 63H33L45 23L59 77L69 52" fill="none" stroke="currentColor" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/><rect x="66" y="34" width="16" height="16" rx="6" fill="currentColor"/><rect x="78" y="19" width="9" height="9" rx="3" fill="currentColor"/></g>
    <g transform="translate(93.66 93.60)"><path d="M5.64 0.00V-46.55H21.36Q26.84 -46.55 30.33 -44.58Q33.82 -42.61 35.50 -39.27Q37.18 -35.93 37.18 -31.82Q37.18 -27.70 35.51 -24.34Q33.84 -20.98 30.36 -18.99Q26.89 -17.00 21.45 -17.00H10.18V-22.00H21.27Q25.02 -22.00 27.30 -23.30Q29.57 -24.59 30.60 -26.81Q31.64 -29.02 31.64 -31.82Q31.64 -34.61 30.60 -36.82Q29.57 -39.02 27.27 -40.28Q24.98 -41.55 21.18 -41.55H11.27V0.00Z M44.14 0.00V-34.91H49.50V0.00ZM46.86 -40.73Q45.29 -40.73 44.17 -41.80Q43.04 -42.86 43.04 -44.36Q43.04 -45.86 44.17 -46.93Q45.29 -48.00 46.86 -48.00Q48.43 -48.00 49.56 -46.93Q50.68 -45.86 50.68 -44.36Q50.68 -42.86 49.56 -41.80Q48.43 -40.73 46.86 -40.73Z M61.91 -34.91 70.27 -20.64 78.63 -34.91H84.82L73.54 -17.45L84.82 0.00H78.63L70.27 -13.55L61.91 0.00H55.73L66.82 -17.45L55.73 -34.91Z M91.04 0.00V-34.91H96.41V0.00ZM93.77 -40.73Q92.20 -40.73 91.08 -41.80Q89.95 -42.86 89.95 -44.36Q89.95 -45.86 91.08 -46.93Q92.20 -48.00 93.77 -48.00Q95.34 -48.00 96.46 -46.93Q97.59 -45.86 97.59 -44.36Q97.59 -42.86 96.46 -41.80Q95.34 -40.73 93.77 -40.73Z M119.45 0.73Q114.41 0.73 110.76 -1.51Q107.11 -3.75 105.14 -7.78Q103.18 -11.82 103.18 -17.18Q103.18 -22.55 105.14 -26.65Q107.11 -30.75 110.64 -33.06Q114.18 -35.36 118.91 -35.36Q121.63 -35.36 124.29 -34.45Q126.95 -33.55 129.13 -31.51Q131.31 -29.48 132.61 -26.14Q133.91 -22.80 133.91 -17.91V-15.64H107.00V-20.27H128.45Q128.45 -23.23 127.28 -25.55Q126.11 -27.86 123.96 -29.20Q121.81 -30.55 118.91 -30.55Q115.70 -30.55 113.37 -28.97Q111.04 -27.39 109.79 -24.86Q108.54 -22.34 108.54 -19.45V-16.36Q108.54 -12.41 109.92 -9.67Q111.29 -6.93 113.75 -5.51Q116.20 -4.09 119.45 -4.09Q121.56 -4.09 123.28 -4.69Q125.00 -5.30 126.25 -6.51Q127.50 -7.73 128.18 -9.55L133.36 -8.09Q132.54 -5.45 130.61 -3.47Q128.68 -1.48 125.84 -0.38Q123.00 0.73 119.45 0.73Z M165.40 -27.09 160.59 -25.73Q160.13 -26.93 159.26 -28.08Q158.38 -29.23 156.88 -29.98Q155.38 -30.73 153.04 -30.73Q149.84 -30.73 147.71 -29.26Q145.59 -27.80 145.59 -25.55Q145.59 -23.55 147.04 -22.39Q148.50 -21.23 151.59 -20.45L156.77 -19.18Q161.45 -18.05 163.75 -15.72Q166.04 -13.39 166.04 -9.73Q166.04 -6.73 164.33 -4.36Q162.61 -2.00 159.54 -0.64Q156.47 0.73 152.40 0.73Q147.06 0.73 143.56 -1.59Q140.06 -3.91 139.13 -8.36L144.22 -9.64Q144.95 -6.82 146.98 -5.41Q149.02 -4.00 152.31 -4.00Q156.06 -4.00 158.28 -5.60Q160.50 -7.20 160.50 -9.45Q160.50 -11.27 159.22 -12.51Q157.95 -13.75 155.31 -14.36L149.50 -15.73Q144.70 -16.86 142.46 -19.26Q140.22 -21.66 140.22 -25.27Q140.22 -28.23 141.89 -30.50Q143.56 -32.77 146.46 -34.07Q149.36 -35.36 153.04 -35.36Q158.22 -35.36 161.19 -33.09Q164.15 -30.82 165.40 -27.09Z" fill="currentColor" stroke="currentColor" stroke-width="2.2" stroke-linejoin="round"/></g>
  </g>
</svg>
</div>
    <div class="panel light wordmark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 266 140" width="420" height="221" fill="none" role="img" aria-labelledby="t d">
  <title id="t">Pixies wordmark</title>
  <desc id="d">Pixies mark with outlined Pixies wordmark. Inherits #0B0F14.</desc>
  <g>
    <g transform="translate(-3.52 21.90) scale(0.952)"><path d="M15 63H33L45 23L59 77L69 52" fill="none" stroke="#0B0F14" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/><rect x="66" y="34" width="16" height="16" rx="6" fill="#0B0F14"/><rect x="78" y="19" width="9" height="9" rx="3" fill="#0B0F14"/></g>
    <g transform="translate(93.66 93.60)"><path d="M5.64 0.00V-46.55H21.36Q26.84 -46.55 30.33 -44.58Q33.82 -42.61 35.50 -39.27Q37.18 -35.93 37.18 -31.82Q37.18 -27.70 35.51 -24.34Q33.84 -20.98 30.36 -18.99Q26.89 -17.00 21.45 -17.00H10.18V-22.00H21.27Q25.02 -22.00 27.30 -23.30Q29.57 -24.59 30.60 -26.81Q31.64 -29.02 31.64 -31.82Q31.64 -34.61 30.60 -36.82Q29.57 -39.02 27.27 -40.28Q24.98 -41.55 21.18 -41.55H11.27V0.00Z M44.14 0.00V-34.91H49.50V0.00ZM46.86 -40.73Q45.29 -40.73 44.17 -41.80Q43.04 -42.86 43.04 -44.36Q43.04 -45.86 44.17 -46.93Q45.29 -48.00 46.86 -48.00Q48.43 -48.00 49.56 -46.93Q50.68 -45.86 50.68 -44.36Q50.68 -42.86 49.56 -41.80Q48.43 -40.73 46.86 -40.73Z M61.91 -34.91 70.27 -20.64 78.63 -34.91H84.82L73.54 -17.45L84.82 0.00H78.63L70.27 -13.55L61.91 0.00H55.73L66.82 -17.45L55.73 -34.91Z M91.04 0.00V-34.91H96.41V0.00ZM93.77 -40.73Q92.20 -40.73 91.08 -41.80Q89.95 -42.86 89.95 -44.36Q89.95 -45.86 91.08 -46.93Q92.20 -48.00 93.77 -48.00Q95.34 -48.00 96.46 -46.93Q97.59 -45.86 97.59 -44.36Q97.59 -42.86 96.46 -41.80Q95.34 -40.73 93.77 -40.73Z M119.45 0.73Q114.41 0.73 110.76 -1.51Q107.11 -3.75 105.14 -7.78Q103.18 -11.82 103.18 -17.18Q103.18 -22.55 105.14 -26.65Q107.11 -30.75 110.64 -33.06Q114.18 -35.36 118.91 -35.36Q121.63 -35.36 124.29 -34.45Q126.95 -33.55 129.13 -31.51Q131.31 -29.48 132.61 -26.14Q133.91 -22.80 133.91 -17.91V-15.64H107.00V-20.27H128.45Q128.45 -23.23 127.28 -25.55Q126.11 -27.86 123.96 -29.20Q121.81 -30.55 118.91 -30.55Q115.70 -30.55 113.37 -28.97Q111.04 -27.39 109.79 -24.86Q108.54 -22.34 108.54 -19.45V-16.36Q108.54 -12.41 109.92 -9.67Q111.29 -6.93 113.75 -5.51Q116.20 -4.09 119.45 -4.09Q121.56 -4.09 123.28 -4.69Q125.00 -5.30 126.25 -6.51Q127.50 -7.73 128.18 -9.55L133.36 -8.09Q132.54 -5.45 130.61 -3.47Q128.68 -1.48 125.84 -0.38Q123.00 0.73 119.45 0.73Z M165.40 -27.09 160.59 -25.73Q160.13 -26.93 159.26 -28.08Q158.38 -29.23 156.88 -29.98Q155.38 -30.73 153.04 -30.73Q149.84 -30.73 147.71 -29.26Q145.59 -27.80 145.59 -25.55Q145.59 -23.55 147.04 -22.39Q148.50 -21.23 151.59 -20.45L156.77 -19.18Q161.45 -18.05 163.75 -15.72Q166.04 -13.39 166.04 -9.73Q166.04 -6.73 164.33 -4.36Q162.61 -2.00 159.54 -0.64Q156.47 0.73 152.40 0.73Q147.06 0.73 143.56 -1.59Q140.06 -3.91 139.13 -8.36L144.22 -9.64Q144.95 -6.82 146.98 -5.41Q149.02 -4.00 152.31 -4.00Q156.06 -4.00 158.28 -5.60Q160.50 -7.20 160.50 -9.45Q160.50 -11.27 159.22 -12.51Q157.95 -13.75 155.31 -14.36L149.50 -15.73Q144.70 -16.86 142.46 -19.26Q140.22 -21.66 140.22 -25.27Q140.22 -28.23 141.89 -30.50Q143.56 -32.77 146.46 -34.07Q149.36 -35.36 153.04 -35.36Q158.22 -35.36 161.19 -33.09Q164.15 -30.82 165.40 -27.09Z" fill="#0B0F14" stroke="#0B0F14" stroke-width="2.2" stroke-linejoin="round"/></g>
  </g>
</svg>
</div>
  </section>
  <section class="swatches mono">
    <div class="swatch" style="background:#35E0A0;color:#0B0F14">#35E0A0<span>Pulse</span></div>
    <div class="swatch" style="background:#04785C;color:#F4F7F4">#04785C<span>Pulse Deep</span></div>
    <div class="swatch" style="background:#0B0F14;color:#E6EDF3">#0B0F14<span>Ink</span></div>
    <div class="swatch" style="background:#141A21;color:#E6EDF3">#141A21<span>Ink Raised</span></div>
    <div class="swatch" style="background:#F4F7F4;color:#0B0F14">#F4F7F4<span>Paper</span></div>
    <div class="swatch" style="background:#E6EDF3;color:#0B0F14">#E6EDF3<span>Text Light</span></div>
  </section>
  <footer>The selected direction is the pulse with the detached pixel squares: one stroke, three
  masses, no dial, readable at 16px. See <span class="mono">brand.md</span> for rules.</footer>
</main>
</body>
</html>
bytes
17,149
lines
189
Type
html
Latest commit
26 October 2026