All Tokens
Every token in the system, in one searchable list. Filter by category, tier, or theme, and click any CSS variable to copy it.
Showing 299 of 299 tokens.
| Preview | Token | Value | CSS variable | Tier |
|---|---|---|---|---|
| color.black | #000000 | global | ||
| color.blue.50 | #EFF6FF | global | ||
| color.blue.100 | #DBEAFE | global | ||
| color.blue.200 | #BFDBFE | global | ||
| color.blue.300 | #93C5FD | global | ||
| color.blue.400 | #60A5FA | global | ||
| color.blue.500 | #3B82F6 | global | ||
| color.blue.600 | #2563EB | global | ||
| color.blue.700 | #1D4ED8 | global | ||
| color.blue.800 | #1E40AF | global | ||
| color.blue.900 | #1E3A5F | global | ||
| color.brand.green.50 | #E8F4EE | global | ||
| color.brand.green.500 | #6EC3A3 | global | ||
| color.brand.green.700 | #4A9A7C | global | ||
| color.brand.orange.50 | #FEF2EC | global | ||
| color.brand.orange.500 | #F15B29 | global | ||
| color.brand.orange.700 | #B8431F | global | ||
| color.brand.yellow.50 | #FEF6E5 | global | ||
| color.brand.yellow.500 | #FBB038 | global | ||
| color.brand.yellow.700 | #BF822A | global | ||
| color.gray.50 | #F9FAFB | global | ||
| color.gray.100 | #F3F4F6 | global | ||
| color.gray.200 | #E5E7EB | global | ||
| color.gray.300 | #D1D5DB | global | ||
| color.gray.400 | #9CA3AF | global | ||
| color.gray.500 | #6B7280 | global | ||
| color.gray.600 | #4B5563 | global | ||
| color.gray.700 | #374151 | global | ||
| color.gray.800 | #1F2937 | global | ||
| color.gray.900 | #121214 | global | ||
| color.green.50 | #F0FDF4 | global | ||
| color.green.100 | #DCFCE7 | global | ||
| color.green.200 | #BBF7D0 | global | ||
| color.green.500 | #22C55E | global | ||
| color.green.700 | #15803D | global | ||
| color.green.900 | #14532D | global | ||
| color.red.50 | #FEF2F2 | global | ||
| color.red.100 | #FEE2E2 | global | ||
| color.red.200 | #FECACA | global | ||
| color.red.500 | #EF4444 | global | ||
| color.red.700 | #B91C1C | global | ||
| color.red.900 | #7F1D1D | global | ||
| color.sky.50 | #F0F9FF | global | ||
| color.sky.100 | #E0F2FE | global | ||
| color.sky.200 | #BAE6FD | global | ||
| color.sky.500 | #0EA5E9 | global | ||
| color.sky.700 | #0369A1 | global | ||
| color.sky.900 | #0C4A6E | global | ||
| color.teal.50 | #E8F5F7 | global | ||
| color.teal.100 | #C3E2E5 | global | ||
| color.teal.200 | #96CDD3 | global | ||
| color.teal.300 | #5FB3BC | global | ||
| color.teal.400 | #2C9DA8 | global | ||
| color.teal.500 | #008996 | global | ||
| color.teal.600 | #00838F | global | ||
| color.teal.700 | #0A6B76 | global | ||
| color.teal.800 | #115662 | global | ||
| color.teal.900 | #0C3D45 | global | ||
| color.white | #FFFFFF | global | ||
| color.yellow.50 | #FEFCE8 | global | ||
| color.yellow.100 | #FEF9C3 | global | ||
| color.yellow.200 | #FEF08A | global | ||
| color.yellow.500 | #EAB308 | global | ||
| color.yellow.700 | #A16207 | global | ||
| color.yellow.900 | #713F12 | global | ||
| border.radius.badgeBadges, pills, tags. 9999px. | 9999px | semantic | ||
| border.radius.componentDefault component radius (buttons, inputs, cards). 8px. | 8px | semantic | ||
| border.radius.containerContainer radius (modals, panels). 12px. | 12px | semantic | ||
| border.radius.full | 9999px | global | ||
| border.radius.lg | 12px | global | ||
| border.radius.md | 8px | global | ||
| border.radius.none | 0px | global | ||
| border.radius.sm | 4px | global | ||
| border.radius.xl | 16px | global | ||
| border.width.defaultStandard borders. 1px. | 1px | semantic | ||
| border.width.focusFocus ring width. 2px. | 2px | semantic | ||
| border.width.medium | 2px | global | ||
| border.width.thick | 4px | global | ||
| border.width.thin | 1px | global | ||
1024px | breakpoint.lg | 1024px | global | |
768px | breakpoint.md | 768px | global | |
480px | breakpoint.sm | 480px | global | |
1440px | breakpoint.xl | 1440px | global | |
| color.accent.green.bgBrand sage green accent background. Use for Resources section accents and softer success-adjacent surfaces (distinct from --color-feedback-success-bg). | #E8F4EE | semanticlight | ||
| color.accent.green.fgBrand sage green foreground. Use for icons, badges, and accents on the bg tint. | #6EC3A3 | semanticlight | ||
| color.accent.green.textDarker brand sage. Use for text on the bg tint with sufficient contrast. | #4A9A7C | semanticlight | ||
| color.accent.orange.bgOrange accent background tint. Use for Content section accents and other warm-call-out surfaces. | #FEF2EC | semanticlight | ||
| color.accent.orange.fgBrand orange foreground. Use for icons, badges, and accents on the bg tint. | #F15B29 | semanticlight | ||
| color.accent.orange.textDarker brand orange. Use for text on the bg tint with sufficient contrast. | #B8431F | semanticlight | ||
| color.accent.yellow.bgBrand yellow accent background. Use for AI Toolkit section accents. | #FEF6E5 | semanticlight | ||
| color.accent.yellow.fgBrand yellow foreground. Use for icons, badges, and accents on the bg tint. | #FBB038 | semanticlight | ||
| color.accent.yellow.textDarker brand yellow. Use for text on the bg tint with sufficient contrast. | #BF822A | semanticlight | ||
| color.action.danger.defaultDestructive action background. | #B91C1C | semanticlight | ||
| color.action.danger.hoverDestructive action hover. | #7F1D1D | semanticlight | ||
| color.action.danger.textText on destructive action. | #FFFFFF | semanticlight | ||
| color.action.primary.activePrimary action pressed/active. | #0C3D45 | semanticlight | ||
| color.action.primary.defaultPrimary button/action background. Modern Teal. | #00838F | semanticlight | ||
| color.action.primary.disabledDisabled action background. | #E5E7EB | semanticlight | ||
| color.action.primary.hoverPrimary action hover. Dark Teal. | #115662 | semanticlight | ||
| color.action.primary.textText on primary action. | #FFFFFF | semanticlight | ||
| color.action.secondary.activeSecondary button pressed. | #F3F4F6 | semanticlight | ||
| color.action.secondary.borderSecondary button border. | #D1D5DB | semanticlight | ||
| color.action.secondary.defaultSecondary button background. | #FFFFFF | semanticlight | ||
| color.action.secondary.hoverSecondary button hover. | #F9FAFB | semanticlight | ||
| color.action.secondary.textText on secondary action. | #374151 | semanticlight | ||
| color.action.tertiary.defaultTertiary/ghost button background. | transparent | semanticlight | ||
| color.action.tertiary.hoverTertiary button hover. | #F9FAFB | semanticlight | ||
| color.action.tertiary.textTertiary button text. Modern Teal. | #00838F | semanticlight | ||
| color.border.brandBrand accent border. Classic Teal. | #008996 | semanticlight | ||
| color.border.defaultStandard borders, dividers, separators. | #E5E7EB | semanticlight | ||
| color.border.errorError state border. | #EF4444 | semanticlight | ||
| color.border.focusFocus ring color. | #008996 | semanticlight | ||
| color.border.strongEmphasized borders, input borders. | #9CA3AF | semanticlight | ||
| color.border.successSuccess state border. | #22C55E | semanticlight | ||
| color.feedback.error.bgError alert/toast background. | #FEF2F2 | semanticlight | ||
| color.feedback.error.iconError alert icon. | #EF4444 | semanticlight | ||
| color.feedback.info.bgInfo alert/toast background. | #F0F9FF | semanticlight | ||
| color.feedback.info.iconInfo alert icon. | #0EA5E9 | semanticlight | ||
| color.feedback.success.bgSuccess alert/toast background. | #F0FDF4 | semanticlight | ||
| color.feedback.success.iconSuccess alert icon. | #22C55E | semanticlight | ||
| color.feedback.warning.bgWarning alert/toast background. | #FEFCE8 | semanticlight | ||
| color.feedback.warning.iconWarning alert icon. | #EAB308 | semanticlight | ||
| color.surface.brandBrand accent background. Light Teal tint. | #E8F5F7 | semanticlight | ||
| color.surface.defaultPage background. | #FFFFFF | semanticlight | ||
| color.surface.elevatedModals, dropdowns. Distinguished from default by elevation shadow. | #FFFFFF | semanticlight | ||
| color.surface.inverseDark surfaces, footer, inverted sections. | #121214 | semanticlight | ||
| color.surface.mutedCard backgrounds, code blocks, sidebar. | #F3F4F6 | semanticlight | ||
| color.surface.overlayScrim behind modals and dialogs. | rgba(17, 24, 39, 0.5) | semanticlight | ||
| color.surface.subtleAlternating rows, subtle section backgrounds. | #F9FAFB | semanticlight | ||
| color.text.brandBrand accent text. Modern Teal. | #00838F | semanticlight | ||
| color.text.disabledText on disabled elements. | #D1D5DB | semanticlight | ||
| color.text.errorError message text. | #B91C1C | semanticlight | ||
| color.text.infoInformational message text. | #0369A1 | semanticlight | ||
| color.text.inverseText on dark/inverted backgrounds. | #FFFFFF | semanticlight | ||
| color.text.link.defaultDefault link text. Modern Teal. | #00838F | semanticlight | ||
| color.text.link.hoverLink hover state. Dark Teal. | #115662 | semanticlight | ||
| color.text.link.visitedVisited link. | #0A6B76 | semanticlight | ||
| color.text.primaryPrimary body text, headings. Highest contrast. | #121214 | semanticlight | ||
| color.text.secondaryCaptions, helper text, metadata, timestamps. | #6B7280 | semanticlight | ||
| color.text.successSuccess message text. | #15803D | semanticlight | ||
| color.text.tertiaryPlaceholder text, least prominent text. | #9CA3AF | semanticlight | ||
| color.text.warningWarning message text. | #A16207 | semanticlight | ||
| elevation.2Subtle lift. Cards without a visible edge, pressed FABs, ribbons, hero buttons. | 0 0 2px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.14) | semanticlight | ||
| elevation.4Default low elevation. Cards, grid items, list items at rest. | 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14) | semanticlight | ||
| elevation.8Raised state. Floating action buttons, raised cards on hover, command bars, tooltips. | 0 0 2px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.14) | semanticlight | ||
| elevation.16Floating content. Callouts, hover cards, popovers. | 0 0 2px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.14) | semanticlight | ||
| elevation.28High elevation. Side navigation drawers, tab bars, bottom sheets. | 0 0 8px rgba(0, 0, 0, 0.12), 0 14px 28px rgba(0, 0, 0, 0.14) | semanticlight | ||
| elevation.64Highest elevation. Modal dialogs, panels, full-screen overlays. | 0 0 8px rgba(0, 0, 0, 0.12), 0 32px 64px rgba(0, 0, 0, 0.14) | semanticlight | ||
| elevation.none | none | global | ||
Aa | font.family.monoCode blocks and technical content. Open source. | 'JetBrains Mono', 'Fira Code', 'Consolas', monospace | global | |
Aa | font.family.sansPrimary font for all UI text, headings, and body. Replaces Proxima Nova, Avenir, Roboto. Self-hosted font. See ADR-006. | 'Inter', system-ui, -apple-system, sans-serif | global | |
Aa | font.family.serifLong-form editorial content (deferred to V2). Replaces Freight Text Pro. Open source via Adobe. See ADR-006. | 'Source Serif 4', Georgia, 'Times New Roman', serif | global | |
0em | font.letterSpacing.normal | 0em | global | |
0.04em | font.letterSpacing.subtleSubtle uppercase tracking. Dominant pattern across small labels, eyebrows, and chip-like elements that don't need the full type.overline treatment. | 0.04em | global | |
-0.025em | font.letterSpacing.tight | -0.025em | global | |
0.06em | font.letterSpacing.trackedVisibly tracked uppercase. Secondary to type.overline; used on shorter eyebrows and badge-like labels where 0.04em reads too tight. | 0.06em | global | |
0.025em | font.letterSpacing.wide | 0.025em | global | |
0.05em | font.letterSpacing.wider | 0.05em | global | |
0.1em | font.letterSpacing.widest | 0.1em | global | |
1.5 | font.lineHeight.normal | 1.5 | global | |
1.75 | font.lineHeight.relaxed | 1.75 | global | |
1.25 | font.lineHeight.tight | 1.25 | global | |
Aa | font.size.2xl | 24px | global | |
Aa | font.size.3xl | 30px | global | |
Aa | font.size.4xl | 36px | global | |
Aa | font.size.5xl | 48px | global | |
Aa | font.size.lg | 18px | global | |
Aa | font.size.md | 16px | global | |
Aa | font.size.sm | 14px | global | |
Aa | font.size.xl | 20px | global | |
Aa | font.size.xs | 12px | global | |
Aa | font.weight.bold | 700 | global | |
Aa | font.weight.medium | 500 | global | |
Aa | font.weight.regular | 400 | global | |
Aa | font.weight.semibold | 600 | global | |
720px | layout.container.proseReading-heavy pages. Max width tuned to ~75-character line length. | 720px | semantic | |
1024px | layout.container.widePages with tables, component demos, and token explorers. | 1024px | semantic | |
16px | layout.gutter.compactTight gutter for mobile and tablet grids. 16px. | 16px | semantic | |
24px | layout.gutter.defaultDefault gutter for desktop grids. 24px. | 24px | semantic | |
260px | layout.sidebar.widthApplication shell sidebar width on desktop (breakpoint.lg+). | 260px | semantic | |
100ms | motion.duration.fast | 100ms | global | |
0ms | motion.duration.instant | 0ms | global | |
200ms | motion.duration.normal | 200ms | global | |
300ms | motion.duration.slow | 300ms | global | |
500ms | motion.duration.slower | 500ms | global | |
⋯ | motion.easing.default | cubic-bezier(0.4, 0, 0.2, 1) | global | |
⋯ | motion.easing.enter | cubic-bezier(0, 0, 0.2, 1) | global | |
⋯ | motion.easing.exit | cubic-bezier(0.4, 0, 1, 1) | global | |
⋯ | motion.easing.spring | cubic-bezier(0.34, 1.56, 0.64, 1) | global | |
0 | spacing.0 | 0px | global | |
| spacing.1 | 4px | global | ||
| spacing.2 | 8px | global | ||
| spacing.3 | 12px | global | ||
| spacing.4 | 16px | global | ||
| spacing.6 | 24px | global | ||
| spacing.8 | 32px | global | ||
| spacing.12 | 48px | global | ||
| spacing.16 | 64px | global | ||
| spacing.24 | 96px | global | ||
| spacing.32 | 128px | global | ||
| spacing.content.gapDefault gap between content blocks. 16px. | 16px | semantic | ||
| spacing.inline.mdDefault inline spacing. 16px. | 16px | semantic | ||
| spacing.inline.smButton icon-to-label, badge gaps. 8px. | 8px | semantic | ||
| spacing.inline.xsIcon-to-text, tight inline. 4px. | 4px | semantic | ||
| spacing.inset.lgLarge component padding (modal, panel). 24px. | 24px | semantic | ||
| spacing.inset.mdDefault component padding (card, input). 16px. | 16px | semantic | ||
| spacing.inset.smSmall component padding (tag, chip). 12px. | 12px | semantic | ||
| spacing.inset.xsCompact component padding (badge). 8px. | 8px | semantic | ||
| spacing.section.gapGap between major page sections. 48px. | 48px | semantic | ||
| spacing.stack.lgSection content stacking. 24px. | 24px | semantic | ||
| spacing.stack.mdDefault vertical stacking. 16px. | 16px | semantic | ||
| spacing.stack.smForm field vertical spacing. 8px. | 8px | semantic | ||
| spacing.stack.xsTight vertical stacking. 4px. | 4px | semantic | ||
Aa | type.body.lgLarge body text. Inter Regular 18px. Intro paragraphs, lead text. | fontFamily: 'Inter', system-ui, -apple-system, sans-seriffontSize: 18pxfontWeight: 400lineHeight: 1.75letterSpacing: 0em | semantic | |
Aa | type.body.mdDefault body text. Inter Regular 16px. Primary reading size. | fontFamily: 'Inter', system-ui, -apple-system, sans-seriffontSize: 16pxfontWeight: 400lineHeight: 1.5letterSpacing: 0em | semantic | |
Aa | type.body.smSmall body text. Inter Regular 14px. Dense content, secondary info. | fontFamily: 'Inter', system-ui, -apple-system, sans-seriffontSize: 14pxfontWeight: 400lineHeight: 1.5letterSpacing: 0em | semantic | |
Aa | type.captionCaption text. Inter Regular 12px. Image captions, footnotes, timestamps. | fontFamily: 'Inter', system-ui, -apple-system, sans-seriffontSize: 12pxfontWeight: 400lineHeight: 1.5letterSpacing: 0.025em | semantic | |
Aa | type.codeCode blocks and inline code. JetBrains Mono Regular 14px. | fontFamily: 'JetBrains Mono', 'Fira Code', 'Consolas', monospacefontSize: 14pxfontWeight: 400lineHeight: 1.75letterSpacing: 0em | semantic | |
Aa | type.displayHero/display text. Inter Bold 48px. Use sparingly, one per page max. | fontFamily: 'Inter', system-ui, -apple-system, sans-seriffontSize: 48pxfontWeight: 700lineHeight: 1.25letterSpacing: -0.025em | semantic | |
Aa | type.h1Page title. Inter Bold 36px. | fontFamily: 'Inter', system-ui, -apple-system, sans-seriffontSize: 36pxfontWeight: 700lineHeight: 1.25letterSpacing: -0.025em | semantic | |
Aa | type.h2Section heading. Inter Semibold 30px. | fontFamily: 'Inter', system-ui, -apple-system, sans-seriffontSize: 30pxfontWeight: 600lineHeight: 1.25letterSpacing: -0.025em | semantic | |
Aa | type.h3Subsection heading. Inter Semibold 24px. | fontFamily: 'Inter', system-ui, -apple-system, sans-seriffontSize: 24pxfontWeight: 600lineHeight: 1.25letterSpacing: 0em | semantic | |
Aa | type.h4Minor heading. Inter Semibold 20px. | fontFamily: 'Inter', system-ui, -apple-system, sans-seriffontSize: 20pxfontWeight: 600lineHeight: 1.5letterSpacing: 0em | semantic | |
Aa | type.h5Smallest heading. Inter Semibold 18px. | fontFamily: 'Inter', system-ui, -apple-system, sans-seriffontSize: 18pxfontWeight: 600lineHeight: 1.5letterSpacing: 0em | semantic | |
Aa | type.labelForm labels, button text. Inter Medium 14px. | fontFamily: 'Inter', system-ui, -apple-system, sans-seriffontSize: 14pxfontWeight: 500lineHeight: 1.5letterSpacing: 0em | semantic | |
Aa | type.overlineOverline text. Inter Semibold 12px uppercase. Category labels, eyebrow text. | fontFamily: 'Inter', system-ui, -apple-system, sans-seriffontSize: 12pxfontWeight: 600lineHeight: 1.5letterSpacing: 0.1emtextTransform: uppercase | semantic | |
0 | z.base | 0 | global | |
1000 | z.dropdown | 1000 | global | |
1300 | z.modal | 1300 | global | |
1200 | z.overlay | 1200 | global | |
1 | z.raised | 1 | global | |
1100 | z.sticky | 1100 | global | |
1400 | z.toast | 1400 | global | |
1500 | z.tooltip | 1500 | global | |
| color.accent.green.bgBrand sage background on dark theme. | #4A9A7C | semanticdark | ||
| color.accent.green.fgBrand sage foreground. | #6EC3A3 | semanticdark | ||
| color.accent.green.textBrand sage text on dark. | #6EC3A3 | semanticdark | ||
| color.accent.orange.bgOrange accent background on dark theme. Deeper tone. | #B8431F | semanticdark | ||
| color.accent.orange.fgBrand orange foreground. Same hue across themes. | #F15B29 | semanticdark | ||
| color.accent.orange.textBrand orange text. The 500 shade reads cleanly on dark surfaces. | #F15B29 | semanticdark | ||
| color.accent.yellow.bgBrand yellow background on dark theme. | #BF822A | semanticdark | ||
| color.accent.yellow.fgBrand yellow foreground. | #FBB038 | semanticdark | ||
| color.accent.yellow.textBrand yellow text on dark. | #FBB038 | semanticdark | ||
| color.action.danger.defaultDestructive action. | #B91C1C | semanticdark | ||
| color.action.danger.hoverDestructive hover. | #7F1D1D | semanticdark | ||
| color.action.danger.textText on destructive action. | #FFFFFF | semanticdark | ||
| color.action.primary.activePrimary action pressed. | #96CDD3 | semanticdark | ||
| color.action.primary.defaultPrimary action on dark theme. | #2C9DA8 | semanticdark | ||
| color.action.primary.disabledDisabled action. | #374151 | semanticdark | ||
| color.action.primary.hoverPrimary action hover. | #5FB3BC | semanticdark | ||
| color.action.primary.textText on primary action. | #121214 | semanticdark | ||
| color.action.secondary.activeSecondary pressed. | #374151 | semanticdark | ||
| color.action.secondary.borderSecondary border. | #4B5563 | semanticdark | ||
| color.action.secondary.defaultSecondary button. | transparent | semanticdark | ||
| color.action.secondary.hoverSecondary hover. | #1F2937 | semanticdark | ||
| color.action.secondary.textSecondary button text. | #E5E7EB | semanticdark | ||
| color.action.tertiary.defaultTertiary button. | transparent | semanticdark | ||
| color.action.tertiary.hoverTertiary hover. | #1F2937 | semanticdark | ||
| color.action.tertiary.textTertiary button text. | #2C9DA8 | semanticdark | ||
| color.border.brandBrand accent border on dark theme. | #2C9DA8 | semanticdark | ||
| color.border.defaultStandard borders on dark theme. | #374151 | semanticdark | ||
| color.border.errorError border. | #EF4444 | semanticdark | ||
| color.border.focusFocus ring. | #2C9DA8 | semanticdark | ||
| color.border.strongEmphasized borders. | #6B7280 | semanticdark | ||
| color.border.successSuccess border. | #22C55E | semanticdark | ||
| color.feedback.error.bgError background. | #7F1D1D | semanticdark | ||
| color.feedback.error.iconError icon. | #EF4444 | semanticdark | ||
| color.feedback.info.bgInfo background. | #0C4A6E | semanticdark | ||
| color.feedback.info.iconInfo icon. | #0EA5E9 | semanticdark | ||
| color.feedback.success.bgSuccess background. | #14532D | semanticdark | ||
| color.feedback.success.iconSuccess icon. | #22C55E | semanticdark | ||
| color.feedback.warning.bgWarning background. | #713F12 | semanticdark | ||
| color.feedback.warning.iconWarning icon. | #EAB308 | semanticdark | ||
| color.surface.brandBrand accent background on dark theme. | #0C3D45 | semanticdark | ||
| color.surface.defaultDark theme page background. | #121214 | semanticdark | ||
| color.surface.elevatedModals, dropdowns on dark theme. | #1F2937 | semanticdark | ||
| color.surface.inverseLight surface within dark theme. | #F3F4F6 | semanticdark | ||
| color.surface.mutedCard backgrounds, sidebar. | #1F2937 | semanticdark | ||
| color.surface.overlayDark scrim behind modals. | rgba(0, 0, 0, 0.6) | semanticdark | ||
| color.surface.subtleSubtle section backgrounds. | #1F2937 | semanticdark | ||
| color.text.brandBrand accent text on dark backgrounds. | #5FB3BC | semanticdark | ||
| color.text.disabledDisabled text on dark backgrounds. | #4B5563 | semanticdark | ||
| color.text.errorError text on dark backgrounds. | #FECACA | semanticdark | ||
| color.text.infoInfo text on dark backgrounds. | #BAE6FD | semanticdark | ||
| color.text.inverseText on light surfaces within dark theme. | #121214 | semanticdark | ||
| color.text.link.defaultLink text on dark backgrounds. | #2C9DA8 | semanticdark | ||
| color.text.link.hoverLink hover on dark backgrounds. | #5FB3BC | semanticdark | ||
| color.text.link.visitedVisited link on dark backgrounds. | #96CDD3 | semanticdark | ||
| color.text.primaryPrimary body text on dark backgrounds. | #F3F4F6 | semanticdark | ||
| color.text.secondarySecondary text on dark backgrounds. | #9CA3AF | semanticdark | ||
| color.text.successSuccess text on dark backgrounds. | #BBF7D0 | semanticdark | ||
| color.text.tertiaryPlaceholder text on dark backgrounds. | #6B7280 | semanticdark | ||
| color.text.warningWarning text on dark backgrounds. | #FEF08A | semanticdark | ||
| elevation.2Subtle lift. Cards without a visible edge, pressed FABs, ribbons, hero buttons. | 0 0 2px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.28) | semanticdark | ||
| elevation.4Default low elevation. Cards, grid items, list items at rest. | 0 0 2px rgba(0, 0, 0, 0.24), 0 2px 4px rgba(0, 0, 0, 0.28) | semanticdark | ||
| elevation.8Raised state. Floating action buttons, raised cards on hover, command bars, tooltips. | 0 0 2px rgba(0, 0, 0, 0.24), 0 4px 8px rgba(0, 0, 0, 0.28) | semanticdark | ||
| elevation.16Floating content. Callouts, hover cards, popovers. | 0 0 2px rgba(0, 0, 0, 0.24), 0 8px 16px rgba(0, 0, 0, 0.28) | semanticdark | ||
| elevation.28High elevation. Side navigation drawers, tab bars, bottom sheets. | 0 0 8px rgba(0, 0, 0, 0.24), 0 14px 28px rgba(0, 0, 0, 0.28) | semanticdark | ||
| elevation.64Highest elevation. Modal dialogs, panels, full-screen overlays. | 0 0 8px rgba(0, 0, 0, 0.24), 0 32px 64px rgba(0, 0, 0, 0.28) | semanticdark |