Les chartes

Un pattern ne vit pas dans le vide : il porte les jetons de la charte dont il est issu. Copier un fragment sans son bloc :root, c'est copier un dessin sans ses couleurs. Les cases vides du tableau sont l'information utile — elles disent ce que la bibliothèque ne couvre pas encore.

charte	card	chart	diagram	layout	list	shape	tag	title	total
`ref-01-bento-pills-2030`	·	·	·	1	·	2	·	·	3
`ref-02-ghost-icon-claim`	1	·	·	·	·	·	·	·	1
`ref-03-bento-dark-pitch`	·	2	·	1	·	·	·	·	3
`ref-04-swiss-investor-blue`	1	·	·	2	3	·	·	·	6
`ref-05-proposal-acid-yellow`	1	·	·	1	·	1	·	1	4
`ref-06-orange-notched`	2	·	·	·	1	1	·	1	5
`ref-07-retro-brand-hero`	·	·	·	3	·	·	·	1	4
`ref-08-swiss-studio-hero`	·	·	·	1	·	·	·	1	2
`ref-10-campaign-board-red`	·	·	·	1	1	·	·	1	3
`ref-11-finance-dashboard-mint`	4	·	·	·	·	·	·	·	4
`ref-12-neon-capsule-tags`	·	·	·	·	·	·	1	·	1
`ref-13-glass-fintech-dashboard`	2	1	·	1	1	·	·	·	5
`ref-14-layer-stack-coral`	·	·	1	·	·	·	·	·	1
`ref-15-lilac-notched-kpi`	1	·	·	·	·	·	·	·	1
`ref-16-cobalt-graph-paper`	·	1	·	1	·	·	·	·	2
`ref-17-mono-bento-legal`	1	·	·	2	·	·	1	·	4
`ref-18-lime-sales-dashboard`	1	1	·	1	·	·	1	·	4
`ref-19-acid-clinical-timeline`	·	·	2	1	1	·	·	·	4
total	14	5	3	16	7	4	3	5	57

Chartes sans aucun pattern extrait : ref-09-zine-annotated-blue

ref-01-bento-pills-2030

Bento pills 2030 — couverture géométrique

Voir l'écran entier ↗

--vl-bg
#F5F4F2

--vl-ink
#0B0B0B

--vl-accent
#E8342A

--vl-accent-deep
#8E1114

--vl-white
#FFFFFF

--vl-on-accent
#FFFFFF

--vl-index
#6E6C68

layout-15-primitive-mosaic shape-02-teardrop-quadrant shape-03-stadium-track

Télécharger .css

ref-02-ghost-icon-claim

Gris fantôme — argument unique

Voir l'écran entier ↗

--vl-bg
#F7F7F7

--vl-surface
#EDEDED

--vl-ghost
#E2E2E2

--vl-ink
#444444

--vl-muted
#A9A9A9

card-01-ghost-icon

Télécharger .css

ref-03-bento-dark-pitch

Bento sombre — pitch investisseur

Voir l'écran entier ↗

--vl-bg
#2E2E2E

--vl-board
#2E2E2E

--vl-surface-light
#FFFFFF

--vl-surface-dark
#111111

--vl-surface-tile
#3A3A3A

--vl-accent
#CFE3F5

--vl-accent-2
#8FBBE4

--vl-accent-3
#5E9BD6

--vl-ink
#111111

--vl-ink-muted
#6B6B6B

--vl-ink-invert
#FFFFFF

--vl-ink-invert-muted
#A0A0A0

--vl-hairline
#D5D5D5

--vl-hairline-invert
#4A4A4A

chart-01-stadium-bars chart-02-isotype layout-01-nested-bento

Télécharger .css

ref-04-swiss-investor-blue

Suisse maximaliste — investor deck bleu

Voir l'écran entier ↗

--vl-bg
#D9D2C7

--vl-board
#D9D2C7

--vl-blue
#1B44D8

--vl-black
#0D0D0D

