129 lines
4.4 KiB
HTML
129 lines
4.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Hand-drawn Iconography</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(4, 1fr); gap: 22px 26px; align-items: start; }
|
|
.cell { display: flex; flex-direction: column; align-items: center; gap: 10px; }
|
|
.cell svg { width: 68px; height: 68px; }
|
|
.cell svg path, .cell svg line, .cell svg circle, .cell svg polyline {
|
|
fill: none;
|
|
stroke: #383831;
|
|
stroke-width: 1.25;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
.cell svg .pig-copper { stroke: #6d8c7c; }
|
|
.cell svg .pig-terra { stroke: #b96b58; }
|
|
.cell svg .pig-ochre { stroke: #c29d59; }
|
|
.cell svg .pig-indigo { stroke: #5a6d83; }
|
|
.cell svg .fill-copper { fill: #6d8c7c; stroke: none; }
|
|
.cell svg .fill-terra { fill: #b96b58; stroke: none; }
|
|
|
|
.lbl { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-surface-variant); text-align: center; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
|
|
<!-- Reader -->
|
|
<div class="cell">
|
|
<svg viewBox="0 0 64 64">
|
|
<circle cx="32" cy="18" r="7"/>
|
|
<path d="M18,52 C 22,38 42,38 46,52"/>
|
|
<path d="M14,48 L 50,48"/>
|
|
<!-- book -->
|
|
<path d="M20,46 L 44,46 L 44,56 L 20,56 Z"/>
|
|
<line x1="32" y1="46" x2="32" y2="56"/>
|
|
<!-- steam of thought — topographic current accent -->
|
|
<path class="pig-copper" d="M40,10 C 46,8 50,14 48,20"/>
|
|
</svg>
|
|
<div class="lbl">Reader</div>
|
|
</div>
|
|
|
|
<!-- Archive / stack -->
|
|
<div class="cell">
|
|
<svg viewBox="0 0 64 64">
|
|
<path d="M12,18 L 52,18 L 52,26 L 12,26 Z"/>
|
|
<path d="M14,28 L 50,28 L 50,36 L 14,36 Z"/>
|
|
<path d="M16,38 L 48,38 L 48,46 L 16,46 Z"/>
|
|
<line x1="20" y1="22" x2="26" y2="22"/>
|
|
<line x1="20" y1="32" x2="26" y2="32"/>
|
|
<line class="pig-terra" x1="20" y1="42" x2="26" y2="42"/>
|
|
</svg>
|
|
<div class="lbl">Archive</div>
|
|
</div>
|
|
|
|
<!-- Quill -->
|
|
<div class="cell">
|
|
<svg viewBox="0 0 64 64">
|
|
<path d="M14,54 C 22,46 34,20 54,10 C 52,28 36,44 18,52 Z"/>
|
|
<path d="M22,46 L 32,36"/>
|
|
<path d="M28,38 L 36,30"/>
|
|
<line class="pig-ochre" x1="10" y1="58" x2="20" y2="52"/>
|
|
</svg>
|
|
<div class="lbl">Write</div>
|
|
</div>
|
|
|
|
<!-- Search — magnifier held in hand -->
|
|
<div class="cell">
|
|
<svg viewBox="0 0 64 64">
|
|
<circle cx="26" cy="26" r="12"/>
|
|
<line x1="35" y1="35" x2="50" y2="50"/>
|
|
<!-- subtle contour lines inside glass -->
|
|
<path d="M18,28 C 22,22 30,22 34,28"/>
|
|
<path class="pig-indigo" d="M18,32 C 22,28 30,28 34,32"/>
|
|
</svg>
|
|
<div class="lbl">Search</div>
|
|
</div>
|
|
|
|
<!-- Growth — trend with copper accent -->
|
|
<div class="cell">
|
|
<svg viewBox="0 0 64 64">
|
|
<line x1="10" y1="52" x2="54" y2="52"/>
|
|
<line x1="10" y1="52" x2="10" y2="12"/>
|
|
<polyline class="pig-copper" points="14,44 24,36 32,40 42,24 52,18"/>
|
|
<circle class="fill-copper" cx="52" cy="18" r="1.8"/>
|
|
</svg>
|
|
<div class="lbl">Trend</div>
|
|
</div>
|
|
|
|
<!-- Warning — matchstick / flame -->
|
|
<div class="cell">
|
|
<svg viewBox="0 0 64 64">
|
|
<path class="pig-terra" d="M32,8 C 36,18 42,22 42,32 C 42,40 36,46 32,46 C 28,46 22,40 22,32 C 22,24 28,20 32,8 Z"/>
|
|
<line x1="32" y1="46" x2="32" y2="56"/>
|
|
<line x1="24" y1="56" x2="40" y2="56"/>
|
|
</svg>
|
|
<div class="lbl">Warning</div>
|
|
</div>
|
|
|
|
<!-- Bookmark — folded parchment -->
|
|
<div class="cell">
|
|
<svg viewBox="0 0 64 64">
|
|
<path d="M18,10 L 46,10 L 46,54 L 32,44 L 18,54 Z"/>
|
|
<line x1="24" y1="22" x2="40" y2="22"/>
|
|
<line x1="24" y1="30" x2="36" y2="30"/>
|
|
</svg>
|
|
<div class="lbl">Saved</div>
|
|
</div>
|
|
|
|
<!-- Conversation — two figures + contour between -->
|
|
<div class="cell">
|
|
<svg viewBox="0 0 64 64">
|
|
<circle cx="20" cy="22" r="5"/>
|
|
<path d="M12,46 C 14,34 26,34 28,46"/>
|
|
<circle cx="44" cy="22" r="5"/>
|
|
<path d="M36,46 C 38,34 50,34 52,46"/>
|
|
<path class="pig-copper" d="M26,28 C 30,24 34,24 38,28"/>
|
|
<path class="pig-copper" d="M25,32 C 30,28 34,28 39,32"/>
|
|
</svg>
|
|
<div class="lbl">Conversation</div>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|