[Notre métier]

Design system

Chaque composant HMS, recréé en code (gradient + bruit HMS, fidèle au Figma) et paramétrable. Navigue par le menu.

Logo

node 1:141

Typographie · Geist

node 1:1371

Display 60

Heading 36

Body large 20 — texte courant.

Body 16 — texte secondaire, muted.

Mono 12 · label technique

Couleurs · palette nommée

node 1:1445

Orange solaire

#fe6503

Jaune lumière

#ffb81e

Vert signal

#00d462

Bleu peps

#39c1fd

Violet spectral

#a984d3

Rose radiant

#f3a7c4

Noir profond

#000000

Blanc doux

#f0f0f0

En se rencontrant, les couleurs fusionnent en flux lumineux

bordure colorée = <ColorBorder />

verticale = <ColorBorder vertical /> · bord droit de la home

Board couleurs · bruit HMS

node 1:126

[ Built with people ]

variante vertical · le texte (showLabel) est optionnel et s'écrit à la verticale

bande horizontale = <ColorBoard cover radius />

verticale = <ColorBoard cover vertical radius />

coins droits (défaut) = <ColorBoard cover />

coins arrondis = <ColorBoard cover radius={16} /> · radius accepte true (8px), un nombre de px ou une valeur CSS

rows={4}

palette warm

palette cool · vertical

Customisable : <ColorBoard rows={5} palette={[...]} vertical cover /> — rows, palette, vertical, cover (remplit le parent), radius (coins arrondis), ou bands pour un pattern custom.

Composition · Human with AI

node 1:521

[ Human with AI ]

{

}

000100120011

>>>>>>>>>>

124 ms

//ANALYSE HMS

BALANCE 80%

CONTRAST 60%

VISUAL TENSION 90%

SCAN 95%

VISION 3.0

120 x 90 cm

<AnalysisComposition image="/x.png" rotation={0} /> — image swappable, elle passe par-dessus les bandes.

05b

Card · vision

node 2035:108

[ Notre vision ]

Chaque projet naît d’une compréhension profonde de vos enjeux, puis prend forme grâce à une conception rigoureuse et un développement sur mesure.

Website

Valeur detectée95.2 %

[ Notre méthode ]

On cadre, on prototype, on livre. Chaque étape reste mesurable et pilotée par la donnée.

API

Uptime 30j99.9 %

[ Impact ]

Des interfaces sobres et rapides, pensées pour convertir sans sacrifier l’élégance.

Mobile

Score perf98 / 100

<VisionCard tag="…" text="…" stat={{…}} image="/x.png" /> — tag, paragraphe, bloc stat (label / caption / value) et image pilotables.

Image-bande

node 2017:109

{<>}0101020001124 ms

<ImageBande image="/x.png" /> — le visuel passe entre les deux couches de bandes.

Analyser & comprendre

node 2013:114

//analyse hms

Balance80%

Contrast60%

Visual tension90%

scan 95%60 x 90 cmvision 3.0

//analyse hms

Balance80%

Contrast60%

Visual tension90%

scan 95%60 x 90 cmvision 3.0

<ImageAnalysis image="/x.png" dimensions="60 x 90 cm" /> — image + HUD, swappable.

Bloc

node 2013:114

[Analyser et comprendre]

Nous transformons les idées complexes en expériences digitales puissantes, en réunissant technologie, intelligence et expertise humaine.

<Manifesto tag="…" text="…" />

DATA 01Valeur detectée98.2 %

DATA 02Temps de réponse124 ms

DATA 03Taux de conversion4.7 %

<DataBlock label="DATA 01" caption="Valeur\ndetectée" value="98.2 %" /> — texte suit le thème, label en couleur accent.

08b

Board color · variantes

node Group 91

Le board color décomposé, déclinable sur deux axes indépendants — l’empilement × la palette. v1 = l’original.

v1 · cascade / hms

v2 · cascade-up / spectre

v3 · pyramid / cool

v4 · brick / warm

v5 · tight / mono

<MosaicCluster preset="v3" /> ou à la carte <MosaicCluster layout="pyramid" palette="cool" /> — hors marque HMS, gradients={[…]} injecte une palette custom (ex. couleurs client via clientGradients).

Liste

node 2013:114

Nous transformons les idées complexes en expériences digitales puissantes, en réunissant technologie et expertise humaine.

<StepsList items={[…]} />

Background · texte central

node 1:1041

Version
16.02

001100011technologie[ Built with people ]hapiness(520 px)(130 px)(120 px)SYSTEM v01NODE 520

<BackgroundElem text="…" above="…" below="…" />

Graduations · blueprint

Règle Ruler — traits équidistants, longueur égale. Couleur via currentColor.

<Ruler vertical={false} count={80} />

Mosaïque signature

node 1:79

Cartes équipe

node 1:380 · 1:404 · 1:430

[ Human with AI ]

Valentin HAJEK

Expert Frontend et spécialiste UX/UI

[ Human with AI ]

Sébastien Ritz

Fullstack Développeur & DevOps enthusiast

[ Human with AI ]

Simon HAJEK

Expert Backend & Product Manager

<TeamCard member={…} label="Human with AI" labelCase="lower" /> — le label du panneau est pilotable en texte et en casse : lower (défaut) ou upper.

Boutons · annotations

node 1:305

NODE 520SYSTEM v0101011110001

<BracketButton solid> CTA primaire (encre) · <BracketButton> secondaire, crochets encre qui s'écartent · <SightButton> contextes analyse (coins HUD, mise au point) · <TerminalButton> actions techniques, curseur qui cycle au survol. Tous acceptent href.

14b

Flow · étapes de projet

node 2037:xxx

<ProcessFlow launch="…" reflexion="…" /> — chips de phase reliées au hub (nœuds accent), crochets + binaire. Fond et lignes suivent le thème.

Tuiles éparpillées · confetti

[Espace]

Les composants en mouvement →

Mosaïque Barres 3D Scroll