kView design system · Dev workbench

Le catalogue vivant des composants kView INVESTOR.

Une surface isolée pour vérifier les fondations, les contrats d’accessibilité et les composants Blade publics de ui-core, visualization et ui-data.

Explorer les composants Lire les règles
Surface Laravel Blade Aucun wrapper React
Isolation Bundle dédié CSS et JS séparés
Accès Local uniquement Route absente en production
Architecture

Trois packages, une API Blade stable.

Le catalogue respecte les propriétaires réels et leur graphe de dépendances.

x-ui.* · x-erp.*
@foreach ($packageGroups as $package)
{{ $package['label'] }}

{{ $package['name'] }}

{{ $package['description'] }}

{{ $package['depends'] }}
@endforeach
ui-core visualization ui-data kView INVESTOR
Foundations / Colors

Une palette sémantique, pas des valeurs ad hoc.

Les composants consomment les variables de tokens.css.

packages/kview-ui-core/resources/css/tokens.css
@foreach ($colorTokens as $token)
{{ $token['name'] }} {{ $token['value'] }} {{ $token['usage'] }}
@endforeach
Foundations / Typography

Lisibilité métier et hiérarchie stable.

Trois familles, chacune avec une responsabilité explicite.

Display / Headings --font-display · Poppins

Aa

Fund performance overview

700 · 32px · line-height 1.15
Body / Controls --font-body · DM Sans

Aa

Review portfolio activity and reported positions.

400–700 · 14–16px · letter-spacing 0
Numeric / Technical --font-mono · JetBrains Mono

01

€148.4m · 18.4% · 1.82x

400–600 · tabular values
DisplayPrivate markets, clearly structured.
H1General Partners
H2Capital accounts
Body

Reported positions, commitments and performance ratios.

CaptionLast updated 16 July 2026
Foundations / Layout

Spacing, radius et profondeur.

Une échelle courte pour garder les interfaces denses et prévisibles.

Spacing scale

@foreach ($spacingTokens as $token)
{{ $token['name'] }} {{ $token['value'] }}
@endforeach

Radius

@foreach ($radiusTokens as $token)
{{ $token['name'] }} {{ $token['value'] }}
@endforeach
@foreach ($shadowTokens as $token)
{{ $token['name'] }} {{ $token['usage'] }}
@endforeach
Foundations / Icons

Un registre unique, côté Blade, JavaScript et Vue.

24×24, stroke 1.75, currentColor. Pas de SVG dupliqué dans les pages.

<x-ui.icon name="…" />
@foreach ($icons as $icon)
{{ $icon }}
@endforeach