Brand & tokens

Token reference

Generated facts define the semantic vocabulary; project builds resolve component tokens against a selected brand.

Semantic role tokens

Components bind to stable semantic roles while brands supply theme-specific values. The rendered token table is generated from design-system facts.

Resolved values

Fixture brand fixture — resolved token output from the design-system pipeline (generated/tokens/resolved-swatches.json). Pick a theme to inspect every published role with type-appropriate previews.

blur

Token Type Value Preview WCAG AA contrast
blur.lg --blur-lg dimension 16px Not applicable
blur.md --blur-md dimension 8px Not applicable
blur.sm --blur-sm dimension 4px Not applicable

breakpoint

Token Type Value Preview WCAG AA contrast
breakpoint.lg --breakpoint-lg dimension 905px Not applicable
breakpoint.md --breakpoint-md dimension 600px Not applicable
breakpoint.sm --breakpoint-sm dimension 360px Not applicable
breakpoint.xl --breakpoint-xl dimension 1240px Not applicable

color

Token Type Value Preview WCAG AA contrast
color.accent --color-accent color #9c7c14 Not applicable
color.accent-strong --color-accent-strong color #7a6114 Not applicable
color.background --color-background color #fbfafd Not applicable
color.disabled --color-disabled color #e5e3ec Not applicable
color.error --color-error color #ba1a1a Not applicable
color.error-container --color-error-container color #ffdad6 Not applicable
color.identity --color-identity color #c9a227 Not applicable
color.on-accent --color-on-accent color #1c1b22

4.32:1 vs color.accent

  • Non-text/UI (3:1): pass
  • Text (4.5:1): fail
color.on-background --color-on-background color #1c1b22

16.43:1 vs color.background

  • Non-text/UI (3:1): pass
  • Text (4.5:1): pass
color.on-disabled --color-on-disabled color #a6a3b5

1.94:1 vs color.disabled

  • Non-text/UI (3:1): fail
  • Text (4.5:1): fail
color.on-error --color-on-error color #ffffff

6.46:1 vs color.error

  • Non-text/UI (3:1): pass
  • Text (4.5:1): pass
color.on-error-container --color-on-error-container color #410002

13.26:1 vs color.error-container

  • Non-text/UI (3:1): pass
  • Text (4.5:1): pass
color.on-identity --color-on-identity color #1c1b22

7.06:1 vs color.identity

  • Non-text/UI (3:1): pass
  • Text (4.5:1): pass
color.on-primary --color-on-primary color #ffffff

5.15:1 vs color.primary

  • Non-text/UI (3:1): pass
  • Text (4.5:1): pass
color.on-secondary --color-on-secondary color #2a2440

11.98:1 vs color.secondary

  • Non-text/UI (3:1): pass
  • Text (4.5:1): pass
color.on-success --color-on-success color #ffffff

6.55:1 vs color.success

  • Non-text/UI (3:1): pass
  • Text (4.5:1): pass
color.on-success-container --color-on-success-container color #0a3d1f

10.6:1 vs color.success-container

  • Non-text/UI (3:1): pass
  • Text (4.5:1): pass
color.on-surface --color-on-surface color #1c1b22

17.08:1 vs color.surface

  • Non-text/UI (3:1): pass
  • Text (4.5:1): pass
color.on-surface-fixed --color-on-surface-fixed color #eae4d4

14.38:1 vs color.surface-fixed

  • Non-text/UI (3:1): pass
  • Text (4.5:1): pass
color.on-surface-variant --color-on-surface-variant color #5a5766 Not applicable
color.on-warning --color-on-warning color #ffffff

7.13:1 vs color.warning

  • Non-text/UI (3:1): pass
  • Text (4.5:1): pass
color.on-warning-container --color-on-warning-container color #3d2600

12.23:1 vs color.warning-container

  • Non-text/UI (3:1): pass
  • Text (4.5:1): pass
