Brand mark: scallop ribbon shape, app icon in light / dark / tinted
The mark is one closed path with a scalloped baseline — four tails, rounded cap — rather than a stack of separate ribbons. That is the whole design decision. A logo gets tested at 16pt in a Spotlight result and in iOS 26's tinted and monochrome icon modes, where the palette is discarded and only the silhouette survives. Arrangements of N separate ribbons collapse into a blob under both, because the shapes were only ever told apart by colour; a scalloped outline is told apart by its own edge, so it reads the same tinted, monochrome, and 16pt tall. ScallopMark defines geometry in a canonical 88x98 box and fits it to whatever rect it is handed, so proportions cannot drift with the container. MarksMark adds the three bands as a hard-stopped gradient, keeping it a single fillable shape. The bands are Paper.swatchPairs entries rather than bespoke brand colours: the app already hashes every bookmark into that palette, so the mark is made of the same ink as the content. App icon ships all three variants per Apple's iOS 18+ model — light flattened (iOS rejects an alpha channel there), dark and tinted on transparency for the system to composite. The tinted variant carries three greys ordered by the colour version's relative luminance rather than one flat grey, so the band reading survives the one mode that has nothing else left. The PNGs are build output: edit scripts/appicon/appicon.html and re-run generate.sh. docs/logo-variants.html and docs/logo-c1-variants.html are the exploration the choice came out of. Verified: SwiftUI shape rendered through ImageRenderer matches the SVG at every size from 160pt to 16pt; assetutil confirms all three renditions in the compiled catalog with the correct appearance tags; installed on a simulator and checked against the home screen. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Krishna Kumar
co-authored by
Claude Opus 5
Claude Opus 5
parent
b3d8719874
commit
bc65bb586c
@@ -0,0 +1,447 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Marks — logo variants</title>
|
||||
<style>
|
||||
:root{
|
||||
--ink:#14110C; --sheet:#F8F5EF; --rule:rgba(20,17,12,.16);
|
||||
--mono:ui-monospace,SFMono-Regular,Menlo,monospace;
|
||||
--serif:ui-serif,Georgia,"Times New Roman",serif;
|
||||
}
|
||||
*{box-sizing:border-box}
|
||||
body{margin:0;background:#EFEBE3;color:var(--ink);font-family:var(--mono);font-size:12px;-webkit-font-smoothing:antialiased}
|
||||
header{padding:56px 40px 28px;border-bottom:1px solid var(--rule)}
|
||||
h1{font-family:var(--serif);font-size:34px;font-weight:400;margin:0 0 8px}
|
||||
header p{margin:0;max-width:60ch;line-height:1.7;opacity:.62}
|
||||
section{padding:40px;border-bottom:1px solid var(--rule)}
|
||||
h2{font-family:var(--serif);font-size:22px;font-weight:400;margin:0 0 4px}
|
||||
.sub{opacity:.55;margin:0 0 28px;line-height:1.7;max-width:72ch}
|
||||
.tag{display:inline-block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.45;margin-bottom:10px}
|
||||
|
||||
/* ---- palettes: geometry is shared, colour is injected ---- */
|
||||
.pal{--c1:#22C7F0;--c2:#8B4DEE;--dot:#fff;--bg:#fff}
|
||||
.p-orig {--c1:#22C7F0;--c2:#8B4DEE;--dot:#fff; --bg:#fff}
|
||||
.p-paper{--c1:#001A55;--c2:#ED663F;--dot:#F8F5EF;--bg:#F8F5EF} /* navy + vermilion */
|
||||
.p-ink {--c1:#14110C;--c2:#ED663F;--dot:#F8F5EF;--bg:#F8F5EF} /* ink + vermilion */
|
||||
.p-warm {--c1:#FECD00;--c2:#ED663F;--dot:#14110C;--bg:#F8F5EF} /* yellow + vermilion */
|
||||
.p-blue {--c1:#115AB5;--c2:#033B00;--dot:#F8F5EF;--bg:#F8F5EF} /* blue + forest */
|
||||
.p-dark {--c1:#5B8FD0;--c2:#E07A5C;--dot:#15130F;--bg:#15130F} /* dark-mode pair */
|
||||
.p-mono1{--c1:#14110C;--c2:#14110C;--dot:#F8F5EF;--bg:#F8F5EF} /* single-colour test */
|
||||
|
||||
.grid{display:flex;flex-wrap:wrap;gap:18px}
|
||||
.card{background:var(--bg);border:1px solid var(--rule);border-radius:14px;padding:22px;width:236px}
|
||||
.card .stage{display:flex;align-items:center;justify-content:center;height:150px}
|
||||
.card svg{display:block}
|
||||
.card h3{font-family:var(--serif);font-size:15px;font-weight:400;margin:14px 0 5px}
|
||||
.card p{margin:0;font-size:10.5px;line-height:1.65;opacity:.6}
|
||||
.p-dark h3,.p-dark p{color:#F1ECE1}
|
||||
.p-dark{border-color:rgba(241,236,225,.14)}
|
||||
|
||||
/* matrix */
|
||||
table{border-collapse:collapse}
|
||||
th{font-weight:400;font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.45;padding:0 0 12px;text-align:center}
|
||||
th.rowh{text-align:right;padding-right:16px;text-transform:none;letter-spacing:0;font-size:11px;opacity:.65;white-space:nowrap}
|
||||
td{padding:6px}
|
||||
td .cell{width:104px;height:104px;border-radius:12px;background:var(--bg);border:1px solid var(--rule);display:flex;align-items:center;justify-content:center}
|
||||
|
||||
/* size ladder */
|
||||
.ladder{display:flex;align-items:flex-end;gap:22px;background:var(--bg);border:1px solid var(--rule);border-radius:14px;padding:22px 26px;margin-bottom:14px}
|
||||
.ladder .n{font-size:9.5px;opacity:.4;text-align:center;margin-top:8px}
|
||||
.ladder .item{display:flex;flex-direction:column;align-items:center}
|
||||
.ladder .name{font-family:var(--serif);font-size:14px;width:120px;opacity:.8}
|
||||
|
||||
/* app icons */
|
||||
.icons{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end}
|
||||
.icon{width:120px;height:120px;border-radius:26.5px;display:flex;align-items:center;justify-content:center;background:var(--bg);box-shadow:0 6px 18px rgba(20,17,12,.14)}
|
||||
.icon.sm{width:60px;height:60px;border-radius:13.5px}
|
||||
.icoWrap{display:flex;flex-direction:column;align-items:center;gap:10px}
|
||||
.icoWrap span{font-size:10px;opacity:.5}
|
||||
|
||||
/* wordmark */
|
||||
.lockup{display:flex;align-items:center;gap:20px;background:var(--bg);border:1px solid var(--rule);border-radius:14px;padding:34px 40px;margin-bottom:14px}
|
||||
.lockup .wm{font-family:var(--serif);font-size:52px;letter-spacing:-.02em;color:var(--c1)}
|
||||
.lockup .wm.ink{color:var(--ink)}
|
||||
.lockup.p-dark .wm.ink{color:#F1ECE1}
|
||||
.lockup.p-dark .tl{color:#F1ECE1;opacity:.5}
|
||||
.lockup .tl{font-size:10px;letter-spacing:.22em;text-transform:uppercase;opacity:.5;margin-top:6px}
|
||||
|
||||
.pattern{display:grid;grid-template-columns:repeat(13,54px);gap:0;background:var(--bg);border-radius:14px;padding:20px;width:742px;overflow:hidden}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>Marks — logo variants</h1>
|
||||
<p>Five geometries derived from the reference (letter + box files + bookmark ribbon), each drawn once and re-coloured through the app's existing <code>Paper</code> palette. Geometry lives in <code><symbol></code>; colour is injected with CSS custom properties, so any cell in the matrix is a real, buildable combination.</p>
|
||||
</header>
|
||||
|
||||
<!-- ============ GEOMETRY DEFINITIONS ============ -->
|
||||
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
|
||||
<defs>
|
||||
|
||||
<!-- 1. Binder-B: faithful reconstruction. Violet ribbon stem, three cyan
|
||||
binder bars (wide / narrow / wide = the B), notch clears the bottom bar. -->
|
||||
<symbol id="binderB" viewBox="0 0 120 120">
|
||||
<g style="isolation:isolate">
|
||||
<path style="mix-blend-mode:multiply" fill="var(--c2)"
|
||||
d="M31 10 H49 A7 7 0 0 1 56 17 V110 L40 96 L24 110 V17 A7 7 0 0 1 31 10 Z"/>
|
||||
<path style="mix-blend-mode:multiply" fill="var(--c1)" d="M40 10 H79 A13 13 0 0 1 79 36 H40 Z"/>
|
||||
<path style="mix-blend-mode:multiply" fill="var(--c1)" d="M40 40 H69 A13 13 0 0 1 69 66 H40 Z"/>
|
||||
<path style="mix-blend-mode:multiply" fill="var(--c1)" d="M40 70 H83 A13 13 0 0 1 83 96 H40 Z"/>
|
||||
</g>
|
||||
<circle cx="32" cy="23" r="5" fill="var(--dot)"/>
|
||||
<circle cx="32" cy="53" r="5" fill="var(--dot)"/>
|
||||
<circle cx="32" cy="83" r="5" fill="var(--dot)"/>
|
||||
</symbol>
|
||||
|
||||
<!-- 2. Ribbon-B: same skeleton, but every terminal is a swallowtail.
|
||||
Consistent language, loses some of the B. -->
|
||||
<symbol id="ribbonB" viewBox="0 0 120 120">
|
||||
<g style="isolation:isolate">
|
||||
<path style="mix-blend-mode:multiply" fill="var(--c2)"
|
||||
d="M31 10 H49 A7 7 0 0 1 56 17 V110 L40 96 L24 110 V17 A7 7 0 0 1 31 10 Z"/>
|
||||
<path style="mix-blend-mode:multiply" fill="var(--c1)" d="M40 10 H92 L80 23 L92 36 H40 Z"/>
|
||||
<path style="mix-blend-mode:multiply" fill="var(--c1)" d="M40 40 H82 L70 53 L82 66 H40 Z"/>
|
||||
<path style="mix-blend-mode:multiply" fill="var(--c1)" d="M40 70 H96 L84 83 L96 96 H40 Z"/>
|
||||
</g>
|
||||
<circle cx="32" cy="23" r="5" fill="var(--dot)"/>
|
||||
<circle cx="32" cy="53" r="5" fill="var(--dot)"/>
|
||||
<circle cx="32" cy="83" r="5" fill="var(--dot)"/>
|
||||
</symbol>
|
||||
|
||||
<!-- 3. Slab-M, tailed. A real M: the counters are wedges, apex at the cap
|
||||
line, widening to the baseline — that is what makes it a letter and not
|
||||
a slotted slab. Each of the three feet then takes a swallowtail. -->
|
||||
<symbol id="slabMdeep" viewBox="0 0 120 120">
|
||||
<clipPath id="clipMdeep">
|
||||
<path d="M24 16 H96 A10 10 0 0 1 106 26 V104 L97 92 L88 104 L86 20 L69 104 L60 92 L51 104 L34 20 L32 104 L23 92 L14 104 V26 A10 10 0 0 1 24 16 Z"/>
|
||||
</clipPath>
|
||||
<g clip-path="url(#clipMdeep)">
|
||||
<rect x="0" y="0" width="42" height="120" fill="var(--c1)"/>
|
||||
<rect x="42" y="0" width="36" height="120" fill="var(--c2)"/>
|
||||
<rect x="78" y="0" width="42" height="120" fill="var(--c1)"/>
|
||||
</g>
|
||||
<circle cx="23" cy="68" r="5.5" fill="var(--dot)"/>
|
||||
<circle cx="60" cy="68" r="5.5" fill="var(--dot)"/>
|
||||
<circle cx="97" cy="68" r="5.5" fill="var(--dot)"/>
|
||||
</symbol>
|
||||
|
||||
<!-- 4. Slab-M, flat-footed. Same letter, no tails — the bookmark cue is
|
||||
carried by the rounded cap and the colour split alone. Letterform
|
||||
first; the ribbon reading is gone. -->
|
||||
<symbol id="slabMshallow" viewBox="0 0 120 120">
|
||||
<clipPath id="clipMshallow">
|
||||
<path d="M24 16 H96 A10 10 0 0 1 106 26 V104 H88 L86 20 L69 104 H51 L34 20 L32 104 H14 V26 A10 10 0 0 1 24 16 Z"/>
|
||||
</clipPath>
|
||||
<g clip-path="url(#clipMshallow)">
|
||||
<rect x="0" y="0" width="42" height="120" fill="var(--c1)"/>
|
||||
<rect x="42" y="0" width="36" height="120" fill="var(--c2)"/>
|
||||
<rect x="78" y="0" width="42" height="120" fill="var(--c1)"/>
|
||||
</g>
|
||||
<circle cx="23" cy="68" r="5.5" fill="var(--dot)"/>
|
||||
<circle cx="60" cy="68" r="5.5" fill="var(--dot)"/>
|
||||
<circle cx="97" cy="68" r="5.5" fill="var(--dot)"/>
|
||||
</symbol>
|
||||
|
||||
<!-- 5. Ribbon + knockout: single ribbon, letter cut out of it.
|
||||
The one that survives 16px and tinted/monochrome icon modes. -->
|
||||
<symbol id="ribbonM" viewBox="0 0 120 120">
|
||||
<mask id="maskM">
|
||||
<rect width="120" height="120" fill="#000"/>
|
||||
<path fill="#fff" d="M38 12 H82 A12 12 0 0 1 94 24 V110 L60 92 L26 110 V24 A12 12 0 0 1 38 12 Z"/>
|
||||
<text x="60" y="70" text-anchor="middle" fill="#000"
|
||||
font-family="ui-serif,Georgia,serif" font-size="58" font-weight="600">M</text>
|
||||
</mask>
|
||||
<rect width="120" height="120" fill="var(--c1)" mask="url(#maskM)"/>
|
||||
</symbol>
|
||||
|
||||
<!-- 6. Three ribbons: no letterform at all. Stepped heights carry the
|
||||
rhythm; the only thing that has to survive at 16px is the silhouette. -->
|
||||
<symbol id="threeRibbons" viewBox="0 0 120 120">
|
||||
<path fill="var(--c1)" d="M24 14 H36 A6 6 0 0 1 42 20 V98 L30 84 L18 98 V20 A6 6 0 0 1 24 14 Z"/>
|
||||
<path fill="var(--c2)" d="M54 14 H66 A6 6 0 0 1 72 20 V112 L60 98 L48 112 V20 A6 6 0 0 1 54 14 Z"/>
|
||||
<path fill="var(--c1)" d="M84 14 H96 A6 6 0 0 1 102 20 V90 L90 76 L78 90 V20 A6 6 0 0 1 84 14 Z"/>
|
||||
</symbol>
|
||||
|
||||
<!-- 7. Monoline: the Binder-B as strokes only. Closest to the app's
|
||||
archival/letterpress register; no fills to fight the paper ground. -->
|
||||
<symbol id="binderLine" viewBox="0 0 120 120">
|
||||
<g fill="none" stroke="var(--c1)" stroke-width="6" stroke-linejoin="round">
|
||||
<path d="M31 13 H49 A4 4 0 0 1 53 17 V104 L40 93 L27 104 V17 A4 4 0 0 1 31 13 Z"/>
|
||||
<path d="M50 13 H76 A11 11 0 0 1 76 35 H50"/>
|
||||
<path d="M50 42 H67 A11 11 0 0 1 67 64 H50"/>
|
||||
<path d="M50 71 H80 A11 11 0 0 1 80 93 H50"/>
|
||||
</g>
|
||||
<circle cx="34" cy="24" r="3" fill="var(--c2)"/>
|
||||
<circle cx="34" cy="53" r="3" fill="var(--c2)"/>
|
||||
<circle cx="34" cy="82" r="3" fill="var(--c2)"/>
|
||||
</symbol>
|
||||
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<!-- ============ 1. THE GEOMETRIES ============ -->
|
||||
<section>
|
||||
<span class="tag">01</span>
|
||||
<h2>Seven geometries</h2>
|
||||
<p class="sub">Shown in the reference palette (cyan #22C7F0 / violet #8B4DEE) with multiply overlap, so they're directly comparable to the original.</p>
|
||||
<div class="grid">
|
||||
|
||||
<div class="card pal p-orig">
|
||||
<div class="stage"><svg width="130" height="130" viewBox="0 0 120 120"><use href="#binderB"/></svg></div>
|
||||
<h3>A1 · Binder-B</h3>
|
||||
<p>Faithful reconstruction. Ribbon stem carries the notch; three bars go wide / narrow / wide to make the B. Closest to the source.</p>
|
||||
</div>
|
||||
|
||||
<div class="card pal p-orig">
|
||||
<div class="stage"><svg width="130" height="130" viewBox="0 0 120 120"><use href="#ribbonB"/></svg></div>
|
||||
<h3>A2 · Ribbon-B</h3>
|
||||
<p>Every terminal becomes a swallowtail. More internally consistent, but the bowls stop reading as bowls — the B gets weaker.</p>
|
||||
</div>
|
||||
|
||||
<div class="card pal p-orig">
|
||||
<div class="stage"><svg width="130" height="130" viewBox="0 0 120 120"><use href="#slabMdeep"/></svg></div>
|
||||
<h3>B1 · Slab-M, tailed</h3>
|
||||
<p>Retargeted to the app's actual name. A real M — counters are wedges, apex at the cap line — with a swallowtail on each of the three feet.</p>
|
||||
</div>
|
||||
|
||||
<div class="card pal p-orig">
|
||||
<div class="stage"><svg width="130" height="130" viewBox="0 0 120 120"><use href="#slabMshallow"/></svg></div>
|
||||
<h3>B2 · Slab-M, flat</h3>
|
||||
<p>Same letter, tails removed. Sturdier and more type-like, but only the rounded cap is left carrying the bookmark idea — probably too little.</p>
|
||||
</div>
|
||||
|
||||
<div class="card pal p-orig">
|
||||
<div class="stage"><svg width="130" height="130" viewBox="0 0 120 120"><use href="#ribbonM"/></svg></div>
|
||||
<h3>B3 · Ribbon knockout</h3>
|
||||
<p>Single ribbon, letter knocked out. One colour, one shape — the only variant that's trivially correct in iOS 26 tinted and mono icon modes.</p>
|
||||
</div>
|
||||
|
||||
<div class="card pal p-orig">
|
||||
<div class="stage"><svg width="130" height="130" viewBox="0 0 120 120"><use href="#threeRibbons"/></svg></div>
|
||||
<h3>C1 · Three ribbons</h3>
|
||||
<p>Drops the letterform entirely. Stepped heights do the work. Most robust silhouette, least ownable — many apps could use this.</p>
|
||||
</div>
|
||||
|
||||
<div class="card pal p-orig">
|
||||
<div class="stage"><svg width="130" height="130" viewBox="0 0 120 120"><use href="#binderLine"/></svg></div>
|
||||
<h3>C2 · Monoline</h3>
|
||||
<p>Binder-B as strokes. Sits in the same register as the app's serif/paper styling instead of fighting it. Fails below ~28px.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ 2. PALETTE MATRIX ============ -->
|
||||
<section>
|
||||
<span class="tag">02</span>
|
||||
<h2>Palette matrix</h2>
|
||||
<p class="sub">Each geometry through the reference palette and five pairs drawn from <code>Paper.swatchPairs</code> in <code>LibraryKit.swift</code>. The <em>Dark</em> column uses the palette's own dark-mode counterparts, not dimmed light values.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<th class="rowh"></th>
|
||||
<th>Reference</th><th>Navy + Verm.</th><th>Ink + Verm.</th>
|
||||
<th>Yellow + Verm.</th><th>Blue + Forest</th><th>Ink only</th><th>Dark</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="rowh">A1 Binder-B</th>
|
||||
<td><div class="cell pal p-orig"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#binderB"/></svg></div></td>
|
||||
<td><div class="cell pal p-paper"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#binderB"/></svg></div></td>
|
||||
<td><div class="cell pal p-ink"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#binderB"/></svg></div></td>
|
||||
<td><div class="cell pal p-warm"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#binderB"/></svg></div></td>
|
||||
<td><div class="cell pal p-blue"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#binderB"/></svg></div></td>
|
||||
<td><div class="cell pal p-mono1"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#binderB"/></svg></div></td>
|
||||
<td><div class="cell pal p-dark"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#binderB"/></svg></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="rowh">A2 Ribbon-B</th>
|
||||
<td><div class="cell pal p-orig"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#ribbonB"/></svg></div></td>
|
||||
<td><div class="cell pal p-paper"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#ribbonB"/></svg></div></td>
|
||||
<td><div class="cell pal p-ink"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#ribbonB"/></svg></div></td>
|
||||
<td><div class="cell pal p-warm"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#ribbonB"/></svg></div></td>
|
||||
<td><div class="cell pal p-blue"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#ribbonB"/></svg></div></td>
|
||||
<td><div class="cell pal p-mono1"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#ribbonB"/></svg></div></td>
|
||||
<td><div class="cell pal p-dark"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#ribbonB"/></svg></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="rowh">B1 Slab-M deep</th>
|
||||
<td><div class="cell pal p-orig"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#slabMdeep"/></svg></div></td>
|
||||
<td><div class="cell pal p-paper"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#slabMdeep"/></svg></div></td>
|
||||
<td><div class="cell pal p-ink"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#slabMdeep"/></svg></div></td>
|
||||
<td><div class="cell pal p-warm"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#slabMdeep"/></svg></div></td>
|
||||
<td><div class="cell pal p-blue"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#slabMdeep"/></svg></div></td>
|
||||
<td><div class="cell pal p-mono1"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#slabMdeep"/></svg></div></td>
|
||||
<td><div class="cell pal p-dark"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#slabMdeep"/></svg></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="rowh">B2 Slab-M shallow</th>
|
||||
<td><div class="cell pal p-orig"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#slabMshallow"/></svg></div></td>
|
||||
<td><div class="cell pal p-paper"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#slabMshallow"/></svg></div></td>
|
||||
<td><div class="cell pal p-ink"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#slabMshallow"/></svg></div></td>
|
||||
<td><div class="cell pal p-warm"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#slabMshallow"/></svg></div></td>
|
||||
<td><div class="cell pal p-blue"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#slabMshallow"/></svg></div></td>
|
||||
<td><div class="cell pal p-mono1"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#slabMshallow"/></svg></div></td>
|
||||
<td><div class="cell pal p-dark"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#slabMshallow"/></svg></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="rowh">B3 Knockout</th>
|
||||
<td><div class="cell pal p-orig"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#ribbonM"/></svg></div></td>
|
||||
<td><div class="cell pal p-paper"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#ribbonM"/></svg></div></td>
|
||||
<td><div class="cell pal p-ink"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#ribbonM"/></svg></div></td>
|
||||
<td><div class="cell pal p-warm"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#ribbonM"/></svg></div></td>
|
||||
<td><div class="cell pal p-blue"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#ribbonM"/></svg></div></td>
|
||||
<td><div class="cell pal p-mono1"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#ribbonM"/></svg></div></td>
|
||||
<td><div class="cell pal p-dark"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#ribbonM"/></svg></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="rowh">C1 Three ribbons</th>
|
||||
<td><div class="cell pal p-orig"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#threeRibbons"/></svg></div></td>
|
||||
<td><div class="cell pal p-paper"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#threeRibbons"/></svg></div></td>
|
||||
<td><div class="cell pal p-ink"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#threeRibbons"/></svg></div></td>
|
||||
<td><div class="cell pal p-warm"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#threeRibbons"/></svg></div></td>
|
||||
<td><div class="cell pal p-blue"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#threeRibbons"/></svg></div></td>
|
||||
<td><div class="cell pal p-mono1"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#threeRibbons"/></svg></div></td>
|
||||
<td><div class="cell pal p-dark"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#threeRibbons"/></svg></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="rowh">C2 Monoline</th>
|
||||
<td><div class="cell pal p-orig"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#binderLine"/></svg></div></td>
|
||||
<td><div class="cell pal p-paper"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#binderLine"/></svg></div></td>
|
||||
<td><div class="cell pal p-ink"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#binderLine"/></svg></div></td>
|
||||
<td><div class="cell pal p-warm"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#binderLine"/></svg></div></td>
|
||||
<td><div class="cell pal p-blue"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#binderLine"/></svg></div></td>
|
||||
<td><div class="cell pal p-mono1"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#binderLine"/></svg></div></td>
|
||||
<td><div class="cell pal p-dark"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#binderLine"/></svg></div></td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<!-- ============ 3. SIZE LADDER ============ -->
|
||||
<section>
|
||||
<span class="tag">03</span>
|
||||
<h2>Size ladder</h2>
|
||||
<p class="sub">128 / 64 / 40 / 24 / 16 px. 40px is the Settings-row and tab-bar size; 16px is the favicon / Spotlight-result size. Anything that turns to mush at 24 is a wordmark, not a mark.</p>
|
||||
|
||||
<div class="ladder pal p-paper">
|
||||
<div class="name">A1 Binder-B</div>
|
||||
<div class="item"><svg width="128" height="128" viewBox="0 0 120 120"><use href="#binderB"/></svg><div class="n">128</div></div>
|
||||
<div class="item"><svg width="64" height="64" viewBox="0 0 120 120"><use href="#binderB"/></svg><div class="n">64</div></div>
|
||||
<div class="item"><svg width="40" height="40" viewBox="0 0 120 120"><use href="#binderB"/></svg><div class="n">40</div></div>
|
||||
<div class="item"><svg width="24" height="24" viewBox="0 0 120 120"><use href="#binderB"/></svg><div class="n">24</div></div>
|
||||
<div class="item"><svg width="16" height="16" viewBox="0 0 120 120"><use href="#binderB"/></svg><div class="n">16</div></div>
|
||||
</div>
|
||||
|
||||
<div class="ladder pal p-paper">
|
||||
<div class="name">B1 Slab-M deep</div>
|
||||
<div class="item"><svg width="128" height="128" viewBox="0 0 120 120"><use href="#slabMdeep"/></svg><div class="n">128</div></div>
|
||||
<div class="item"><svg width="64" height="64" viewBox="0 0 120 120"><use href="#slabMdeep"/></svg><div class="n">64</div></div>
|
||||
<div class="item"><svg width="40" height="40" viewBox="0 0 120 120"><use href="#slabMdeep"/></svg><div class="n">40</div></div>
|
||||
<div class="item"><svg width="24" height="24" viewBox="0 0 120 120"><use href="#slabMdeep"/></svg><div class="n">24</div></div>
|
||||
<div class="item"><svg width="16" height="16" viewBox="0 0 120 120"><use href="#slabMdeep"/></svg><div class="n">16</div></div>
|
||||
</div>
|
||||
|
||||
<div class="ladder pal p-paper">
|
||||
<div class="name">B3 Knockout</div>
|
||||
<div class="item"><svg width="128" height="128" viewBox="0 0 120 120"><use href="#ribbonM"/></svg><div class="n">128</div></div>
|
||||
<div class="item"><svg width="64" height="64" viewBox="0 0 120 120"><use href="#ribbonM"/></svg><div class="n">64</div></div>
|
||||
<div class="item"><svg width="40" height="40" viewBox="0 0 120 120"><use href="#ribbonM"/></svg><div class="n">40</div></div>
|
||||
<div class="item"><svg width="24" height="24" viewBox="0 0 120 120"><use href="#ribbonM"/></svg><div class="n">24</div></div>
|
||||
<div class="item"><svg width="16" height="16" viewBox="0 0 120 120"><use href="#ribbonM"/></svg><div class="n">16</div></div>
|
||||
</div>
|
||||
|
||||
<div class="ladder pal p-paper">
|
||||
<div class="name">C1 Three ribbons</div>
|
||||
<div class="item"><svg width="128" height="128" viewBox="0 0 120 120"><use href="#threeRibbons"/></svg><div class="n">128</div></div>
|
||||
<div class="item"><svg width="64" height="64" viewBox="0 0 120 120"><use href="#threeRibbons"/></svg><div class="n">64</div></div>
|
||||
<div class="item"><svg width="40" height="40" viewBox="0 0 120 120"><use href="#threeRibbons"/></svg><div class="n">40</div></div>
|
||||
<div class="item"><svg width="24" height="24" viewBox="0 0 120 120"><use href="#threeRibbons"/></svg><div class="n">24</div></div>
|
||||
<div class="item"><svg width="16" height="16" viewBox="0 0 120 120"><use href="#threeRibbons"/></svg><div class="n">16</div></div>
|
||||
</div>
|
||||
|
||||
<div class="ladder pal p-paper">
|
||||
<div class="name">C2 Monoline</div>
|
||||
<div class="item"><svg width="128" height="128" viewBox="0 0 120 120"><use href="#binderLine"/></svg><div class="n">128</div></div>
|
||||
<div class="item"><svg width="64" height="64" viewBox="0 0 120 120"><use href="#binderLine"/></svg><div class="n">64</div></div>
|
||||
<div class="item"><svg width="40" height="40" viewBox="0 0 120 120"><use href="#binderLine"/></svg><div class="n">40</div></div>
|
||||
<div class="item"><svg width="24" height="24" viewBox="0 0 120 120"><use href="#binderLine"/></svg><div class="n">24</div></div>
|
||||
<div class="item"><svg width="16" height="16" viewBox="0 0 120 120"><use href="#binderLine"/></svg><div class="n">16</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ 4. APP ICON ============ -->
|
||||
<section id="s4">
|
||||
<span class="tag">04</span>
|
||||
<h2>App icon</h2>
|
||||
<p class="sub">iOS squircle at 120pt and 60pt. The mark is set at ~62% of the tile — Apple's grid wants generous margins, and every one of these was drawn edge-to-edge in its own box.</p>
|
||||
<div class="icons">
|
||||
<div class="icoWrap"><div class="icon pal p-paper"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#binderB"/></svg></div><span>A1 · navy</span></div>
|
||||
<div class="icoWrap"><div class="icon pal p-warm"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#slabMdeep"/></svg></div><span>B1 · yellow</span></div>
|
||||
<div class="icoWrap"><div class="icon pal p-ink"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#ribbonM"/></svg></div><span>B3 · ink</span></div>
|
||||
<div class="icoWrap"><div class="icon pal p-blue"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#threeRibbons"/></svg></div><span>C1 · blue</span></div>
|
||||
<div class="icoWrap"><div class="icon pal p-dark"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#binderB"/></svg></div><span>A1 · dark</span></div>
|
||||
<div class="icoWrap"><div class="icon pal p-orig"><svg width="76" height="76" viewBox="0 0 120 120"><use href="#binderB"/></svg></div><span>A1 · reference</span></div>
|
||||
</div>
|
||||
<div class="icons" style="margin-top:22px">
|
||||
<div class="icoWrap"><div class="icon sm pal p-paper"><svg width="38" height="38" viewBox="0 0 120 120"><use href="#binderB"/></svg></div><span>60pt</span></div>
|
||||
<div class="icoWrap"><div class="icon sm pal p-warm"><svg width="38" height="38" viewBox="0 0 120 120"><use href="#slabMdeep"/></svg></div><span>60pt</span></div>
|
||||
<div class="icoWrap"><div class="icon sm pal p-ink"><svg width="38" height="38" viewBox="0 0 120 120"><use href="#ribbonM"/></svg></div><span>60pt</span></div>
|
||||
<div class="icoWrap"><div class="icon sm pal p-blue"><svg width="38" height="38" viewBox="0 0 120 120"><use href="#threeRibbons"/></svg></div><span>60pt</span></div>
|
||||
<div class="icoWrap"><div class="icon sm pal p-dark"><svg width="38" height="38" viewBox="0 0 120 120"><use href="#binderB"/></svg></div><span>60pt</span></div>
|
||||
<div class="icoWrap"><div class="icon sm pal p-orig"><svg width="38" height="38" viewBox="0 0 120 120"><use href="#binderB"/></svg></div><span>60pt</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ 5. LOCKUP ============ -->
|
||||
<section>
|
||||
<span class="tag">05</span>
|
||||
<h2>Lockups</h2>
|
||||
<p class="sub">Wordmark set in the app's own voice — serif for the name, mono letterspaced for the descriptor — rather than the reference's geometric sans, which belongs to a different product.</p>
|
||||
|
||||
<div class="lockup pal p-paper">
|
||||
<svg width="66" height="66" viewBox="0 0 120 120"><use href="#binderB"/></svg>
|
||||
<div><div class="wm ink">Marks</div><div class="tl">Everything you saved</div></div>
|
||||
</div>
|
||||
|
||||
<div class="lockup pal p-ink">
|
||||
<svg width="66" height="66" viewBox="0 0 120 120"><use href="#ribbonM"/></svg>
|
||||
<div><div class="wm ink">Marks</div><div class="tl">Everything you saved</div></div>
|
||||
</div>
|
||||
|
||||
<div class="lockup pal p-warm">
|
||||
<svg width="66" height="66" viewBox="0 0 120 120"><use href="#slabMdeep"/></svg>
|
||||
<div><div class="wm ink">Marks</div><div class="tl">Everything you saved</div></div>
|
||||
</div>
|
||||
|
||||
<div class="lockup pal p-dark">
|
||||
<svg width="66" height="66" viewBox="0 0 120 120"><use href="#threeRibbons"/></svg>
|
||||
<div><div class="wm ink">Marks</div><div class="tl" style="color:#F1ECE1;opacity:.5">Everything you saved</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ 6. PATTERN ============ -->
|
||||
<section style="border-bottom:none">
|
||||
<span class="tag">06</span>
|
||||
<h2>Pattern test</h2>
|
||||
<p class="sub">The reference proves itself by tiling. Same test here — if the mark only works alone, it isn't a system.</p>
|
||||
<div class="pattern pal p-paper" id="pat"></div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
// 13 columns x 5 rows. The row offset stops the palette cycle from lining up
|
||||
// into vertical stripes, which is what makes it read as a field and not a grid.
|
||||
const cycle = ['p-paper', 'p-warm', 'p-ink', 'p-blue'], COLS = 13
|
||||
const NS = 'http://www.w3.org/2000/svg', pat = document.getElementById('pat')
|
||||
for (let i = 0; i < COLS * 5; i++) {
|
||||
const svg = document.createElementNS(NS, 'svg')
|
||||
svg.setAttribute('width', 54); svg.setAttribute('height', 54)
|
||||
svg.setAttribute('viewBox', '0 0 120 120')
|
||||
svg.setAttribute('class', 'pal ' + cycle[(i + Math.floor(i / COLS)) % cycle.length])
|
||||
const use = document.createElementNS(NS, 'use')
|
||||
use.setAttribute('href', '#threeRibbons')
|
||||
svg.appendChild(use); pat.appendChild(svg)
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user