Langue

Langue active : FR

SYSTÈME · DESIGN TOKENS

Système de Design

Fondations visuelles et charte graphique du Cyberfolio. Chaque choix a une fonction : rien de décoratif, tout est structurel.

Philosophie

L'interface emprunte les conventions d'un système d'exploitation — un shell persistant (topbar, sidebar, chat) dans lequel le contenu se charge comme une application. Le design sert le contexte : interface sombre pour réduire la fatigue visuelle, accents néon pour guider le regard, grille rigide pour ancrer le contenu.

Arrière-plans

12 arrière-plans disponibles, classés par atmosphère. Cliquez pour appliquer en temps réel. Tapez background [name] dans le chat pour obtenir le même résultat.

Dark
Purple
Blue
Other

Couleurs d'accent

9 couleurs d'accent. Chaque accent modifie les variables --violet, --line et --glow-violet. L'interface entière s'adapte.

Palette de base

Les couleurs structurelles qui ne changent pas avec le thème : texte, surfaces intermédiaires et niveaux de profondeur.

TEXT
--text#cfcbe6
--muted#7a7693
SURFACES
topbar#120d1f → #090612
sidebar#090612 → #05030a
FUNCTIONAL
inputbar#0b0814
card / boxrgba(10,6,18,0.6)

Typographie

System UI pour le texte courant afin de conserver une lisibilité native. Les titres utilisent la couleur d'accent pour renforcer la hiérarchie.

H1Arena36–38px · accent
H2Conception20px · text
Body Le design se concentre sur la modularité. 15px · 1.75 lh
Meta PROJET · 2025 11px · muted
Mono useChat.ts 13px · mono

Espacement

Rythme vertical basé sur des multiples de 8px. Les sections de projet ont un espacement large (80-120px) pour laisser respirer le contenu sur fond sombre.

xs
8px
sm
12px
md
24px
lg
48px
xl
80px
2xl
128px

Composants

L'interface repose sur un shell OS persistant. Chaque composant a un rôle précis et reste visible sur toutes les pages.

OsTopBar

Main navigation. Logo + links. Fixed height 44px.

OsSideBar

Project navigation. DESIGN / DEV sections. Mobile drawer.

OsBottomChat

Fixed input bar + collapsible chat panel. System commands.

DesignProjectLayout

Universal template for design projects. Data-driven, zero duplication.

DevProjectLayout

Universal case study template. 6 composable block types.

useChat

Global composable. 12 backgrounds, 9 accents, command parser.

Effets & Glow

Le néon est mesuré : glow sur la marque, la scrollbar et les éléments actifs. Jamais sur le texte de corps. L'effet sert à guider, pas à décorer.

BEKIBOtext-shadow : brand glow
box-shadow : focus ring
border : line separator
gradient : surface depth

Commandes du chat

Le système de commandes est accessible depuis n'importe quelle page via le bouton system du footer.

> help
SYSTEM.HELP
> background [black | dark | gray | purple | amethyst | nebula | blue | navy | cyberblue | matrix | emerald | crimson]
> accent [violet | rose | cyan | blue | green | emerald | amber | red | silver]
> lang [en | fr]
> reset

Layouts

Trois grilles sont disponibles. Le layout est sélectionné par page via definePageMeta.

default

Home. Full screen. No sidebar or info panel.

design

Design projects. Sidebar + content + "INFO" panel.

dev / system

Dev & system projects. Same grid, enriched info panel.