color.outline --color-outline color #c9c6d6 Not applicable
color.primary --color-primary color #6d4aff Not applicable
color.primary-hover --color-primary-hover color #5b3ae0 Not applicable
color.primary-pressed --color-primary-pressed color #4a2ec0 Not applicable
color.secondary --color-secondary color #e8e6f5 Not applicable
color.success --color-success color #1a6b3a Not applicable
color.success-container --color-success-container color #d6f5e3 Not applicable
color.surface --color-surface color #ffffff Not applicable
color.surface-container --color-surface-container color #f4f3f8 Not applicable
color.surface-container-high --color-surface-container-high color #eceaf2 Not applicable
color.surface-container-highest --color-surface-container-highest color #e5e3ec Not applicable
color.surface-container-low --color-surface-container-low color #fbfafd Not applicable
color.surface-container-lowest --color-surface-container-lowest color #ffffff Not applicable
color.surface-fixed --color-surface-fixed color #17150f Not applicable
color.warning --color-warning color #7a4f00 Not applicable
color.warning-container --color-warning-container color #ffecc4 Not applicable

density

Token Type Value Preview WCAG AA contrast
density.comfortable --density-comfortable number 1 Not applicable
density.compact --density-compact number 0.9 Not applicable

elevation

Token Type Value Preview WCAG AA contrast
elevation.level0 --elevation-level0 dimension 0px Not applicable
elevation.level1 --elevation-level1 dimension 1px Not applicable
elevation.level2 --elevation-level2 dimension 3px Not applicable
elevation.level3 --elevation-level3 dimension 6px Not applicable
elevation.level4 --elevation-level4 dimension 8px Not applicable
elevation.level5 --elevation-level5 dimension 12px Not applicable

focusRing

Token Type Value Preview WCAG AA contrast
focusRing.color --focusRing-color color #6d4aff Not applicable
focusRing.offset --focusRing-offset dimension 2px Not applicable
focusRing.width --focusRing-width dimension 2px Not applicable

layer

Token Type Value Preview WCAG AA contrast
layer.dropdown --layer-dropdown number 1000 Not applicable
layer.modal --layer-modal number 1300 Not applicable
layer.overlay --layer-overlay number 1200 Not applicable
layer.sticky --layer-sticky number 1100 Not applicable
layer.toast --layer-toast number 1400 Not applicable

motion

Token Type Value Preview WCAG AA contrast
motion.duration-base --motion-duration-base duration 200ms Not applicable
motion.duration-fast --motion-duration-fast duration 120ms Not applicable
motion.duration-slow --motion-duration-slow duration 320ms Not applicable
motion.easing-emphasized --motion-easing-emphasized cubicBezier cubic-bezier(0.2, 0, 0, 1.2) Not applicable
motion.easing-standard --motion-easing-standard cubicBezier cubic-bezier(0.2, 0, 0, 1) Not applicable

opacity

Token Type Value Preview WCAG AA contrast
opacity.disabled --opacity-disabled number 0.38 Not applicable
opacity.dragged --opacity-dragged number 0.16 Not applicable
opacity.focus --opacity-focus number 0.1 Not applicable
opacity.hover --opacity-hover number 0.08 Not applicable
opacity.muted --opacity-muted number 0.6 Not applicable
opacity.pressed --opacity-pressed number 0.1 Not applicable
opacity.subtle --opacity-subtle number 0.8 Not applicable

responsive

Token Type Value Preview WCAG AA contrast
responsive.content-max --responsive-content-max responsiveDimension fallback: 1152px · max: 1248px · min: 1088px · preferred: 72vw Not applicable
responsive.display-lg --responsive-display-lg responsiveDimension fallback: 48px · max: 64px · min: 40px · preferred: 5vw Not applicable
responsive.display-xl --responsive-display-xl responsiveDimension fallback: 64px · max: 80px · min: 48px · preferred: 6vw Not applicable
responsive.hero-gutter --responsive-hero-gutter responsiveDimension fallback: 40px · max: 64px · min: 24px · preferred: 5vw Not applicable
responsive.section-gap --responsive-section-gap responsiveDimension fallback: 64px · max: 72px · min: 40px · preferred: 6vw Not applicable

