1<!doctype html>
2<html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Logo</title>
6 <link rel="stylesheet" href="_card.css" />
7 <style>
8 .grid {
9 display: grid;
10 grid-template-columns: 1fr 1fr;
11 gap: 12px;
12 }
13 .cell {
14 border: 1px solid var(--alc-hairline);
15 border-radius: 8px;
16 padding: 24px;
17 display: flex;
18 align-items: center;
19 justify-content: center;
20 min-height: 100px;
21 }
22 .cell.cream {
23 background: var(--alc-bg-elev-1);
24 }
25 .cell.moss {
26 background: var(--alc-accent-deep);
27 }
28 .label {
29 font-family: var(--alc-font-mono);
30 font-size: 10px;
31 color: var(--alc-fg-3);
32 margin-top: 6px;
33 text-align: center;
34 text-transform: uppercase;
35 letter-spacing: 0.05em;
36 }
37 .mark {
38 display: flex;
39 align-items: center;
40 gap: 12px;
41 font-family: var(--alc-font-serif);
42 font-weight: 500;
43 font-style: italic;
44 font-size: 34px;
45 letter-spacing: -0.02em;
46 }
47 .mark .dot {
48 width: 16px;
49 height: 16px;
50 border-radius: 50%;
51 }
52 .mark.on-cream {
53 color: var(--alc-fg-1);
54 }
55 .mark.on-cream .dot {
56 background: var(--alc-accent);
57 }
58 .mark.on-moss {
59 color: var(--alc-fg-invert);
60 }
61 .mark.on-moss .dot {
62 background: var(--alc-accent-bright);
63 }
64 </style>
65 </head>
66 <body>
67 <div class="card">
68 <div class="grid">
69 <div>
70 <div class="cell cream">
71 <div class="mark on-cream"><span class="dot"></span>alchemy</div>
72 </div>
73 <div class="label">wordmark on parchment — primary</div>
74 </div>
75 <div>
76 <div class="cell moss">
77 <div class="mark on-moss"><span class="dot"></span>alchemy</div>
78 </div>
79 <div class="label">wordmark on moss — inverse</div>
80 </div>
81 </div>
82 </div>
83 </body>
84</html>