html-anything/src/lib/templates/skills/doc-kami-parchment/example.html at main · nexu-io/html-anything · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Kami Parchment · Open Design Studio №26</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,400;0,500;0,600;1,400&family=Noto+Serif+SC:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" />
<style>
  body {
    font-family: 'Source Serif Pro', 'Noto Serif SC', Georgia, serif;
    background: #f5f4ed;
    color: #1f1d18;
  }
  .ink-blue { color: #1B365D; }
  .meta { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
  .rule { border-color: #d4d1c5; }
  .display { font-family: 'Source Serif Pro', 'Noto Serif SC', Georgia, serif; }
  .h1-display { font-size: clamp(48px, 7vw, 96px); line-height: 1.05; letter-spacing: -0.01em; font-weight: 500; }
  .tag { display: inline-block; padding: 3px 10px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; background: #efeee5; color: #1B365D; }
</style>
</head>
<body class="min-h-screen">
  <div class="max-w-[920px] mx-auto px-10 py-14">

    <!-- top folio rule -->
    <header class="flex items-baseline justify-between border-b rule pb-3 text-[11px] meta uppercase tracking-[0.18em]" style="color:#6b665b">
      <span>KAMI · Open Design</span>
      <span>Vol. 01 · Issue №26 · MMXXVI</span>
      <span>Apache-2.0</span>
    </header>

    <!-- kicker -->
    <div class="mt-12 flex items-baseline gap-3">
      <span class="tag">Studio Letter</span>
      <span class="meta text-[11px] uppercase tracking-[0.18em]" style="color:#6b665b">Berlin · 52.5200° N · 13.4050° E</span>
    </div>

    <!-- hero headline -->
    <h1 class="display h1-display mt-4">
      Designing <span style="font-style:italic" class="ink-blue">intelligence</span><br/>
      on warm paper.
    </h1>

    <!-- lede -->
    <p class="mt-8 text-[20px] leading-relaxed max-w-[680px]" style="color:#3a382f">
      The open-source design studio for editorial documents and slide decks — typeset by your own coding agent. Pure white is a screen affordance, not a publishing convention. Paper has temperature, and so does type.
    </p>

    <!-- 3 columns -->
    <section class="mt-14 grid grid-cols-3 gap-10 border-t rule pt-10">
      <article>
        <div class="meta text-[10px] uppercase tracking-[0.18em] ink-blue">01 · Pillar</div>
        <h2 class="display text-[24px] font-semibold mt-2 leading-snug">Composed,<br/>not assembled.</h2>
        <p class="mt-3 text-[14.5px] leading-relaxed" style="color:#3a382f">Every page is set by hand. We don't concatenate sections — we typeset them.</p>
      </article>
      <article>
        <div class="meta text-[10px] uppercase tracking-[0.18em] ink-blue">02 · Pillar</div>
        <h2 class="display text-[24px] font-semibold mt-2 leading-snug">One typeface<br/>speaks.</h2>
        <p class="mt-3 text-[14.5px] leading-relaxed" style="color:#3a382f">Source Serif Pro carries every level of hierarchy. No display vs. body fights.</p>
      </article>
      <article>
        <div class="meta text-[10px] uppercase tracking-[0.18em] ink-blue">03 · Pillar</div>
        <h2 class="display text-[24px] font-semibold mt-2 leading-snug">Ring or whisper,<br/>never shout.</h2>
        <p class="mt-3 text-[14.5px] leading-relaxed" style="color:#3a382f">Hairline rules, single accent, no drop shadows. The page should feel printed.</p>
      </article>
    </section>

    <!-- pull quote -->
    <blockquote class="mt-14 border-l-2 pl-5 italic" style="border-color:#1B365D">
      <p class="text-[22px] leading-snug max-w-[620px]" style="color:#1f1d18">
        "We release one document per fortnight, and every one of them is something we'd actually print."
      </p>
      <footer class="mt-3 text-[12.5px] meta uppercase tracking-[0.16em]" style="color:#6b665b">— Editorial Team · Berlin, 2026</footer>
    </blockquote>

    <!-- colophon -->
    <footer class="mt-16 pt-6 border-t rule flex items-baseline justify-between text-[11px] meta uppercase tracking-[0.18em]" style="color:#6b665b">
      <span>Set in Source Serif Pro &amp; IBM Plex Mono</span>
      <span>opendesign.studio</span>
      <span>№26 / 26</span>
    </footer>
  </div>
</body>
</html>