rounded

Token Type Value Preview WCAG AA contrast
rounded.full --rounded-full dimension 9999px Not applicable
rounded.lg --rounded-lg dimension 16px Not applicable
rounded.md --rounded-md dimension 8px Not applicable
rounded.none --rounded-none dimension 0px Not applicable
rounded.sm --rounded-sm dimension 4px Not applicable
rounded.xl --rounded-xl dimension 24px Not applicable
rounded.xs --rounded-xs dimension 2px Not applicable

scale

Token Type Value Preview WCAG AA contrast
scale.ratio --scale-ratio number 1.25 Not applicable

shadow

Token Type Value Preview WCAG AA contrast
shadow.lg --shadow-lg shadow 0 8px 24px rgba(28, 27, 34, 0.20) Not applicable
shadow.md --shadow-md shadow 0 2px 6px rgba(28, 27, 34, 0.16) Not applicable
shadow.sm --shadow-sm shadow 0 1px 2px rgba(28, 27, 34, 0.12) Not applicable

spacing

Token Type Value Preview WCAG AA contrast
spacing.2xl --spacing-2xl dimension 64px Not applicable
spacing.3xl --spacing-3xl dimension 96px Not applicable
spacing.lg --spacing-lg dimension 24px Not applicable
spacing.md --spacing-md dimension 16px Not applicable
spacing.sm --spacing-sm dimension 8px Not applicable
spacing.xl --spacing-xl dimension 40px Not applicable
spacing.xs --spacing-xs dimension 4px Not applicable

typography

Token Type Value Preview WCAG AA contrast
typography.body-lg --typography-body-lg typography fontFamily: Inter · fontSize: 18px · fontWeight: 400 · lineHeight: 28 Aa Not applicable
typography.body-md --typography-body-md typography fontFamily: Inter · fontSize: 16px · fontWeight: 400 · lineHeight: 24 Aa Not applicable
typography.body-sm --typography-body-sm typography fontFamily: Inter · fontSize: 14px · fontWeight: 400 · lineHeight: 20 Aa Not applicable
typography.code-md --typography-code-md typography fontFamily: monospace · fontSize: 14px · fontVariantNumeric: tabular-nums · fontWeight: 400 · lineHeight: 20 Aa Not applicable
typography.display-lg --typography-display-lg typography fontFamily: Inter · fontSize: 48px · fontWeight: 700 · lineHeight: 56 Aa Not applicable
typography.display-md --typography-display-md typography fontFamily: Inter · fontSize: 40px · fontWeight: 700 · lineHeight: 48 Aa Not applicable
typography.display-xl --typography-display-xl typography fontFamily: Inter · fontSize: 64px · fontWeight: 700 · lineHeight: 72 Aa Not applicable
typography.heading-lg --typography-heading-lg typography fontFamily: Inter · fontSize: 32px · fontWeight: 600 · lineHeight: 40 Aa Not applicable
typography.heading-md --typography-heading-md typography fontFamily: Inter · fontSize: 24px · fontWeight: 600 · lineHeight: 32 Aa Not applicable
typography.heading-sm --typography-heading-sm typography fontFamily: Inter · fontSize: 20px · fontWeight: 600 · lineHeight: 28 Aa Not applicable
typography.label-md --typography-label-md typography fontFamily: Inter · fontSize: 14px · fontWeight: 600 · letterSpacing: 1px · lineHeight: 20 · textTransform: uppercase Aa Not applicable
typography.label-sm --typography-label-sm typography fontFamily: Inter · fontSize: 12px · fontWeight: 600 · letterSpacing: 1px · lineHeight: 16 · textTransform: uppercase Aa Not applicable

zIndex

Token Type Value Preview WCAG AA contrast
zIndex.base --zIndex-base number 0 Not applicable
zIndex.raised --zIndex-raised number 10 Not applicable

Sources for block 1: design-system-bundle

