Design System

Design Tokens

Source unique de vérité — couleurs, typographie, rayons et effets du design system Inyulface / Equinox.

Brand Neutral Semantic Typography Radius Effects Showroom Forms WCAG

Brand Colors

Palette Inyulface

Primary

Primary Light

Primary Dark

Secondary

Secondary Light

Secondary Dark

Neutral

Warning

Dark BG

Neutral Scale

11 shades

50

100

200

300

400

500

600

700

800

900

950

Charcoal (surfaces Inyulface)

Charcoal 900

Charcoal 800

Charcoal 700

Semantic Colors

Light / Dark

Light Mode

Background

Foreground

Surface

Dark Mode

Background

Foreground

Surface

Statuts UI & overlays

Status success

Status danger

Status caution

--color-secondary-rgb (teal) pour rgb(var(--color-secondary-rgb) / α) sur halos et cartes.

Équivalence sémantique (lab)

Ce dépôt mappe canvas/dots/ligne sur les tokens Notus ; --divide et --equinox-primarysuivent l'échelle neutre Equinox.

Token	Light (réf.)	Dark (réf.)
--divide	neutral-300 / hex	oklch bordure sombre
--equinox-primary	neutral-900	neutral-100
--ekinox-canvas	neutral-400	oklch clair
--ekinox-canvas-fill	neutral-300	remplissage sombre
--ekinox-dots	divide	dots sombres
--ekinox-line	neutral-200	ligne sombre
--muted-foreground	shadcn muted	shadcn muted

Typography

Catalogue dynamique

Texte d'aperçu — modifiable

Ce texte alimente les prévisualisations ci-dessous (Geist dans ce projet).

Font Families

Font Weight Ramp

Geist Variable : poids 100–900. Cliquez un poids ou une ligne du spécimen.

Laboratoire Inyulface

Normalfont-weight: 400

Specimen complet

Type Scale

xs0.75rem12px--font-size-xsLaboratoire Inyulface

sm0.875rem14px--font-size-smLaboratoire Inyulface

base1rem16px--font-size-baseLaboratoire Inyulface

lg1.125rem18px--font-size-lgLaboratoire Inyulface

xl1.25rem20px--font-size-xlLaboratoire Inyulface

2xl1.5rem24px--font-size-2xlLaboratoire Inyulface

3xl1.875rem30px--font-size-3xlLaboratoire Inyulface

4xl2.25rem36px--font-size-4xlLaboratoire Inyulface

5xl3rem48px(Tailwind text-5xl)Laboratoire Inyulface

6xl3.75rem60px(Tailwind text-6xl)Laboratoire Inyulface

Line Height

Aperçu — line-height: 1.5

Le Laboratoire Inyulface explore les frontières du design et du développement web. Nous créons des expériences numériques qui repoussent les limites du possible. Chaque projet est une opportunité d'innover.

Tokens

Letter Spacing

tighter-0.05emLaboratoire Inyulface

tight-0.025emLaboratoire Inyulface

normal0emLaboratoire Inyulface

wide0.025emLaboratoire Inyulface

wider0.05emLaboratoire Inyulface

widest0.1emLaboratoire Inyulface

Gradient Text

Laboratoire Inyulface

.text-gradient135° · var(--inyul-primary) → var(--inyul-secondary)

/* CSS */

