22 lines
1.4 KiB
HTML
22 lines
1.4 KiB
HTML
|
<!doctype html>
|
||
|
|
<!-- @dsCard group="Brand" name="Brand · Logo" subtitle="Primary · inverted · ?! wordmark" viewport="700x220" -->
|
||
|
|
<html><head>
|
||
|
|
<meta charset="utf-8"><title>Logo</title>
|
||
|
|
<link rel="stylesheet" href="../colors_and_type.css">
|
||
|
|
<style>
|
||
|
|
body { padding: 20px 32px; background: var(--paper); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; align-items: center; }
|
||
|
|
.cell { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px; }
|
||
|
|
.cell.dark { background: var(--ink); border-radius: 4px; }
|
||
|
|
.cell img { width: 120px; height: 120px; object-fit: contain; }
|
||
|
|
.cell.dark img { filter: invert(1); }
|
||
|
|
.cell .lbl { font: 500 10px/1 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
|
||
|
|
.cell.dark .lbl { color: var(--fg-on-dark); opacity: 0.55; }
|
||
|
|
.wordmark { font: 600 56px/1 var(--ff-sans); letter-spacing: -0.04em; color: var(--ink); }
|
||
|
|
.wordmark .q { color: var(--ink); }
|
||
|
|
</style></head>
|
||
|
|
<body>
|
||
|
|
<div class="cell"><img src="../assets/whynot-logo.png" alt="whynot logo"><span class="lbl">Primary · black on white</span></div>
|
||
|
|
<div class="cell dark"><img src="../assets/whynot-logo.png" alt="whynot logo"><span class="lbl">Inverted · white on black</span></div>
|
||
|
|
<div class="cell"><div class="wordmark">?!</div><span class="lbl">Mini · ?! wordmark (favicon size)</span></div>
|
||
|
|
</body></html>
|