Sources for block 2: design-system-bundle

Project output

wyrd-tokens check-project --design DESIGN.md --brand example --contract-dir contracts

Expected: Semantic and component tokens resolve into consistent web and Flutter artifacts.

Verified by tokens-cli.

Sources for block 1: tokens-cli

Resolved values

Fixture brand fixture — resolved token output from the design-system pipeline (generated/tokens/resolved-swatches.json). Pick a theme to inspect every published role with type-appropriate previews.

blur

Token Type Value Preview WCAG AA contrast
blur.lg --blur-lg dimension 16px Not applicable
blur.md --blur-md dimension 8px Not applicable
blur.sm --blur-sm dimension 4px Not applicable

breakpoint

Token Type Value Preview WCAG AA contrast
breakpoint.lg --breakpoint-lg dimension 905px Not applicable
breakpoint.md --breakpoint-md dimension 600px Not applicable
breakpoint.sm --breakpoint-sm dimension 360px Not applicable
breakpoint.xl --breakpoint-xl dimension 1240px Not applicable

color

Token Type Value Preview WCAG AA contrast
color.accent --color-accent color #9c7c14 Not applicable
color.accent-strong --color-accent-strong color #7a6114 Not applicable
color.background --color-background color #fbfafd Not applicable
color.disabled --color-disabled color #e5e3ec Not applicable
color.error --color-error color #ba1a1a Not applicable
color.error-container --color-error-container color #ffdad6 Not applicable
color.identity --color-identity color #c9a227 Not applicable
color.on-accent --color-on-accent color #1c1b22

4.32:1 vs color.accent

  • Non-text/UI (3:1): pass
  • Text (4.5:1): fail
color.on-background --color-on-background color #1c1b22

16.43:1 vs color.background

  • Non-text/UI (3:1): pass
  • Text (4.5:1): pass
color.on-disabled --color-on-disabled color #a6a3b5

1.94:1 vs color.disabled

  • Non-text/UI (3:1): fail
  • Text (4.5:1): fail
color.on-error --color-on-error color #ffffff

6.46:1 vs color.error

  • Non-text/UI (3:1): pass
  • Text (4.5:1): pass
color.on-error-container --color-on-error-container color #410002

13.26:1 vs color.error-container

  • Non-text/UI (3:1): pass
  • Text (4.5:1): pass
color.on-identity --color-on-identity color #1c1b22

7.06:1 vs color.identity

  • Non-text/UI (3:1): pass
  • Text (4.5:1): pass
color.on-primary --color-on-primary color #ffffff

5.15:1 vs color.primary

  • Non-text/UI (3:1): pass
  • Text (4.5:1): pass
color.on-secondary --color-on-secondary color #2a2440

11.98:1 vs color.secondary

  • Non-text/UI (3:1): pass
  • Text (4.5:1): pass
color.on-success --color-on-success color #ffffff

6.55:1 vs color.success

  • Non-text/UI (3:1): pass
  • Text (4.5:1): pass
color.on-success-container --color-on-success-container color #0a3d1f

10.6:1 vs color.success-container

  • Non-text/UI (3:1): pass
  • Text (4.5:1): pass
color.on-surface --color-on-surface color #1c1b22

17.08:1 vs color.surface

  • Non-text/UI (3:1): pass
  • Text (4.5:1): pass
color.on-surface-fixed --color-on-surface-fixed color #eae4d4

14.38:1 vs color.surface-fixed

  • Non-text/UI (3:1): pass
  • Text (4.5:1): pass
color.on-surface-variant --color-on-surface-variant color #5a5766 Not applicable
color.on-warning --color-on-warning color #ffffff

7.13:1 vs color.warning

  • Non-text/UI (3:1): pass
  • Text (4.5:1): pass
color.on-warning-container --color-on-warning-container color #3d2600

12.23:1 vs color.warning-container

  • Non-text/UI (3:1): pass
  • Text (4.5:1): pass
