Export · #425

One file, nothing to fetch

A self-contained starter page: 14 colour tokens and 5 radii written inline, 0 external references, 0 script tags. Save it, open it from disk, and it renders — which is the whole test of a single-file export.

Open the starter ← All exports

File weight

3.6 KB

including comments

External requests

checked in the output, not by eye

Script tags

the page is HTML and CSS only

Tokens inlined

colours plus radii

The file (first 58 lines)

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Motif UI — single-file starter</title>
<meta name="description" content="One file, inline styles, no requests. Generated from the design tokens in /api/exports/tokens.json.">
<style>
  /* Tokens, inlined. Nothing here is fetched. */
  :root {
    --color-bg: #06070b;
    --color-panel: #0b0d14;
    --color-ink: #edf0f7;
    --color-ink-dim: #9aa3b5;
    --color-ink-faint: #747b87;
    --color-accent: #8b5cf6;
    --color-accent-2: #22d3ee;
    --radius-lg: 24px;
    --radius-md: 16px;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    padding: 3rem 1.25rem;
    background: var(--color-bg);
    color: var(--color-ink);
    font-family: system-ui;
    line-height: 1.6;
  }
  .wrap { max-width: 42rem; margin: 0 auto; }
  .kicker {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-accent-2);
  }
  h1 { margin: 0.5rem 0 0; font-size: 2.25rem; line-height: 1.1; letter-spacing: -0.02em; }
  .gradient {
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .panel {
    margin-top: 2rem;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    background: var(--color-panel);
  }
  .panel h2 { margin: 0; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-ink-faint); }
  .panel p { margin: 0.6rem 0 0; color: var(--color-ink-dim); }
  .stats { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin-top: 2rem; }
  .stat { padding: 0.9rem 1rem; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-md); }
  .stat dt { font-size: 0.7rem; color: var(--color-ink-faint); }
  .stat dd { margin: 0.2rem 0 0; font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }

Live preview

Rendered in a sandboxed frame with script disabled, which is the honest way to preview a file whose promise is that it needs neither.

What it is not

It is not a copy of any catalog demo. The demo implementations live in this site's code rather than in the catalog data, so a single-file export of one would have to be re-authored — and a re-authored copy that looks close is exactly how an export starts lying about what the product contains. This file carries the layout vocabulary the tokens support, and says so in its own footer.