--vl-white
#FFFFFF

--vl-ink-muted
#6E6E6E

--vl-ink-muted-invert
#D3D3D3

--vl-hairline
#00000018

--vl-hairline-invert
#FFFFFF33

--vl-ph-a
#C9C9C9

--vl-ph-b
#5A5A5A

card-13-email-figure-band layout-02-swiss-frame layout-09-email-envelope list-01-giant-numbers list-03-two-column-toc list-06-email-digest

Télécharger .css

ref-05-proposal-acid-yellow

Proposal jaune acide

Voir l'écran entier ↗

--vl-bg
#EFEFED

--vl-board
#DCDCD8

--vl-white
#FFFFFF

--vl-black
#111111

--vl-acid
#EAFF00

--vl-ink-muted
#6C6C6C

--vl-ink-muted-invert
#9A9A9A

--vl-hairline
#11111118

--vl-hairline-invert
#FFFFFF24

--vl-blob-light
#E8E8E6

--vl-blob-dark
#171717

card-14-numbered-steps layout-16-header-tripartite shape-04-asterisk-mark title-05-hyphen-break

Télécharger .css

ref-06-orange-notched

Corporate orange chanfreiné

Voir l'écran entier ↗

--vl-bg
#F0EFEC

--vl-board
#DEDDD9

--vl-white
#FFFFFF

--vl-black
#141414

--vl-orange
#F2551E

--vl-steel
#C6D0CF

--vl-ink-muted
#6A6A67

--vl-ink-muted-invert
#FFF1E9

--vl-ink-on-steel
#3E4746

--vl-hairline
#00000015

--vl-ph-a
#C9C9C9

--vl-ph-b
#4C4C4C

--vl-ph-dark-a
#6A6A6A

--vl-ph-dark-b
#141414

card-02-notched-brief card-03-stat-accent list-02-ruled-index shape-notched-corner title-01-leading-rule

Télécharger .css

ref-07-retro-brand-hero

Retro brand hero (crème + rouge de marque, sol photographique)

Voir l'écran entier ↗

--vl-card
#FBF7EC

--vl-bg
#FBF7EC

--vl-ink
#1E1B18

--vl-accent
#B2201C

--vl-on-accent
#FBF7EC

--vl-ground-sky-hi
#D7E6EC

--vl-ground-sky-lo
#BBD3DE

--vl-ground-sun
#F4EFE2

--vl-ground-sea-hi
#7FA8BC

--vl-ground-sea-lo
#5E8AA0

--vl-ground-foam
#EFEAE0

--vl-ground-sand-wet
#C7B49A

--vl-ground-sand-dry
#E4D5BC

--vl-ph-a-hi
#86B0C4

--vl-ph-a-lo
#3F6B84

--vl-ph-a-crest
#F1EDE3

--vl-ph-b-sky
#C9DEE7

--vl-ph-b-canvas
#D8442E

--vl-ph-b-canvas-lo
#92251C

--vl-ph-b-pole
#EDE4D2

--vl-ph-c-hi
#EFE1C6

--vl-ph-c-lo
#B9A181

layout-11-hero-card-on-photo layout-12-nav-three-zone layout-13-image-triptych title-03-wordmark-bottom-left

Télécharger .css

ref-08-swiss-studio-hero

Suisse studio — hero web Studioform®

Voir l'écran entier ↗

--vl-bg
#F6F5F2

--vl-board
#F6F5F2

--vl-card
#F6F5F2

--vl-ink
#111111

--vl-ink-soft
#2A2A28

layout-14-statement-first title-04-name-fills-measure

Télécharger .css

ref-10-campaign-board-red

Planche de campagne — condensée rouge

Voir l'écran entier ↗

--vl-bg
#EDEAE3

--vl-board
#EDEAE3

--vl-slide
#EDEAE3

--vl-red
#C82C15

--vl-white
#FFFFFF

--vl-cow-white
#F2EFE7

