--- version: alpha name: HumanEyes omitted: - section: rounded reason: No canonical HumanEyes rounded tokens are defined. - section: components reason: No canonical HumanEyes component tokens are defined. colors: brand-white: "#ffffff" brand-cream: "#fdfbf9" brand-night-blue: "#0e2546" brand-emerald: "#62cb9f" brand-sky-blue: "#c9e4f7" brand-sunny-yellow: "#fbe9bd" brand-electric-orange: "#fe7147" brand-forest-green: "#054439" brand-black: "#000000" background-default: "{colors.brand-cream}" background-neutral: "{colors.brand-white}" text-primary: "{colors.brand-night-blue}" text-secondary-dark: "{colors.brand-forest-green}" accent-primary: "{colors.brand-emerald}" accent-energetic: "{colors.brand-electric-orange}" surface-contrast-primary: "{colors.brand-night-blue}" surface-contrast-secondary: "{colors.brand-forest-green}" surface-soft-calm: "{colors.brand-sky-blue}" surface-soft-warm: "{colors.brand-sunny-yellow}" primary: "{colors.accent-primary}" typography: body: fontSize: 11px fontWeight: 400 fontFamily: HumanEyes GT Walsheim, Arial, sans-serif body-strong: fontSize: 11px fontWeight: 700 fontFamily: HumanEyes GT Walsheim, Arial, sans-serif meta: fontSize: 10px fontWeight: 400 fontFamily: HumanEyes GT Walsheim, Arial, sans-serif card-title-strong: fontSize: 12px fontWeight: 700 fontFamily: HumanEyes GT Walsheim, Arial, sans-serif spacing: grid-unit: 8px relationship-connected-elements: 8px relationship-same-content-cluster: 16px relationship-new-sub-block: 24px relationship-new-section: 32px relationship-large-section-jump: 48px relationship-new-page-zone: 64px exception-title-meta-gap: 4px --- ## Overview The established HumanEyes palette favors spacious light backgrounds, dark blue structure, calm supporting areas, and deliberately scarce energetic emphasis. Aim for roughly 60-75% light background space, 15-25% dark text or structure, 5-15% supporting color areas, and 1-5% Electric orange accent. Cream is the default background, Night blue the default text and primary dark surface, Forest green the secondary dark, Emerald the primary fresh accent, Sky blue and Sunny yellow the soft supporting surfaces, and Electric orange the scarce energetic accent. Do not infer additional interaction or UI-state colors from this palette. Established HumanEyes type foundations and named text-style decisions. Font-size scales are named by output context so document typography is not mistaken for a platform-neutral screen scale. HumanEyes has not yet established canonical line heights or letter spacing. HumanEyes spacing communicates semantic relationship: closer elements belong together more strongly. The grid uses 1U = 8px. Choose spacing by asking, in order: should the reader see this as one whole? Use 1U. Does it clearly belong to the same topic? Use 2U. Does a different type of content begin here? Use 3U. Does a new section begin here? Use 4U. Does a major new page area begin here? Use 6U. Should it feel almost like a separate page? Use 8U. When uncertain, use 2U within a section and 4U between sections; reserve 6U for clear transitions and 8U for exceptional separation. Choose by semantic relationship rather than by what looks acceptable in one fixture. Keep compact component spacing (1U to 3U) distinct from structural page spacing (4U to 8U), and document intentional exceptions near the relevant recipe or layout helper. ## Colors The established HumanEyes palette favors spacious light backgrounds, dark blue structure, calm supporting areas, and deliberately scarce energetic emphasis. Aim for roughly 60-75% light background space, 15-25% dark text or structure, 5-15% supporting color areas, and 1-5% Electric orange accent. Cream is the default background, Night blue the default text and primary dark surface, Forest green the secondary dark, Emerald the primary fresh accent, Sky blue and Sunny yellow the soft supporting surfaces, and Electric orange the scarce energetic accent. Do not infer additional interaction or UI-state colors from this palette. ### Brand Canonical foundation colors. Semantic groups alias these values rather than copying them. #### White - **Canonical token:** `color.brand.white` - **DESIGN.md token:** `colors.brand-white` - **Resolved value:** `#ffffff` White. Use as a neutral background when Cream is not appropriate. White text is established on Night blue and Forest green; avoid White text on Emerald, Sky blue, Sunny yellow, Cream, and Electric orange for important copy. #### Cream - **Canonical token:** `color.brand.cream` - **DESIGN.md token:** `colors.brand-cream` - **Resolved value:** `#fdfbf9` Cream. The default spacious light background. Cream text is established on Night blue and Forest green. #### Night Blue - **Canonical token:** `color.brand.night-blue` - **DESIGN.md token:** `colors.brand-night-blue` - **Resolved value:** `#0e2546` Night blue. The default HumanEyes text color and primary strong dark background. It is established as readable on Cream, Sky blue, Sunny yellow, Emerald, and Electric orange. At 80% opacity it is established for secondary text. #### Emerald - **Canonical token:** `color.brand.emerald` - **DESIGN.md token:** `colors.brand-emerald` - **Resolved value:** `#62cb9f` Emerald. The primary fresh accent for key brand moments, positive emphasis, icons, and anchors. At 30% opacity it forms a soft content surface. #### Sky Blue - **Canonical token:** `color.brand.sky-blue` - **DESIGN.md token:** `colors.brand-sky-blue` - **Resolved value:** `#c9e4f7` Sky blue. A calm color for sections, explanation blocks, diagrams, and supportive panels. At 40% or 50% opacity it forms a soft content surface. #### Sunny Yellow - **Canonical token:** `color.brand.sunny-yellow` - **DESIGN.md token:** `colors.brand-sunny-yellow` - **Resolved value:** `#fbe9bd` Sunny yellow. A warm optimistic background for insights, prompts, notes, and inviting emphasis. At 30% or 60% opacity it forms a soft content surface. #### Electric Orange - **Canonical token:** `color.brand.electric-orange` - **DESIGN.md token:** `colors.brand-electric-orange` - **Resolved value:** `#fe7147` Electric orange. A deliberately scarce energetic accent for calls to action, alerts, key moments, highlights, and directional cues. Avoid large-area use, White important copy, and normal-size Forest green text on it. #### Forest Green - **Canonical token:** `color.brand.forest-green` - **DESIGN.md token:** `colors.brand-forest-green` - **Resolved value:** `#054439` Forest green. A deep grounding color for dark sections, expert tone, premium contrast, and warmth. It is established as readable on Cream, Sky blue, Sunny yellow, and Emerald. Avoid normal-size Forest green text on Electric orange. #### Black - **Canonical token:** `color.brand.black` - **DESIGN.md token:** `colors.brand-black` - **Resolved value:** `#000000` Black. A neutral normalized source color for recolorable imported scribbles. Do not use it as default HumanEyes text; prefer Night blue. ### Background Established background roles only; these aliases do not define a complete future UI surface system. #### Default - **Canonical token:** `color.background.default` - **DESIGN.md token:** `colors.background-default` - **Aliases:** `color.brand.cream` - **Resolved value:** `#fdfbf9` - **Canonical source value:** `{color.brand.cream}` Default spacious light background. #### Neutral - **Canonical token:** `color.background.neutral` - **DESIGN.md token:** `colors.background-neutral` - **Aliases:** `color.brand.white` - **Resolved value:** `#ffffff` - **Canonical source value:** `{color.brand.white}` Neutral alternative when Cream is inappropriate. ### Text Dark text is readable on the explicitly established light and accent foundations. White or Cream text is established only on Night blue and Forest green. Never use White text on Emerald, Sky blue, Sunny yellow, Cream, or Electric orange for important copy. #### Primary - **Canonical token:** `color.text.primary` - **DESIGN.md token:** `colors.text-primary` - **Aliases:** `color.brand.night-blue` - **Resolved value:** `#0e2546` - **Canonical source value:** `{color.brand.night-blue}` Default HumanEyes text. #### Secondary Dark - **Canonical token:** `color.text.secondary-dark` - **DESIGN.md token:** `colors.text-secondary-dark` - **Aliases:** `color.brand.forest-green` - **Resolved value:** `#054439` - **Canonical source value:** `{color.brand.forest-green}` Secondary dark text where its established contrast relationships permit. ### Accent #### Primary - **Canonical token:** `color.accent.primary` - **DESIGN.md token:** `colors.accent-primary` - **Aliases:** `color.brand.emerald` - **Resolved value:** `#62cb9f` - **Canonical source value:** `{color.brand.emerald}` Primary fresh accent. #### Energetic - **Canonical token:** `color.accent.energetic` - **DESIGN.md token:** `colors.accent-energetic` - **Aliases:** `color.brand.electric-orange` - **Resolved value:** `#fe7147` - **Canonical source value:** `{color.brand.electric-orange}` Scarce, strong energetic accent. ### Surface #### Contrast Primary - **Canonical token:** `color.surface.contrast-primary` - **DESIGN.md token:** `colors.surface-contrast-primary` - **Aliases:** `color.brand.night-blue` - **Resolved value:** `#0e2546` - **Canonical source value:** `{color.brand.night-blue}` Primary strong dark surface. #### Contrast Secondary - **Canonical token:** `color.surface.contrast-secondary` - **DESIGN.md token:** `colors.surface-contrast-secondary` - **Aliases:** `color.brand.forest-green` - **Resolved value:** `#054439` - **Canonical source value:** `{color.brand.forest-green}` Grounded alternative dark surface. #### Soft Calm - **Canonical token:** `color.surface.soft-calm` - **DESIGN.md token:** `colors.surface-soft-calm` - **Aliases:** `color.brand.sky-blue` - **Resolved value:** `#c9e4f7` - **Canonical source value:** `{color.brand.sky-blue}` Calm supportive surface foundation; use established opacity guidance where applicable. #### Soft Warm - **Canonical token:** `color.surface.soft-warm` - **DESIGN.md token:** `colors.surface-soft-warm` - **Aliases:** `color.brand.sunny-yellow` - **Resolved value:** `#fbe9bd` - **Canonical source value:** `{color.brand.sunny-yellow}` Warm supportive surface foundation; use established opacity guidance where applicable. ## Typography Established HumanEyes type foundations and named text-style decisions. Font-size scales are named by output context so document typography is not mistaken for a platform-neutral screen scale. HumanEyes has not yet established canonical line heights or letter spacing. ### Font Family #### Brand - **Canonical token:** `typography.font-family.brand` - **Resolved value:** `HumanEyes GT Walsheim, Arial, sans-serif` Use the HumanEyes face when available, falling back to Arial and then the generic sans-serif family. ### Font Weight **Font Weight:** Canonical HumanEyes font weights, matching the approved GT Walsheim Regular and Bold faces. #### Regular - **Canonical token:** `typography.font-weight.regular` - **Resolved value:** `400` Default HumanEyes font weight for body copy, labels, metadata, and general interface text. #### Bold - **Canonical token:** `typography.font-weight.bold` - **Resolved value:** `700` HumanEyes strong font weight for headings and deliberate emphasis. ### Font Size Document **Font Size:** HumanEyes font-size scales grouped by output context. The currently established scale is document-specific; screen and web font sizes are intentionally not yet canonical. **Document:** Established HumanEyes A4 document typography scale, designed for A4-style frames in Miro and document outputs such as Word. These sizes are document-specific and must not be treated as the default web or application UI scale. #### Hero - **Canonical token:** `typography.font-size.document.hero` - **Resolved value:** `36px` Hero text size for A4 document layouts. #### Title - **Canonical token:** `typography.font-size.document.title` - **Resolved value:** `26px` Page or primary title size for A4 document layouts. #### Subtitle - **Canonical token:** `typography.font-size.document.subtitle` - **Resolved value:** `16px` Subtitle size for A4 document layouts. #### Section Title - **Canonical token:** `typography.font-size.document.section-title` - **Resolved value:** `14px` Section title size for A4 document layouts. #### Card Title - **Canonical token:** `typography.font-size.document.card-title` - **Resolved value:** `12px` Card title size for A4 document layouts. #### Body - **Canonical token:** `typography.font-size.document.body` - **Resolved value:** `11px` Body copy size for A4 document layouts. #### Meta - **Canonical token:** `typography.font-size.document.meta` - **Resolved value:** `10px` Metadata size for A4 document layouts. ### Text Style Body **Text Style:** Existing named document text styles preserve their document-size and canonical weight aliases. They remain groups rather than DTCG typography composites because HumanEyes has not yet established canonical line height and letter spacing. **Body:** Regular document body text style. #### Font Size - **Canonical token:** `typography.text-style.body.font-size` - **Aliases:** `typography.font-size.document.body` - **Resolved value:** `11px` - **Canonical source value:** `{typography.font-size.document.body}` #### Font Weight - **Canonical token:** `typography.text-style.body.font-weight` - **Aliases:** `typography.font-weight.regular` - **Resolved value:** `400` - **Canonical source value:** `{typography.font-weight.regular}` ### Text Style Body Strong **Body Strong:** Document body text style with strong emphasis. #### Font Size - **Canonical token:** `typography.text-style.body-strong.font-size` - **Aliases:** `typography.font-size.document.body` - **Resolved value:** `11px` - **Canonical source value:** `{typography.font-size.document.body}` #### Font Weight - **Canonical token:** `typography.text-style.body-strong.font-weight` - **Aliases:** `typography.font-weight.bold` - **Resolved value:** `700` - **Canonical source value:** `{typography.font-weight.bold}` ### Text Style Meta **Meta:** Regular document metadata text style. #### Font Size - **Canonical token:** `typography.text-style.meta.font-size` - **Aliases:** `typography.font-size.document.meta` - **Resolved value:** `10px` - **Canonical source value:** `{typography.font-size.document.meta}` #### Font Weight - **Canonical token:** `typography.text-style.meta.font-weight` - **Aliases:** `typography.font-weight.regular` - **Resolved value:** `400` - **Canonical source value:** `{typography.font-weight.regular}` ### Text Style Card Title Strong **Card Title Strong:** Document card-title text style with strong emphasis. #### Font Size - **Canonical token:** `typography.text-style.card-title-strong.font-size` - **Aliases:** `typography.font-size.document.card-title` - **Resolved value:** `12px` - **Canonical source value:** `{typography.font-size.document.card-title}` #### Font Weight - **Canonical token:** `typography.text-style.card-title-strong.font-weight` - **Aliases:** `typography.font-weight.bold` - **Resolved value:** `700` - **Canonical source value:** `{typography.font-weight.bold}` ## Layout & Spacing HumanEyes spacing communicates semantic relationship: closer elements belong together more strongly. The grid uses 1U = 8px. Choose spacing by asking, in order: should the reader see this as one whole? Use 1U. Does it clearly belong to the same topic? Use 2U. Does a different type of content begin here? Use 3U. Does a new section begin here? Use 4U. Does a major new page area begin here? Use 6U. Should it feel almost like a separate page? Use 8U. When uncertain, use 2U within a section and 4U between sections; reserve 6U for clear transitions and 8U for exceptional separation. Choose by semantic relationship rather than by what looks acceptable in one fixture. Keep compact component spacing (1U to 3U) distinct from structural page spacing (4U to 8U), and document intentional exceptions near the relevant recipe or layout helper. ### Grid One U equals 8px. Align reusable geometry to 1U and use whole U multiples unless an exact output format or an explicitly established exception takes precedence. #### Unit - **Canonical token:** `spacing.grid.unit` - **DESIGN.md token:** `spacing.grid-unit` - **Resolved value:** `8px` The canonical 1U grid unit. ### Relationship Select from this scale according to content relationship; these are semantic spacing decisions, not arbitrary sizes. #### Connected Elements - **Canonical token:** `spacing.relationship.connected-elements` - **DESIGN.md token:** `spacing.relationship-connected-elements` - **Resolved value:** `8px` 1U, strongly connected. Use when elements should read as one component, for example an icon and card title, card title and body, image and caption, label and associated text, number and short explanation, title and badge or status, elements inside a compact component, or elements inside a button, tag, or navigation item. #### Same Content Cluster - **Canonical token:** `spacing.relationship.same-content-cluster` - **DESIGN.md token:** `spacing.relationship-same-content-cluster` - **Resolved value:** `16px` 2U, same content cluster. Use between distinct functions that clearly belong to the same topic, for example hero and page title, page title and introduction or subtitle, section title and body text, adjacent body paragraphs, cards within one card group, items in a list or step sequence, internal blocks within a card, title and supporting visual, or parts of one content story. This is the default within a section when uncertain. #### New Sub Block - **Canonical token:** `spacing.relationship.new-sub-block` - **DESIGN.md token:** `spacing.relationship-new-sub-block` - **Resolved value:** `24px` 3U, new sub-block. Use when a different kind of content begins inside the same larger section, for example metadata and hero or page title, page title and body without an introduction, introduction and first content block, section title and card, image, or diagram, body and card, callout, or image, image and next content block, image and adjacent text column, separate non-grouped cards, default padding in a spacious card, or explanation and example. #### New Section - **Canonical token:** `spacing.relationship.new-section` - **DESIGN.md token:** `spacing.relationship-new-section` - **Resolved value:** `32px` 4U, new section. Use for a new content section, for example body text and a new section title, card and next section, image or diagram and next section, card groups with different subjects, introduction block and main content, larger content zones, problem statement and recommendations, or observations and conclusions. This is the default between sections when uncertain. #### Large Section Jump - **Canonical token:** `spacing.relationship.large-section-jump` - **DESIGN.md token:** `spacing.relationship-large-section-jump` - **Resolved value:** `48px` 6U, major section break. Reserve for clear transitions such as header or hero and main content, major chapters, a clear subject change, space around an important statement, main content and a closing call to action, analysis and recommendations, or explanation and conclusion. #### New Page Zone - **Canonical token:** `spacing.relationship.new-page-zone` - **DESIGN.md token:** `spacing.relationship-new-page-zone` - **Resolved value:** `64px` 8U, new page zone. Use exceptionally when two parts should feel almost like separate pages or chapters, for example strongly separated analysis and recommendations, content and conclusion, independent page zones, deliberately generous whitespace, main story and closing section, or an intentionally isolated element. ### Exception Established spacing values that intentionally do not follow whole U multiples. #### Title Meta Gap - **Canonical token:** `spacing.exception.title-meta-gap` - **DESIGN.md token:** `spacing.exception-title-meta-gap` - **Resolved value:** `4px` The established half-U gap between title and metadata. This is an intentional exception to the whole-U grid. ## Assets ### Fonts #### GT Walsheim vet, symbolen (WOFF2) - **ID:** `fonts.humaneyes-gt-walsheim-bold-symbols-woff2` - **Category:** `fonts` - **Format:** `woff2` - **File:** [assets/fonts/humaneyes-gt-walsheim-bold-symbols.woff2](./assets/fonts/humaneyes-gt-walsheim-bold-symbols.woff2) WOFF2-subset met symbooltekens voor GT Walsheim Bold in HumanEyes-webinterfaces. Gebruik samen met het vette WOFF2-hoofdlettertypebestand wanneer extra symbooldekking nodig is. #### GT Walsheim vet (TTF) - **ID:** `fonts.humaneyes-gt-walsheim-bold-ttf` - **Category:** `fonts` - **Format:** `ttf` - **File:** [assets/fonts/humaneyes-gt-walsheim-bold.ttf](./assets/fonts/humaneyes-gt-walsheim-bold.ttf) TTF-versie van GT Walsheim Bold voor HumanEyes-desktop-, document- en andere toepassingen die een installeerbaar TrueType-lettertype gebruiken. #### GT Walsheim vet (WOFF2) - **ID:** `fonts.humaneyes-gt-walsheim-bold-woff2` - **Category:** `fonts` - **Format:** `woff2` - **File:** [assets/fonts/humaneyes-gt-walsheim-bold.woff2](./assets/fonts/humaneyes-gt-walsheim-bold.woff2) WOFF2-versie van GT Walsheim Bold voor HumanEyes-webinterfaces en andere browsergebaseerde toepassingen. #### GT Walsheim collectie (TTC) - **ID:** `fonts.humaneyes-gt-walsheim-collection-ttc` - **Category:** `fonts` - **Format:** `ttc` - **File:** [assets/fonts/humaneyes-gt-walsheim.ttc](./assets/fonts/humaneyes-gt-walsheim.ttc) TTC-versie van de HumanEyes GT Walsheim-lettertypecollectie voor desktop-, document- en andere toepassingen die een installeerbare TrueType Collection gebruiken. #### GT Walsheim regulier, symbolen (WOFF2) - **ID:** `fonts.humaneyes-gt-walsheim-regular-symbols-woff2` - **Category:** `fonts` - **Format:** `woff2` - **File:** [assets/fonts/humaneyes-gt-walsheim-regular-symbols.woff2](./assets/fonts/humaneyes-gt-walsheim-regular-symbols.woff2) WOFF2-subset met symbooltekens voor GT Walsheim Regular in HumanEyes-webinterfaces. Gebruik samen met het reguliere WOFF2-hoofdlettertypebestand wanneer extra symbooldekking nodig is. #### GT Walsheim regulier (TTF) - **ID:** `fonts.humaneyes-gt-walsheim-regular-ttf` - **Category:** `fonts` - **Format:** `ttf` - **File:** [assets/fonts/humaneyes-gt-walsheim-regular.ttf](./assets/fonts/humaneyes-gt-walsheim-regular.ttf) TTF-versie van GT Walsheim Regular voor HumanEyes-desktop-, document- en andere toepassingen die een installeerbaar TrueType-lettertype gebruiken. #### GT Walsheim regulier (WOFF2) - **ID:** `fonts.humaneyes-gt-walsheim-regular-woff2` - **Category:** `fonts` - **Format:** `woff2` - **File:** [assets/fonts/humaneyes-gt-walsheim-regular.woff2](./assets/fonts/humaneyes-gt-walsheim-regular.woff2) WOFF2-versie van GT Walsheim Regular voor HumanEyes-webinterfaces en andere browsergebaseerde toepassingen. ### Illustrations #### A/B-testen ![A/B-testen](./assets/illustrations/ab-testing.png) - **ID:** `illustrations.ab-testing` - **Category:** `illustrations` - **Format:** `png` - **File:** [assets/illustrations/ab-testing.png](./assets/illustrations/ab-testing.png) HumanEyes-illustratie over A/B-testen, experimenteel vergelijken en het toetsen van verschillende versies. #### BJ Fogg-gedragsmodel ![BJ Fogg-gedragsmodel](./assets/illustrations/bj-fogg-model.png) - **ID:** `illustrations.bj-fogg-model` - **Category:** `illustrations` - **Format:** `png` - **File:** [assets/illustrations/bj-fogg-model.png](./assets/illustrations/bj-fogg-model.png) Diagram van het BJ Fogg Behavior Model om de samenhang tussen motivatie, vermogen en prompts bij gedrag uit te leggen. #### Brein, kleur ![Brein, kleur](./assets/illustrations/brain-color.png) - **ID:** `illustrations.brain-color` - **Category:** `illustrations` - **Format:** `png` - **File:** [assets/illustrations/brain-color.png](./assets/illustrations/brain-color.png) HumanEyes-illustratie van een brein in kleur voor content over psychologie, cognitie, gedragswetenschap en hoe mensen denken. #### Brein, monochroom ![Brein, monochroom](./assets/illustrations/brain-mono.png) - **ID:** `illustrations.brain-mono` - **Category:** `illustrations` - **Format:** `png` - **File:** [assets/illustrations/brain-mono.png](./assets/illustrations/brain-mono.png) Monochrome HumanEyes-illustratie van een brein voor content over psychologie, cognitie, gedragswetenschap en hoe mensen denken. #### Certificaat ![Certificaat](./assets/illustrations/certificaat.png) - **ID:** `illustrations.certificaat` - **Category:** `illustrations` - **Format:** `png` - **File:** [assets/illustrations/certificaat.png](./assets/illustrations/certificaat.png) HumanEyes-illustratie van een certificaat voor kwalificatie, afronding, erkenning of formele bevestiging. #### Uitdaging ![Uitdaging](./assets/illustrations/challenge.png) - **ID:** `illustrations.challenge` - **Category:** `illustrations` - **Format:** `png` - **File:** [assets/illustrations/challenge.png](./assets/illustrations/challenge.png) HumanEyes-illustratie van een uitdaging, obstakel of vraagstuk dat aandacht en actie vraagt. #### Ontwerpen ![Ontwerpen](./assets/illustrations/design.png) - **ID:** `illustrations.design` - **Category:** `illustrations` - **Format:** `png` - **File:** [assets/illustrations/design.png](./assets/illustrations/design.png) HumanEyes-illustratie over ontwerpen, conceptontwikkeling en het creëren van oplossingen. #### Design sprint, kleur ![Design sprint, kleur](./assets/illustrations/design-sprint-color.png) - **ID:** `illustrations.design-sprint-color` - **Category:** `illustrations` - **Format:** `png` - **File:** [assets/illustrations/design-sprint-color.png](./assets/illustrations/design-sprint-color.png) HumanEyes-illustratie in kleur van een design sprint of een gestructureerd, gezamenlijk ontwerpproces. #### Design sprint, monochroom ![Design sprint, monochroom](./assets/illustrations/design-sprint-mono.png) - **ID:** `illustrations.design-sprint-mono` - **Category:** `illustrations` - **Format:** `png` - **File:** [assets/illustrations/design-sprint-mono.png](./assets/illustrations/design-sprint-mono.png) Monochrome HumanEyes-illustratie van een design sprint of een gestructureerd, gezamenlijk ontwerpproces. #### Escalatiepreventiemodel ![Escalatiepreventiemodel](./assets/illustrations/escalation-prevention-model.png) - **ID:** `illustrations.escalation-prevention-model` - **Category:** `illustrations` - **Format:** `png` - **File:** [assets/illustrations/escalation-prevention-model.png](./assets/illustrations/escalation-prevention-model.png) Vereenvoudigd HumanEyes-escalatiepreventiemodel om escalatie en mogelijkheden voor vroegtijdig ingrijpen te visualiseren. #### Escalatiepreventiemodel, gedetailleerd ![Escalatiepreventiemodel, gedetailleerd](./assets/illustrations/escalation-prevention-model-with-details.png) - **ID:** `illustrations.escalation-prevention-model-with-details` - **Category:** `illustrations` - **Format:** `png` - **File:** [assets/illustrations/escalation-prevention-model-with-details.png](./assets/illustrations/escalation-prevention-model-with-details.png) Gedetailleerde versie van het HumanEyes-escalatiepreventiemodel om fasen, signalen en kansen om escalatie te voorkomen uit te leggen. #### Groep ![Groep](./assets/illustrations/group.png) - **ID:** `illustrations.group` - **Category:** `illustrations` - **Format:** `png` - **File:** [assets/illustrations/group.png](./assets/illustrations/group.png) HumanEyes-illustratie van een groep mensen, geschikt voor deelnemers, teams, doelgroepen of collectief gedrag. #### High five ![High five](./assets/illustrations/highfive.png) - **ID:** `illustrations.highfive` - **Category:** `illustrations` - **Format:** `png` - **File:** [assets/illustrations/highfive.png](./assets/illustrations/highfive.png) HumanEyes-illustratie voor samenwerking, succes, vieren, overeenstemming of positieve teamenergie. #### Interview op locatie ![Interview op locatie](./assets/illustrations/interview-live.png) - **ID:** `illustrations.interview-live` - **Category:** `illustrations` - **Format:** `png` - **File:** [assets/illustrations/interview-live.png](./assets/illustrations/interview-live.png) HumanEyes-illustratie van een fysiek interview, gesprek of kwalitatieve onderzoekssessie op locatie. #### Interview op afstand ![Interview op afstand](./assets/illustrations/interview-remote.png) - **ID:** `illustrations.interview-remote` - **Category:** `illustrations` - **Format:** `png` - **File:** [assets/illustrations/interview-remote.png](./assets/illustrations/interview-remote.png) HumanEyes-illustratie van een interview op afstand, videogesprek of online kwalitatieve onderzoekssessie. #### Klantreis in kaart brengen ![Klantreis in kaart brengen](./assets/illustrations/journey-mapping.png) - **ID:** `illustrations.journey-mapping` - **Category:** `illustrations` - **Format:** `png` - **File:** [assets/illustrations/journey-mapping.png](./assets/illustrations/journey-mapping.png) HumanEyes-illustratie over customer journey mapping, het visualiseren van ervaringen en het begrijpen van een proces door de tijd heen. #### Probleem ![Probleem](./assets/illustrations/problem.png) - **ID:** `illustrations.problem` - **Category:** `illustrations` - **Format:** `png` - **File:** [assets/illustrations/problem.png](./assets/illustrations/problem.png) HumanEyes-illustratie van een probleem, frictiepunt, onvervulde behoefte of vraagstuk dat nader onderzocht moet worden. #### Psychologie ![Psychologie](./assets/illustrations/psy.png) - **ID:** `illustrations.psy` - **Category:** `illustrations` - **Format:** `png` - **File:** [assets/illustrations/psy.png](./assets/illustrations/psy.png) HumanEyes-illustratie over psychologie, gedragsinzichten en het begrijpen van waarom mensen denken en handelen zoals ze doen. #### Onderzoeksanalyse ![Onderzoeksanalyse](./assets/illustrations/research-analyse.png) - **ID:** `illustrations.research-analyse` - **Category:** `illustrations` - **Format:** `png` - **File:** [assets/illustrations/research-analyse.png](./assets/illustrations/research-analyse.png) HumanEyes-illustratie over onderzoeksanalyse, duiding, synthese en het vertalen van observaties naar inzichten. #### Roadmapworkshop ![Roadmapworkshop](./assets/illustrations/roadmap-workshop.png) - **ID:** `illustrations.roadmap-workshop` - **Category:** `illustrations` - **Format:** `png` - **File:** [assets/illustrations/roadmap-workshop.png](./assets/illustrations/roadmap-workshop.png) HumanEyes-illustratie van een gezamenlijke roadmapworkshop voor het prioriteren van acties en plannen van vervolgstappen. #### Blije smiley ![Blije smiley](./assets/illustrations/smiley-happy.png) - **ID:** `illustrations.smiley-happy` - **Category:** `illustrations` - **Format:** `png` - **File:** [assets/illustrations/smiley-happy.png](./assets/illustrations/smiley-happy.png) HumanEyes-smiley die blijdschap, tevredenheid, een positieve ervaring of positieve feedback uitdrukt. #### Verdrietige smiley ![Verdrietige smiley](./assets/illustrations/smiley-sad.png) - **ID:** `illustrations.smiley-sad` - **Category:** `illustrations` - **Format:** `png` - **File:** [assets/illustrations/smiley-sad.png](./assets/illustrations/smiley-sad.png) HumanEyes-smiley die verdriet, ontevredenheid, een negatieve ervaring of negatieve feedback uitdrukt. #### Denkende smiley ![Denkende smiley](./assets/illustrations/smiley-thinking.png) - **ID:** `illustrations.smiley-thinking` - **Category:** `illustrations` - **Format:** `png` - **File:** [assets/illustrations/smiley-thinking.png](./assets/illustrations/smiley-thinking.png) HumanEyes-smiley die nadenken, twijfel, overweging of behoefte aan reflectie uitdrukt. #### Testen en valideren ![Testen en valideren](./assets/illustrations/test-validate.png) - **ID:** `illustrations.test-validate` - **Category:** `illustrations` - **Format:** `png` - **File:** [assets/illustrations/test-validate.png](./assets/illustrations/test-validate.png) HumanEyes-illustratie over het testen en valideren van ideeën, interventies, concepten of prototypes. #### Valideren ![Valideren](./assets/illustrations/valideren.png) - **ID:** `illustrations.valideren` - **Category:** `illustrations` - **Format:** `png` - **File:** [assets/illustrations/valideren.png](./assets/illustrations/valideren.png) HumanEyes-illustratie over valideren, aannames toetsen en nagaan of een oplossing werkt zoals bedoeld. #### Wireframe ![Wireframe](./assets/illustrations/wireframe.png) - **ID:** `illustrations.wireframe` - **Category:** `illustrations` - **Format:** `png` - **File:** [assets/illustrations/wireframe.png](./assets/illustrations/wireframe.png) HumanEyes-illustratie over wireframing, interfacestructuur, vroege prototyping en ontwerpen met lage detaillering. ### Logos #### HumanEyes-icoon, monochroom ![HumanEyes-icoon, monochroom](./assets/logos/humaneyes-icon-mono.svg) - **ID:** `logos.humaneyes-icon-mono` - **Category:** `logos` - **Format:** `svg` - **File:** [assets/logos/humaneyes-icon-mono.svg](./assets/logos/humaneyes-icon-mono.svg) Monochroom HumanEyes-icoon voor compacte merktoepassingen zoals app-iconen, interface-elementen en kleine formaten. #### HumanEyes-icoon, monochroom met ogen ![HumanEyes-icoon, monochroom met ogen](./assets/logos/humaneyes-icon-mono-eyes.svg) - **ID:** `logos.humaneyes-icon-mono-eyes` - **Category:** `logos` - **Format:** `svg` - **File:** [assets/logos/humaneyes-icon-mono-eyes.svg](./assets/logos/humaneyes-icon-mono-eyes.svg) Monochroom HumanEyes-icoon met het ogenbeeldmerk, bedoeld voor compacte toepassingen waar het volledige woordmerk niet nodig is. #### HumanEyes-logo ![HumanEyes-logo](./assets/logos/humaneyes-logo.svg) - **ID:** `logos.humaneyes-logo` - **Category:** `logos` - **Format:** `svg` - **File:** [assets/logos/humaneyes-logo.svg](./assets/logos/humaneyes-logo.svg) Primair HumanEyes-logo voor standaard merkcommunicatie en digitale toepassingen. #### HumanEyes-logo, monochroom ![HumanEyes-logo, monochroom](./assets/logos/humaneyes-logo-mono.svg) - **ID:** `logos.humaneyes-logo-mono` - **Category:** `logos` - **Format:** `svg` - **File:** [assets/logos/humaneyes-logo-mono.svg](./assets/logos/humaneyes-logo-mono.svg) Monochroom HumanEyes-logo voor merktoepassingen die een uitvoering in één kleur vereisen. #### HumanEyes-logo, monochroom met ogen ![HumanEyes-logo, monochroom met ogen](./assets/logos/humaneyes-logo-mono-eyes.svg) - **ID:** `logos.humaneyes-logo-mono-eyes` - **Category:** `logos` - **Format:** `svg` - **File:** [assets/logos/humaneyes-logo-mono-eyes.svg](./assets/logos/humaneyes-logo-mono-eyes.svg) Monochrome HumanEyes-logovariant met het ogenbeeldmerk samen met het HumanEyes-woordmerk. ### Scribbles #### Boogpijl omhoog ![Boogpijl omhoog](./assets/scribbles/boogpijl-omhoog.svg) - **ID:** `scribbles.boogpijl-omhoog` - **Category:** `scribbles` - **Format:** `svg` - **File:** [assets/scribbles/boogpijl-omhoog.svg](./assets/scribbles/boogpijl-omhoog.svg) Handgetekende gebogen pijl die omhoog wijst, geschikt om aandacht naar content erboven te leiden of opwaartse beweging te suggereren. #### Boogpijl rechts ![Boogpijl rechts](./assets/scribbles/boogpijl-rechts.svg) - **ID:** `scribbles.boogpijl-rechts` - **Category:** `scribbles` - **Format:** `svg` - **File:** [assets/scribbles/boogpijl-rechts.svg](./assets/scribbles/boogpijl-rechts.svg) Handgetekende gebogen pijl die naar rechts wijst, geschikt om aandacht te sturen of voortgang naar een volgend element aan te geven. #### Cirkel met accent ![Cirkel met accent](./assets/scribbles/cirkel-met-accent.svg) - **ID:** `scribbles.cirkel-met-accent` - **Category:** `scribbles` - **Format:** `svg` - **File:** [assets/scribbles/cirkel-met-accent.svg](./assets/scribbles/cirkel-met-accent.svg) Handgetekende cirkel met accentstreep om een belangrijk element te markeren, omkaderen of extra nadruk te geven. #### Diagonale lijn ![Diagonale lijn](./assets/scribbles/diagonale-lijn.svg) - **ID:** `scribbles.diagonale-lijn` - **Category:** `scribbles` - **Format:** `svg` - **File:** [assets/scribbles/diagonale-lijn.svg](./assets/scribbles/diagonale-lijn.svg) Handgetekende diagonale lijn voor visuele scheiding, nadruk of een losse redactionele accentlijn. #### Dikke onderstreping ![Dikke onderstreping](./assets/scribbles/dikke-onderstreping.svg) - **ID:** `scribbles.dikke-onderstreping` - **Category:** `scribbles` - **Format:** `svg` - **File:** [assets/scribbles/dikke-onderstreping.svg](./assets/scribbles/dikke-onderstreping.svg) Dikke handgetekende onderstreping om een woord, zin, kop of kernpunt sterk te benadrukken. #### Dikke schuine streep ![Dikke schuine streep](./assets/scribbles/dikke-schuine-streep.svg) - **ID:** `scribbles.dikke-schuine-streep` - **Category:** `scribbles` - **Format:** `svg` - **File:** [assets/scribbles/dikke-schuine-streep.svg](./assets/scribbles/dikke-schuine-streep.svg) Dikke handgetekende schuine streep voor nadruk, visuele energie of decoratieve annotatie. #### Drie strepen ![Drie strepen](./assets/scribbles/drie-strepen.svg) - **ID:** `scribbles.drie-strepen` - **Category:** `scribbles` - **Format:** `svg` - **File:** [assets/scribbles/drie-strepen.svg](./assets/scribbles/drie-strepen.svg) Set van drie korte handgetekende strepen om nabijgelegen content te accentueren, benadrukken of extra aandacht te geven. #### Dubbele onderstreping ![Dubbele onderstreping](./assets/scribbles/dubbele-onderstreping.svg) - **ID:** `scribbles.dubbele-onderstreping` - **Category:** `scribbles` - **Format:** `svg` - **File:** [assets/scribbles/dubbele-onderstreping.svg](./assets/scribbles/dubbele-onderstreping.svg) Handgetekende dubbele onderstreping om een woord, zin, kop of kernpunt extra sterk te benadrukken. #### Dubbele streep ![Dubbele streep](./assets/scribbles/dubbele-streep.svg) - **ID:** `scribbles.dubbele-streep` - **Category:** `scribbles` - **Format:** `svg` - **File:** [assets/scribbles/dubbele-streep.svg](./assets/scribbles/dubbele-streep.svg) Paar handgetekende strepen voor visuele nadruk, scheiding of decoratieve annotatie. #### Golvende lijn ![Golvende lijn](./assets/scribbles/golvende-lijn.svg) - **ID:** `scribbles.golvende-lijn` - **Category:** `scribbles` - **Format:** `svg` - **File:** [assets/scribbles/golvende-lijn.svg](./assets/scribbles/golvende-lijn.svg) Handgetekende golvende lijn voor losse scheiding, beweging, nadruk of decoratieve annotatie. #### Grote cirkel ![Grote cirkel](./assets/scribbles/grote-cirkel.svg) - **ID:** `scribbles.grote-cirkel` - **Category:** `scribbles` - **Format:** `svg` - **File:** [assets/scribbles/grote-cirkel.svg](./assets/scribbles/grote-cirkel.svg) Grote handgetekende cirkel om een belangrijk element of gebied te omkaderen en onder de aandacht te brengen. #### Kleine draaipijl ![Kleine draaipijl](./assets/scribbles/kleine-draaipijl.svg) - **ID:** `scribbles.kleine-draaipijl` - **Category:** `scribbles` - **Format:** `svg` - **File:** [assets/scribbles/kleine-draaipijl.svg](./assets/scribbles/kleine-draaipijl.svg) Kleine handgetekende draaipijl om naar nabijgelegen content te wijzen of een richtingsverandering te suggereren. #### Krulpijl omhoog ![Krulpijl omhoog](./assets/scribbles/krul-pijl-omhoog.svg) - **ID:** `scribbles.krul-pijl-omhoog` - **Category:** `scribbles` - **Format:** `svg` - **File:** [assets/scribbles/krul-pijl-omhoog.svg](./assets/scribbles/krul-pijl-omhoog.svg) Handgetekende krulpijl die omhoog wijst en op een speelse, informele manier aandacht naar boven leidt. #### Losse krul ![Losse krul](./assets/scribbles/losse-krul.svg) - **ID:** `scribbles.losse-krul` - **Category:** `scribbles` - **Format:** `svg` - **File:** [assets/scribbles/losse-krul.svg](./assets/scribbles/losse-krul.svg) Losse handgetekende krul om beweging, persoonlijkheid of een decoratief accent aan een compositie toe te voegen. #### Luspijl omhoog ![Luspijl omhoog](./assets/scribbles/lus-pijl-omhoog.svg) - **ID:** `scribbles.lus-pijl-omhoog` - **Category:** `scribbles` - **Format:** `svg` - **File:** [assets/scribbles/lus-pijl-omhoog.svg](./assets/scribbles/lus-pijl-omhoog.svg) Handgetekende pijl met lus die omhoog wijst, geschikt om aandacht te sturen of een niet-lineaire opwaartse beweging te tonen. #### Luspijl omlaag ![Luspijl omlaag](./assets/scribbles/lus-pijl-omlaag.svg) - **ID:** `scribbles.lus-pijl-omlaag` - **Category:** `scribbles` - **Format:** `svg` - **File:** [assets/scribbles/lus-pijl-omlaag.svg](./assets/scribbles/lus-pijl-omlaag.svg) Handgetekende pijl met lus die omlaag wijst, geschikt om aandacht te sturen of een niet-lineaire neerwaartse beweging te tonen. #### Luslijn ![Luslijn](./assets/scribbles/luslijn.svg) - **ID:** `scribbles.luslijn` - **Category:** `scribbles` - **Format:** `svg` - **File:** [assets/scribbles/luslijn.svg](./assets/scribbles/luslijn.svg) Handgetekende lijn met lus om elementen te verbinden, beweging te suggereren of een speels visueel accent toe te voegen. #### Open cirkel ![Open cirkel](./assets/scribbles/open-cirkel.svg) - **ID:** `scribbles.open-cirkel` - **Category:** `scribbles` - **Format:** `svg` - **File:** [assets/scribbles/open-cirkel.svg](./assets/scribbles/open-cirkel.svg) Handgetekende open cirkel om een element losjes te omkaderen, markeren of onder de aandacht te brengen. #### Ovaal met strepen ![Ovaal met strepen](./assets/scribbles/ovaal-met-strepen.svg) - **ID:** `scribbles.ovaal-met-strepen` - **Category:** `scribbles` - **Format:** `svg` - **File:** [assets/scribbles/ovaal-met-strepen.svg](./assets/scribbles/ovaal-met-strepen.svg) Handgetekend ovaal met accentstrepen om een element te omkaderen en extra visuele nadruk te geven. #### Platte ovaal ![Platte ovaal](./assets/scribbles/platte-ovaal.svg) - **ID:** `scribbles.platte-ovaal` - **Category:** `scribbles` - **Format:** `svg` - **File:** [assets/scribbles/platte-ovaal.svg](./assets/scribbles/platte-ovaal.svg) Breed handgetekend ovaal om horizontale content, een korte tekst of een ander element losjes te omkaderen. #### Rechte lijn ![Rechte lijn](./assets/scribbles/rechte-lijn.svg) - **ID:** `scribbles.rechte-lijn` - **Category:** `scribbles` - **Format:** `svg` - **File:** [assets/scribbles/rechte-lijn.svg](./assets/scribbles/rechte-lijn.svg) Handgetekende rechte lijn voor visuele scheiding, verbinding, nadruk of eenvoudige annotatie. #### Rechte pijl omhoog ![Rechte pijl omhoog](./assets/scribbles/rechte-pijl-omhoog.svg) - **ID:** `scribbles.rechte-pijl-omhoog` - **Category:** `scribbles` - **Format:** `svg` - **File:** [assets/scribbles/rechte-pijl-omhoog.svg](./assets/scribbles/rechte-pijl-omhoog.svg) Handgetekende rechte pijl die omhoog wijst, geschikt om aandacht direct naar content erboven te leiden. #### Schetsonderstreping ![Schetsonderstreping](./assets/scribbles/schets-onderstreping.svg) - **ID:** `scribbles.schets-onderstreping` - **Category:** `scribbles` - **Format:** `svg` - **File:** [assets/scribbles/schets-onderstreping.svg](./assets/scribbles/schets-onderstreping.svg) Losse handgetekende onderstreping om een woord, zin, kop of kernpunt op informele wijze te benadrukken. #### Schuine strepen ![Schuine strepen](./assets/scribbles/schuine-strepen.svg) - **ID:** `scribbles.schuine-strepen` - **Category:** `scribbles` - **Format:** `svg` - **File:** [assets/scribbles/schuine-strepen.svg](./assets/scribbles/schuine-strepen.svg) Set handgetekende schuine strepen voor accent, nadruk, ritme of decoratieve annotatie. #### Staande boogpijl ![Staande boogpijl](./assets/scribbles/staande-boogpijl.svg) - **ID:** `scribbles.staande-boogpijl` - **Category:** `scribbles` - **Format:** `svg` - **File:** [assets/scribbles/staande-boogpijl.svg](./assets/scribbles/staande-boogpijl.svg) Handgetekende verticale boogpijl om aandacht tussen elementen te sturen of een gebogen richting aan te geven. #### Stijgende pijl ![Stijgende pijl](./assets/scribbles/stijgende-pijl.svg) - **ID:** `scribbles.stijgende-pijl` - **Category:** `scribbles` - **Format:** `svg` - **File:** [assets/scribbles/stijgende-pijl.svg](./assets/scribbles/stijgende-pijl.svg) Handgetekende stijgende pijl voor groei, vooruitgang, verbetering of een opwaartse ontwikkeling. #### Uitroepstrepen ![Uitroepstrepen](./assets/scribbles/uitroepstrepen.svg) - **ID:** `scribbles.uitroepstrepen` - **Category:** `scribbles` - **Format:** `svg` - **File:** [assets/scribbles/uitroepstrepen.svg](./assets/scribbles/uitroepstrepen.svg) Handgetekende uitroepstrepen om verrassing, urgentie, energie of sterke nadruk bij een element te geven. #### Zigzagpijl ![Zigzagpijl](./assets/scribbles/zigzag-pijl.svg) - **ID:** `scribbles.zigzag-pijl` - **Category:** `scribbles` - **Format:** `svg` - **File:** [assets/scribbles/zigzag-pijl.svg](./assets/scribbles/zigzag-pijl.svg) Handgetekende zigzagpijl om een grillige route, dynamische beweging of opvallende richting te tonen.