Designsystemer · v0.2

Forskellige produkter. Fælles regler.

Fem levende systemer, der får meget forskellige produkter til at føles bevidste, skalerbare og mulige at bygge. Denne version er med vilje konkret, så den er lettere at være uenig med.

5 systemer20+ fladerKode førstLavet til at blive udfordret

Porteføljens kerne

Apps er beviserne. Systemerne er portefø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

Systemfamilier

Fem måder at beslutte, hvad der hører sammen.

Summer 26 og Raw Drafts findes allerede som separate kodede designsystemer. De andre familier er bevidste synteser eller systemer under udvikling.

LiveProduction system

Summer 26

HAAMs nuværende system: varm redaktionel struktur, seriøst produktarbejde og en sæsonbaseret lys/mørk-fortolkning i stedet for et generisk temasift.

Flader

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 ↗

Fundament

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

Stresstests

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

Design tokensResponsive designThemingAccessibilityLocalizationReactCSS custom properties

Genereret syntese100 Objects + Life in Finland

Everyday Archive

Et nyt fælles sprog for kulturkollektioner: objekt først, metadata bagefter, proveniens altid synlig. Det er en syntese, ikke en påstand om at 2017-siderne brugte et formelt fælles bibliotek.

Flader

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

Fundament

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

Stresstests

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-lignende Upside Down. Et kulsort Y3K-system, hvor cyberpunk-blæksprutten, neonsignaler, scanlines, gitre, kladder, AI-proveniens og ustabile eksperimenter får lov at tage over.

Flader

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

Fundament

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

Stresstests

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

Y3KCyberpunkDesign tokensAI interactionProvenanceMotion designEditorial system3D mascot

Genereret synteseSpace + XYZ

Working Matter

Et roligere eksperimentelt system til ufærdige rumlige prototyper. Objekter, annotationer, koordinater og revisioner kan drive uden for den normale side uden at arve Raw Drafts' cyberpunkverden.

Flader

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

Fundament

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

Stresstests

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

Spatial interactionDesign system governanceContent statesVersioningExperimental UIEditorial design

Under udviklingHAAM operational products

Instrument

Et tættere system til produkter, der hjælper nogen med at løse en tilstand, godkende en konsekvens eller forstå evidens. Det bygger på de interaktionskontrakter, der allerede er defineret på tværs af HAAMs produkter.

Flader

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

Fundament

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

Stresstests

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

Figma variablesVariantsAuto LayoutWCAGDesign QADeveloper handoffStorybook

Dækningsmatrix

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

Artefaktlag

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 her er 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 produkterne Start et projekt ↗

Apps er beviserne. Systemerne er porteføljen.

Fem måder at beslutte, hvad der hører sammen.

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?