368 lines
34 KiB
HTML
368 lines
34 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'self'; img-src 'self'; font-src 'self'; base-uri 'none'; form-action 'none'">
|
|
<meta name="referrer" content="strict-origin">
|
|
<title>SLYNG brand</title>
|
|
<meta name="description" content="The SLYNG logo, where the Y is a slingshot: the files, how to use them, its colours, type and motion, and every draft it took to get there.">
|
|
<link rel="canonical" href="https://slyng.yolopreneur.lol/branding/">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:title" content="SLYNG brand: the Y is a slingshot">
|
|
<meta property="og:description" content="The logo, its files, colours, type and motion, and every draft it took to get there.">
|
|
<meta property="og:url" content="https://slyng.yolopreneur.lol/branding/">
|
|
<meta property="og:image" content="https://slyng.yolopreneur.lol/branding/img/og.png">
|
|
<meta property="og:image:width" content="1200">
|
|
<meta property="og:image:height" content="630">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="theme-color" content="#111014">
|
|
<link rel="icon" href="img/dir-icon-zap.svg" type="image/svg+xml">
|
|
<link rel="preload" href="../fonts/slyng-condensed-bold.woff" as="font" type="font/woff" crossorigin>
|
|
<link rel="preload" href="../fonts/slyng-text-regular.woff" as="font" type="font/woff" crossorigin>
|
|
<link rel="stylesheet" href="brand.css">
|
|
</head>
|
|
<body>
|
|
<header class="hero">
|
|
<nav class="crumbs wrap" aria-label="Breadcrumb"><a href="../">SLYNG</a><span aria-hidden="true">/</span><span aria-current="page">Brand</span></nav>
|
|
<div class="reel"><picture><source srcset="img/wm-final-still-dark.svg" media="(prefers-reduced-motion: reduce)"><img src="img/wm-final-anim-dark.webp" alt="The SLYNG logo in motion: the band snaps straight and fires the stone out of the top, rings out, catches a new stone and draws it back down onto the vertex of the Y" width="1200" height="400"></picture></div>
|
|
<div class="intro wrap">
|
|
<h1>The Y is a slingshot.</h1>
|
|
<div>
|
|
<p>The SLYNG logo is the name in Unbounded ExtraBold with the Y doing the slinging: a volt stone on the vertex, and the band drawn up the inside of the arms to the tips. Here are the files, how to use them, and every draft it took to get here.</p>
|
|
<p class="jump"><a href="#files">Get the files</a><a href="#drafts">See every draft</a></p>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="part" id="logo" aria-labelledby="logo-h">
|
|
<div class="wrap">
|
|
<h2 id="logo-h">The logo</h2>
|
|
<p class="lede">Two versions, one drawing. White letters on ink, or ink letters on bone or white. On a light ground the bands and the stone get an ink outline, because volt alone disappears against it.</p>
|
|
<div class="pair">
|
|
<figure class="tile"><div class="ground g-ink big"><img src="img/wm-logo-dark.svg" alt="The SLYNG logo in white on ink" width="1200" height="225" loading="lazy" decoding="async"></div>
|
|
<figcaption>For ink and other dark grounds</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-bone big"><img src="img/wm-logo-light.svg" alt="The SLYNG logo in ink on bone" width="1200" height="225" loading="lazy" decoding="async"></div>
|
|
<figcaption>For bone, white and other light grounds</figcaption></figure>
|
|
</div>
|
|
<div class="anatomy">
|
|
<figure class="tile"><div class="ground g-ink closeup"><img src="img/wm-logo-y.svg" alt="Close-up of the Y: the stone on the vertex, the bands inside the arms, cut flush with the tips" width="1200" height="989" loading="lazy" decoding="async"></div>
|
|
</figure>
|
|
<dl>
|
|
<dt>The Y</dt><dd>Unbounded's own Y, untouched. It is the slingshot.</dd>
|
|
<dt>The stone</dt><dd>A volt circle centred on the vertex of the fork, 16.4% of the letter height across.</dd>
|
|
<dt>The bands</dt><dd>5.6% of the letter height wide, parallel to the inside edges of the arms, from the stone to the tips, cut flush with the tops of the letters.</dd>
|
|
<dt>The gap</dt><dd>A hairline, 2.2% of the letter height, between each band and its arm and around the stone: the ground itself on ink, an ink outline on light grounds.</dd>
|
|
<dt>Spacing</dt><dd>The letters keep Unbounded's own widths, with L and Y set 40 units (of 1,000) closer. Keep clear space of at least half the letter height on every side.</dd>
|
|
<dt>Size</dt><dd>At least 200 pixels wide on screens and 35 mm in print. Smaller, and the hairline gap fills in: use the icon.</dd>
|
|
</dl>
|
|
</div>
|
|
<ul class="donts">
|
|
<li>Use the files. Don't retype the name, even in Unbounded: the bands and the stone aren't in the font.</li>
|
|
<li>Keep the band and the stone volt. Don't change the colours, add effects, or stretch it.</li>
|
|
<li>White letters go on ink; ink letters go on bone or white. Not on photos or busy grounds.</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="part" id="icon" aria-labelledby="icon-h">
|
|
<div class="wrap">
|
|
<h2 id="icon-h">The icon</h2>
|
|
<p class="lede">Where the name won't fit: an app icon, a profile picture, a favicon. It is concept 5's slingshot in the logo's colours, white on ink with the band and stone in volt, or reversed, ink on volt.</p>
|
|
<div class="tiles three">
|
|
<figure class="tile"><div class="ground g-bone icon"><img src="img/dir-icon-zap.svg" alt="The SLYNG app icon: a white slingshot with a volt band and stone on ink" width="1200" height="1200" loading="lazy" decoding="async"></div>
|
|
<figcaption>The icon</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-ink icon"><img src="img/dir-icon-volt.svg" alt="The SLYNG app icon reversed: an ink slingshot on volt" width="1200" height="1200" loading="lazy" decoding="async"></div>
|
|
<figcaption>Reversed</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-bone icon"><picture><source srcset="img/dir-icon-zap.svg" media="(prefers-reduced-motion: reduce)"><img src="img/icon-pull-release.webp" alt="The SLYNG icon in motion: the band pulls back, lets the stone fly, rings out, and a new stone drops in" width="1200" height="1200" loading="lazy" decoding="async"></picture></div>
|
|
<figcaption>In motion</figcaption></figure>
|
|
</div>
|
|
<ul class="ladder" aria-label="The icon from 180 pixels down to 20"><li><img src="img/dir-icon-zap.svg" alt="" width="1200" height="1200" loading="lazy" decoding="async" class="px180"><span>180 px</span></li>
|
|
<li><img src="img/dir-icon-zap.svg" alt="" width="1200" height="1200" loading="lazy" decoding="async" class="px120"><span>120 px</span></li>
|
|
<li><img src="img/dir-icon-zap.svg" alt="" width="1200" height="1200" loading="lazy" decoding="async" class="px64"><span>64 px</span></li>
|
|
<li><img src="img/dir-icon-zap.svg" alt="" width="1200" height="1200" loading="lazy" decoding="async" class="px44"><span>44 px</span></li>
|
|
<li><img src="img/dir-icon-zap.svg" alt="" width="1200" height="1200" loading="lazy" decoding="async" class="px32"><span>32 px</span></li>
|
|
<li><img src="img/dir-icon-zap.svg" alt="" width="1200" height="1200" loading="lazy" decoding="async" class="px20"><span>20 px</span></li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="part" id="files" aria-labelledby="files-h">
|
|
<div class="wrap">
|
|
<h2 id="files-h">Files</h2>
|
|
<ul class="files">
|
|
<li><a href="img/wm-logo-dark.svg" download="slyng-logo-on-dark.svg">Logo for dark grounds</a><span>SVG, white letters, transparent ground</span></li>
|
|
<li><a href="img/wm-logo-light.svg" download="slyng-logo-on-light.svg">Logo for light grounds</a><span>SVG, ink letters, transparent ground</span></li>
|
|
<li><a href="img/dir-icon-zap.svg" download="slyng-icon.svg">App icon</a><span>SVG, 1024 square</span></li>
|
|
<li><a href="img/dir-icon-volt.svg" download="slyng-icon-reversed.svg">App icon, reversed</a><span>SVG, 1024 square</span></li>
|
|
<li><a href="img/wm-final-anim-dark.webp" download="slyng-logo-motion-on-ink.webp">Logo in motion, on ink</a><span>Animated WebP, 1800 by 600, 3-second loop</span></li>
|
|
<li><a href="img/wm-final-anim-light.webp" download="slyng-logo-motion-on-bone.webp">Logo in motion, on bone</a><span>Animated WebP, 1800 by 600, 3-second loop</span></li>
|
|
<li><a href="img/icon-pull-release.webp" download="slyng-icon-motion.webp">Icon in motion</a><span>Animated WebP, 512 square, transparent corners</span></li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="part" id="colour" aria-labelledby="colour-h">
|
|
<div class="wrap">
|
|
<h2 id="colour-h">Colour</h2>
|
|
<p class="lede">Four colours, used about in these proportions. Volt is only ever the sling: the band, the stone, and the ground of the reversed icon.</p>
|
|
<ul class="swatches">
|
|
<li class="sw sw-ink"><b>Ink</b><span>#111014</span><span>RGB 17 16 20</span></li>
|
|
<li class="sw sw-bone"><b>Bone</b><span>#F1F0EC</span><span>RGB 241 240 236</span></li>
|
|
<li class="sw sw-white"><b>White</b><span>#FFFFFF</span><span>RGB 255 255 255</span></li>
|
|
<li class="sw sw-volt"><b>Volt</b><span>#D9FF3D</span><span>RGB 217 255 61</span></li>
|
|
</ul>
|
|
<p class="note">White on ink reads at 19:1, and volt on ink at 16.5:1. Volt on white or bone is barely there (1.2:1 and 1.0:1), which is why the light logo outlines it in ink.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="part" id="type" aria-labelledby="type-h">
|
|
<div class="wrap">
|
|
<h2 id="type-h">Type</h2>
|
|
<div class="type-grid">
|
|
<figure class="tile"><div class="ground g-bone spec"><img src="img/type-unbounded.svg" alt="Unbounded ExtraBold, A to Z and 0 to 9" width="1200" height="292" loading="lazy" decoding="async"></div>
|
|
</figure>
|
|
<div>
|
|
<h3>Unbounded ExtraBold</h3>
|
|
<p>The logo is drawn from Unbounded at weight 800, a wide, rounded sans by NaN, free from Google Fonts under the SIL Open Font License. Its Y has straight arms that meet at a sharp vertex, which is what lets the bands run along them and the stone sit on the point.</p>
|
|
<h3>Slyng Condensed and Slyng Text</h3>
|
|
<p class="sample-cond">Pull back for more</p>
|
|
<p class="sample-text">The site sets its headings in Slyng Condensed and everything you read in Slyng Text, cut from TeX Gyre Heros Condensed and TeX Gyre Adventor.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="part" id="motion" aria-labelledby="motion-h">
|
|
<div class="wrap">
|
|
<h2 id="motion-h">Motion</h2>
|
|
<p class="lede">When the logo moves, it fires. A three-second loop that starts and ends in the logo pose, so it can stop after any loop and leave the logo standing.</p>
|
|
<div class="pair side">
|
|
<figure class="tile"><div class="ground g-ink bleed"><picture><source srcset="img/wm-final-still-dark.svg" media="(prefers-reduced-motion: reduce)"><img src="img/wm-final-anim-dark.webp" alt="The SLYNG logo in motion, on ink" width="1200" height="400" loading="lazy" decoding="async"></picture></div>
|
|
<figcaption>On ink</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-bone bleed"><picture><source srcset="img/wm-final-still-light.svg" media="(prefers-reduced-motion: reduce)"><img src="img/wm-final-anim-light.webp" alt="The SLYNG logo in motion, on bone" width="1200" height="400" loading="lazy" decoding="async"></picture></div>
|
|
<figcaption>On bone</figcaption></figure>
|
|
</div>
|
|
<ol class="beats">
|
|
<li><b>Hold</b><span>0 to 0.5 s</span>The logo, still. In the last moments the stone trembles.</li>
|
|
<li><b>Release</b><span>0.5 to 0.6 s</span>The band snaps up, straight across the tips.</li>
|
|
<li><b>Flight</b><span>0.6 to 0.7 s</span>The stone flies out of the top, getting smaller.</li>
|
|
<li><b>Ring out</b><span>0.6 to 1.8 s</span>The empty band rings around straight and settles.</li>
|
|
<li><b>Reload</b><span>1.8 to 2.3 s</span>A new stone drops in, and the band catches it in a shallow V.</li>
|
|
<li><b>Draw back</b><span>2.3 to 2.8 s</span>The pouch slides down the arms until the stone sits on the vertex.</li>
|
|
<li><b>Hold</b><span>2.8 to 3 s</span>And it loops.</li>
|
|
</ol>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="part drafts" id="drafts" aria-labelledby="drafts-h">
|
|
<div class="wrap">
|
|
<h2 id="drafts-h">How it got here</h2>
|
|
<p class="lede">Every draft, in the order it was made, over six rounds. Each round ends with what changed next; the <span class="stone" aria-hidden="true"></span>stone marks what was picked.</p>
|
|
<section class="round" id="round-1" aria-labelledby="round-1-h"><header class="round-head"><p class="num" aria-hidden="true">1</p>
|
|
<div><h3 id="round-1-h"><span class="sr">Round 1: </span>Eight ways in</h3><p>The brief was the name with its Y as a slingshot. Eight concepts, each with its own typeface and colours.</p>
|
|
</div>
|
|
</header>
|
|
<div class="concept" id="concept-1"><div class="concept-meta"><h4><span class="cn"><span class="sr">Concept </span>1</span>Loaded</h4><p class="face">Lexend ExtraBold</p>
|
|
<p>The Y is a slingshot with a red band, and the stone sits in the pouch, ready.</p>
|
|
</div>
|
|
<div class="tiles two"><figure class="tile"><div class="ground g-bone"><img src="img/c1-main.svg" alt="SLYNG wordmark: the Y is a slingshot loaded with a stone" width="1200" height="260" loading="lazy" decoding="async"></div>
|
|
<figcaption>On bone</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-ink"><img src="img/c1-inv.svg" alt="SLYNG wordmark, Loaded, reversed on ink" width="1200" height="260" loading="lazy" decoding="async"></div>
|
|
<figcaption>Reversed</figcaption></figure>
|
|
</div>
|
|
</div>
|
|
<div class="concept" id="concept-2"><div class="concept-meta"><h4><span class="cn"><span class="sr">Concept </span>2</span>Full draw</h4><p class="face">Archivo, black and extra wide</p>
|
|
<p>The band is pulled all the way back, below the word, about to let go.</p>
|
|
</div>
|
|
<div class="tiles two"><figure class="tile"><div class="ground g-red"><img src="img/c2-main.svg" alt="SLYNG wordmark: the slingshot Y with its band pulled all the way back below the word" width="1200" height="314" loading="lazy" decoding="async"></div>
|
|
<figcaption>On vermilion</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-ink"><img src="img/c2-inv.svg" alt="SLYNG wordmark reversed on ink with a vermilion band" width="1200" height="314" loading="lazy" decoding="async"></div>
|
|
<figcaption>Reversed</figcaption></figure>
|
|
</div>
|
|
</div>
|
|
<div class="concept" id="concept-3"><div class="concept-meta"><h4><span class="cn"><span class="sr">Concept </span>3</span>Pocket</h4><p class="face">Fredoka SemiBold, lowercase</p>
|
|
<p>A pocket slingshot: the y's descender becomes the handle.</p>
|
|
</div>
|
|
<div class="tiles two"><figure class="tile"><div class="ground g-peri"><img src="img/c3-main.svg" alt="Lowercase slyng wordmark: the y is a pocket slingshot whose descender is the handle" width="1200" height="490" loading="lazy" decoding="async"></div>
|
|
<figcaption>On periwinkle</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-ink"><img src="img/c3-inv.svg" alt="slyng wordmark in periwinkle on ink" width="1200" height="490" loading="lazy" decoding="async"></div>
|
|
<figcaption>Reversed</figcaption></figure>
|
|
</div>
|
|
</div>
|
|
<div class="concept" id="concept-4"><div class="concept-meta"><h4><span class="cn"><span class="sr">Concept </span>4</span>Landing dot</h4><p class="face">Sora ExtraBold</p>
|
|
<p>The stone has flown: it lands as the dot in the three front doors, slyng.app, slyng.money and slyng.ing.</p>
|
|
</div>
|
|
<div class="tiles two"><figure class="tile"><div class="ground g-white"><img src="img/c4-app.svg" alt="SLYNG.app lockup: the stone flies from the slingshot Y and lands as the domain dot" width="1200" height="309" loading="lazy" decoding="async"></div>
|
|
<figcaption>.app</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-white"><img src="img/c4-money.svg" alt="SLYNG.money lockup" width="1200" height="248" loading="lazy" decoding="async"></div>
|
|
<figcaption>.money</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-white"><img src="img/c4-ing.svg" alt="SLYNG.ing lockup" width="1200" height="331" loading="lazy" decoding="async"></div>
|
|
<figcaption>.ing</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-ink"><img src="img/c4-inv.svg" alt="SLYNG.app lockup reversed on ink" width="1200" height="309" loading="lazy" decoding="async"></div>
|
|
<figcaption>Reversed</figcaption></figure>
|
|
</div>
|
|
</div>
|
|
<div class="concept" id="concept-5"><div class="concept-meta"><h4><span class="cn chosen"><span class="sr">Concept </span>5</span>App icon</h4><p class="face">The slingshot on its own</p>
|
|
<p>The slingshot alone in a rounded square, made to be an app icon, and locked up with Loaded.</p>
|
|
<p class="picked"><span class="stone" aria-hidden="true"></span>Picked: this icon</p>
|
|
</div>
|
|
<div class="tiles two"><figure class="tile"><div class="ground g-bone icon"><img src="img/c5-ink.svg" alt="SLYNG app icon: a white slingshot with a vermilion band and stone on ink" width="1200" height="1200" loading="lazy" decoding="async"></div>
|
|
<figcaption>Ink</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-bone icon"><img src="img/c5-red.svg" alt="SLYNG app icon: an ink slingshot with a white band on vermilion" width="1200" height="1200" loading="lazy" decoding="async"></div>
|
|
<figcaption>Vermilion</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-white"><img src="img/c5-lockup.svg" alt="SLYNG app icon locked up with the Loaded wordmark" width="1200" height="244" loading="lazy" decoding="async"></div>
|
|
<figcaption>With the wordmark</figcaption></figure>
|
|
</div>
|
|
</div>
|
|
<div class="concept" id="concept-6"><div class="concept-meta"><h4><span class="cn"><span class="sr">Concept </span>6</span>Price sticker</h4><p class="face">Big Shoulders Display Black</p>
|
|
<p>A flea-market price sticker for the market, with a price tag loaded in the Y and Local goods and Digital goods around the edge.</p>
|
|
</div>
|
|
<div class="tiles two"><figure class="tile"><div class="ground g-concrete sticker"><img src="img/c6-yellow.svg" alt="Yellow flea-market price sticker: SLYNG with a price tag loaded in the slingshot Y, ringed by Local goods and Digital goods" width="1200" height="1191" loading="lazy" decoding="async"></div>
|
|
<figcaption>Yellow</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-concrete sticker"><img src="img/c6-orange.svg" alt="Orange version of the price sticker" width="1200" height="1191" loading="lazy" decoding="async"></div>
|
|
<figcaption>Orange</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-concrete sticker"><img src="img/c6-green.svg" alt="Green version of the price sticker" width="1200" height="1191" loading="lazy" decoding="async"></div>
|
|
<figcaption>Green</figcaption></figure>
|
|
</div>
|
|
</div>
|
|
<div class="concept" id="concept-7"><div class="concept-meta"><h4><span class="cn"><span class="sr">Concept </span>7</span>Monoline</h4><p class="face">Drawn from circles and lines</p>
|
|
<p>Every letter built from circles and straight lines of one weight, shown with its construction.</p>
|
|
</div>
|
|
<div class="tiles two"><figure class="tile"><div class="ground g-cobalt"><img src="img/c7-construct.svg" alt="Monoline SLYNG wordmark drawn from circles and straight lines, with its construction guides showing" width="1200" height="372" loading="lazy" decoding="async"></div>
|
|
<figcaption>With its construction</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-ink"><img src="img/c7-clean.svg" alt="Monoline SLYNG wordmark on ink, without guides" width="1200" height="338" loading="lazy" decoding="async"></div>
|
|
<figcaption>Clean</figcaption></figure>
|
|
</div>
|
|
</div>
|
|
<div class="concept" id="concept-8"><div class="concept-meta"><h4><span class="cn chosen"><span class="sr">Concept </span>8</span>Zap</h4><p class="face">Unbounded ExtraBold</p>
|
|
<p>A lightning bolt is loaded in the Y: sats travel as zaps. Ink and volt.</p>
|
|
<p class="picked"><span class="stone" aria-hidden="true"></span>Picked: these colours</p>
|
|
</div>
|
|
<div class="tiles two"><figure class="tile"><div class="ground g-ink"><img src="img/c8-main.svg" alt="SLYNG wordmark: the slingshot Y is loaded with a lightning bolt" width="1200" height="229" loading="lazy" decoding="async"></div>
|
|
<figcaption>On ink</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-volt"><img src="img/c8-inv.svg" alt="SLYNG wordmark in ink on volt" width="1200" height="229" loading="lazy" decoding="async"></div>
|
|
<figcaption>On volt</figcaption></figure>
|
|
</div>
|
|
</div>
|
|
<p class="after"><span>Next: concept 5, the app icon, in the colours of concept 8.</span></p>
|
|
</section>
|
|
<section class="round" id="round-2" aria-labelledby="round-2-h"><header class="round-head"><p class="num" aria-hidden="true">2</p>
|
|
<div><h3 id="round-2-h"><span class="sr">Round 2: </span>The icon in Zap's colours</h3><p>Concept 5's slingshot in white on ink with the band and stone in volt, and reversed in ink on volt. Lockups with Lexend and Unbounded; on ink, the bare slingshot stands in front of the word. And the first motion: pull back, let go, ring out, reload.</p>
|
|
</div>
|
|
</header>
|
|
<div class="tiles three"><figure class="tile"><div class="ground g-bone icon"><img src="img/dir-icon-zap.svg" alt="SLYNG app icon: a white slingshot with a volt band and stone on ink" width="1200" height="1200" loading="lazy" decoding="async"></div>
|
|
<figcaption><span class="stone" aria-hidden="true"></span>The icon</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-ink icon"><img src="img/dir-icon-volt.svg" alt="SLYNG app icon reversed: an ink slingshot on volt" width="1200" height="1200" loading="lazy" decoding="async"></div>
|
|
<figcaption>Reversed</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-bone icon"><picture><source srcset="img/dir-icon-zap.svg" media="(prefers-reduced-motion: reduce)"><img src="img/icon-pull-release.webp" alt="Animated SLYNG icon: the band pulls back, lets the stone fly, rings out, and a new stone drops in" width="1200" height="1200" loading="lazy" decoding="async"></picture></div>
|
|
<figcaption><span class="stone" aria-hidden="true"></span>Pull and release</figcaption></figure>
|
|
</div>
|
|
<div class="tiles two"><figure class="tile"><div class="ground g-bone"><img src="img/dir-lockup-lexend-light.svg" alt="SLYNG icon and wordmark lockup in Lexend, on bone" width="1200" height="240" loading="lazy" decoding="async"></div>
|
|
<figcaption>Lexend, on bone</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-ink"><img src="img/dir-lockup-lexend-dark.svg" alt="SLYNG slingshot and wordmark lockup in Lexend, on ink" width="1200" height="235" loading="lazy" decoding="async"></div>
|
|
<figcaption>Lexend, on ink</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-bone"><img src="img/dir-lockup-unbounded-light.svg" alt="SLYNG icon and wordmark lockup in Unbounded, on bone" width="1200" height="217" loading="lazy" decoding="async"></div>
|
|
<figcaption>Unbounded, on bone</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-ink"><img src="img/dir-lockup-unbounded-dark.svg" alt="SLYNG slingshot and wordmark lockup in Unbounded, on ink" width="1200" height="212" loading="lazy" decoding="async"></div>
|
|
<figcaption>Unbounded, on ink</figcaption></figure>
|
|
</div>
|
|
<ol class="story" aria-label="The pull and release, frame by frame"><li><div class="ground g-white"><img src="img/story-1-loaded.svg" alt="" width="1200" height="1200" loading="lazy" decoding="async"></div>
|
|
<span>Loaded</span></li>
|
|
<li><div class="ground g-white"><img src="img/story-2-drawn.svg" alt="" width="1200" height="1200" loading="lazy" decoding="async"></div>
|
|
<span>Drawn back</span></li>
|
|
<li><div class="ground g-white"><img src="img/story-3-release.svg" alt="" width="1200" height="1200" loading="lazy" decoding="async"></div>
|
|
<span>Released</span></li>
|
|
<li><div class="ground g-white"><img src="img/story-4-empty.svg" alt="" width="1200" height="1200" loading="lazy" decoding="async"></div>
|
|
<span>Empty</span></li>
|
|
<li><div class="ground g-white"><img src="img/story-5-reload.svg" alt="" width="1200" height="1200" loading="lazy" decoding="async"></div>
|
|
<span>Reloading</span></li>
|
|
</ol><p class="after"><span>Next: make the icon the Y of the wordmark.</span></p>
|
|
</section>
|
|
<section class="round" id="round-3" aria-labelledby="round-3-h"><header class="round-head"><p class="num" aria-hidden="true">3</p>
|
|
<div><h3 id="round-3-h"><span class="sr">Round 3: </span>The icon as the Y</h3><p>The whole app icon set into the word as its Y, in Unbounded and in Lexend, with the pull and release playing inside it.</p>
|
|
</div>
|
|
</header>
|
|
<div class="tiles two"><figure class="tile"><div class="ground g-bone"><img src="img/wm-icony-unbounded-light.svg" alt="SLYNG in Unbounded where the Y is the app icon, on bone" width="1200" height="233" loading="lazy" decoding="async"></div>
|
|
<figcaption>Unbounded, on bone</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-ink"><img src="img/wm-icony-unbounded-dark.svg" alt="SLYNG in Unbounded where the Y is the app icon, on ink" width="1200" height="233" loading="lazy" decoding="async"></div>
|
|
<figcaption>Unbounded, on ink</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-bone"><img src="img/wm-icony-lexend-light.svg" alt="SLYNG in Lexend where the Y is the app icon, on bone" width="1200" height="262" loading="lazy" decoding="async"></div>
|
|
<figcaption>Lexend, on bone</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-ink"><img src="img/wm-icony-lexend-dark.svg" alt="SLYNG in Lexend where the Y is the app icon, on ink" width="1200" height="262" loading="lazy" decoding="async"></div>
|
|
<figcaption>Lexend, on ink</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-ink"><picture><source srcset="img/wm-icony-unbounded-dark.svg" media="(prefers-reduced-motion: reduce)"><img src="img/wm-anim-unbounded-dark.webp" alt="Animated: the icon in the Y pulls back and lets go, on ink" width="1200" height="234" loading="lazy" decoding="async"></picture></div>
|
|
<figcaption><span class="stone" aria-hidden="true"></span>In motion, on ink</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-bone"><picture><source srcset="img/wm-icony-unbounded-light.svg" media="(prefers-reduced-motion: reduce)"><img src="img/wm-anim-unbounded-light.webp" alt="Animated: the icon in the Y pulls back and lets go, on bone" width="1200" height="234" loading="lazy" decoding="async"></picture></div>
|
|
<figcaption><span class="stone" aria-hidden="true"></span>In motion, on bone</figcaption></figure>
|
|
</div>
|
|
<p class="after"><span>Next: not the whole icon, only the bare slingshot, the way it stood in front of the word on ink. The motion stays.</span></p>
|
|
</section>
|
|
<section class="round" id="round-4" aria-labelledby="round-4-h"><header class="round-head"><p class="num" aria-hidden="true">4</p>
|
|
<div><h3 id="round-4-h"><span class="sr">Round 4: </span>The bare slingshot as the Y</h3><p>The clean slingshot stands in for the Y. Without the icon's square around it, the stone leaves through the top of the frame and the next one drops back in the same way.</p>
|
|
</div>
|
|
</header>
|
|
<div class="tiles two"><figure class="tile"><div class="ground g-ink"><img src="img/wm-sling-unbounded-dark.svg" alt="SLYNG in Unbounded with the bare slingshot as the Y, on ink" width="1200" height="245" loading="lazy" decoding="async"></div>
|
|
<figcaption>Unbounded, on ink</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-bone"><img src="img/wm-sling-unbounded-light-volt.svg" alt="SLYNG in Unbounded with the bare slingshot as the Y, on bone" width="1200" height="245" loading="lazy" decoding="async"></div>
|
|
<figcaption>Unbounded, on bone</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-ink"><img src="img/wm-sling-lexend-dark.svg" alt="SLYNG in Lexend with the bare slingshot as the Y, on ink" width="1200" height="278" loading="lazy" decoding="async"></div>
|
|
<figcaption>Lexend, on ink</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-bone"><img src="img/wm-sling-lexend-light-volt.svg" alt="SLYNG in Lexend with the bare slingshot as the Y, on bone" width="1200" height="278" loading="lazy" decoding="async"></div>
|
|
<figcaption>Lexend, on bone</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-ink"><picture><source srcset="img/wm-sling-unbounded-dark.svg" media="(prefers-reduced-motion: reduce)"><img src="img/wm-sling-anim-unbounded-dark.webp" alt="Animated: the bare slingshot Y fires its stone out of the top of the frame, on ink" width="1200" height="440" loading="lazy" decoding="async"></picture></div>
|
|
<figcaption>In motion, on ink</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-bone"><picture><source srcset="img/wm-sling-unbounded-light-volt.svg" media="(prefers-reduced-motion: reduce)"><img src="img/wm-sling-anim-unbounded-light-volt.webp" alt="Animated: the bare slingshot Y fires its stone out of the top of the frame, on bone" width="1200" height="440" loading="lazy" decoding="async"></picture></div>
|
|
<figcaption>In motion, on bone</figcaption></figure>
|
|
</div>
|
|
<p class="after"><span>Next: a Y drawn in the same style as the other letters, the band lined up with its arms, and a dark animation without the shimmer.</span></p>
|
|
</section>
|
|
<section class="round" id="round-5" aria-labelledby="round-5-h"><header class="round-head"><p class="num" aria-hidden="true">5</p>
|
|
<div><h3 id="round-5-h"><span class="sr">Round 5: </span>Unbounded's own Y</h3><p>Two takes. Unbounded's own Y, untouched, with the band along the inside of its arms and the stone in the fork; and the rounded slingshot, drawn to the weight of the letters. The motion is now rendered as whole, opaque, lossless frames, which is what stops the shimmer on ink.</p>
|
|
</div>
|
|
</header>
|
|
<div class="tiles two"><figure class="tile"><div class="ground g-ink"><img src="img/wm-final-font-dark.svg" alt="SLYNG in white Unbounded on ink; the Y is Unbounded's own Y with a volt band along its arms and a volt stone in the fork" width="1200" height="225" loading="lazy" decoding="async"></div>
|
|
<figcaption><span class="stone" aria-hidden="true"></span>Own Y, on ink</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-ink"><img src="img/wm-final-round-dark.svg" alt="SLYNG in white Unbounded on ink; the Y is the rounded slingshot with the band along its arms" width="1200" height="245" loading="lazy" decoding="async"></div>
|
|
<figcaption>Rounded Y, on ink</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-bone"><img src="img/wm-final-font-light.svg" alt="SLYNG in ink Unbounded on bone; the Y is Unbounded's own Y with an ink-outlined volt band along its arms" width="1200" height="225" loading="lazy" decoding="async"></div>
|
|
<figcaption>Own Y, on bone</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-bone"><img src="img/wm-final-round-light.svg" alt="SLYNG in ink Unbounded on bone; the Y is the rounded slingshot with the band along its arms" width="1200" height="245" loading="lazy" decoding="async"></div>
|
|
<figcaption>Rounded Y, on bone</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-ink bleed"><picture><source srcset="img/wm-final-font-dark.svg" media="(prefers-reduced-motion: reduce)"><img src="img/wm-font-anim-font-dark.webp" alt="Animated: Unbounded's own Y pulls back and fires, on ink" width="1200" height="400" loading="lazy" decoding="async"></picture></div>
|
|
<figcaption>In motion, on ink</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-bone bleed"><picture><source srcset="img/wm-final-font-light.svg" media="(prefers-reduced-motion: reduce)"><img src="img/wm-font-anim-font-light.webp" alt="Animated: Unbounded's own Y pulls back and fires, on bone" width="1200" height="400" loading="lazy" decoding="async"></picture></div>
|
|
<figcaption>In motion, on bone</figcaption></figure>
|
|
</div>
|
|
<p class="after"><span>Next: the own Y on ink was the closest. The stone moves down onto the vertex, the bands run along the edges of the Y all the way to the tips, and the motion goes back to the earlier sequence.</span></p>
|
|
</section>
|
|
<section class="round" id="round-6" aria-labelledby="round-6-h"><header class="round-head"><p class="num" aria-hidden="true">6</p>
|
|
<div><h3 id="round-6-h"><span class="sr">Round 6: </span>The logo</h3><p>The stone sits on the vertex. The bands run up the inside of the arms, a hairline from the edge, and stop flush with the tops of the letters. The motion is the earlier pull and release again, and every loop ends in the logo pose.</p>
|
|
</div>
|
|
</header>
|
|
<div class="tiles two"><figure class="tile"><div class="ground g-ink"><img src="img/wm-logo-dark.svg" alt="The SLYNG logo in white on ink" width="1200" height="225" loading="lazy" decoding="async"></div>
|
|
<figcaption>On ink</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-bone"><img src="img/wm-logo-light.svg" alt="The SLYNG logo in ink on bone" width="1200" height="225" loading="lazy" decoding="async"></div>
|
|
<figcaption>On bone</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-ink bleed"><picture><source srcset="img/wm-final-still-dark.svg" media="(prefers-reduced-motion: reduce)"><img src="img/wm-final-anim-dark.webp" alt="The SLYNG logo in motion, on ink" width="1200" height="400" loading="lazy" decoding="async"></picture></div>
|
|
<figcaption>In motion, on ink</figcaption></figure>
|
|
<figure class="tile"><div class="ground g-bone bleed"><picture><source srcset="img/wm-final-still-light.svg" media="(prefers-reduced-motion: reduce)"><img src="img/wm-final-anim-light.webp" alt="The SLYNG logo in motion, on bone" width="1200" height="400" loading="lazy" decoding="async"></picture></div>
|
|
<figcaption>In motion, on bone</figcaption></figure>
|
|
</div>
|
|
<p class="after"><span>Picked: this is the logo, the one at the top of this page.</span></p>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="foot">
|
|
<div class="wrap">
|
|
<p>SLYNG is a venture on <a href="https://yolopreneur.lol/">yolopreneur.lol</a>, made by Claude in October 2026. The logo and every draft on this page were drawn in code, and <a href="../tools/brand/make.py">tools/brand/make.py</a> makes them all again, byte for byte.</p>
|
|
<p>Unbounded, Lexend, Archivo, Fredoka, Sora and Big Shoulders Display come from Google Fonts under the SIL Open Font License. This page is set in Slyng Condensed and Slyng Text, under the <a href="../fonts/GUST-FONT-LICENSE.txt">GUST Font License</a>.</p>
|
|
<p><a href="../">Back to SLYNG</a></p>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|