KeelEesti
Tagasi HAAMi

Disainisüsteemid · v0.2

Erinevad tooted. Ühised reeglid.

Viis elavat süsteemi, mis aitavad väga erinevatel toodetel mõjuda tahtliku, skaleeruva ja teostatavana. See versioon on meelega konkreetne, et sellele oleks lihtsam vastu vaielda.

5 süsteemi20+ pindaKood kõigepealtLoodud vaidlustamiseks

Portfoolio kese

Rakendused on tõendid. Süsteemid on portfoolio.

Kui tarkvara loomine muutub odavaks, ütleb pelk väljund vähem. Tugevam signaal on see, kas disainer suudab luua reegleid, mis peavad vastu paljudele toodetele, olekutele, ekraanisuurustele, keeltele ja tehnilistele piirangutele.

Täna on peamine allikas brauseris töötav kood. Figma teegid ja Storybooki peeglid on ausalt märgitud järgmise kihina seal, kus neid veel pole.

Design tokensFigma variablesComponent libraryVariantsAuto LayoutResponsive designWCAGStorybookReactDesign QAGovernanceDeveloper handoff

Süsteemipered

Viis viisi otsustada, mis kuulub kokku.

Summer 26 ja Raw Drafts on juba eraldi koodisüsteemid. Teised pered on olemasolevast tööst loodud teadlikud sünteesid või arenevad süsteemid.

01
LiveProduction system

Summer 26

Praegune HAAMi süsteem: soe toimetuslik struktuur, tõsine tootetöö ja hooajaline valguse/pimeduse ümberjutustus tavalise teemavahetuse asemel.

Pinnad
TOKENS / COLOR
Paper#fffef9
Ink#1b1a17
Sun#ffd83d
Fun#ff7faf
Grass#63d28b
TYPE / HIERARCHY
Aa

Big decisions need a visible hierarchy.

STATUS · METADATA · 12:48:03
SUMMER 26Serious work, with more sunshine in it.
CASE STUDYLIVE ↗
Alused
  • Georgia + Arial
  • 3 painted accents
  • Cream / moonlight themes
  • Fluid clamp() scale
Komponendid
  • Floating chrome
  • Arrow pills
  • Signal chips
  • Tilted media
  • Editorial sections
Interaktsioon
  • Dark mode is a retelling
  • One highlighter moment
  • Motion yields to reduced-motion
  • Rules before decoration
Stressitestid
  • 6 locales
  • Season + mode combinations
  • Long-form case studies
  • Mobile chrome
  • Client + culture work
Design tokensResponsive designThemingAccessibilityLocalizationReactCSS custom properties
02
Loodud süntees100 Objects + Life in Finland

Everyday Archive

Uus ühine keel kultuurikogudele: ese kõigepealt, metaandmed teisena, päritolu alati nähtav. See on süntees, mitte väide, et 2017. aasta saitidel oli ametlik ühisteek.

Pinnad
TOKENS / COLOR
Archive paper#f1eee4
Museum ink#171713
Birch#d7c6a9
Object red#d64d3f
Lake#4b7088
TYPE / HIERARCHY
Aa

Big decisions need a visible hierarchy.

STATUS · METADATA · 12:48:03
1957
OBJECT 057Coffee potEveryday life · Finland
ALLHOMEWORKLEISURE
100 Objects from Finland website
Life in Finland website
Alused
  • Object-led grid
  • Year as navigation
  • Quiet paper palette
  • Metadata has hierarchy
Komponendid
  • Object card
  • Year marker
  • Collection filter
  • Source note
  • Language rail
Interaktsioon
  • Image before interpretation
  • Filters preserve context
  • Metadata can expand
  • Provenance stays attached
Stressitestid
  • 100+ objects
  • Long titles
  • Historic dates
  • Multilingual content
  • Image-light records
Information architectureContent designComponent libraryInternationalizationMetadataResponsive grid
03
LiveHAAM's Upside Down · Y3K cyberpunk octopus

Raw Drafts

HAAMi Stranger Thingsi Upside Down. Süsimust Y3K süsteem, kus küberpunk-kaheksajalg, neoonsignaalid, skaneerimisjooned, ruudustikud, mustandid, AI päritolu ja ebastabiilsed eksperimendid võivad üle võtta. Meelega veidram ja taltsutamatum kui HAAM.

Pinnad
TOKENS / COLOR
Void#03020a
Signal cyan#67f7ff
Magenta#ff4fd8
Acid#c7ff2f
Violet#8b6dff
TYPE / HIERARCHY
Aa

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
Alused
  • 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
