Designsystem · v0.2

Olika produkter. Gemensamma regler.

Fem levande system som får mycket olika produkter att kännas avsiktliga, skalbara och byggbara. Den här versionen är medvetet konkret, så att det blir lättare att säga emot.

5 system20+ ytorKod förstGjort för att utmanas

Portföljens kärna

Apparna är bevisen. Systemen är portföljen.

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

Systemfamiljer

Fem sätt att bestämma vad som hör ihop.

Summer 26 och Raw Drafts finns redan som separata kodsystem. De andra familjerna är avsiktliga synteser eller framväxande system.

LiveProduction system

Summer 26

HAAMs nuvarande system: varm redaktionell struktur, seriöst produktarbete och en säsongsbaserad ljus/mörk-tolkning i stället för ett generiskt temabyte.

Ytor

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 ↗

Grunder

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

Komponenter

Floating chrome
Arrow pills
Signal chips
Tilted media
Editorial sections

Interaktion

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

Stresstester

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

Design tokensResponsive designThemingAccessibilityLocalizationReactCSS custom properties

Genererad syntes100 Objects + Life in Finland

Everyday Archive

Ett nytt gemensamt språk för kulturkollektioner: objekt först, metadata sedan, proveniens alltid synlig. Det är en syntes, inte ett påstående om att 2017-sajterna hade ett formellt gemensamt bibliotek.

Ytor

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

Grunder

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

Komponenter

Object card
Year marker
Collection filter
Source note
Language rail

Interaktion

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

Stresstester

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

HAAMs Stranger Things-liknande Upside Down. Ett kolsvart Y3K-system där cyberpunkbläckfisken, neonsignaler, scanlines, rutnät, utkast, AI-proveniens och instabila experiment får ta över.

Ytor

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

Grunder

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

Komponenter

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

Interaktion

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

Stresstester

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

Y3KCyberpunkDesign tokensAI interactionProvenanceMotion designEditorial system3D mascot

Genererad syntesSpace + XYZ

Working Matter

Ett lugnare experimentellt system för ofärdiga rumsliga prototyper. Objekt, annotationer, koordinater och revisioner kan driva utanför den vanliga sidan utan att ärva Raw Drafts cyberpunkvärld.

Ytor

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

Grunder

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

Komponenter

Coordinate label
Revision rail
Annotation
Artifact card
Spatial marker

Interaktion

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

Stresstester

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

Spatial interactionDesign system governanceContent statesVersioningExperimental UIEditorial design

FramväxandeHAAM operational products

Instrument

Ett tätare system för produkter som hjälper någon att lösa ett tillstånd, godkänna en konsekvens eller förstå evidens. Det bygger på de interaktionskontrakt som redan definierats för HAAMs produkter.

Ytor

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

Grunder

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

Komponenter

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

Interaktion

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

Stresstester

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

Figma variablesVariantsAuto LayoutWCAGDesign QADeveloper handoffStorybook

Täckningsmatris

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

Artefaktlager

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.

Det här är 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.

Se produkterna Starta ett projekt ↗

Apparna är bevisen. Systemen är portföljen.

Fem sätt att bestämma vad som hör ihop.

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?