LoktaReference
Lokta · Paper on ScreenReference · v0.2
Specimen 002 · Components, Icons, and Accessibility

The working set

Every component the system ships, in the live stock. Real icons fetched at runtime, real keyboard behavior, and the markup to paste. Switch the stock in the header and the whole page re-themes. Toggle focus rings to audit every control.

20 components 12 stocks WCAG 2.2 AA icons via Iconify
01
§ Icons

Fetched, then sharpened

The system ships no icon paths. These are pulled live from the Iconify API and sharpened in code to Lokta's edge: a 24 grid, 2px stroke, square caps, miter joins, and currentColor so each glyph inherits its text role. Click any tile to copy its sharpened SVG.

Seed set and search

tabler · mynaui

In real components

Sharpen recipe

<svg viewBox="0 0 24 24" fill="none"
  stroke="currentColor" stroke-width="2">
  <!-- Iconify body -->
</svg>
/* CSS forces the edge */
svg.lk-icon * {
  stroke-linecap: square;
  stroke-linejoin: miter;
}
02
§ Components

Every class the system ships

Each component below uses the real Lokta classes, unrestyled, on the current stock. Interactive ones are genuinely keyboard operable, with an accessibility spec beside them. Markup blocks include the ARIA you need.

2.1

Button

lk-btn

action

States

Default
Hover
Active
Focus
Disabled

Anatomy

min-height 36pxborder 1px ink label mono · uppercaseradius 0

When to use

One primary per view for the main action. Default for everything secondary. Use lk-btn-lg (44px) in touch contexts.

Do

Lead a form with a single primary button so the main path is obvious.

Don't

Stack three primaries in a row. They compete and the hierarchy collapses.

<button class="lk-btn lk-btn-primary">Save</button>
<button class="lk-btn">Cancel</button>
<button class="lk-btn" disabled aria-disabled="true">Saving…</button>
2.2

Tag

lk-tag

metadata
OUTLINE FILLED PIGMENT

When to use

Short, non-interactive metadata: a status word, a version, a category. Keep to one or two words, uppercase.

When not

Not for actions (use a button) and not for live status that pairs colour with meaning (use Status).

<span class="lk-tag">OUTLINE</span>
<span class="lk-tag lk-tag-filled">FILLED</span>
<span class="lk-tag lk-tag-pigment">PIGMENT</span>
2.3

Input

lk-input

form

States

Default
Focus
Error
Disabled

Anatomy

label always visibleplaceholder AA, not a labelmin-height 36px

Accessibility

Pair every field with a visible <label for>. Placeholders disappear on input, so never use them as the only label. Error state needs text, not colour alone.

<label class="lk-label" for="q">Search the index</label>
<input id="q" class="lk-input" placeholder="Type to filter…"
  aria-describedby="q-err" />
<p id="q-err" class="lk-label">Enter at least 2 characters</p>
2.4

Checkbox and radio

lk-choice

form
<label class="lk-choice">
  <input type="checkbox" checked>
  <span class="lk-box">✔</span><span>Email receipts</span>
</label>
<label class="lk-choice">
  <input type="radio" name="bill">
  <span class="lk-dot"></span><span>Annual</span>
</label>
2.5

Select

lk-select

form

When to use

For one choice from a known, short list. Past roughly seven options or when search helps, reach for a combobox instead.

<div class="lk-select">
  <select aria-label="Date range">
    <option>Last 12 weeks</option>
  </select>
  <span class="lk-select-chev" aria-hidden="true">▾</span>
</div>
2.6

Slider

lk-slider

form
42 
<input class="lk-slider" type="range" min="0" max="100"
  value="42" aria-label="Opacity" />
2.7

Tabs

lk-tabs

navigation · a11y

A measured grid keeps every tab calm and legible.

Anatomy

tablist the railtab selected = ink underlinetabpanel one visible

When to use

Peer views of one object. Keep labels to a word. Not for sequential steps; use a wizard.