color.outline --color-outline color #c9c6d6 Not applicable
color.primary --color-primary color #6d4aff Not applicable
color.primary-hover --color-primary-hover color #5b3ae0 Not applicable
color.primary-pressed --color-primary-pressed color #4a2ec0 Not applicable
color.secondary --color-secondary color #e8e6f5 Not applicable
color.success --color-success color #1a6b3a Not applicable
color.success-container --color-success-container color #d6f5e3 Not applicable
color.surface --color-surface color #ffffff Not applicable
color.surface-container --color-surface-container color #f4f3f8 Not applicable
color.surface-container-high --color-surface-container-high color #eceaf2 Not applicable
color.surface-container-highest --color-surface-container-highest color #e5e3ec Not applicable
color.surface-container-low --color-surface-container-low color #fbfafd Not applicable
color.surface-container-lowest --color-surface-container-lowest color #ffffff Not applicable
color.surface-fixed --color-surface-fixed color #17150f Not applicable
color.warning --color-warning color #7a4f00 Not applicable
color.warning-container --color-warning-container color #ffecc4 Not applicable

density

Token Type Value Preview WCAG AA contrast
density.comfortable --density-comfortable number 1 Not applicable
density.compact --density-compact number 0.9 Not applicable

elevation

Token Type Value Preview WCAG AA contrast
elevation.level0 --elevation-level0 dimension 0px Not applicable
elevation.level1 --elevation-level1 dimension 1px Not applicable
elevation.level2 --elevation-level2 dimension 3px Not applicable
elevation.level3 --elevation-level3 dimension 6px Not applicable
elevation.level4 --elevation-level4 dimension 8px Not applicable
elevation.level5 --elevation-level5 dimension 12px Not applicable

focusRing

Token Type Value Preview WCAG AA contrast
focusRing.color --focusRing-color color #6d4aff Not applicable
focusRing.offset --focusRing-offset dimension 2px Not applicable
focusRing.width --focusRing-width dimension 2px Not applicable

layer

Token Type Value Preview WCAG AA contrast
layer.dropdown --layer-dropdown number 1000 Not applicable
layer.modal --layer-modal number 1300 Not applicable
layer.overlay --layer-overlay number 1200 Not applicable
layer.sticky --layer-sticky number 1100 Not applicable
layer.toast --layer-toast number 1400 Not applicable

motion

Token Type Value Preview WCAG AA contrast
motion.duration-base --motion-duration-base duration 200ms Not applicable
motion.duration-fast --motion-duration-fast duration 120ms Not applicable
motion.duration-slow --motion-duration-slow duration 320ms Not applicable
motion.easing-emphasized --motion-easing-emphasized cubicBezier cubic-bezier(0.2, 0, 0, 1.2) Not applicable
motion.easing-standard --motion-easing-standard cubicBezier cubic-bezier(0.2, 0, 0, 1) Not applicable

opacity

Token Type Value Preview WCAG AA contrast
opacity.disabled --opacity-disabled number 0.38 Not applicable
opacity.dragged --opacity-dragged number 0.16 Not applicable
opacity.focus --opacity-focus number 0.1 Not applicable
opacity.hover --opacity-hover number 0.08 Not applicable
opacity.muted --opacity-muted number 0.6 Not applicable
opacity.pressed --opacity-pressed number 0.1 Not applicable
opacity.subtle --opacity-subtle number 0.8 Not applicable

responsive

Token Type Value Preview WCAG AA contrast
responsive.content-max --responsive-content-max responsiveDimension fallback: 1152px · max: 1248px · min: 1088px · preferred: 72vw Not applicable
responsive.display-lg --responsive-display-lg responsiveDimension fallback: 48px · max: 64px · min: 40px · preferred: 5vw Not applicable
responsive.display-xl --responsive-display-xl responsiveDimension fallback: 64px · max: 80px · min: 48px · preferred: 6vw Not applicable
responsive.hero-gutter --responsive-hero-gutter responsiveDimension fallback: 40px · max: 64px · min: 24px · preferred: 5vw Not applicable
responsive.section-gap --responsive-section-gap responsiveDimension fallback: 64px · max: 72px · min: 40px · preferred: 6vw Not applicable

