Hara visual language

Interface reference · Version 1

Visual rules
for Hara.

This repository defines shared themes, tokens, motifs, backgrounds, effects, and components. Version 2 also records how those rules apply to language, documentation, learning, package, specification, playground, and community routes.

Open the v2 reference View source ↗

Composition motifs

Edge, aperture, and rack.

The original three motifs are retained as composition references. They describe boundary, inspection, and depth without assigning product meaning to the decoration itself.

EdgeBoundary / tolerance / state
ApertureInspection / focus / control
RackStructure / depth / runtime

Background references

Five adaptive
vector fields.

Each background is a 4096 × 2304 adaptive SVG. The fields support evaluation, syntax, symbol, dataflow, and runtime contexts while remaining secondary to readable content.

Evaluation field Hara vector background

evaluation

Evaluation field

A background specimen for evaluation state, boundaries, and status overlays.

4096 × 2304 · adaptive SVG
Syntax field Hara vector background

syntax

Syntax field

A background specimen for syntax trees, compiler paths, and related source structure.

4096 × 2304 · adaptive SVG
Symbol lattice Hara vector background

lattice

Symbol lattice

A repeatable geometric field for sections, covers, and large reference surfaces.

4096 × 2304 · adaptive SVG
Dataflow field Hara vector background

flow

Dataflow field

A background specimen for observable state, data movement, and inspection controls.

4096 × 2304 · adaptive SVG
Runtime field Hara vector background

kernel

Runtime field

A depth field for runtime, stack, session, and infrastructure references.

4096 × 2304 · adaptive SVG

Optional motion states

Motion remains
secondary.

The five fields are available as Astro backdrops. Motion is disabled by default and, when enabled, is limited to calibration scans and stepped indicators. Reduced-motion preferences remain authoritative.

Evaluation fieldeffect="evaluation"
Syntax fieldeffect="syntax"
Symbol latticeeffect="lattice"
Dataflow fieldeffect="flow"
Runtime fieldeffect="kernel"

Shared interface tokens

One token set,
light and dark themes.

Semantic tokens name the page ground, surfaces, recesses, signal colour, and text. Components consume these names rather than embedding route-specific colour values.

Ground--hara-bg
Surface--hara-surface-solid
Metal--hara-metal
Recess--hara-metal-recess
Signal--hara-signal
Text--hara-text
import Backdrop from "@hara-lang/ui-astro/astro/Backdrop.astro";
import "@hara-lang/ui/theme.css";
import "@hara-lang/ui/effects.css";

<Backdrop effect="kernel" intensity="quiet" />