--vl-cow-shade
#D8D1C1

--vl-cow-brown
#5A3520

--vl-cow-brown-hi
#8A5732

--vl-jkt-red
#C6281B

--vl-jkt-red-hi
#EC5233

--vl-jkt-red-lo
#8A150F

--vl-jkt-sky
#74A9D6

--vl-jkt-sky-lo
#A8C6DE

--vl-jkt-btn
#26100D

--vl-road-sky
#D2DEE6

--vl-road-tree
#2A4622

--vl-road-green
#5F8C46

--vl-road-green-lo
#3B5C2C

--vl-road-dirt
#C3A57E

--vl-road-dirt-hi
#DDC59F

--vl-road-rut
#A88964

--vl-road-figure
#201E1A

--vl-hand-bg
#D9DBD3

--vl-hand-bg-lo
#B4B8AE

--vl-glove
#F3F0E8

--vl-glove-hi
#FFFFFF

--vl-glove-sh
#CBC5B7

--vl-vial-glass
#DEE3E1

--vl-vial-cap
#131110

--vl-vial-drop
#6A6660

--vl-room-red
#CE2A1C

--vl-room-red-lo
#8E120C

--vl-room-fig
#6B0F0A

--vl-cact-bg
#B5AFA0

--vl-cact-bg-lo
#8E8A7C

--vl-cact-green
#6C8860

--vl-cact-green-hi
#95AC86

--vl-cact-green-lo
#3D5436

--vl-cact-spine
#D6402A

--vl-cact-spine-hi
#F2A794

layout-10-bleed-column-inset list-07-hairline-spec-table title-02-condensed-overlay-stack

Télécharger .css

ref-11-finance-dashboard-mint

Dashboard bento clair — menthe & lilas

Voir l'écran entier ↗

--vl-bg
#E6EAE4

--vl-board
#E6EAE4

--vl-surface-light
#FFFFFF

--vl-surface-soft
#F1F2EF

--vl-surface-dark
#141414

--vl-mint
#B4E3A0

--vl-mint-deep
#8FCE72

--vl-lilac
#B6ABE6

--vl-lilac-deep
#9A8ADE

--vl-ink
#181A17

--vl-ink-muted
#7C817A

--vl-ink-on-mint
#3D5A30

--vl-ink-on-lilac
#3E3270

--vl-ink-invert
#FFFFFF

--vl-ink-invert-muted
#9CA09A

--vl-hairline
#E3E5E1

--vl-hairline-invert
#333333

card-04-stat-barchart card-05-balance-gauge card-06-forecast-timeline card-07-transactions

Télécharger .css

ref-12-neon-capsule-tags

Néon vert — étiquettes capsules sur fond sombre

Voir l'écran entier ↗

--vl-bg
#26331F

--vl-neon
#4FE383

--vl-neon-soft
#4FE38344

--vl-ink-invert
#FFFFFF

tag-01-gooey-capsule

Télécharger .css

ref-13-glass-fintech-dashboard

Dashboard en verre dépoli — lavande & bleu

Voir l'écran entier ↗

--vl-bg
#B4BEDD

--vl-grad-1
#A3B0DA

--vl-grad-2
#98A9D6

--vl-grad-3
#C8CEDA

--vl-surface-glass
rgba(255, 255, 255, 0.45)

--vl-surface-glass-strong
rgba(255, 255, 255, 0.68)

--vl-surface-glass-soft
rgba(255, 255, 255, 0.24)

--vl-surface-dark
#101625

--vl-sheen
rgba(255, 255, 255, 0.45)

--vl-blue
#4F7CF7

--vl-blue-light
#8FB6FA

--vl-violet
#8B5CF6

--vl-violet-deep
#5B7CF0

--vl-violet-halo
rgba(123, 106, 240, 0.42)

--vl-ink
#1A1F2E

--vl-ink-muted
#565C72

--vl-ink-invert
#FFFFFF

