Source-backed reference
Design tokens.
The resolved HPLX family, with the actual exported CSS names and both color modes.
Family 0.2.0 · pinned Cosmik v0.16.1 · baseline token schema Cosmik baseline 0.11.0
226 tokens
Use semantic roles in interfaces. Primitives document the palette. Swatches do not prove arbitrary color combinations are accessible; apply the family’s guidance and the pinned foundation’s contrast rules.
| Token / group | Dark or shared value | Light value |
|---|---|---|
--c-status-info-borderColor | #6688C0 | #3B66AB |
--c-status-info-bgColor | #151D2B | #EAF0F8 |
--c-status-info-fgColor | #B5C7E6 | #1F3F73 |
--c-status-success-borderColor | #4F9A63 | #2F7D46 |
--c-status-success-bgColor | #13241A | #E9F3EB |
--c-status-success-fgColor | #A9D3B1 | #1D5530 |
--c-status-warning-borderColor | #B08A3E | #94690F |
--c-status-warning-bgColor | #2A2112 | #FAF1DE |
--c-status-warning-fgColor | #EDCB8C | #6A4A05 |
--c-status-error-borderColor | #D0605A | #B3362F |
--c-status-error-bgColor | #2B1615 | #FAEDEB |
--c-status-error-fgColor | #F2B8B5 | #8A1F1A |
--c-shadowColor | #00000099 | #00000029 |
--c-accentColor | #E0A53A | #875709 |
--c-glass-activeColor | #FFFFFF29 | #0000001F |
--c-glass-hoverColor | #FFFFFF14 | #0000000F |
--c-glass-sheen-lowColor | #FFFFFF33 | #00000040 |
--c-glass-sheenColor | #FFFFFFA6 | #FFFFFFF2 |
--c-glass-mutedColor | #C8C8C8 | #454545 |
--c-glass-borderColor | #414141 | #C6C5C0 |
--c-glassColor | #0E0F1160 | #FFFFFF8F |
--c-scrimColor | #000000B8 | #0000007A |
--c-media-placeholderColor | #111111 | #E8E7E3 |
--c-ornament-textColor | #414141 | #C6C5C0 |
--c-ornament-faintColor | #181818 | #EFEEE9 |
--c-ornamentColor | #252525 | #E8E7E3 |
--c-divider-strongColor | #414141 | #C6C5C0 |
--c-status-borderColor | #7E786E | #7A7266 |
--c-status-bgColor | #1E2226 | #E7E0D2 |
--c-status-fgColor | #ECE7DD | #1A1714 |
--c-disabled-borderColor | #7E786E | #7A7266 |
--c-disabled-fgColor | #A7A196 | #5C554B |
--c-disabled-bgColor | #1E2226 | #E7E0D2 |
--c-input-placeholderColor | #A7A196 | #5C554B |
--c-input-fgColor | #ECE7DD | #1A1714 |
--c-input-bgColor | #0E0F11 | #FFFFFF |
--c-action-secondary-fgColor | #ECE7DD | #1A1714 |
--c-action-secondary-activeColor | #2A2F35 | #DCD3C2 |
--c-action-secondary-hoverColor | #1E2226 | #E7E0D2 |
--c-action-secondaryColor | #131518 | #FFFFFF |
--c-action-primary-fgColor | #1A1408 | #FFFFFF |
--c-action-primary-activeColor | #F3C97E | #5F3D06 |
--c-action-primary-hoverColor | #EBB75C | #734A07 |
--c-action-primaryColor | #E0A53A | #875709 |
--c-selectedColor | #ECE7DD | #1A1714 |
--c-on-selectedColor | #0E0F11 | #F3EFE6 |
--c-link-activeColor | #ECE7DD | #1A1714 |
--c-link-hoverColor | #EBB75C | #875709 |
--c-linkColor | #ECE7DD | #1A1714 |
--c-focusColor | #E0A53A | #875709 |
--c-dividerColor | #2E3339 | #D6CFC1 |
--c-borderColor | #7E786E | #7A7266 |
--c-mutedColor | #A7A196 | #5C554B |
--c-textColor | #ECE7DD | #1A1714 |
--c-raisedColor | #1E2226 | #E7E0D2 |
--c-surfaceColor | #131518 | #FFFFFF |
--c-bgColor | #0E0F11 | #F3EFE6 |
--c-breakpoint-compactBreakpoint | 720px | |
--c-breakpoint-narrowBreakpoint | 380px | |
--c-elevation-1-shadowElevation | 0px 1px 2px 0px light-dark(var(--c-primitive-shadow-light), var(--c-primitive-shadow-dark)) | |
--c-elevation-1-surfaceElevation | light-dark(var(--c-primitive-hplx-parchment), var(--c-primitive-hplx-raised)) | |
--c-elevation-2-shadowElevation | 0px 4px 12px 0px light-dark(var(--c-primitive-shadow-light), var(--c-primitive-shadow-dark)) | |
--c-elevation-2-surfaceElevation | light-dark(var(--c-primitive-hplx-parchment), var(--c-primitive-hplx-raised)) | |
--c-elevation-3-shadowElevation | 0px 12px 32px 0px light-dark(var(--c-primitive-shadow-light), var(--c-primitive-shadow-dark)) | |
--c-elevation-3-surfaceElevation | light-dark(var(--c-primitive-hplx-parchment), var(--c-primitive-hplx-raised)) | |
--c-glass-blurGlass | 24px | |
--c-glass-brightnessGlass | 1.35 | |
--c-glass-contrastGlass | 0.5 | |
--c-glass-saturationGlass | 1.4 | |
--c-glass-sheen-angleGlass | 160deg | |
--c-layout-control-denseLayout | 2rem | |
--c-layout-control-minLayout | 2.75rem | |
--c-layout-focus-offsetLayout | 2px | |
--c-layout-focus-widthLayout | 2px | |
--c-layout-gutterLayout | 1.5rem | |
--c-layout-lineLayout | 65ch | |
--c-layout-max-contentLayout | 70rem | |
--c-layout-radiusLayout | 0.25rem | |
--c-motion-durationMotion | Effective duration, resolved from data-motion and system preference | |
--c-motion-easingMotion | ease-out | |
--c-motion-normal-durationMotion | 140ms | |
--c-motion-reduced-durationMotion | 0ms | |
--c-motion-system-durationMotion | Normal or reduced duration, selected by the operating system | |
--c-primitive-amber-200Primitives | #EDCB8C | |
--c-primitive-amber-400Primitives | #B08A3E | |
--c-primitive-amber-50Primitives | #FAF1DE | |
--c-primitive-amber-600Primitives | #94690F | |
--c-primitive-amber-800Primitives | #6A4A05 | |
--c-primitive-amber-950Primitives | #2A2112 | |
--c-primitive-blackPrimitives | #000000 | |
--c-primitive-blue-200Primitives | #B5C7E6 | |
--c-primitive-blue-400Primitives | #6688C0 | |
--c-primitive-blue-50Primitives | #EAF0F8 | |
--c-primitive-blue-600Primitives | #3B66AB | |
--c-primitive-blue-800Primitives | #1F3F73 | |
--c-primitive-blue-950Primitives | #151D2B | |
--c-primitive-border-functionalPrimitives | #767676 | |
--c-primitive-decorative-darkPrimitives | #303030 | |
--c-primitive-glass-darkPrimitives | #12121250 | |
--c-primitive-glass-lightPrimitives | #FFFFFF8F | |
--c-primitive-graphitePrimitives | #414141 | |
--c-primitive-green-200Primitives | #A9D3B1 | |
--c-primitive-green-400Primitives | #4F9A63 | |
--c-primitive-green-50Primitives | #E9F3EB | |
--c-primitive-green-600Primitives | #2F7D46 | |
--c-primitive-green-800Primitives | #1D5530 | |
--c-primitive-green-950Primitives | #13241A | |
--c-primitive-hplx-amberPrimitives | #E0A53A | |
--c-primitive-hplx-amber-activePrimitives | #F3C97E | |
--c-primitive-hplx-amber-deepPrimitives | #875709 | |
--c-primitive-hplx-amber-deep-activePrimitives | #5F3D06 | |
--c-primitive-hplx-amber-deep-hoverPrimitives | #734A07 | |
--c-primitive-hplx-amber-hoverPrimitives | #EBB75C | |
--c-primitive-hplx-ashPrimitives | #A7A196 | |
--c-primitive-hplx-bonePrimitives | #ECE7DD | |
--c-primitive-hplx-edgePrimitives | #7E786E | |
--c-primitive-hplx-edge-lightPrimitives | #7A7266 | |
--c-primitive-hplx-glass-darkPrimitives | #0E0F1160 | |
--c-primitive-hplx-inkPrimitives | #0E0F11 | |
--c-primitive-hplx-panelPrimitives | #131518 | |
--c-primitive-hplx-parchmentPrimitives | #E7E0D2 | |
--c-primitive-hplx-parchment-pressedPrimitives | #DCD3C2 | |
--c-primitive-hplx-raisedPrimitives | #1E2226 | |
--c-primitive-hplx-raised-pressedPrimitives | #2A2F35 | |
--c-primitive-hplx-rulePrimitives | #2E3339 | |
--c-primitive-hplx-rule-lightPrimitives | #D6CFC1 | |
--c-primitive-hplx-sootPrimitives | #1A1714 | |
--c-primitive-hplx-tarPrimitives | #1A1408 | |
--c-primitive-hplx-umberPrimitives | #5C554B | |
--c-primitive-hplx-vellumPrimitives | #F3EFE6 | |
--c-primitive-light-softPrimitives | #E8E7E3 | |
--c-primitive-media-darkPrimitives | #111111 | |
--c-primitive-muted-darkPrimitives | #A3A3A3 | |
--c-primitive-muted-glass-darkPrimitives | #C8C8C8 | |
--c-primitive-muted-glass-lightPrimitives | #454545 | |
--c-primitive-muted-lightPrimitives | #666666 | |
--c-primitive-ornament-darkPrimitives | #252525 | |
--c-primitive-ornament-dark-faintPrimitives | #181818 | |
--c-primitive-paperPrimitives | #F6F5F0 | |
--c-primitive-paper-shadePrimitives | #EFEEE9 | |
--c-primitive-pressed-darkPrimitives | #2C2C2C | |
--c-primitive-pressed-lightPrimitives | #D6D5D0 | |
--c-primitive-raised-darkPrimitives | #1F1F1F | |
--c-primitive-red-200Primitives | #F2B8B5 | |
--c-primitive-red-400Primitives | #D0605A | |
--c-primitive-red-50Primitives | #FAEDEB | |
--c-primitive-red-600Primitives | #B3362F | |
--c-primitive-red-800Primitives | #8A1F1A | |
--c-primitive-red-950Primitives | #2B1615 | |
--c-primitive-rule-lightPrimitives | #C6C5C0 | |
--c-primitive-scrim-darkPrimitives | #000000B8 | |
--c-primitive-scrim-lightPrimitives | #0000007A | |
--c-primitive-shadow-darkPrimitives | #00000099 | |
--c-primitive-shadow-lightPrimitives | #00000029 | |
--c-primitive-sheen-shadePrimitives | #00000040 | |
--c-primitive-sheen-whitePrimitives | #FFFFFFA6 | |
--c-primitive-sheen-white-faintPrimitives | #FFFFFF33 | |
--c-primitive-sheen-white-strongPrimitives | #FFFFFFF2 | |
--c-primitive-surface-darkPrimitives | #121212 | |
--c-primitive-tint-dark-activePrimitives | #0000001F | |
--c-primitive-tint-dark-hoverPrimitives | #0000000F | |
--c-primitive-tint-light-activePrimitives | #FFFFFF29 | |
--c-primitive-tint-light-hoverPrimitives | #FFFFFF14 | |
--c-primitive-whitePrimitives | #FFFFFF | |
--c-radius-fullRadius | 9999px | |
--c-radius-mdRadius | 0.25rem | |
--c-radius-smRadius | 0.125rem | |
--c-space-12Space | 3rem | |
--c-space-16Space | 4rem | |
--c-space-2Space | 0.5rem | |
--c-space-24Space | 6rem | |
--c-space-4Space | 1rem | |
--c-space-6Space | 1.5rem | |
--c-space-8Space | 2rem | |
--c-space-baseSpace | 0.25rem | |
--c-type-body-font-familyTypography | "Inter" | |
--c-type-body-font-sizeTypography | 1.0625rem | |
--c-type-body-font-weightTypography | 400 | |
--c-type-body-letter-spacingTypography | 0 | |
--c-type-body-line-heightTypography | 1.55 | |
--c-type-card-font-familyTypography | "Spectral" | |
--c-type-card-font-sizeTypography | 1.375rem | |
--c-type-card-font-weightTypography | 600 | |
--c-type-card-letter-spacingTypography | 0 | |
--c-type-card-line-heightTypography | 1.3 | |
--c-type-control-font-familyTypography | "Inter" | |
--c-type-control-font-sizeTypography | 0.9375rem | |
--c-type-control-font-weightTypography | 500 | |
--c-type-control-letter-spacingTypography | 0 | |
--c-type-control-line-heightTypography | 1.4 | |
--c-type-display-font-familyTypography | "Spectral" | |
--c-type-display-font-sizeTypography | 3rem | |
--c-type-display-font-weightTypography | 600 | |
--c-type-display-letter-spacingTypography | 0 | |
--c-type-display-line-heightTypography | 1.1 | |
--c-type-display-small-font-familyTypography | "Spectral" | |
--c-type-display-small-font-sizeTypography | 2.125rem | |
--c-type-display-small-font-weightTypography | 600 | |
--c-type-display-small-letter-spacingTypography | 0 | |
--c-type-display-small-line-heightTypography | 1.15 | |
--c-type-identity-label-font-familyTypography | "Inter" | |
--c-type-identity-label-font-sizeTypography | 1.25rem | |
--c-type-identity-label-font-weightTypography | 500 | |
--c-type-identity-label-letter-spacingTypography | 0 | |
--c-type-identity-label-line-heightTypography | 1.3 | |
--c-type-label-font-familyTypography | "IBM Plex Mono" | |
--c-type-label-font-sizeTypography | 0.875rem | |
--c-type-label-font-weightTypography | 400 | |
--c-type-label-letter-spacingTypography | 0.06em | |
--c-type-label-line-heightTypography | 1.5 | |
--c-type-label-text-transformTypography | uppercase | |
--c-type-section-font-familyTypography | "Spectral" | |
--c-type-section-font-sizeTypography | 1.875rem | |
--c-type-section-font-weightTypography | 600 | |
--c-type-section-letter-spacingTypography | 0 | |
--c-type-section-line-heightTypography | 1.2 | |
--c-type-ui-font-familyTypography | "Inter" | |
--c-type-ui-font-sizeTypography | 0.875rem | |
--c-type-ui-font-weightTypography | 500 | |
--c-type-ui-letter-spacingTypography | 0 | |
--c-type-ui-line-heightTypography | 1.43 | |
--c-type-ui-small-font-familyTypography | "Inter" | |
--c-type-ui-small-font-sizeTypography | 0.75rem | |
--c-type-ui-small-font-weightTypography | 500 | |
--c-type-ui-small-letter-spacingTypography | 0 | |
--c-type-ui-small-line-heightTypography | 1.33 |
No tokens match. Clear the search or choose another group.