Source-backed reference
Design tokens.
The resolved Tectra family, with the actual exported CSS names and both color modes.
Family 0.6.1 · pinned Cosmik v0.16.1 · baseline token schema Cosmik baseline 0.11.0
220 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-accentColor | #71D6C3 | #126B5E |
--c-glass-activeColor | #FFFFFF29 | #0000001F |
--c-glass-hoverColor | #FFFFFF14 | #0000000F |
--c-glass-sheen-lowColor | #EDF4F333 | #0F171940 |
--c-glass-sheenColor | #EDF4F3A6 | #FFFFFFF2 |
--c-glass-mutedColor | #C9D7D3 | #2E423E |
--c-glass-borderColor | #344744 | #C2D1CC |
--c-glassColor | #17212560 | #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 | #849B98 | #657F78 |
--c-status-bgColor | #233034 | #E0EAE7 |
--c-status-fgColor | #EDF4F3 | #142925 |
--c-disabled-borderColor | #849B98 | #657F78 |
--c-disabled-fgColor | #ADC1BE | #4D6761 |
--c-disabled-bgColor | #233034 | #E0EAE7 |
--c-input-placeholderColor | #ADC1BE | #4D6761 |
--c-input-fgColor | #EDF4F3 | #142925 |
--c-input-bgColor | #172125 | #FFFFFF |
--c-action-secondary-fgColor | #EDF4F3 | #142925 |
--c-action-secondary-activeColor | #2F3E42 | #CCDAD5 |
--c-action-secondary-hoverColor | #233034 | #E0EAE7 |
--c-action-secondaryColor | #172125 | #FFFFFF |
--c-action-primary-fgColor | #0F1719 | #FFFFFF |
--c-action-primary-activeColor | #B3EFE3 | #084B41 |
--c-action-primary-hoverColor | #92E5D4 | #0D5B50 |
--c-action-primaryColor | #71D6C3 | #126B5E |
--c-selectedColor | #71D6C3 | #126B5E |
--c-on-selectedColor | #0F1719 | #F2F6F5 |
--c-link-activeColor | #EDF4F3 | #142925 |
--c-link-hoverColor | #71D6C3 | #126B5E |
--c-linkColor | #EDF4F3 | #142925 |
--c-focusColor | #71D6C3 | #126B5E |
--c-dividerColor | #344744 | #C2D1CC |
--c-borderColor | #849B98 | #657F78 |
--c-mutedColor | #ADC1BE | #4D6761 |
--c-textColor | #EDF4F3 | #142925 |
--c-raisedColor | #233034 | #E0EAE7 |
--c-surfaceColor | #172125 | #FFFFFF |
--c-bgColor | #0F1719 | #F2F6F5 |
--c-breakpoint-compactBreakpoint | 720px | |
--c-breakpoint-narrowBreakpoint | 380px | |
--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-blackPrimitives | #000000 | |
--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-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-rule-lightPrimitives | #C6C5C0 | |
--c-primitive-scrim-darkPrimitives | #000000B8 | |
--c-primitive-scrim-lightPrimitives | #0000007A | |
--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-tectra-dark-accentPrimitives | #71D6C3 | |
--c-primitive-tectra-dark-action-primaryPrimitives | #71D6C3 | |
--c-primitive-tectra-dark-action-primary-activePrimitives | #B3EFE3 | |
--c-primitive-tectra-dark-action-primary-fgPrimitives | #0F1719 | |
--c-primitive-tectra-dark-action-primary-hoverPrimitives | #92E5D4 | |
--c-primitive-tectra-dark-action-secondaryPrimitives | #172125 | |
--c-primitive-tectra-dark-action-secondary-activePrimitives | #2F3E42 | |
--c-primitive-tectra-dark-action-secondary-fgPrimitives | #EDF4F3 | |
--c-primitive-tectra-dark-action-secondary-hoverPrimitives | #233034 | |
--c-primitive-tectra-dark-bgPrimitives | #0F1719 | |
--c-primitive-tectra-dark-borderPrimitives | #849B98 | |
--c-primitive-tectra-dark-disabled-bgPrimitives | #233034 | |
--c-primitive-tectra-dark-disabled-borderPrimitives | #849B98 | |
--c-primitive-tectra-dark-disabled-fgPrimitives | #ADC1BE | |
--c-primitive-tectra-dark-dividerPrimitives | #344744 | |
--c-primitive-tectra-dark-focusPrimitives | #71D6C3 | |
--c-primitive-tectra-dark-glassPrimitives | #17212560 | |
--c-primitive-tectra-dark-glass-mutedPrimitives | #C9D7D3 | |
--c-primitive-tectra-dark-glass-sheenPrimitives | #EDF4F3A6 | |
--c-primitive-tectra-dark-glass-sheen-lowPrimitives | #EDF4F333 | |
--c-primitive-tectra-dark-input-bgPrimitives | #172125 | |
--c-primitive-tectra-dark-input-fgPrimitives | #EDF4F3 | |
--c-primitive-tectra-dark-input-placeholderPrimitives | #ADC1BE | |
--c-primitive-tectra-dark-linkPrimitives | #EDF4F3 | |
--c-primitive-tectra-dark-link-activePrimitives | #EDF4F3 | |
--c-primitive-tectra-dark-link-hoverPrimitives | #71D6C3 | |
--c-primitive-tectra-dark-mutedPrimitives | #ADC1BE | |
--c-primitive-tectra-dark-on-selectedPrimitives | #0F1719 | |
--c-primitive-tectra-dark-raisedPrimitives | #233034 | |
--c-primitive-tectra-dark-status-bgPrimitives | #233034 | |
--c-primitive-tectra-dark-status-borderPrimitives | #849B98 | |
--c-primitive-tectra-dark-status-fgPrimitives | #EDF4F3 | |
--c-primitive-tectra-dark-surfacePrimitives | #172125 | |
--c-primitive-tectra-dark-textPrimitives | #EDF4F3 | |
--c-primitive-tectra-light-accentPrimitives | #126B5E | |
--c-primitive-tectra-light-action-primaryPrimitives | #126B5E | |
--c-primitive-tectra-light-action-primary-activePrimitives | #084B41 | |
--c-primitive-tectra-light-action-primary-hoverPrimitives | #0D5B50 | |
--c-primitive-tectra-light-action-secondary-activePrimitives | #CCDAD5 | |
--c-primitive-tectra-light-action-secondary-fgPrimitives | #142925 | |
--c-primitive-tectra-light-action-secondary-hoverPrimitives | #E0EAE7 | |
--c-primitive-tectra-light-bgPrimitives | #F2F6F5 | |
--c-primitive-tectra-light-borderPrimitives | #657F78 | |
--c-primitive-tectra-light-disabled-bgPrimitives | #E0EAE7 | |
--c-primitive-tectra-light-disabled-borderPrimitives | #657F78 | |
--c-primitive-tectra-light-disabled-fgPrimitives | #4D6761 | |
--c-primitive-tectra-light-dividerPrimitives | #C2D1CC | |
--c-primitive-tectra-light-focusPrimitives | #126B5E | |
--c-primitive-tectra-light-glass-mutedPrimitives | #2E423E | |
--c-primitive-tectra-light-glass-sheen-lowPrimitives | #0F171940 | |
--c-primitive-tectra-light-input-fgPrimitives | #142925 | |
--c-primitive-tectra-light-input-placeholderPrimitives | #4D6761 | |
--c-primitive-tectra-light-linkPrimitives | #142925 | |
--c-primitive-tectra-light-link-activePrimitives | #142925 | |
--c-primitive-tectra-light-link-hoverPrimitives | #126B5E | |
--c-primitive-tectra-light-mutedPrimitives | #4D6761 | |
--c-primitive-tectra-light-on-selectedPrimitives | #F2F6F5 | |
--c-primitive-tectra-light-raisedPrimitives | #E0EAE7 | |
--c-primitive-tectra-light-status-bgPrimitives | #E0EAE7 | |
--c-primitive-tectra-light-status-borderPrimitives | #657F78 | |
--c-primitive-tectra-light-status-fgPrimitives | #142925 | |
--c-primitive-tectra-light-textPrimitives | #142925 | |
--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 | "Inter" | |
--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 | "Inter" | |
--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 | "Inter" | |
--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 | "Inter" | |
--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.