Skip to content
Lokta Patterns
Application tier

Every class the app, data, and marketing layers ship.

A live gallery on the lokta.css drop-in. Switch the stock above; everything holds WCAG 2.2 AA on each.

Namesake

lk-wordmark · :lang() Devanagari + Bengali
लोक्ता Lokta লোক্তা
Devanagari · Mukta

लोक्ता काग़ज़

Latin · Archivo

Lokta paper

Bengali · Anek Bangla

লোক্তা কাগজ

One paper-and-manuscript tradition: Himalayan lokta, Bengali Pala, Japanese washi. Script is chosen by content language, never a dial.

App shell & navigation

lk-shell · lk-sidebar · lk-topbar · lk-nav · lk-nav-item

A sidebar + main grid. The active item takes aria-current.

Stat & data viz

lk-stat · lk-barlist · lk-legend · --viz-1..8
Revenue $48.2k 12.4%
Churn 2.3% 0.6%

Sequential scale (heat)

Controls

lk-segment · lk-switch · lk-badge · lk-avatar
8 new Beta

Feedback

lk-toast · lk-empty · lk-skeleton
SavedYour report is ready.
No results

Nothing matches that filter.

Forms

lk-fieldset · lk-input-group · lk-file · lk-char-count
Account
https://

42 / 280

Marketing

lk-feature · lk-plan · lk-quote · lk-cta · lk-logos · lk-on-pigment · lk-link

AA by construction

Contrast and grid are verified in CI, not by eye.

It reads like a book and audits like a spec.Sachiyo H.

Start with a clean page.

Get Lokta
HaradaPrestelFolio
Feature ground

Drop a section on a pigment and lk-on-pigment recolours the furniture and buttons to read on it. Inline links use lk-link.