Accessibility spec
Roletablist / tab / tabpanel
Statesaria-selected, aria-controls, aria-labelledby
Keyboard← → move, Home End jump, activate on focus
FocusRoving tabindex: only the selected tab is in the tab order
<div class="lk-tabs" role="tablist" aria-label="Plan details">
  <button class="lk-tab" role="tab" id="t1"
    aria-controls="p1" aria-selected="true">Overview</button>
</div>
<div id="p1" role="tabpanel" aria-labelledby="t1">…</div>
2.8

Content switcher

lk-switcher

navigation

When to use

Two or three mutually exclusive views of the same data, where the switch is a control rather than page navigation.

<div class="lk-switcher" role="tablist">
  <button role="tab" aria-selected="true">Chart</button>
  <button role="tab" aria-selected="false">Table</button>
</div>
2.10

Pagination

lk-pager

navigation
<nav class="lk-pager" aria-label="Pagination">
  <button aria-label="Previous page">‹</button>
  <button aria-current="true" aria-label="Page 1">1</button>
</nav>
2.12

Accordion

lk-accordion

disclosure · a11y
A background theme. Paper, Bone, Ink, Indigo and the rest, all driven by the semantic layer.

When not

Don't hide primary content or form steps people must complete. Accordions are for secondary detail.

Accessibility spec
Rolebutton header controlling a region
Statesaria-expanded, aria-controls; panel hidden
KeyboardEnter Space toggle (native button)
FocusStays on the header when toggled
<div class="lk-acc-item">
  <button class="lk-acc-head" aria-expanded="true"
    aria-controls="ac1">Question<span class="lk-acc-chev">▾</span></button>
  <div class="lk-acc-body" id="ac1" role="region">Answer</div>
</div>
2.13

Dialog

lk-modal

overlay · a11y

Anatomy

backdrop dimpanel one hard offset shadowtitle labels the dialog

Note

The modal is the single place the flat system allows a shadow: one hard offset, never a blur.

Accessibility spec
Roledialog, aria-modal="true", aria-labelledby
FocusTrapped inside; first control focused on open
KeyboardEsc closes, Tab cycles within
ReturnFocus returns to the trigger on close
<div class="lk-modal-backdrop" role="dialog" aria-modal="true"
  aria-labelledby="dlg-t">
  <div class="lk-modal">
    <div class="lk-modal-head"><span class="t" id="dlg-t">Cancel plan?</span></div>
    <div class="lk-modal-body">…</div>
  </div>
</div>
2.14

Tooltip

lk-tip

overlay · a11y
Hover or focus. Escape dismisses.
Accessibility spec
Roletrigger has aria-describedby pointing at the tip text
TriggerShows on hover and on keyboard focus, never hover only
KeyboardEsc dismisses while focused
2.15

Inline notification

lk-note-box

feedback
Saved
Billing details updated.
Build failed
Two type errors in src/index.ts.
Pin your version
CI should pin an exact release.
Global install
Project-local installs are reproducible.

Accessibility

The left bar carries colour, but the icon and title carry the meaning, so the variant never relies on hue alone. Add role="status" for live, non-critical messages.

<div class="lk-note-box lk-note-success" role="status">
  <span class="lk-note-ico" aria-hidden="true">✔</span>
  <div><div class="lk-note-title">Saved</div>
    <div class="lk-note-msg">Billing details updated.</div></div>
</div>
2.16

Status

lk-status

feedback · a11y
DONE DELAYED QUEUED
Do

Pair every status with its glyph (✔ ⚠ ○) so meaning survives for colour-blind readers and in greyscale print.

Don't

Signal state with a bare coloured dot. That fails WCAG 1.4.1, use of colour.

<span class="lk-status lk-status-done">DONE</span>
<span class="lk-status lk-status-alert">DELAYED</span>
<span class="lk-status lk-status-pending">QUEUED</span>
<!-- glyph is a ::before, paired with colour -->
2.17

Progress

lk-progress

feedback
<div class="lk-progress" role="progressbar" aria-label="Progress"
  aria-valuenow="68" aria-valuemin="0" aria-valuemax="100">
  <span style="right:32%"></span>
