Design System
Visual foundations and graphic charter of the Cyberfolio. Every choice serves a purpose: nothing decorative, everything structural.
Philosophy
The interface borrows the conventions of an operating system — a persistent shell (topbar, sidebar, chat) in which content loads like an app. The design serves the context: dark UI to reduce fatigue, neon accents to guide the eye, rigid grid to anchor content.
Backgrounds
12 backgrounds available, sorted by atmosphere. Click to apply in real time. Type background [name] in the chat for the same result.
Accents
9 accent colors. Each accent modifies the variables --violet, --line and --glow-violet with a single command. The entire interface follows.
Base Palette
The structural colors that don't change with the theme: text, intermediate surfaces, and depth levels.
Typography
System UI for body text for native readability. Project titles use the same family in large size with accent color for hierarchy.
Spacing
Vertical rhythm based on 8px multiples. Project sections have wide spacing (80–120px) to let content breathe on dark background.
Components
The interface relies on a persistent OS shell. Each component has a precise role and remains visible on all pages.
Main navigation. Logo + links. Fixed height 44px.
Project navigation. DESIGN / DEV sections. Mobile drawer.
Fixed input bar + collapsible chat panel. System commands.
Universal template for design projects. Data-driven, zero duplication.
Universal case study template. 6 composable block types.
Global composable. 12 backgrounds, 9 accents, command parser.
Effects & Glow
Neon is measured: glow on brand, scrollbar, and active elements. Never on body text. The effect serves to guide, not to decorate.
Chat commands
The command system is accessible from any page via the bar at the bottom of the screen.