/design-system/artifacts

Artifacts

Self-contained HTML pages an agent generates: reports, small tools, summaries to share. Both themes, the same tokens as every other Quov surface, the same anti-references.

Agent filequov-artifacts.en.md quov-artifacts.es.md

Both themes

An artifact opens dark, like everything Quov makes, and switches to paper when the host or the reader’s system asks for light. Components only use tokens, so one stylesheet serves both.

report · 2026-10-25 · example data

Access review

Environments checked against their access rules.

Environments: 3
Rules checked: 48
Open findings: 2

environment	rules	findings
production	21	0
staging	17	1
test	10	1

Export CSVPrint

dark, default

report · 2026-10-25 · example data

Access review

Environments checked against their access rules.

Environments: 3
Rules checked: 48
Open findings: 2

environment	rules	findings
production	21	0
staging	17	1
test	10	1

Export CSVPrint

light, paper

Tokens

Copy this block as it is. Every color in the page comes from it; a literal color written in a component works in one theme and breaks the other.

Token block, dark default with the paper override

:root {
  color-scheme: dark;
  --background: oklch(0.11 0.01 260);
  --card: oklch(0.15 0.01 260);
  --secondary: oklch(0.2 0.01 260);
  --muted: oklch(0.2 0.01 260);
  --foreground: oklch(0.93 0.01 260);
  --secondary-foreground: oklch(0.85 0.01 260);
  --muted-foreground: oklch(0.64 0.01 260);
  --primary: oklch(0.93 0 0);
  --primary-foreground: oklch(0.13 0 0);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 12%);
  --ring: oklch(0.55 0.01 260);
  --mark: oklch(0.06 0.005 260);
  --radius: 0.375rem;
  --font-heading: 'Aoboshi One', ui-serif, Georgia, serif;
  --font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    color-scheme: light;
    --background: oklch(0.95 0.02 75);
    --card: oklch(0.98 0.015 75);
    --secondary: oklch(0.91 0.02 75);
    --muted: oklch(0.91 0.02 75);
    --foreground: oklch(0.18 0.01 75);
    --secondary-foreground: oklch(0.25 0.01 75);
    --muted-foreground: oklch(0.48 0.01 75);
    --primary: oklch(0.18 0 0);
    --primary-foreground: oklch(0.95 0.02 75);
    --border: oklch(0 0 0 / 10%);
    --input: oklch(0 0 0 / 8%);
    --ring: oklch(0.48 0.02 75);
    --mark: oklch(0.995 0.005 75);
  }
}
:root[data-theme='light'] {
  color-scheme: light;
  --background: oklch(0.95 0.02 75);
  --card: oklch(0.98 0.015 75);
  --secondary: oklch(0.91 0.02 75);
  --muted: oklch(0.91 0.02 75);
  --foreground: oklch(0.18 0.01 75);
  --secondary-foreground: oklch(0.25 0.01 75);
  --muted-foreground: oklch(0.48 0.01 75);
  --primary: oklch(0.18 0 0);
  --primary-foreground: oklch(0.95 0.02 75);
  --border: oklch(0 0 0 / 10%);
  --input: oklch(0 0 0 / 8%);
  --ring: oklch(0.48 0.02 75);
  --mark: oklch(0.995 0.005 75);
}
body {
  background: var(--background);
  color: var(--foreground);
  font: 400 16px/1.65 var(--font-sans);
}

Format

File: One HTML file: inline CSS and JS, fonts from Google Fonts, images as data: URIs or published beside the file.
Libraries: Only when they do real work, from a CDN, pinned to an exact version.
Title: A short name of two to four words. The explanation goes in the page.
Width: Content up to about 1100 px, a side gutter of at least 16 px, a single column at phone width. Only a table or code block scrolls sideways, inside its own container.
Language: The reader’s. Spanish with tú, English without contractions.
Footer: Quov, the date it was generated and the source of its data.

Structure

Opening: A mono line (kind, date), the h1 in Aoboshi One, one or two sentences saying what the page is for. Sized to its content, never to the full viewport.
Summary first: Key figures as a ruled row of label and mono value, then the detail. No figure tiles.
Tables: Mono header in muted-foreground over a hairline, hairlines between rows, figures right-aligned with tabular numbers.
Signed figures: Gains, losses and warnings use the semantic tokens from the Application UI guide, always with a sign or a label. Nothing else carries color.
Depth: Borders at the token alpha, radius 0.375rem, no shadows, never a card inside a card.

Rules

Complete at rest: everything readable is visible on load.
Tools open in a working state with example data marked as such.
Every figure says where it comes from.
Check the page in both themes and at phone width.

Do not

Content that waits for a scroll trigger.
Gradients, glass, glows, an accent color, emoji as section markers.
Hero metrics or a grid of identical cards.
Internal figures in anything shared with a public link.

Agent file

The rules of this page as a Markdown file for an agent: in a CLAUDE.md, a system prompt or attached to a request. Load quov-brand first; this file applies it and never overrides it. Identical content in English and Spanish.

Englishquov-artifacts.en.mdDownload Open
Españolquov-artifacts.es.mdDownload Open

Fetch from the command line

curl -fLO https://quov.io/design-system/quov-brand.en.md
curl -fLO https://quov.io/design-system/quov-artifacts.en.md
curl -fLO https://quov.io/design-system/quov-artifacts.es.md