</div>
2.18

Data table

lk-table

data · sortable
Experiment results, sortable by column
Experiment Owner Lift Status
Onboarding checklist v3M. Reyes+4.2DONE
Pricing page annual toggleK. Adeyemi+1.1RUN
Empty-state nudgeS. Park-0.3HALT
Referral banner placementJ. Okafor+2.8DONE

Accessibility

Sortable headers are focusable and toggle aria-sort between ascending and descending. Click or press Enter on a header. Numerals are tabular and right-aligned.

interactive grid

ARIA grid · keyboard
CohortUsersRetained
Week 11,20468%
Week 298054%
Week 381247%

Keyboard

Arrow keys move the focused cell, Home/End jump to the row ends (Ctrl for the grid ends). Only one cell is in the tab order (roving tabindex), per the ARIA Grid pattern.

2.19

Code

lk-code

content
bash
npm install -D @lokta/tokens lokta build # AA-checked CSS variables per stock

Inline code reads as --surface-page within a sentence.

03
§ Editorial

Page furniture

lk-measure · lk-endmark

divider

What it is

The system's signature divider: a rule that stops short of the margin and closes with a hatched end-mark, so a section ends with breath rather than a hard cut.

lk-running-head · lk-colophon · lk-folio

editorial
Section II · Architecturep. 12
Lokta÷Paper on screen001

When to use

In document and reading layouts, not dense app chrome. The running head names the section, the folio numbers the page, the colophon signs it.

04
§ Motion and data

Motion and Datatype

dt · dt-bars · dt-spark · dt-pie

Datatype · liga

Weekly actives climbed {l:20,45,60,55,80,95} through the quarter, error rate held flat {l:8,6,7,5,6,4}, and the region split {b:62,24,14} stayed steady. Conversion sits at {p:62} of target.

{b:15,45,80,30,60,90,20} {l:10,40,25,70,50,90,35,60} {p:62}
Weekly actives 48,210 {l:40,44,42,51,48,55,60,58,64,62,70,68}
Error rate 0.21% {l:30,28,33,29,26,31,24,27,22,25,23,21}
Quota 62% {p:62}

What it is

A variable OpenType data font (SIL OFL). Ligature substitution turns {b:…} bars, {l:…} sparklines, and {p:…} pie into inline charts, no SVG, no script. A chart made of text is still text: each is role="img" with an aria-label that states the trend in words. lokta-chart.js emits the source and the label together so they cannot drift.

lk-rule-in · lk-set-in · lk-stamp · lk-leaf

motion · flat
Serves 4 · 25 min
Eggplant, chilled dashi
Saved · billing details

Five flat primitives

rule-in (a line drawn via scaleX, the end-mark drawn last), set-in (a keyline frame rules in, content set at once), stamp (a stepped confirmation fill), leaf-turn (a clip wipe with a hatched edge), and write-in. No opacity fade, no blur, no scale-bloom. Reduced motion is the floor: each shows its final state at once, and the toggle persists.

lk-stream · write-in

streaming · a11y

Written in, not faded in.

Streaming, done right for screen readers

A chunked delivery pattern, not a typewriter: chunks append in stable blocks in the visible (aria-hidden) layer, and the complete message is announced once via a polite role="log" region that exists on load and starts empty. A visible Stop control (WCAG 2.2.2). Write-in stays a Tier-2 flourish for short one-shot moments, the animating node aria-hidden, the full string on the parent's aria-label.

lk-kolam

ornament · generated

What it is

A sikku kolam: one continuous line woven around a grid of pulli (dots), the alpana tradition behind the Bengali cookbook lineage. Generated deterministically by lokta-kolam.js as pure SVG, so it renders the same in a page, a slide, and a Typst PDF, and themes through currentColor. The stroke weight binds to the rule scale (fine, default, bold above); it is a per-instance parameter, not a dial. The divider band carries data-draw, so the line writes itself in via draw() and honours reduced motion. Every kolam is role="img" with an aria-label.

Lokta · v0.2·Components, Icons, and AccessibilityWCAG 2.2 AA