rounded

Token Type Value Preview WCAG AA contrast
rounded.full --rounded-full dimension 9999px Not applicable
rounded.lg --rounded-lg dimension 16px Not applicable
rounded.md --rounded-md dimension 8px Not applicable
rounded.none --rounded-none dimension 0px Not applicable
rounded.sm --rounded-sm dimension 4px Not applicable
rounded.xl --rounded-xl dimension 24px Not applicable
rounded.xs --rounded-xs dimension 2px Not applicable

scale

Token Type Value Preview WCAG AA contrast
scale.ratio --scale-ratio number 1.25 Not applicable

shadow

Token Type Value Preview WCAG AA contrast
shadow.lg --shadow-lg shadow 0 8px 24px rgba(28, 27, 34, 0.20) Not applicable
shadow.md --shadow-md shadow 0 2px 6px rgba(28, 27, 34, 0.16) Not applicable
shadow.sm --shadow-sm shadow 0 1px 2px rgba(28, 27, 34, 0.12) Not applicable

spacing

Token Type Value Preview WCAG AA contrast
spacing.2xl --spacing-2xl dimension 64px Not applicable
spacing.3xl --spacing-3xl dimension 96px Not applicable
spacing.lg --spacing-lg dimension 24px Not applicable
spacing.md --spacing-md dimension 16px Not applicable
spacing.sm --spacing-sm dimension 8px Not applicable
spacing.xl --spacing-xl dimension 40px Not applicable
spacing.xs --spacing-xs dimension 4px Not applicable

typography

Token Type Value Preview WCAG AA contrast
typography.body-lg --typography-body-lg typography fontFamily: Inter · fontSize: 18px · fontWeight: 400 · lineHeight: 28 Aa Not applicable
typography.body-md --typography-body-md typography fontFamily: Inter · fontSize: 16px · fontWeight: 400 · lineHeight: 24 Aa Not applicable
typography.body-sm --typography-body-sm typography fontFamily: Inter · fontSize: 14px · fontWeight: 400 · lineHeight: 20 Aa Not applicable
typography.code-md --typography-code-md typography fontFamily: monospace · fontSize: 14px · fontVariantNumeric: tabular-nums · fontWeight: 400 · lineHeight: 20 Aa Not applicable
typography.display-lg --typography-display-lg typography fontFamily: Inter · fontSize: 48px · fontWeight: 700 · lineHeight: 56 Aa Not applicable
typography.display-md --typography-display-md typography fontFamily: Inter · fontSize: 40px · fontWeight: 700 · lineHeight: 48 Aa Not applicable
typography.display-xl --typography-display-xl typography fontFamily: Inter · fontSize: 64px · fontWeight: 700 · lineHeight: 72 Aa Not applicable
typography.heading-lg --typography-heading-lg typography fontFamily: Inter · fontSize: 32px · fontWeight: 600 · lineHeight: 40 Aa Not applicable
typography.heading-md --typography-heading-md typography fontFamily: Inter · fontSize: 24px · fontWeight: 600 · lineHeight: 32 Aa Not applicable
typography.heading-sm --typography-heading-sm typography fontFamily: Inter · fontSize: 20px · fontWeight: 600 · lineHeight: 28 Aa Not applicable
typography.label-md --typography-label-md typography fontFamily: Inter · fontSize: 14px · fontWeight: 600 · letterSpacing: 1px · lineHeight: 20 · textTransform: uppercase Aa Not applicable
typography.label-sm --typography-label-sm typography fontFamily: Inter · fontSize: 12px · fontWeight: 600 · letterSpacing: 1px · lineHeight: 16 · textTransform: uppercase Aa Not applicable

zIndex

Token Type Value Preview WCAG AA contrast
zIndex.base --zIndex-base number 0 Not applicable
zIndex.raised --zIndex-raised number 10 Not applicable