Vanik EdgeVanik UI

Ink on paper, one accent, quiet motion.

A small library for every Vanik product. Two files, no build step. The rules and the reasons are in DESIGN_LANGUAGE.md.

Colour

Type

Page title, 28

Section, 20

Card title, 15

Body text at 14 with a line height of 1.5. Short sentences, plain words.

Small, 12.5, for secondary detail.

Label

VNK-4F2A-91C0 · 12,480.50

Actions

One filled button per screen.

Inputs

Name Role

A filter shows a dot when it is on, so it never reads as a label.

Labels

RunningNeeds youFailedStoppedsolarPuneRK

Surfaces

Do this next

One card, one button. This is the whole first run.

Notifications

A daily email of what you owe

Role

Member

App	State	People
Vanik Sense	Running	Everyone
Vanik Scout	Running	HR

Nothing here yet. Drop a file to begin.

Hints

A "?" tag that opens a small moving picture. It pulses until it has been opened once.

VanikUI.hint.define('ask', { title: 'How asking works', steps: [
  { label: 'Ask', text: 'Type a question in your own words.' },
  { label: 'Look', text: 'It searches only the documents you can read.' },
  { label: 'Answer', text: 'You get an answer with its sources, or "not found".' } ] });

<button class="vk-hint" data-vk-hint="ask" aria-label="How asking works"></button>