HAAM · Design systems
HAAM takes its cue from a hammer: a useful tool for making durable things. The structure is grounded. Summer, winter, sunshine and moonlight are the outfits it wears as the seasons change.
The durable core
Durability lives in clear information, dependable interactions, accessible journeys and systems people can understand and maintain. A new visual identity, a new season or a new technology should be something the product can absorb while preserving what people rely on. Keeping it useful takes continued care.
The browser is the canonical first surface today. Figma libraries and Storybook mirrors are explicitly shown as the next artifact layer where they do not exist yet.
Quality contract
Performance, accessibility, Best Practices and SEO each have a 100/100 Lighthouse target on mobile and desktop. Three runs per page keep a lucky result from becoming the headline. The dated report shows the actual results, warnings and work still to do.
Default English homepage /: one Google-run audit per device. The three-run site sample is reported separately.
Performance / 100 · Accessibility / 100 · Best practices / 100 · SEO / 100
Download audit data ↗Target not yet verified across the sampled pages
Latest production evidence: .
Security is checked separately: browser policies, dependency advisories and application review. Automated scores do not certify security or accessibility conformance.
Read the website quality report ↗Structure and expression
The durable core is the product’s purpose and the relationships that make it understandable. It gives change something solid to build on.
The seasonal layer gives that structure a fitting expression. Warm summer paper can become a winter landscape; sunshine can become moonlight. The identity remains recognisable.
Evidence in the portfolio
A continuing institutional platform absorbing visual identities, editorial change and technical renewal. HAAM’s work continues through maintenance and modernization.
The digital exhibition outlived its 2017–2018 physical tour. Later archival and restoration work treated the collection as something worth keeping.
Characters
The same little swallow, from a site interaction to a reusable character.
System families
HAAM’s core currently wears Summer 26. Raw Drafts has its own distinct expression. The other families below are deliberate syntheses or emerging systems, with their status made explicit.
The grounded HAAM identity, currently dressed for Summer 26. Warm editorial surfaces, painted accents and sunshine/moonlight modes express a continuing commitment to useful, durable work.
Big decisions need a visible hierarchy.
STATUS · METADATA · 12:48:03A new shared language for cultural collections: object first, metadata second, provenance always visible. It is a synthesis, not a claim that the 2017 sites used a formal shared library.
Big decisions need a visible hierarchy.
STATUS · METADATA · 12:48:03
The Stranger Things Upside Down of HAAM. A void-black Y3K system where the cyberpunk octopus, neon signal rails, scanlines, grids, drafts, AI provenance and unstable experiments are allowed to take over. Deliberately stranger and less domesticated than HAAM.
Big decisions need a visible hierarchy.
STATUS · METADATA · 12:48:03Cyberpunk Y3K interface language for unfinished work, AI provenance and experiments that are allowed to stay strange.
A quieter experimental system for unfinished spatial prototypes. Objects, annotations, coordinates and revisions can drift off the conventional page without inheriting Raw Drafts' cyberpunk world.
Big decisions need a visible hierarchy.
STATUS · METADATA · 12:48:03Leave the object where the thought happened.
A denser system for products that help someone resolve a state, approve a consequence or understand evidence. It is derived from the interaction contracts already defined across HAAM products.
Big decisions need a visible hierarchy.
STATUS · METADATA · 12:48:03Coverage matrix
Each family is pushed by different constraints. The gaps are invitations for the next app to break the system in a new way.
| Constraint | HAAM | Everyday Archive | Raw Drafts | Working Matter | Instrument |
|---|---|---|---|---|---|
| Responsive layouts | Strong | Strong | Strong | Experimental | Strong |
| Localization / i18n | 6 locales | Core constraint | Partial | Partial | Planned |
| Accessibility / WCAG | Production | Reading first | Needs stress test | Needs stress test | Core constraint |
| Dark / alternate themes | 4 combinations | Optional | Native | Experimental | Semantic |
| Dense data | Light | Metadata | Low | Low | Primary |
| AI states / provenance | Growing | Source records | Primary | Partial | Primary |
| Failure / empty states | Production | Missing records | Glitch + draft states | Draft state | Primary |
| Design-tool mirror | Next | Next | Next | Next | Next |
Artifact layers
The goal is not to duplicate work between tools. It is to make the same decisions inspectable by designers, engineers and reviewers.
Variables, semantic tokens, component properties, variants, Auto Layout, prototype states and Dev Mode handoff. The design file should mirror decisions already proven in products, not become a decorative component museum.
React components, CSS custom properties, responsive rules, accessibility behavior and actual edge cases. The browser is where a token meets real content and starts losing arguments.
Component stories, state matrices, accessibility notes, contribution rules and usage guidance. Documentation should show when not to use a component as clearly as when to use it.
Versioning, contribution model, deprecation, design QA and release notes. Every new app is a stress test: either the system absorbs it or the rules have to change.
Care is part of the system
Good foundations let a product grow, be repaired and find a new expression as its context changes.
Optional analytics. Google Analytics and Clarity load only if allowed; form, email, and chat content are excluded.