Design System

Work in progress. I'm adding components as I go, following patterns from what's already documented. Nothing here is set in stone yet.

Section

Section wrapper that sets the accent color for its children. This is where the chromatic layer activates.

Section Pattern

Organism

Shared layout pattern used by Experiences, Realisations, and Formations sections.

Section Header

Mes

Expériences

Props

PropTypeDescription
id string Section anchor ID
subtitle string Label above the title (e.g., "Mes")
title string Section heading

Sections

SectionColor ThemeCard Type
Experiences Pink (#f68dab) CardContent
Realisations Green (#66c384) CardSplit
Formations Purple (#9c85d3) CardContent

Each section overrides --accent-color and --secondary-accent-color via scoped :global(#id).

kinoo.dev · Design System