Quiet type,
one loud sky.

1. Link the stylesheet and the core script

Copy the css and js folders into your site. Link one stylesheet; it pulls in everything else. Add a component’s script only if you use that component.

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..700&display=swap">
<link rel="stylesheet" href="css/jewel.css">
<script src="js/jewel.js" defer></script>
<script src="js/components/tabs.js" defer></script>   <!-- one per component that needs it -->

2. Start from the page frame

The background, the cap, the header and a column of content panels. See Layout and grid.

<body>
  <div class="jewel-bg" aria-hidden="true"></div>
  <div class="jewel-cap" aria-hidden="true"></div>
  <div class="page">
    <header class="site-header">…</header>
    <main class="panel-stack">
      <section class="panel panel--pad grid">
        <header class="section-head"><p class="label">01 — Hello</p></header>
        <div class="span-9 start-4"><h2>Quiet type, one loud sky.</h2></div>
      </section>
    </main>
  </div>
</body>

3. Copy components from these pages

Every example has its code underneath, with a Copy button. Change tokens in your own stylesheet, after jewel.css, rather than editing the system.

:root {
  --bg-speed: 60s;   /* a slower background */
}

What Jewel stands for

• Restraint. Hairlines, one typeface, almost no shadow. The gradient is the only loud thing.
• Tokens first. Components read colors, sizes and timings from tokens, never raw values.
• Readable everywhere. Every text color meets WCAG AA on glass and on solid; every control is 44px to touch.
• HTML first. Native elements, no framework and no build step. Scripts add behavior; the content works without them.