Basic setup

<head>
  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Inter:wght@400;500;700&family=JetBrains+Mono&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="techlapse-nova.css">
</head>
<body class="tl">
  <button class="tl-btn tl-btn--primary">Get started</button>
</body>

Re-skinning for a client

Every token is a CSS variable. Override them in your own stylesheet, loaded after NOVA:

:root {
  --tl-primary-400: #7c3aed;   /* swap coral for violet */
  --tl-primary-500: #6d28d9;
  --tl-radius-md: 12px;        /* softer corners */
}

Try live tweaks in the Theme Playground.

Dark surface

Wrap any region in class="tl-dark" to apply dark token overrides. The docs site toggle applies this site-wide.

Dark surface content with inverted cream/ink tokens.

<section class="tl-dark">
  <button class="tl-btn tl-btn--primary">Action</button>
</section>