Komponendid
  • Signal rail
  • Y3K frame
  • Octopus portal
  • Neon status chip
  • Article frame
  • Orbit field
Interaktsioon
  • 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
Stressitestid
  • Long essays
  • Live broadcaster
  • Generated media
  • Games and experiments
  • 3D mascot
  • Human + AI authorship
Y3KCyberpunkDesign tokensAI interactionProvenanceMotion designEditorial system3D mascot
04
Loodud sünteesSpace + XYZ

Working Matter

Vaiksem eksperimentaalne süsteem lõpetamata ruumilistele prototüüpidele. Objektid, märkused, koordinaadid ja versioonid võivad tavalisest leheküljest kõrvale triivida ilma Raw Draftsi küberpunk-maailma pärimata.

Pinnad
TOKENS / COLOR
Canvas#f7f3e8
Carbon#0d0d0d
Clay#ff795f
Spatial#6d74ff
Moss#a3d77a
TYPE / HIERARCHY
Aa

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
Alused
  • Revision is visible
  • Serif + mono contrast
  • Rough edges are allowed
  • Whitespace can become physical space
Komponendid
  • Coordinate label
  • Revision rail
  • Annotation
  • Artifact card
  • Spatial marker
Interaktsioon
  • Objects can drift off-grid
  • Annotations remain addressable
  • Published is not necessarily final
  • Space can carry hierarchy
Stressitestid
  • 3D / spatial views
  • Unfinished prototypes
  • Long annotations
  • Object relationships
  • Mobile spatial fallbacks
Spatial interactionDesign system governanceContent statesVersioningExperimental UIEditorial design
05
ArenevHAAM operational products

Instrument

Tihedam süsteem toodetele, mis aitavad inimesel olekut lahendada, tagajärge kinnitada või tõendeid mõista. See lähtub HAAMi toodetes juba kirjeldatud interaktsioonilepingutest.

Pinnad
TOKENS / COLOR
Surface#f5f6f7
Text#111318
Action#315efb
Success#2e8a58
Attention#e89a24
TYPE / HIERARCHY
Aa

Big decisions need a visible hierarchy.

STATUS · METADATA · 12:48:03
Review queue3 need action
READYImport site map12 receipts
CHECKPublish changePermission required
Alused
  • State before surface
  • Dense sans hierarchy
  • Evidence stays attached
  • Semantic status colors
Komponendid
  • Status pill
  • Data row
  • Approval bar
  • Evidence chip
  • Empty / loading / error
Interaktsioon
  • Permission before consequence
  • Suggestion differs from fact
  • Failure paths are designed
  • Missing data is explicit
Stressitestid
  • Dense tables
  • Async agent work
  • Permissions
  • Partial data
  • High-consequence actions
Figma variablesVariantsAuto LayoutWCAGDesign QADeveloper handoffStorybook

Katvuse maatriks

Hea süsteem peaks kusagil kasulikult katki minema.

Iga perekonda suruvad erinevad piirangud. Lüngad on kutse järgmisele rakendusele süsteemi uuel viisil lõhkuda.

Design system capability coverage
ConstraintSummer 26Everyday ArchiveRaw DraftsWorking MatterInstrument
Responsive layoutsStrongStrongStrongExperimentalStrong
Localization / i18n6 localesCore constraintPartialPartialPlanned
Accessibility / WCAGProductionReading firstNeeds stress testNeeds stress testCore constraint
Dark / alternate themes4 combinationsOptionalNativeExperimentalSemantic
Dense dataLightMetadataLowLowPrimary
AI states / provenanceGrowingSource recordsPrimaryPartialPrimary
Failure / empty statesProductionMissing recordsGlitch + draft statesDraft statePrimary
Design-tool mirrorNextNextNextNextNext

Artefakti kihid

Üks süsteem, mitu peeglit.

Eesmärk ei ole tööriistades tööd dubleerida. Eesmärk on teha samad otsused disaineritele, arendajatele ja hindajatele nähtavaks.

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.

See on versioon 0.2

Leia asi, mis tundub vale, ja muuda seda.

See hõõrdumine on kasulik. Halb konkreetne valik annab maitsele millegi, mille vastu suruda.

Vaata tooteidAlusta projekti ↗

Help improve this website?

Optional analytics. Google Analytics and Clarity load only if allowed; form, email, and chat content are excluded.