177 lines
6.8 KiB
HTML
177 lines
6.8 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Iconography — hand-drawn</title>
|
|
<link rel="stylesheet" href="../colors_and_type.css" />
|
|
<style>
|
|
html, body { margin: 0; background: var(--background); font-family: var(--font-sans); }
|
|
.card { padding: 22px 28px; box-sizing: border-box; display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px 24px; align-items: start; }
|
|
.cell { display: flex; flex-direction: column; align-items: center; gap: 8px; }
|
|
.cell svg { width: 46px; height: 46px; }
|
|
.ink path, .ink line, .ink circle, .ink polyline, .ink polygon {
|
|
fill: none;
|
|
stroke: #383831;
|
|
stroke-width: 1.25;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
/* slight hand-drawn wobble via tiny dasharray irregularity */
|
|
}
|
|
.ink .pig-copper { stroke: #6d8c7c; }
|
|
.ink .pig-terra { stroke: #b96b58; }
|
|
.ink .pig-ochre { stroke: #c29d59; }
|
|
.ink .pig-indigo { stroke: #5a6d83; }
|
|
.ink .fill-terra { fill: #b96b58; stroke: none; }
|
|
.ink .fill-copper{ fill: #6d8c7c; stroke: none; }
|
|
|
|
.lbl { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-surface-variant); text-align: center; }
|
|
|
|
.note {
|
|
grid-column: 1 / -1;
|
|
font-family: var(--font-serif);
|
|
font-style: italic;
|
|
color: var(--on-surface-variant);
|
|
font-size: 13px;
|
|
padding-top: 4px;
|
|
border-top: 1px solid rgba(186,186,176,0.3);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
|
|
<!-- Feather / quill — organic curve, copper pigment on the nib -->
|
|
<div class="cell">
|
|
<svg class="ink" viewBox="0 0 48 48">
|
|
<path d="M8,40 C 14,28 22,14 38,8 C 37,16 33,28 22,36 C 18,39 12,41 8,40 Z"/>
|
|
<path d="M14,34 C 18,30 22,26 28,22"/>
|
|
<path d="M18,30 C 22,28 26,26 30,24"/>
|
|
<line class="pig-copper" x1="6" y1="42" x2="12" y2="38"/>
|
|
</svg>
|
|
<div class="lbl">Feather</div>
|
|
</div>
|
|
|
|
<!-- Book — lightly crooked spine -->
|
|
<div class="cell">
|
|
<svg class="ink" viewBox="0 0 48 48">
|
|
<path d="M6,10 C 12,8 20,9 24,12 C 28,9 36,8 42,10 L 42,38 C 36,36 28,37 24,40 C 20,37 12,36 6,38 Z"/>
|
|
<path d="M24,12 L 24,40"/>
|
|
<path d="M10,16 C 14,15 18,16 20,17"/>
|
|
<path d="M10,22 C 14,21 18,22 20,23"/>
|
|
<path d="M28,16 C 32,15 36,16 38,17"/>
|
|
</svg>
|
|
<div class="lbl">Book</div>
|
|
</div>
|
|
|
|
<!-- Search — circle intentionally not perfect, indigo current inside -->
|
|
<div class="cell">
|
|
<svg class="ink" viewBox="0 0 48 48">
|
|
<path d="M20,9 C 28,8 34,14 34,22 C 34,30 28,34 20,34 C 12,34 8,28 8,22 C 8,14 13,10 20,9 Z"/>
|
|
<line x1="30" y1="30" x2="41" y2="41"/>
|
|
<path class="pig-indigo" d="M12,22 C 16,20 22,20 26,22"/>
|
|
</svg>
|
|
<div class="lbl">Search</div>
|
|
</div>
|
|
|
|
<!-- Bookmark — parchment fold, slight asymmetry -->
|
|
<div class="cell">
|
|
<svg class="ink" viewBox="0 0 48 48">
|
|
<path d="M13,7 C 20,6 28,6 36,7 L 36,42 L 24,34 L 12,42 Z"/>
|
|
<path d="M18,16 C 22,15 28,15 32,16"/>
|
|
<path d="M18,22 C 22,21 26,21 30,22"/>
|
|
</svg>
|
|
<div class="lbl">Saved</div>
|
|
</div>
|
|
|
|
<!-- Star — sketched, unequal rays -->
|
|
<div class="cell">
|
|
<svg class="ink" viewBox="0 0 48 48">
|
|
<path d="M24,6 C 26,12 28,16 30,18 C 33,19 38,20 41,21 C 38,23 34,26 32,28 C 33,31 34,36 35,40 C 31,37 27,34 24,33 C 21,34 17,37 13,40 C 14,36 15,31 16,28 C 14,26 10,23 7,21 C 10,20 15,19 18,18 C 20,16 22,12 24,6 Z"/>
|
|
</svg>
|
|
<div class="lbl">Star</div>
|
|
</div>
|
|
|
|
<!-- File / page — hand-torn corner -->
|
|
<div class="cell">
|
|
<svg class="ink" viewBox="0 0 48 48">
|
|
<path d="M10,8 C 18,6 24,7 30,8 L 38,16 C 38,26 38,34 38,40 C 30,42 18,42 10,40 Z"/>
|
|
<path d="M30,8 C 30,12 32,14 38,16"/>
|
|
<path d="M16,22 C 22,21 28,21 32,22"/>
|
|
<path class="pig-terra" d="M16,28 C 22,27 28,27 32,28"/>
|
|
</svg>
|
|
<div class="lbl">File</div>
|
|
</div>
|
|
|
|
<!-- Archive drawer — stacked sheets -->
|
|
<div class="cell">
|
|
<svg class="ink" viewBox="0 0 48 48">
|
|
<path d="M7,12 C 16,10 32,10 41,12 L 41,18 C 32,16 16,16 7,18 Z"/>
|
|
<path d="M8,20 C 17,18 31,18 40,20 L 40,26 C 31,24 17,24 8,26 Z"/>
|
|
<path d="M9,28 C 18,26 30,26 39,28 L 39,34 C 30,32 18,32 9,34 Z"/>
|
|
<line class="pig-ochre" x1="14" y1="15" x2="20" y2="15"/>
|
|
</svg>
|
|
<div class="lbl">Archive</div>
|
|
</div>
|
|
|
|
<!-- Spear — the brand mark, small -->
|
|
<div class="cell">
|
|
<svg class="ink" viewBox="0 0 48 48">
|
|
<path d="M24,6 C 26,14 28,20 28,24 C 28,28 26,32 24,34 C 22,32 20,28 20,24 C 20,20 22,14 24,6 Z"/>
|
|
<line x1="24" y1="34" x2="24" y2="44"/>
|
|
<path d="M22,38 C 22,39 26,39 26,38"/>
|
|
</svg>
|
|
<div class="lbl">Spear</div>
|
|
</div>
|
|
|
|
<!-- Conversation — two figures with copper contour between -->
|
|
<div class="cell">
|
|
<svg class="ink" viewBox="0 0 48 48">
|
|
<path d="M14,17 C 14,14 18,13 19,17 C 19,20 16,22 14,20 Z"/>
|
|
<path d="M9,34 C 10,27 23,27 24,34"/>
|
|
<path d="M29,17 C 29,14 33,13 34,17 C 34,20 31,22 29,20 Z"/>
|
|
<path d="M24,34 C 25,27 38,27 39,34"/>
|
|
<path class="pig-copper" d="M18,23 C 22,21 26,21 30,23"/>
|
|
<path class="pig-copper" d="M17,26 C 22,23 26,23 31,26"/>
|
|
</svg>
|
|
<div class="lbl">Conversation</div>
|
|
</div>
|
|
|
|
<!-- Growth — trend with copper accent -->
|
|
<div class="cell">
|
|
<svg class="ink" viewBox="0 0 48 48">
|
|
<line x1="8" y1="40" x2="42" y2="40"/>
|
|
<line x1="8" y1="40" x2="8" y2="8"/>
|
|
<polyline class="pig-copper" points="11,32 18,24 24,28 32,14 40,10"/>
|
|
<circle class="fill-copper" cx="40" cy="10" r="1.8"/>
|
|
</svg>
|
|
<div class="lbl">Trend</div>
|
|
</div>
|
|
|
|
<!-- Warning — flame shape, terracotta -->
|
|
<div class="cell">
|
|
<svg class="ink" viewBox="0 0 48 48">
|
|
<path class="pig-terra" d="M24,6 C 27,14 33,17 33,26 C 33,33 29,38 24,38 C 19,38 15,33 15,26 C 15,19 20,16 24,6 Z"/>
|
|
<line x1="24" y1="38" x2="24" y2="44"/>
|
|
</svg>
|
|
<div class="lbl">Warning</div>
|
|
</div>
|
|
|
|
<!-- Cartographer — hand-drawn map fold with contour lines -->
|
|
<div class="cell">
|
|
<svg class="ink" viewBox="0 0 48 48">
|
|
<path d="M8,14 C 14,11 20,13 24,14 C 28,13 34,11 40,14 L 40,38 C 34,35 28,37 24,38 C 20,37 14,35 8,38 Z"/>
|
|
<path d="M16,14 C 16,22 16,30 16,38"/>
|
|
<path d="M32,14 C 32,22 32,30 32,38"/>
|
|
<path class="pig-copper" d="M11,22 C 18,20 26,22 36,20"/>
|
|
<path class="pig-copper" d="M11,28 C 18,26 26,28 36,26"/>
|
|
</svg>
|
|
<div class="lbl">Map</div>
|
|
</div>
|
|
|
|
<div class="note">
|
|
Thin 1.25px graphite stroke · intentional micro-asymmetry · a single pigment accent per icon (Oxidized Copper · Faded Terracotta · Raw Ochre · Faded Indigo). Substituted set — bespoke Fenja mark pending.
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|