App launcher
Shared foundations, reusable interface patterns, and focused route references.
Language, documentation, learning, package, specification, playground, and community routes.
Shared foundations and reusable interface components, from visual rules to exported specimens.
Interaction behaviour, UI states, and tool workbench structures.
Shared language · Foundations
Hara sites and tools may have different information architectures while sharing identity, typography, colour, geometry, state, motion, and accessibility rules. This page records those rules and their source tokens.
01 · Identity
The mark is not a flexible logo system. The block-H silhouette, its internal proportions, and the single blue signal square are invariants across the ecosystem.
HaraMark.astroBelow 24px, use a text label or a larger touch target rather than simplifying the mark.
identity / product1 signal unitKeep at least one signal-square width clear on every side. Product names align to the mark; they do not enter its protected field.
Use current text colour for the H and the shared signal token for the square.
Do not alter proportions to fill a container.
Do not turn the identity into an ornamental glyph.
Do not redraw, outline, bevel, or add a second signal.
Ecosystem identity
Applications own names, information architecture, and task-specific imagery. They do not replace the block H, invent product colours, or fork the theme contract.
02 · Colour and material
Light and dark modes are equal products. Both use continuous fields, restrained contrast steps, one primary blue signal, and state colours that remain functional.
data-theme="light"Bright enough to separate, never white enough to glare.
--hara-v2-canvas#eef0efPage field--hara-v2-canvas-clean#f8f8f5Reading field--hara-v2-panel#f3f3f0Ordinary surface--hara-v2-panel-raised#fbfbf8Raised surface--hara-v2-panel-recess#e4e7e6Recessed surface--hara-v2-ink#13171cPrimary content--hara-v2-muted#5d656eSecondary content--hara-v2-faint#8a9299Tertiary metadatadata-theme="dark"Depth comes from tone, not a brighter border around every region.
--hara-v2-canvas#090b0ePage field--hara-v2-canvas-clean#06080bReading field--hara-v2-panel#101419Ordinary surface--hara-v2-panel-raised#151a20Raised surface--hara-v2-panel-recess#0b0e12Recessed surface--hara-v2-ink#eef1f4Primary content--hara-v2-muted#a1aab3Secondary content--hara-v2-faint#6e7882Tertiary metadataline / grid / sketch / shadow--hara-v2-line-strong--hara-v2-line--hara-v2-grid--hara-v2-sketch--hara-v2-shadowState, not decoration#4d9cffIdentity, focus, selection#3e9d6fCompleted or verified#f06a3cAttention or recoverable risk#d84f58Destructive or failed stateUse full ink for reading, labels, and critical values.
✓ Verified release · exact revision recorded
Metadata contrast is not a substitute for readable prose.
A blue wash without text, marker, or current-state semantics is ambiguous.
Protected inventory
Aliases the existing Hara families and reserves blue for identity, focus, selection, and measured state.
--hara-v2-font-heading--hara-v2-font-body--hara-v2-font-code--hara-v2-signal--hara-v2-signal-softKeeps ecosystem chrome and application-local chrome measurable, composable, and independently collapsible.
--hara-v2-header-height--hara-v2-context-height--hara-v2-context-offset--hara-v2-rail-width--hara-v2-inspector-widthSeparates page breathing room, broad application content, and readable prose measure.
--hara-v2-page--hara-v2-column--hara-v2-proseUses restrained radii for repetition and reserves clipped geometry for rare identity or hero moments.
--hara-v2-cut--hara-v2-cut-small--hara-v2-radius--hara-v2-radius-large--hara-v2-row--hara-v2-controlBuilds hierarchy through tonal fields before borders, bevels, or shadows.
--hara-v2-canvas--hara-v2-canvas-clean--hara-v2-panel--hara-v2-panel-raised--hara-v2-panel-recess--hara-v2-ink--hara-v2-muted--hara-v2-faintSeparates functional seams, construction lines, ambient texture, hover state, and depth.
--hara-v2-line--hara-v2-line-strong--hara-v2-grid--hara-v2-sketch--hara-v2-hover--hara-v2-shadow--hara-v2-paperGreen, orange, and red communicate outcomes and risk only; they are not decorative palette choices.
--hara-v2-success--hara-v2-warning--hara-v2-dangerThe calm layer softens common boundaries and settles functional transitions without changing identity.
--hara-v2-motion--hara-v2-ease--hara-v2-calm-line--hara-v2-calm-line-strong--hara-v2-calm-grid--hara-v2-calm-sketch--hara-v2-calm-hover--hara-v2-calm-shadow03 · Typography
Hara uses the existing sans family for identity, headings, controls, and reading. Monospace is reserved for code, exact identifiers, telemetry, and compact status.
--hara-v2-font-heading · --hara-v2-font-body--hara-v2-font-codeLong-form text uses a calm line length and generous leading. Dense product interfaces may reduce spacing, but not until the task genuinely benefits from comparison or repeated manipulation.
REVISION af6273c · RUNTIME wasm · VERIFIEDEditorial prose
The visual system is successful when a reader can move from a guide to a specification, a package record, and a community thread without relearning what hierarchy, state, or provenance look like.
Precision is alignment, rhythm, and exact state—not extra chrome around every fact.
Telemetry and data
(defn selected? [node]
(= :active (:state node)))Package compatibility and provenance remain readable even when the title spans two or three lines.
hara-lang/visual-language@af6273c…Keep the full value available through title, copy, or detail view.
Readable text should not become tiny telemetry merely because a panel is narrow.
04 · Geometry and rhythm
Geometry follows task frequency. Common controls use calm radii and reliable dimensions; clipped corners remain rare identity accents rather than the default card shape.
4px8px12px16px24px32px48px64px--hara-v2-page--hara-v2-column--hara-v2-prose--hara-v2-rail-width · --hara-v2-inspector-width7px radiusPanels, fields, tabs, cards, and repeated controls.
12px radiusWorkbench frames, major previews, and large composed examples.
4px cutIdentity or hero moments only; never every container.
Dense mode is earned by repeated comparison, not used as the default visual tone.
Responsive collapse
1120 → 820 → phone05 · Imagery and motif language
Edge, Aperture, Rack, and Fleet Field create a recognisable material world through original technical imagery. They support hierarchy and mood; they never obscure text or impersonate another franchise.
Use for arrival, movement, and a broad product proposition.
Use around evidence, selection, checking, or a central concept.
Use for packages, runtimes, resources, and operational composition.
Architectural surface
The field uses a real raster architectural scene with a dark material treatment and sparse signal markers. It may carry a hero or section transition, but content remains first in source and reading order.
Show the package graph, editor viewport, benchmark evidence, or contributor relationship the interface is actually about.
Keep contrast quiet, avoid placing detailed linework under prose, and do not make ambient movement necessary for comprehension.
06 · Motion and state
Functional transitions settle around 190ms with the shared easing curve. Reduced motion removes animation without removing status, hierarchy, or feedback.
Use for hover, focus, disclosure, selection, and state changes where continuity helps orientation.
Use only when it does not compete with reading, data, or repeated manipulation. Never animate geometry merely to look technical.
Animations collapse to effectively zero duration. Loading retains text and a static progress marker; focus and selection remain visible.
Every interactive control has a visible focus ring with sufficient offset.
State is never encoded by colour alone.
Touch controls retain a minimum 34px height and accessible names.
07 · Composed examples
Isolated swatches are not enough. These compact studies show the same contracts supporting navigation, prose, data, code, workbench chrome, and community content.
identity · current state · quiet seam760px measure · calm hierarchyRuntime model
Interpreter and HBC execution share session, generation, and source-revision fencing while preserving backend-specific observations.
Read the exact contract →38px rows · selection is not colour-only| Runtime | Status | Median |
|---|---|---|
| HBC Wasm | selected | 4.8 ms |
| Interpreter | verified | 13.2 ms |
| JVM | baseline | 6.1 ms |
stable dark frame · exact identifiers(def.workflow
lint
[:task] {:main {:fn lint-project
:argcount 1}})v2 document around scoped tool chromesupersonic-live/main.halpaper surface · provenance firstSubmitted by @mina · hara-lang/hara · exact release revision
08 · Ownership
The catalogue must make it obvious which rules downstream products inherit and which presentation exists only to explain the system.
src/v2/* · src/astro/v2/*site/src/pages/{product}site/src/styles/v2-foundations.cssAdoption rule
Downstream products import `v2.css` and shared Astro components, then own their application composition. They should never copy catalogue CSS or redefine protected Hara tokens locally.