Controlpanel / Stijl

Stijlwerkbank

Component

Tabel

Actie

Excel compact

Tabel

Finance grid

Subnav-pills

Changeset

PreviewDiffDeploy

Typografie

Lettertype

Lettergrootte14px

Regelhoogte150%

Kleur en contrast

Accent

Contrast

Vorm en laag

Dichtheid5

Ronding6px

Schaduw3

Glans2

Achtergrond3

Gedrag

Tabel

Beweging

Componenten

Doelwit

Tabelstructuur

Menustructuur

Live preview

Pagina onder dezelfde tokenlaag

DesktopTabletMobiel

Dossier cockpit

Visuele controlelaag

Doelwit: Tabel

Subnav-pills5 items

Finance grid

grid

Rekening

2024

2025

Status

Omzet

81.036

94.210

Loon

22.440

24.180

R/C DGA

12.900

10.200

wijzig

Voorgeprogrammeerd

Terminal

Herman payload

CONTROL_CONTEXT=/controlpanel/stijl
ACTION=Excel compact
COMPONENT_TARGET=Tabel
FONT=Geist
BASE_FONT_PX=14
LINE_HEIGHT=150%
DENSITY=5/10
RADIUS=6px
SHADOW=3/10
GLOSS=2/10
DEPTH=3/10
ACCENT=#d2581a
TABLE_MODE=grid
TABLE_STRUCTURE=Finance grid
MENU_STRUCTURE=Subnav-pills
MOTION=subtiel
CONTRAST=normaal

OPDRACHT:
Pas de huidige dossierpagina aan naar deze stijl, maak eerst een preview, daarna een kleine deploybare patch met rollback.

WERKWIJZE:
1. Raak alleen het gekozen componentdoelwit aan.
2. Maak een changeset met alleen de benodigde route/component files.
3. Toon eerst preview en diff.
4. Deploy uitsluitend via de adviestool queue wanneer de test groen is.

Componenten

Doelwit

Tabelstructuur

Menustructuur

Herman payload

CONTROL_CONTEXT=/controlpanel/stijl
ACTION=Excel compact
COMPONENT_TARGET=Tabel
FONT=Geist
BASE_FONT_PX=14
LINE_HEIGHT=150%
DENSITY=5/10
RADIUS=6px
SHADOW=3/10
GLOSS=2/10
DEPTH=3/10
ACCENT=#d2581a
TABLE_MODE=grid
TABLE_STRUCTURE=Finance grid
MENU_STRUCTURE=Subnav-pills
MOTION=subtiel
CONTRAST=normaal

OPDRACHT:
Pas de huidige dossierpagina aan naar deze stijl, maak eerst een preview, daarna een kleine deploybare patch met rollback.

WERKWIJZE:
1. Raak alleen het gekozen componentdoelwit aan.
2. Maak een changeset met alleen de benodigde route/component files.
3. Toon eerst preview en diff.
4. Deploy uitsluitend via de adviestool queue wanneer de test groen is.