BHDicaire

Colour tokens

Governance rules Implementation details

Colour tokens define the small palette shared by brand and interface work. The table is generated from token metadata and should not be edited by hand.

Colour token category
color.ink--color-ink{color.palette.near-black}#101010 #f8f8f5colorsemanticPrimary text colour for high-contrast interface and brand copy.
color.paper--color-paper{color.palette.warm-paper}#f8f8f5 #101010colorsemanticDefault page background colour.
color.line--color-line{color.palette.quiet-line}#d7d7d2 oklch(37.1% 0 none)colorsemanticQuiet divider and border colour.
color.accent--color-accent{color.palette.signal-orange}#e6461a #e6461acolorsemanticPrimary accent colour for emphasis, active states, and brand signals.
color.accent-text--color-accent-text{color.palette.deep-signal-orange}#c43810 #e6461acolorsemanticTheme-aware accent colour for normal-sized text on the page surface.
color.on-accent--color-on-accent{color.palette.near-black}#101010colorsemanticAccessible foreground colour for text and icons on the accent background.
color.code.background--color-code-background#272822#272822colorsemanticBackground colour for technical code surfaces.
color.white--color-white{color.palette.white}#ffffffcolorsemanticWhite used for inverse text and elevated surfaces.
color.black--color-black{color.palette.black}#000000colorsemanticBlack used for overlays and high-contrast code controls.
color.code.foreground--color-code-foreground#f8f8f2#f8f8f2colorsemanticForeground colour for technical code surfaces.
color.neutral.50--color-neutral-50{color.palette.neutral.50}oklch(98.5% 0 none) oklch(26.9% 0 none)colorsemanticLightest neutral surface.
color.neutral.100--color-neutral-100{color.palette.neutral.100}oklch(97% 0 none) oklch(37.1% 0 none)colorsemanticLight neutral surface.
color.neutral.300--color-neutral-300{color.palette.neutral.300}oklch(87% 0 none) oklch(43.9% 0 none)colorsemanticQuiet neutral marker and divider tone.
color.neutral.400--color-neutral-400{color.palette.neutral.400}oklch(70.8% 0 none) oklch(55.6% 0 none)colorsemanticSecondary neutral text tone.
color.neutral.500--color-neutral-500{color.palette.neutral.500}oklch(55.6% 0 none) oklch(70.8% 0 none)colorsemanticMuted neutral text tone.
color.neutral.600--color-neutral-600{color.palette.neutral.600}oklch(43.9% 0 none) oklch(87% 0 none)colorsemanticSupporting neutral text tone.
color.neutral.700--color-neutral-700{color.palette.neutral.700}oklch(37.1% 0 none) oklch(97% 0 none)colorsemanticStrong neutral text and border tone.
color.neutral.800--color-neutral-800{color.palette.neutral.800}oklch(26.9% 0 none) oklch(98.5% 0 none)colorsemanticDark neutral surface.
color.code.copy.success.foreground--color-code-copy-success-foregroundoklch(87.1% 0.15 154.449)oklch(87.1% 0.15 154.449)colorsemanticCopy-control confirmation text colour.
color.code.copy.success.border--color-code-copy-success-borderoklch(79.2% 0.209 151.711)oklch(79.2% 0.209 151.711)colorsemanticCopy-control confirmation border colour.
color.code.copy.error.foreground--color-code-copy-error-foregroundoklch(80.8% 0.114 19.571)oklch(80.8% 0.114 19.571)colorsemanticCopy-control error text colour.
color.code.copy.error.border--color-code-copy-error-borderoklch(70.4% 0.191 22.216)oklch(70.4% 0.191 22.216)colorsemanticCopy-control error border colour.
component.announcement.background--component-announcement-background{color.paper}#f8f8f5colorcomponentBackground surface for the site-wide announcement banner.
status.note--status-noteoklch(62.3% 0.214 259.815)oklch(62.3% 0.214 259.815)colorsemanticInformational status accent for notes and neutral change notices.
component.announcement.foreground--component-announcement-foreground{color.ink}#101010colorcomponentText colour for the site-wide announcement banner.
status.success--status-successoklch(72.3% 0.219 149.579)oklch(72.3% 0.219 149.579)colorsemanticPositive status accent for confirmed or newly available items.
component.announcement.border--component-announcement-border{color.accent}#e6461acolorcomponentSignal border colour for the site-wide announcement banner.
status.important--status-importantoklch(62.7% 0.265 303.9)oklch(62.7% 0.265 303.9)colorsemanticImportant status accent for decisions requiring attention.
component.announcement.link--component-announcement-link{color.accent-text}#c43810colorcomponentAccessible link colour for the site-wide announcement banner.
status.warning--status-warningoklch(76.9% 0.188 70.08)oklch(76.9% 0.188 70.08)colorsemanticWarning status accent for cautionary changes or constraints.
status.danger--status-dangeroklch(63.7% 0.237 25.331)oklch(63.7% 0.237 25.331)colorsemanticCritical status accent for cautions, errors, and deprecations.
status.archived--status-archived{color.neutral.500}oklch(55.6% 0 none)colorsemanticMuted status accent for archived material.
component.avatar.background--component-avatar-background{color.neutral.100}oklch(97% 0 none)colorcomponentFallback avatar surface for a recommendation attribution.
component.avatar.foreground--component-avatar-foreground{color.ink}#101010colorcomponentFallback avatar initials colour for a recommendation attribution.
component.avatar.border--component-avatar-border{color.line}#d7d7d2colorcomponentAvatar boundary colour for a recommendation attribution.
component.back-to-top.background--component-back-to-top-background{color.paper}#f8f8f5colorcomponentSurface behind the back-to-top link.
component.back-to-top.foreground--component-back-to-top-foreground{color.ink}#101010colorcomponentText and arrow colour for the back-to-top link.
component.back-to-top.border--component-back-to-top-border{color.line}#d7d7d2colorcomponentResting border of the back-to-top link.
component.back-to-top.hover-border--component-back-to-top-hover-border{color.accent}#e6461acolorcomponentHover and focus border of the back-to-top link.