HTML Artifact Kit

Clarity that travels.

A calm, expressive design language for dashboards, documents, presentations, and tools—delivered as a single HTML file.

1 fileDelivery contract

0 runtimeFramework dependencies

Any modelProvider strategy

01 / Direction

Quiet confidence.

Professional does not have to mean anonymous. The system pairs editorial hierarchy with operational precision, keeping ornament subordinate to meaning.

Information before interface

Start with the decision, argument, or story. Components exist to make that structure legible.

Restraint creates character

Use one strong accent, warm surfaces, crisp type, and just enough asymmetry to feel authored.

Portable is a feature

Artifacts keep their identity and function when emailed, archived, opened locally, or deployed.

Evidence earns attention

Charts, metrics, and callouts must reveal a finding—not merely decorate an empty region.

02 / Foundations

Warm neutrals.
Clear signals.

An ink-and-paper base gives long-form content warmth. Cobalt carries brand emphasis; mint marks progress without turning the whole page green.

Ink#18201F

Canvas#F4F2EC

Surface#FFFFFF

Cobalt#2458D3

Mint#32C99A

Critical#C33E48

03 / Foundations

A system that speaks plainly.

The default stack uses high-quality system fonts for true offline portability. Tight display settings create distinction; body copy stays familiar and highly readable.

System Sans / Display

Make the signal unmistakable.

48 / 48Section heading

24 / 30Decision-ready title

16 / 24Component heading

14 / 22Readable body copy with a steady rhythm and compact measure.

11 / 14Metadata label

04 / Components

Useful, not ornamental.

Components provide consistent behavior and hierarchy while leaving room for each artifact to establish its own composition. Explore the full interactive lab →

Actions and input

Report name

Visible to everyone with access to the artifact.

On track At risk Blocked Draft

Messages and activity

Forecast synchronized

All twelve regions reported before the weekly close.

14:32

Two assumptions need review

Margin targets for East and Central exceed the current range.

13:08

Scenario model ready

Base, upside, and downside cases are available to compare.

11:46

05 / Data display

Context around every number.

Metrics show a comparison and period. Charts state what changed. Operational queues make exceptions visible without turning the entire interface into an alert.

Commercial overview

Data refreshed 8 minutes ago · All regions

Net revenue$18.4m↗ 12.8% vs plan

Gross margin64.2%↗ 2.1 pts

Active accounts1,28434 added this month

Forecast confidenceHigh91% data complete

Revenue trajectory

ActualPlan

06 / Compositions

One language.
Different work.

The foundations stay consistent while each format changes its rhythm: dashboards scan, documents unfold, and presentations advance one idea at a time.

Operational