448 lines
29 KiB
HTML
448 lines
29 KiB
HTML
<!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>
|