admin/linkding-ios
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Brand mark: scallop ribbon shape, app icon in light / dark / tinted
CI / build-and-deploy (push) Successful in 37s
Details
CI / build-and-deploy (pull_request) Successful in 20s
Details

Browse Source 
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
2026-08-03 11:55:39 -05:00
co-authored by Claude Opus 5
parent b3d8719874
commit bc65bb586c
10 changed files with 1073 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/logo-c1-variants.html
+322
View File
@@ -0,0 +1,322 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Marks — C1 development</title>
<style>
:root{--ink:#14110C;--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:66ch;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:74ch}
.tag{display:inline-block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.45;margin-bottom:10px}
em{font-style:normal;border-bottom:1px solid rgba(20,17,12,.3)}
/* geometry is shared; colour is injected */
.pal {--c1:#22C7F0;--c2:#8B4DEE;--c3:#5E7CF5;--bg:#fff}
.p-orig {--c1:#22C7F0;--c2:#8B4DEE;--c3:#5E7CF5;--bg:#fff}
.p-paper{--c1:#001A55;--c2:#ED663F;--c3:#FECD00;--bg:#F8F5EF}
.p-ink {--c1:#14110C;--c2:#ED663F;--c3:#E0D1BB;--bg:#F8F5EF}
.p-tri {--c1:#FECD00;--c2:#ED663F;--c3:#115AB5;--bg:#F8F5EF}
.p-mono {--c1:#14110C;--c2:#14110C;--c3:#14110C;--bg:#F8F5EF}
.p-dark {--c1:#5B8FD0;--c2:#E07A5C;--c3:#D8AD10;--bg:#15130F}
.grid{display:flex;flex-wrap:wrap;gap:18px}
.card{background:var(--bg);border:1px solid var(--rule);border-radius:14px;padding:22px;width:243px}
.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:.62}
.card .own{margin-top:8px;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.5}
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:.7;white-space:nowrap}
td{padding:5px}
td .cell{width:92px;height:92px;border-radius:11px;background:var(--bg);border:1px solid var(--rule);display:flex;align-items:center;justify-content:center}
.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:12px}
.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:118px;opacity:.8}
.icons{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end}
.icon{width:118px;height:118px;border-radius:26px;display:flex;align-items:center;justify-content:center;background:var(--bg);box-shadow:0 6px 18px rgba(20,17,12,.14)}
.icon.sm{width:58px;height:58px;border-radius:13px}
.icoWrap{display:flex;flex-direction:column;align-items:center;gap:10px}
.icoWrap span{font-size:10px;opacity:.5}
.lockup{display:flex;align-items:center;gap:20px;background:var(--bg);border:1px solid var(--rule);border-radius:14px;padding:32px 40px;margin-bottom:12px}
.lockup .wm{font-family:var(--serif);font-size:50px;letter-spacing:-.02em;color:var(--ink)}
.lockup.p-dark .wm{color:#F1ECE1}
.lockup .tl{font-size:10px;letter-spacing:.22em;text-transform:uppercase;opacity:.5;margin-top:6px}
.lockup.p-dark .tl{color:#F1ECE1;opacity:.5}
.pattern{display:grid;grid-template-columns:repeat(13,54px);background:var(--bg);border-radius:14px;padding:20px;width:742px;overflow:hidden}
</style>
</head>
<body>
<header>
<h1>C1 — three ribbons, developed</h1>
<p>C1 had the most robust silhouette of the seven and the least ownership: three bookmark ribbons is a shape any read-later app could reach for. Ownability is the thing to attack, so each variant below adds one specific idea — a rhythm, a structure, a colour rule — and the caption says whether it actually buys anything.</p>
</header>
<svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs>
<!-- a. Stepped — the baseline from the first sheet. Tops aligned, bottoms
stepped long/longest/short. -->
<symbol id="v-step" viewBox="0 0 120 120">
<path fill="var(--c1)" d="M24 14 H36 A6 6 0 0 1 42 20 V100 L30 86 L18 100 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(--c3)" d="M84 14 H96 A6 6 0 0 1 102 20 V92 L90 78 L78 92 V20 A6 6 0 0 1 84 14 Z"/>
</symbol>
<!-- b. Stair — monotonic descent instead of an arbitrary step. Directional,
so it reads as progression rather than decoration. -->
<symbol id="v-stair" viewBox="0 0 120 120">
<path fill="var(--c1)" d="M24 14 H36 A6 6 0 0 1 42 20 V92 L30 78 L18 92 V20 A6 6 0 0 1 24 14 Z"/>
<path fill="var(--c2)" d="M54 14 H66 A6 6 0 0 1 72 20 V102 L60 88 L48 102 V20 A6 6 0 0 1 54 14 Z"/>
<path fill="var(--c3)" d="M84 14 H96 A6 6 0 0 1 102 20 V112 L90 98 L78 112 V20 A6 6 0 0 1 84 14 Z"/>
</symbol>
<!-- c. Tally — four thin equal ribbons. Tally marks and bookmarks are the
same shape, and the app is called Marks. The pun is the ownership. -->
<symbol id="v-tally" viewBox="0 0 120 120">
<path fill="var(--c1)" d="M21 16 H27 A4 4 0 0 1 31 20 V104 L24 94 L17 104 V20 A4 4 0 0 1 21 16 Z"/>
<path fill="var(--c2)" d="M45 16 H51 A4 4 0 0 1 55 20 V104 L48 94 L41 104 V20 A4 4 0 0 1 45 16 Z"/>
<path fill="var(--c1)" d="M69 16 H75 A4 4 0 0 1 79 20 V104 L72 94 L65 104 V20 A4 4 0 0 1 69 16 Z"/>
<path fill="var(--c3)" d="M93 16 H99 A4 4 0 0 1 103 20 V104 L96 94 L89 104 V20 A4 4 0 0 1 93 16 Z"/>
</symbol>
<!-- d. Rail — hung from a bar. Restores the shelf/box-file reading the
reference had and C1 threw away, for the cost of one rectangle. -->
<symbol id="v-rail" viewBox="0 0 120 120">
<path fill="var(--c2)" d="M22 30 H44 V104 L33 91 L22 104 Z"/>
<path fill="var(--c3)" d="M49 30 H71 V112 L60 99 L49 112 Z"/>
<path fill="var(--c2)" d="M76 30 H98 V96 L87 83 L76 96 Z"/>
<path fill="var(--c1)" d="M20 14 H100 A6 6 0 0 1 106 20 V34 H14 V20 A6 6 0 0 1 20 14 Z"/>
</symbol>
<!-- e. Overlap — wide ribbons that cross, multiplied. This is the trick the
reference actually runs on: depth from two flat colours, no shadow. -->
<symbol id="v-overlap" viewBox="0 0 120 120">
<g style="isolation:isolate">
<path style="mix-blend-mode:multiply" fill="var(--c1)" d="M16 14 H42 A8 8 0 0 1 50 22 V100 L29 84 L8 100 V22 A8 8 0 0 1 16 14 Z"/>
<path style="mix-blend-mode:multiply" fill="var(--c2)" d="M47 14 H73 A8 8 0 0 1 81 22 V112 L60 96 L39 112 V22 A8 8 0 0 1 47 14 Z"/>
<path style="mix-blend-mode:multiply" fill="var(--c1)" d="M78 14 H104 A8 8 0 0 1 112 22 V94 L91 78 L70 94 V22 A8 8 0 0 1 78 14 Z"/>
</g>
</symbol>
<!-- f. Foreground — one ribbon pulled forward and keylined in the ground
colour. Asymmetry is cheap ownership; symmetry is what makes C1 generic. -->
<symbol id="v-front" viewBox="0 0 120 120">
<path fill="var(--c1)" d="M26 14 H40 A6 6 0 0 1 46 20 V94 L33 81 L20 94 V20 A6 6 0 0 1 26 14 Z"/>
<path fill="var(--c1)" d="M80 14 H94 A6 6 0 0 1 100 20 V94 L87 81 L74 94 V20 A6 6 0 0 1 80 14 Z"/>
<path fill="var(--c2)" stroke="var(--bg)" stroke-width="5" stroke-linejoin="round"
d="M50 24 H70 A8 8 0 0 1 78 32 V114 L60 96 L42 114 V32 A8 8 0 0 1 50 24 Z"/>
</symbol>
<!-- g. Fan — the same ribbon rotated. Reads as pages fanned rather than
objects lined up; the only variant with any motion in it. -->
<symbol id="v-fan" viewBox="0 0 120 120">
<path fill="var(--c1)" transform="rotate(-15 60 110)" d="M53 18 H67 A6 6 0 0 1 73 24 V104 L60 90 L47 104 V24 A6 6 0 0 1 53 18 Z"/>
<path fill="var(--c3)" transform="rotate(15 60 110)" d="M53 18 H67 A6 6 0 0 1 73 24 V104 L60 90 L47 104 V24 A6 6 0 0 1 53 18 Z"/>
<path fill="var(--c2)" d="M53 14 H67 A6 6 0 0 1 73 20 V108 L60 94 L47 108 V20 A6 6 0 0 1 53 14 Z"/>
</symbol>
<!-- h. Pair — two, not three. Fewer parts survive smaller; the question is
whether two still reads as "a collection". -->
<symbol id="v-pair" viewBox="0 0 120 120">
<path fill="var(--c1)" d="M33 14 H49 A7 7 0 0 1 56 21 V100 L41 84 L26 100 V21 A7 7 0 0 1 33 14 Z"/>
<path fill="var(--c2)" d="M71 14 H87 A7 7 0 0 1 94 21 V112 L79 96 L64 112 V21 A7 7 0 0 1 71 14 Z"/>
</symbol>
<!-- i. Nested — concentric rather than side by side. A notch inside a notch
inside a notch: an archive, not a row. -->
<symbol id="v-nest" viewBox="0 0 120 120">
<path fill="var(--c1)" d="M26 14 H94 A10 10 0 0 1 104 24 V112 L60 92 L16 112 V24 A10 10 0 0 1 26 14 Z"/>
<path fill="var(--c3)" d="M42 14 H78 A8 8 0 0 1 86 22 V92 L60 77 L34 92 V22 A8 8 0 0 1 42 14 Z"/>
<path fill="var(--c2)" d="M54 14 H66 A6 6 0 0 1 72 20 V68 L60 58 L48 68 V20 A6 6 0 0 1 54 14 Z"/>
</symbol>
<!-- j. Scallop — one shape, four tails. Everything above is N objects; this
is a single path, which is what the tinted/mono icon modes want. -->
<symbol id="v-scallop" viewBox="0 0 120 120">
<clipPath id="clipScallop">
<path d="M26 14 H94 A10 10 0 0 1 104 24 V112 L89 96 L75 112 L60 96 L45 112 L31 96 L16 112 V24 A10 10 0 0 1 26 14 Z"/>
</clipPath>
<g clip-path="url(#clipScallop)">
<rect x="0" y="0" width="45" height="120" fill="var(--c1)"/>
<rect x="45" y="0" width="30" height="120" fill="var(--c2)"/>
<rect x="75" y="0" width="45" height="120" fill="var(--c3)"/>
</g>
</symbol>
</defs></svg>
<section>
<span class="tag">01</span>
<h2>Ten developments</h2>
<p class="sub">Shown in the app's own palette (navy / vermilion / yellow from <code>Paper.swatchPairs</code>) rather than the reference cyan-violet, since that was the conclusion of the last sheet. The <em>ownable?</em> line is the honest verdict, not a summary.</p>
<div class="grid" id="cards"></div>
</section>
<section>
<span class="tag">02</span>
<h2>Palette</h2>
<p class="sub">The three-swatch column is the interesting one. The app already hashes bookmarks into a twelve-swatch palette — a mark built from three of those swatches is describing the app's actual data model, which is ownership no competitor can copy without copying the system underneath it.</p>
<table id="matrix"></table>
</section>
<section>
<span class="tag">03</span>
<h2>Size ladder</h2>
<p class="sub">128 / 64 / 40 / 24 / 16&nbsp;px. C1's whole argument is that it survives this; the developments have to survive it too or they've bought ownership with legibility.</p>
<div id="ladders"></div>
</section>
<section>
<span class="tag">04</span>
<h2>App icon</h2>
<p class="sub">Squircle at 118 and 58&nbsp;px, mark at ~62% of the tile.</p>
<div class="icons" id="icons"></div>
<div class="icons" id="iconsSm" style="margin-top:22px"></div>
</section>
<section>
<span class="tag">05</span>
<h2>Lockups</h2>
<div id="lockups"></div>
</section>
<section style="border-bottom:none">
<span class="tag">06</span>
<h2>Pattern</h2>
<p class="sub">The test C1 is most likely to win: a repeating field is where a simple silhouette beats a clever one.</p>
<div class="pattern pal p-paper" id="pat"></div>
</section>
<script>
const VARIANTS = [
{id:'v-step', name:'C1·a Stepped', desc:'The baseline. Tops aligned, bottoms stepped. Balanced and readable, but the step pattern is arbitrary — nothing decides it, so nothing defends it.', own:'ownable? — no'},
{id:'v-stair', name:'C1·b Stair', desc:'Same three ribbons, monotonic descent. Now the rhythm means something (progression, a queue getting shorter) and the eye has a direction to travel.', own:'ownable? — a little'},
{id:'v-tally', name:'C1·c Tally', desc:'Four thin ribbons. A tally mark and a bookmark ribbon are already the same shape, and the app is called Marks — the mark states the name instead of illustrating the category.', own:'ownable? — yes'},
{id:'v-rail', name:'C1·d Rail', desc:'Hung from a bar. Buys back the shelf/box-file reading that made the reference work three ways, for the cost of one rectangle.', own:'ownable? — yes'},
{id:'v-overlap', name:'C1·e Overlap', desc:'Wide ribbons crossing, multiplied. This is the trick the reference actually runs on: depth out of two flat colours and no shadow at all.', own:'ownable? — a little'},
{id:'v-front', name:'C1·f Foreground', desc:'One ribbon pulled forward and keylined in the ground colour. Asymmetry is cheap ownership — the symmetry is most of why the baseline feels anonymous.', own:'ownable? — a little'},
{id:'v-fan', name:'C1·g Fan', desc:'The same ribbon rotated about a point below the mark. Reads as pages fanned rather than objects filed. The only one with motion, and the only one that animates for free.', own:'ownable? — yes'},
{id:'v-pair', name:'C1·h Pair', desc:'Two instead of three. Calmer and it holds smaller, but two things read as a pair, not a collection — which is the wrong idea for an archive.', own:'ownable? — no'},
{id:'v-nest', name:'C1·i Nested', desc:'Concentric instead of side by side: a notch inside a notch inside a notch. Says archive rather than row, and it is the only one that suggests depth without overlap.', own:'ownable? — yes'},
{id:'v-scallop', name:'C1·j Scallop', desc:'One path, four tails. Everything above is N objects fighting for space; this is a single shape, which is what iOS 26 tinted and monochrome icon modes actually want.', own:'ownable? — yes'},
]
const PALETTES = [
{cls:'p-paper', label:'Navy / Verm.'},
{cls:'p-tri', label:'Three swatches'},
{cls:'p-ink', label:'Ink / Verm.'},
{cls:'p-mono', label:'Ink only'},
{cls:'p-dark', label:'Dark'},
{cls:'p-orig', label:'Reference'},
]
const NS = 'http://www.w3.org/2000/svg'
const mark = (id, size, cls) => {
const svg = document.createElementNS(NS, 'svg')
svg.setAttribute('width', size); svg.setAttribute('height', size)
svg.setAttribute('viewBox', '0 0 120 120')
if (cls) svg.setAttribute('class', cls)
const use = document.createElementNS(NS, 'use')
use.setAttribute('href', '#' + id)
svg.appendChild(use)
return svg
}
const el = (tag, cls, html) => {
const n = document.createElement(tag)
if (cls) n.className = cls
if (html != null) n.innerHTML = html
return n
}
// 01 — cards
const cards = document.getElementById('cards')
for (const v of VARIANTS) {
const card = el('div', 'card pal p-paper')
const stage = el('div', 'stage'); stage.appendChild(mark(v.id, 132))
card.append(stage, el('h3', null, v.name), el('p', null, v.desc), el('div', 'own', v.own))
cards.appendChild(card)
}
// 02 — matrix
const matrix = document.getElementById('matrix')
const head = document.createElement('tr')
head.appendChild(el('th', 'rowh'))
for (const p of PALETTES) head.appendChild(el('th', null, p.label))
matrix.appendChild(head)
for (const v of VARIANTS) {
const row = document.createElement('tr')
row.appendChild(el('th', 'rowh', v.name))
for (const p of PALETTES) {
const td = document.createElement('td')
const cell = el('div', 'cell pal ' + p.cls)
cell.appendChild(mark(v.id, 68))
td.appendChild(cell); row.appendChild(td)
}
matrix.appendChild(row)
}
// 03 — size ladder, for the variants that claimed ownership
const ladders = document.getElementById('ladders')
for (const v of VARIANTS.filter(v => v.own.endsWith('yes'))) {
const row = el('div', 'ladder pal p-paper')
row.appendChild(el('div', 'name', v.name))
for (const s of [128, 64, 40, 24, 16]) {
const item = el('div', 'item')
item.appendChild(mark(v.id, s))
item.appendChild(el('div', 'n', s))
row.appendChild(item)
}
ladders.appendChild(row)
}
// 04 — icons
const ICONS = [
['v-tally', 'p-paper'], ['v-rail', 'p-tri'], ['v-fan', 'p-paper'],
['v-nest', 'p-ink'], ['v-scallop','p-tri'], ['v-scallop', 'p-dark'],
]
for (const [wrap, size, big] of [['icons', 72, true], ['iconsSm', 36, false]]) {
const host = document.getElementById(wrap)
for (const [id, cls] of ICONS) {
const w = el('div', 'icoWrap')
const tile = el('div', 'icon pal ' + cls + (big ? '' : ' sm'))
tile.appendChild(mark(id, size))
w.append(tile, el('span', null, big ? id.slice(2) + ' · ' + cls.slice(2) : '58pt'))
host.appendChild(w)
}
}
// 05 — lockups
const lockups = document.getElementById('lockups')
for (const [id, cls] of [['v-tally','p-paper'], ['v-rail','p-tri'], ['v-scallop','p-ink'], ['v-fan','p-dark']]) {
const row = el('div', 'lockup pal ' + cls)
row.appendChild(mark(id, 64))
const txt = el('div')
txt.append(el('div', 'wm', 'Marks'), el('div', 'tl', 'Everything you saved'))
row.appendChild(txt)
lockups.appendChild(row)
}
// 06 — pattern. Row offset stops the palette cycle lining up into stripes.
const cycle = ['p-paper', 'p-tri', 'p-ink', 'p-dark'], COLS = 13
const pat = document.getElementById('pat')
for (let i = 0; i < COLS * 5; i++) {
pat.appendChild(mark('v-tally', 54, 'pal ' + cycle[(i + Math.floor(i / COLS)) % cycle.length]))
}
</script>
</body>
</html>
docs/logo-variants.html
+447
View File
@@ -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&nbsp;+ box&nbsp;files&nbsp;+ bookmark&nbsp;ribbon), each drawn once and re-coloured through the app's existing <code>Paper</code> palette. Geometry lives in <code>&lt;symbol&gt;</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&nbsp;#22C7F0 / violet&nbsp;#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&nbsp;+&nbsp;Verm.</th><th>Ink&nbsp;+&nbsp;Verm.</th>
<th>Yellow&nbsp;+&nbsp;Verm.</th><th>Blue&nbsp;+&nbsp;Forest</th><th>Ink&nbsp;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&nbsp;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>