--vl-ink-invert-muted
rgba(255, 255, 255, 0.72)

card-08-orb-chain-total card-09-gradient-metric-curve chart-03-accent-column-callout layout-03-glass-board list-04-due-rows

Télécharger .css

ref-14-layer-stack-coral

Schéma de couches — corail sur blanc cassé

Voir l'écran entier ↗

--vl-bg
#F1EFEC

--vl-coral
#E4886A

--vl-ink
#3A3835

--vl-ink-muted
#6E6863

--vl-hairline
#97918C

diagram-01-layer-stack

Télécharger .css

ref-15-lilac-notched-kpi

Lavande SaaS à vignettes chanfreinées

Voir l'écran entier ↗

--vl-bg
#F4F4FB

--vl-card
#FCFBFF

--vl-white
#FFFFFF

--vl-violet
#6B3FE4

--vl-violet-light
#9A7BF0

--vl-figure
#4C1FD6

--vl-ink
#2E2166

--vl-ink-muted
#6E67A0

--vl-tile
#EBE7FB

--vl-tile-invert
rgba(255,255,255,0.22)

--vl-on-accent
#FFFFFF

--vl-on-accent-muted
#FFFFFF

card-10-kpi-notch-tile

Télécharger .css

ref-16-cobalt-graph-paper

Papier millimétré cobalt

Voir l'écran entier ↗

--vl-paper
#F0EBDE

--vl-paper-2
#E6E0CE

--vl-ink
#1F2BE0

--vl-ink-faint
rgba(31,43,224,0.20)

--vl-grid
rgba(31,43,224,0.10)

--vl-near
#14163A

chart-04-unit-textured-bar layout-04-graph-paper-cells

Télécharger .css

ref-17-mono-bento-legal

Bento monochrome, hiérarchie par la surface

Voir l'écran entier ↗

--vl-page
#FEFEFE

--vl-module
#EDEDED

--vl-object
#FFFFFF

--vl-invert
#000000

--vl-ink
#111111

--vl-ink-soft
#5F5F5F

--vl-on-invert
#FFFFFF

--vl-on-invert-soft
rgba(255,255,255,0.62)

--vl-line
rgba(17,17,17,0.55)

card-11-corner-arrow-tile layout-05-nav-pill-bar layout-06-bento-l-span tag-02-centered-cloud

Télécharger .css

ref-18-lime-sales-dashboard

Tableau de bord achromatique à accent vert dosé

Voir l'écran entier ↗

--vl-app
#FEFEFE

--vl-module
#F2F2F2

--vl-module-warm
#FBF9EC

--vl-invert
#000000

--vl-accent
#5FE85C

--vl-ink
#0B0B0B

--vl-ink-soft
#6B6B6B

--vl-on-invert
#FFFFFF

--vl-on-invert-soft
rgba(255,255,255,0.66)

--vl-hairline
#E6E6E6

--vl-ramp-1
#E3E3E3

--vl-ramp-2
#CCCCCC

--vl-ramp-3
#999999

--vl-ramp-4
#666666

--vl-ramp-5
#000000

card-12-inverted-kpi-row chart-05-tile-heatmap layout-07-icon-rail-shell tag-03-action-pill-bar

Télécharger .css

ref-19-acid-clinical-timeline

Feuille clinique grise sur voile, accent acide

Voir l'écran entier ↗

--vl-veil
#4A4A48

--vl-veil-deep
#1B1D1D

--vl-sheet
#DFDFD7

--vl-module
#F0EFEB

--vl-module-hi
#FFFFFF

--vl-accent
#F5FE49

--vl-alert
#E8756B

--vl-recover
#7FA88C

--vl-ink
#262C2C

--vl-ink-soft
#5F615E

--vl-on-veil
#FFFFFF

--vl-on-veil-soft
rgba(255,255,255,0.72)

diagram-02-branch-timeline diagram-03-time-scrubber layout-08-sheet-handle-tab list-05-vitals-strip

Télécharger .css