HAAM Standards · Release 1.0
HAAM Design System
The shared foundation for how HAAM looks, behaves, sounds, performs, and remains coherent over time. It gives every contributor a clear standard while preserving enough range for serious, original work.
System
01Foundations
Color, typography, spacing, grid, shape, and motion.
System
02Identity
The visual and verbal signals that make the institution recognizably HAAM.
System
03Components
Reusable interface elements with clear hierarchy and accessible behavior.
System
04Patterns
Compositions for recurring product, editorial, data, and service needs.
System
05Quality
Accessibility, performance, resilience, and trust requirements.
System
06Governance
Ownership, releases, deprecation, and rules for generated work.
01
Principles
A small set of durable rules guides visual decisions, interaction behavior, writing, implementation, and review.
Principle 01
Clarity has priority
Every screen should communicate its purpose, hierarchy, and next action without requiring interpretation. Ornament earns its place through meaning.
Principle 02
Durability guides decisions
The system is designed for years of change. Stable rules, semantic structures, and maintainable components matter more than short-lived visual fashion.
Principle 03
Character stays disciplined
HAAM should remain distinctive, cultural, and human. Expression is composed carefully so the work retains authority and never becomes visual noise.
Principle 04
Access is part of quality
Readable type, keyboard support, meaningful structure, reduced-motion support, and strong contrast belong in the first version of every interface.
02
Foundations
The smallest shared decisions create the visual rhythm of every HAAM interface. Their names describe purpose rather than a single page.
Color
Neutral paper and ink carry most of the system. Accent colors clarify hierarchy, state, and identity.
Typography
Three voices support institutional expression, digital clarity, and technical precision.
release: 1.0.0
Spacing
A restrained scale keeps pages related while allowing editorial and product layouts to breathe differently.
space-1
4pxspace-2
8pxspace-3
12pxspace-4
16pxspace-6
24pxspace-8
32pxspace-12
48pxspace-16
64px03
Identity
HAAM should feel established, exacting, culturally alert, and alive. The identity gains strength through repetition and restraint.
Write with authority
“We design systems that remain useful after the launch.”
Use complete thoughts, concrete nouns, measured claims, and enough context for the reader to make a decision.
Avoid promotional noise
“We create mind-blowing experiences that change everything.”
Avoid inflated promises, trend language, fragmented slogans, and copy that performs confidence without providing evidence.
04
Components
Components make recurring decisions explicit. Each one carries hierarchy, interaction, content, accessibility, and state rules.
Buttons
Use one primary action per decision area. Labels begin with a clear verb and remain understandable without nearby explanatory copy.
Badges
Badges communicate a compact state or classification. They do not replace headings, explanatory text, or prominent actions.
Field note · Tallinn
Design records belong in public
A card groups one meaningful destination with enough context to judge its relevance before opening it.
Cards
Cards are used for grouped destinations and records. Avoid nesting cards or turning every paragraph into an isolated panel.
05
Patterns
Patterns coordinate several components around a recurring need. They preserve user expectations while leaving room for subject matter.
Pattern
Editorial
Long-form pages use measured typography, generous reading width, persistent context, and a restrained visual rhythm.
Pattern
Product
Product interfaces keep actions explicit, states visible, forms calm, and data dense enough to be useful without becoming cryptic.
Pattern
Service
Commercial pages explain the work, evidence, process, and next step in plain language. Claims should remain specific and supportable.
Pattern
Institutional
History, standards, research, and public records use stable URLs, clear provenance, dates, authorship, and archival structure.
06
Quality
A HAAM interface is judged by how well it works under real conditions. Visual polish cannot compensate for exclusion, delay, ambiguity, or fragility.
Semantic HTML, full keyboard operation, visible focus, meaningful labels, contrast checks, and reduced-motion support.
Server-rendered content first, disciplined JavaScript, responsive images, stable layout, and measurable loading budgets.
Interfaces remain understandable when data is empty, delayed, incomplete, translated, unusually long, or unavailable.
Dates, sources, ownership, pricing, states, and system actions are visible wherever they affect a person's decision.
07
Governance
The system remains trustworthy through visible ownership, explicit releases, automated constraints, and documented judgment.
Operating rule
One canonical source
Tokens, component behavior, content rules, and accessibility expectations live beside the implementation so people and agents work from the same record.
Operating rule
Promotion through evidence
A local pattern becomes part of the system when it recurs, solves a stable need, and can be named clearly enough for others to use correctly.
Operating rule
Deprecation is documented
Replaced components remain traceable. The system records what changed, why it changed, and which migration path protects existing work.
Operating rule
Generated work is reviewed
Automated checks catch off-token styling, accessibility failures, regressions, and unsupported variants before generated output becomes precedent.