Design systems · v0.2

Different products. Shared rules.

Five living systems for making very different products feel intentional, scalable and buildable. This version is concrete on purpose, so it is easier to disagree with.

5 systems20+ surfacesCode firstDesigned to be challenged

The portfolio piece

The apps are evidence. The systems are the portfolio.

Cheap software makes output less impressive. The harder signal is whether a designer can create rules that survive many products, states, breakpoints, languages and implementation constraints. These systems turn that signal into something visible.

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.

Design tokensFigma variablesComponent libraryVariantsAuto LayoutResponsive designWCAGStorybookReactDesign QAGovernanceDeveloper handoff

System families

Five ways of deciding what belongs together.

Summer 26 and Raw Drafts already exist as distinct code systems. The other families are deliberate syntheses or emerging systems made from existing work and current product directions.

LiveProduction system

Summer 26

The current HAAM system: warm editorial structure, serious product work and a seasonal light/dark retelling instead of a generic theme switch.

Surfaces

haam.co Products Case studies Skills

TOKENS / COLOR

Paper#fffef9

Ink#1b1a17

Sun#ffd83d

Fun#ff7faf

Grass#63d28b

TYPE / HIERARCHY

Big decisions need a visible hierarchy.

STATUS · METADATA · 12:48:03

SUMMER 26Serious work, with more sunshine in it.

CASE STUDYLIVE ↗

Foundations

Georgia + Arial
3 painted accents
Cream / moonlight themes
Fluid clamp() scale

Components

Floating chrome
Arrow pills
Signal chips
Tilted media
Editorial sections

Interaction

Dark mode is a retelling
One highlighter moment
Motion yields to reduced-motion
Rules before decoration

Stress tests

6 locales
Season + mode combinations
Long-form case studies
Mobile chrome
Client + culture work

Design tokensResponsive designThemingAccessibilityLocalizationReactCSS custom properties

Generated synthesis100 Objects + Life in Finland

Everyday Archive

A 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.

Surfaces

100 Objects Life in Finland

TOKENS / COLOR

Archive paper#f1eee4

Museum ink#171713

Birch#d7c6a9

Object red#d64d3f

Lake#4b7088

TYPE / HIERARCHY

Big decisions need a visible hierarchy.

STATUS · METADATA · 12:48:03

1957

OBJECT 057Coffee potEveryday life · Finland

ALLHOMEWORKLEISURE

Foundations

Object-led grid
Year as navigation
Quiet paper palette
Metadata has hierarchy

Components

Object card
Year marker
Collection filter
Source note
Language rail

Interaction

Image before interpretation
Filters preserve context
Metadata can expand
Provenance stays attached

Stress tests

100+ objects
Long titles
Historic dates
Multilingual content
Image-light records

Information architectureContent designComponent libraryInternationalizationMetadataResponsive grid

LiveHAAM's Upside Down · Y3K cyberpunk octopus

Raw Drafts

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.

Surfaces

Raw Drafts ↗Octopus ↗Blog ↗

TOKENS / COLOR

Void#03020a

Signal cyan#67f7ff

Magenta#ff4fd8

Acid#c7ff2f

Violet#8b6dff

TYPE / HIERARCHY

Big decisions need a visible hierarchy.

STATUS · METADATA · 12:48:03

RAW DRAFTS // Y3KHAAM / UPSIDE DOWNSIGNAL LIVE

VOID / SIGNAL / DRAFT / AGENTThe octopus got into the system.

Cyberpunk Y3K interface language for unfinished work, AI provenance and experiments that are allowed to stay strange.

NOT THE MAIN WORLD

Foundations

IBM Plex Mono + Sora / hard display type
Void-black space with neon signal colors
56px grid, scanlines and orbit fields
Square frames instead of friendly SaaS cards
The octopus is a living mascot, not decoration

Components

Signal rail
Y3K frame
Octopus portal
Neon status chip
Article frame
Orbit field

Interaction

Raw Drafts is HAAM's Upside Down
The interface may feel infected, alive or unstable
AI involvement and provenance stay visible
Drafts and revisions are first-class states
Glitch is texture, not an excuse for broken usability

Stress tests

Long essays
Live broadcaster
Generated media
Games and experiments
3D mascot
Human + AI authorship

Y3KCyberpunkDesign tokensAI interactionProvenanceMotion designEditorial system3D mascot

Generated synthesisSpace + XYZ

Working Matter

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.

Surfaces

haam.space ↗XYZ

TOKENS / COLOR

Canvas#f7f3e8

Carbon#0d0d0d

Clay#ff795f

Spatial#6d74ff

Moss#a3d77a

TYPE / HIERARCHY

Big decisions need a visible hierarchy.

STATUS · METADATA · 12:48:03

SPACE / XYZCOORD 031

Leave the object where the thought happened.

revision / spatial / still moving

Foundations

Revision is visible
Serif + mono contrast
Rough edges are allowed
Whitespace can become physical space

Components

Coordinate label
Revision rail
Annotation
Artifact card
Spatial marker

Interaction

Objects can drift off-grid
Annotations remain addressable
Published is not necessarily final
Space can carry hierarchy

Stress tests

3D / spatial views
Unfinished prototypes
Long annotations
Object relationships
Mobile spatial fallbacks

Spatial interactionDesign system governanceContent statesVersioningExperimental UIEditorial design

EmergingHAAM operational products

Instrument

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.

Surfaces

Products Client Desk HAAM BI Product Studio

TOKENS / COLOR

Surface#f5f6f7

Text#111318

Action#315efb

Success#2e8a58

Attention#e89a24

TYPE / HIERARCHY

Big decisions need a visible hierarchy.

STATUS · METADATA · 12:48:03

Review queue3 need action

READYImport site map12 receipts

CHECKPublish changePermission required

Foundations

State before surface
Dense sans hierarchy
Evidence stays attached
Semantic status colors

Components

Status pill
Data row
Approval bar
Evidence chip
Empty / loading / error

Interaction

Permission before consequence
Suggestion differs from fact
Failure paths are designed
Missing data is explicit

Stress tests

Dense tables
Async agent work
Permissions
Partial data
High-consequence actions

Figma variablesVariantsAuto LayoutWCAGDesign QADeveloper handoffStorybook

Coverage matrix

A system should fail somewhere useful.

Each family is pushed by different constraints. The gaps are invitations for the next app to break the system in a new way.

Design system capability coverage
Constraint	Summer 26	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

One system, multiple mirrors.

The goal is not to duplicate work between tools. It is to make the same decisions inspectable by designers, engineers and reviewers.

01Next mirror

Figma

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.

02Canonical now

Code

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.

03Next mirror

Storybook + docs

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.

04Built by pressure

Governance

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.

This is version 0.2

Find the thing that feels wrong and change it.

That friction is useful. A bad concrete choice gives taste something to push against.

See the products Start a project ↗

The apps are evidence. The systems are the portfolio.

Five ways of deciding what belongs together.

Summer 26

Everyday Archive

Raw Drafts

Working Matter

Instrument

A system should fail somewhere useful.

One system, multiple mirrors.

Figma

Code

Storybook + docs

Governance

Find the thing that feels wrong and change it.

Help improve this website?