.text-gradient {
  background: linear-gradient(
    135deg,
    var(--inyul-primary),
    var(--inyul-secondary)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Border Radius

Design scale

Variables --radius-design-* : échelle fixe documentée (Equinox). Les utilitaires rounded-sm etc. shadcn restent basés sur --radius et @theme inline.

sm

0.375rem

--radius-design-sm

md

0.5rem

--radius-design-md

lg

0.75rem

--radius-design-lg

xl

1rem

--radius-design-xl

2xl

1.5rem

--radius-design-2xl

Effects, Transitions & Animations

Catalogue dynamique

Classes utilitaires

.text-gradient

Gradient Text

Primary → Secondary

.glass

Glassmorphism

shadow-aceternity

Ombre marketing

Transition Tokens

Combinez durée et easing. Cliquez ▶ pour rejouer une combinaison.

Durées

Easings

CombinaisonDuréeEasingTester

fast + default150mscubic-bezier(0.4, 0, 0.2, 1)

fast + in150mscubic-bezier(0.4, 0, 1, 1)

fast + out150mscubic-bezier(0, 0, 0.2, 1)

base + default200mscubic-bezier(0.4, 0, 0.2, 1)

base + in200mscubic-bezier(0.4, 0, 1, 1)

base + out200mscubic-bezier(0, 0, 0.2, 1)

slow + default300mscubic-bezier(0.4, 0, 0.2, 1)

slow + in300mscubic-bezier(0.4, 0, 1, 1)

slow + out300mscubic-bezier(0, 0, 0.2, 1)

Combinaison active

--duration-base+--ease-default

transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);

Spacing Scale (Tailwind)

Référence des pas utilisés pour padding, margin et gap.

00px

0.52px

14px

28px

312px

416px

520px

624px

832px

1040px

1248px

1664px

2080px

2496px

Keyframes (extraits)

orbit

24s · linear

Rotation continue (badges, orbites)

counter-orbit

24s · linear

Rotation inverse

scroll

40s · linear infinite

Marquee horizontal

beam

6s · ease-in-out infinite

Pulse SVG (BackgroundBeams)

accordion-down

0.2s · ease-out

Radix Accordion ouverture

accordion-up

0.2s · ease-out

Radix Accordion fermeture

Component Showroom

Live Previews

Boutons Notus alignés Equinox (variant ghost = bordure divide + fond background). shadcn/ui pour les patterns Radix.

Buttons (Notus / Equinox)

Glassmorphism

Panneau avec blur et tokens actifs.

Text Gradient

Laboratoire Inyulface

.text-gradient

Dialog

Tooltip

DropdownMenu

Accordion

Tabs

Couche fondation et tokens.

Data viz (Recharts)

Couleurs séries via ChartConfig et variables --chart-1 … --chart-5.

Forms

Atomes · Patterns · Gabarit Nodus

Source unique de vérité pour les formulaires. Deux familles cohabitent : Ekinox (gabarit Nodus, marketing public, ombre shadow-aceternity) et shadcn (admin, CMS, dashboard, ombre shadow-xs). Toutes deux partagent les mêmes tokens (--input, --ring, --destructive).

Atomes — Ekinox vs shadcn (côte-à-côte)

Choisissez la colonne Ekinox pour tout formulaire marketing/public (sign-in, sign-up, contact, paywall…) afin de respecter le gabarit Nodus. Réservez la colonne shadcn aux écrans admin / CMS / dashboard où la densité prime.

Label

Label · Ekinox

Marketing · Nodus

Adresse courriel

import { Label } from "@/components/ekinox/ui/label"

Label · shadcn

Admin · CMS

Adresse courriel

import { Label } from "@/components/ui/label"

Input

Input · Ekinox

Marketing · Nodus

shadow-aceternity · ring-ring/50

import { Input } from "@/components/ekinox/ui/input"

Input · shadcn

Admin · CMS

shadow-xs · ring-ring/10

import { Input } from "@/components/ui/input"

Textarea

Textarea · Ekinox

Marketing · Nodus

import { Textarea } from "@/components/ekinox/ui/textarea"

Textarea · shadcn

Admin · CMS

import { Textarea } from "@/components/ui/textarea"

Checkbox

Checkbox · Ekinox

À porter

Aucune variante Ekinox dédiée — porter shadcn/checkbox.tsx (ring-ring/10) si un gabarit Nodus complet l'exige.

Checkbox · shadcn

Admin · CMS

M'abonner à l'infolettre

import { Checkbox } from "@/components/ui/checkbox"

Select

Select · Ekinox

À porter

Pas de Select Ekinox — utiliser shadcn/select.tsx (Radix) en attendant. Compatible tokens, à wrapper en `border-none` si gabarit Nodus.

Select · shadcn

Admin · CMS

import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select"

États

Cinq états canoniques sur l'Input Ekinox. Les tokens d'erreur shadcn (aria-invalid:ring-destructive/20, aria-invalid:border-destructive) fonctionnent tels quels.

Default

Repos

Courriel

Focus

ring-ring/50

Courriel

simulé via classes

Disabled

opacity-50

Courriel

Invalid

aria-invalid

Courriel

Format de courriel invalide.

Help text

muted

Mot de passe

8 caractères minimum, dont 1 chiffre et 1 majuscule.

Patterns d'agencement

Trois mises en page de référence. Le pattern Stacked Nodusest l'usage par défaut dans les formulaires marketing (sign-in, sign-up, contact).

Stacked Nodus

Marketing canonique

Email

<div className="rounded-2xl">
  <Label>Email</Label>
  <Input
    className="mt-4 border-none focus:ring-ring"
  />
</div>

Inline horizontal

Settings · Filtres

Pseudonyme

<div className="grid grid-cols-[120px_1fr]
            items-center gap-4">
  <Label htmlFor="x">Pseudo</Label>
  <Input id="x" />
</div>

InputGroup

Recherche · Addons

<InputGroup>
  <InputGroupAddon align="inline-start">
    <Search />
  </InputGroupAddon>
  <InputGroupInput />
  <InputGroupAddon align="inline-end">
    <InputGroupButton>Go</InputGroupButton>
  </InputGroupAddon>
</InputGroup>

Gabarit Aceternity / Nodus / Equinox

Mise en page canonique pour tout formulaire marketing du site : conteneur centré, grille 2 colonnes, en-tête (logo + heading + sous-titre), formulaire vertical à grande respiration, et illustration AuthIllustration (mesh-gradient + tuiles inclinées) à droite.

Live preview — <Contact /> ( src/components/ekinox/contact.tsx )

Ouvrir en plein écran ↗

Contact us

We empower developers and technical teams to create, simulate, and manage AI-driven workflows visually

Product Company

Cloud Management

Nodus has completely changed how we work. What used to take hours every week is now fully automated.

Gina Clinton

Head of Product, Acme Inc.

Sign in

/design-system/ekinox/sign-in

Connexion · auth sociale · gabarit 2-col

Sign up

/design-system/ekinox/sign-up

Inscription · 3 champs · auth sociale

Contact

/design-system/ekinox/contact

Nom · Email · Message multi-lignes

Recipe checklist — gabarit Nodus

À respecter pour tout nouveau formulaire marketing afin de garder le gabarit homogène.

Wrapper <Container> + grille md:grid-cols-2 gap-10 lg:gap-40
En-tête : <LogoSVG /> + <Heading className="mt-4 text-left lg:text-4xl"> + <SubHeading className="mt-4 max-w-xl text-left">
Form : <form className="mt-6 flex flex-col gap-8">
Wrappers de champ : h-full w-full rounded-2xl autour de chaque paire Label/Input
<Label> sans htmlFor (pattern Radix par enfant) + <Input className="mt-4 border-none focus:ring-ring">
Submit : <Button> Ekinox (variant primary = bg-inyul-secondary)
Séparateur « or » : deux div.h-px.flex-1.bg-border + un <span> central
Auth sociale : grille sm:grid-cols-3 de <Button variant="secondary">
Side panel : <AuthIllustration /> (mesh-gradient + tuiles)

WCAG 2.1 AA Contrast

Accessibilité

Seuils: AA ≥ 4.5:1 · AA large text ≥ 3.0:1 · AAA ≥ 7.0:1

Couleur	Fond	Ratio	Verdict
Primary #f05523	White	3.48:1	AA-lg
Primary dark #d44415	White	4.53:1	AA
Secondary #1a6881	White	6.29:1	AA
Secondary light #1f849e	White	4.33:1	AA-lg
Neutral #58616b	White	6.29:1	AA
Warning #fbad35	White	1.89:1	Fail
Warning #fbad35	Dark BG #052934	8.11:1	AAA
Foreground #ecedee	Dark BG #052934	13.05:1	AAA

Design Tokens

Source unique de vérité — couleurs, typographie, rayons et effets du design system Inyulface / Equinox.

Brand Colors

Neutral Scale

Charcoal (surfaces Inyulface)

Semantic Colors

Light Mode

Dark Mode

Statuts UI & overlays

Équivalence sémantique (lab)

Typography

Font Families

Font Weight Ramp

Type Scale

Line Height

Letter Spacing

Gradient Text

Border Radius

Effects, Transitions & Animations

Classes utilitaires

Transition Tokens

Spacing Scale (Tailwind)

Keyframes (extraits)

Component Showroom

Buttons (Notus / Equinox)

Text Gradient

Qu'est-ce qu'un design token ?

Comment sont-ils organisés ?

Forms

Atomes — Ekinox vs shadcn (côte-à-côte)

États

Patterns d'agencement

Gabarit Aceternity / Nodus / Equinox

Contact us

Nodus has completely changed how we work. What used to take hours every week is now fully automated.

WCAG 2.1 AA Contrast