@verdify/tokens 0.6.0

package/dist/tokens.json

@@ -0,0 +1,228 @@
+{
+  "BorderWidth0": "0",
+  "BorderWidth2": "2px",
+  "BorderWidth4": "4px",
+  "BorderWidthDefault": "1px",
+  "BreakpointSm": "40rem",
+  "BreakpointMd": "48rem",
+  "BreakpointLg": "64rem",
+  "BreakpointXl": "80rem",
+  "Breakpoint2xl": "96rem",
+  "ColorBrandBrand": "#7c5cff",
+  "ColorBrandBrandDeep": "#5b3ee8",
+  "ColorNeutralObsidian300": "#c8d0de",
+  "ColorNeutralObsidian400": "#8a95a8",
+  "ColorNeutralObsidian500": "#4a5567",
+  "ColorNeutralObsidian600": "#2a3142",
+  "ColorNeutralObsidian700": "#1f2638",
+  "ColorNeutralObsidian800": "#161b2a",
+  "ColorNeutralObsidian850": "#0f1320",
+  "ColorNeutralObsidian900": "#0b0f19",
+  "ColorNeutralObsidian950": "#060912",
+  "ColorNeutralMist50": "#fbfcfe",
+  "ColorNeutralMist100": "#f4f6fa",
+  "ColorNeutralMist200": "#e8ecf4",
+  "ColorNeutralMist300": "#d6dce8",
+  "ColorNeutralMist400": "#b0baca",
+  "ColorNeutralMist500": "#8a95a8",
+  "ColorNeutralMist600": "#4a5567",
+  "ColorNeutralMist800": "#2a3142",
+  "ColorNeutralMist950": "#0b0f19",
+  "ColorSemanticVerified": "#00d17a",
+  "ColorSemanticVerifiedStrong": "#007947",
+  "ColorSemanticSignal": "#4d9dff",
+  "ColorSemanticSignalStrong": "#346bad",
+  "ColorSemanticCaution": "#f5a623",
+  "ColorSemanticCautionStrong": "#8e6014",
+  "ColorSemanticCritical": "#ff4d4d",
+  "ColorSemanticCriticalStrong": "#be3939",
+  "ColorAdaptiveDawnSurface": "#f0eee9",
+  "ColorAdaptiveDawnText": "#2a3142",
+  "ColorAdaptiveDaySurface": "#f4f6fa",
+  "ColorAdaptiveDayText": "#2a3142",
+  "ColorAdaptiveDuskSurface": "#1a1a26",
+  "ColorAdaptiveDuskText": "#c8d0de",
+  "ColorAdaptiveNightSurface": "#060912",
+  "ColorAdaptiveNightText": "#c8d0de",
+  "ColorSurfaceCanvas": "#f4f6fa",
+  "ColorSurfaceRaised": "#e8ecf4",
+  "ColorSurfaceInput": "#d6dce8",
+  "ColorSurfaceBorder": "#b0baca",
+  "ColorSurfaceBorderMuted": "#8a95a8",
+  "ColorTextPrimary": "#0b0f19",
+  "ColorTextSecondary": "#4a5567",
+  "ColorTextMuted": "#8a95a8",
+  "ColorTextDisabled": "#b0baca",
+  "ColorTextInverse": "#fbfcfe",
+  "ColorTextOnBrand": "#fbfcfe",
+  "ColorScrimLight": "#0b0f1980",
+  "ColorScrimDark": "#060912b3",
+  "ColorActionPrimaryBg": "#7c5cff",
+  "ColorActionPrimaryFg": "#fbfcfe",
+  "ColorActionPrimaryBorder": "#7c5cff",
+  "ColorActionPrimaryBgHover": "#5b3ee8",
+  "ColorActionPrimaryBgActive": "#5b3ee8",
+  "ColorActionSecondaryBg": "#e8ecf4",
+  "ColorActionSecondaryFg": "#0b0f19",
+  "ColorActionSecondaryBorder": "#b0baca",
+  "ColorActionSecondaryBgHover": "#d6dce8",
+  "ColorActionGhostFg": "#0b0f19",
+  "ColorActionGhostBgHover": "#e8ecf4",
+  "ColorActionDestructiveBg": "#ff4d4d",
+  "ColorActionDestructiveFg": "#fbfcfe",
+  "ColorActionDestructiveBorder": "#ff4d4d",
+  "ColorStatusVerifiedFg": "#007947",
+  "ColorStatusVerifiedBg": "#e8ecf4",
+  "ColorStatusVerifiedBorder": "#007947",
+  "ColorStatusVerifiedAccent": "#00d17a",
+  "ColorStatusSignalFg": "#346bad",
+  "ColorStatusSignalBg": "#e8ecf4",
+  "ColorStatusSignalBorder": "#346bad",
+  "ColorStatusSignalAccent": "#4d9dff",
+  "ColorStatusCautionFg": "#8e6014",
+  "ColorStatusCautionBg": "#e8ecf4",
+  "ColorStatusCautionBorder": "#8e6014",
+  "ColorStatusCautionAccent": "#f5a623",
+  "ColorStatusCriticalFg": "#be3939",
+  "ColorStatusCriticalBg": "#e8ecf4",
+  "ColorStatusCriticalBorder": "#be3939",
+  "ColorStatusCriticalAccent": "#ff4d4d",
+  "ColorBorderDefault": "#b0baca",
+  "ColorBorderStrong": "#8a95a8",
+  "ColorBorderFocus": "#4d9dff",
+  "ColorControlBg": "#d6dce8",
+  "ColorControlBorder": "#b0baca",
+  "ColorControlFg": "#0b0f19",
+  "ColorControlPlaceholder": "#8a95a8",
+  "ContainerSm": "40rem",
+  "ContainerMd": "48rem",
+  "ContainerLg": "64rem",
+  "ContainerXl": "80rem",
+  "Container2xl": "96rem",
+  "FocusRingWidth": "2px",
+  "FocusRingColor": "#4d9dff",
+  "FocusRingOffset": "2px",
+  "FontFamilySans": "Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  "FontFamilyMono": "'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace",
+  "FontWeightRegular": "400",
+  "FontWeightMedium": "500",
+  "FontWeightSemibold": "600",
+  "FontWeightBold": "700",
+  "MotionDurationInstant": "0ms",
+  "MotionDurationFast": "120ms",
+  "MotionDurationBase": "200ms",
+  "MotionDurationDeliberate": "350ms",
+  "MotionDurationAmbient": "1200ms",
+  "MotionEasingVerdify": "cubic-bezier(0.2, 0.8, 0.2, 1)",
+  "MotionEasingEmphasis": "cubic-bezier(0.34, 1.56, 0.64, 1)",
+  "MotionEasingAmbient": "cubic-bezier(0.4, 0, 0.6, 1)",
+  "MotionEasingExit": "cubic-bezier(0.4, 0, 1, 1)",
+  "MotionTransitionMicroDuration": "120ms",
+  "MotionTransitionMicroEasing": "cubic-bezier(0.2, 0.8, 0.2, 1)",
+  "MotionTransitionLayoutDuration": "200ms",
+  "MotionTransitionLayoutEasing": "cubic-bezier(0.2, 0.8, 0.2, 1)",
+  "MotionTransitionModalDuration": "350ms",
+  "MotionTransitionModalEasing": "cubic-bezier(0.2, 0.8, 0.2, 1)",
+  "MotionTransitionAmbientDuration": "1200ms",
+  "MotionTransitionAmbientEasing": "cubic-bezier(0.4, 0, 0.6, 1)",
+  "Opacity0": "0",
+  "Opacity5": "0.05",
+  "Opacity10": "0.1",
+  "Opacity20": "0.2",
+  "Opacity30": "0.3",
+  "Opacity40": "0.4",
+  "Opacity50": "0.5",
+  "Opacity60": "0.6",
+  "Opacity70": "0.7",
+  "Opacity80": "0.8",
+  "Opacity90": "0.9",
+  "Opacity95": "0.95",
+  "Opacity100": "1",
+  "RadiusNone": "0",
+  "RadiusSm": "0.25rem",
+  "RadiusMd": "0.5rem",
+  "RadiusLg": "0.75rem",
+  "RadiusXl": "1rem",
+  "RadiusFull": "9999px",
+  "ShadowNone": "none",
+  "ShadowSm": "0 1px 2px 0 rgb(11 15 25 / 0.05)",
+  "ShadowMd": "0 4px 6px -1px rgb(11 15 25 / 0.08), 0 2px 4px -2px rgb(11 15 25 / 0.08)",
+  "ShadowLg": "0 10px 15px -3px rgb(11 15 25 / 0.10), 0 4px 6px -4px rgb(11 15 25 / 0.10)",
+  "ShadowXl": "0 20px 25px -5px rgb(11 15 25 / 0.10), 0 8px 10px -6px rgb(11 15 25 / 0.10)",
+  "SizeIconSm": "1rem",
+  "SizeIconMd": "1.25rem",
+  "SizeIconLg": "1.5rem",
+  "SizeIconXl": "2rem",
+  "SizeTargetMobile": "2.75rem",
+  "SizeTargetDesktop": "2.5rem",
+  "Space0": "0",
+  "Space1": "0.25rem",
+  "Space2": "0.5rem",
+  "Space3": "0.75rem",
+  "Space4": "1rem",
+  "Space5": "1.25rem",
+  "Space6": "1.5rem",
+  "Space7": "1.75rem",
+  "Space8": "2rem",
+  "Space9": "2.25rem",
+  "Space10": "2.5rem",
+  "Space11": "2.75rem",
+  "Space12": "3rem",
+  "Space14": "3.5rem",
+  "Space16": "4rem",
+  "Space20": "5rem",
+  "Space24": "6rem",
+  "Space28": "7rem",
+  "Space32": "8rem",
+  "StateOpacityHover": "0.08",
+  "StateOpacityPressed": "0.12",
+  "StateOpacityFocus": "0.12",
+  "StateOpacityDisabled": "0.38",
+  "StateOpacityDragged": "0.16",
+  "TextDisplaySize": "3.5rem",
+  "TextDisplayLineHeight": "1.05",
+  "TextDisplayLetterSpacing": "-0.025em",
+  "TextDisplayWeight": "600",
+  "TextH1Size": "2.25rem",
+  "TextH1LineHeight": "1.15",
+  "TextH1LetterSpacing": "-0.022em",
+  "TextH1Weight": "600",
+  "TextH2Size": "1.625rem",
+  "TextH2LineHeight": "1.25",
+  "TextH2LetterSpacing": "-0.018em",
+  "TextH2Weight": "500",
+  "TextH3Size": "1.25rem",
+  "TextH3LineHeight": "1.35",
+  "TextH3LetterSpacing": "-0.015em",
+  "TextH3Weight": "500",
+  "TextBodyLgSize": "1.0625rem",
+  "TextBodyLgLineHeight": "1.55",
+  "TextBodyLgLetterSpacing": "0",
+  "TextBodyLgWeight": "400",
+  "TextBodySize": "0.9375rem",
+  "TextBodyLineHeight": "1.55",
+  "TextBodyLetterSpacing": "0",
+  "TextBodyWeight": "400",
+  "TextCaptionSize": "0.75rem",
+  "TextCaptionLineHeight": "1.45",
+  "TextCaptionLetterSpacing": "0.005em",
+  "TextCaptionWeight": "400",
+  "TextLabelSize": "0.6875rem",
+  "TextLabelLineHeight": "1.4",
+  "TextLabelLetterSpacing": "0.18em",
+  "TextLabelWeight": "500",
+  "TextMonoSmSize": "0.75rem",
+  "TextMonoSmLineHeight": "1.5",
+  "TextMonoSmLetterSpacing": "0",
+  "TextMonoSmWeight": "400",
+  "TextMonoSize": "0.875rem",
+  "TextMonoLineHeight": "1.55",
+  "TextMonoLetterSpacing": "0",
+  "TextMonoWeight": "400",
+  "ZIndexBase": "0",
+  "ZIndexDropdown": "1000",
+  "ZIndexSticky": "1100",
+  "ZIndexModal": "1200",
+  "ZIndexPopover": "1300",
+  "ZIndexToast": "1400"
+}

package/dist/tokens.mjs

@@ -0,0 +1,235 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export const BorderWidth0 = "0"; // No border
+export const BorderWidth2 = "2px"; // Emphasized border width
+export const BorderWidth4 = "4px"; // Heavy border width — reserved for focus indicators or active states
+export const BorderWidthDefault = "1px"; // Default border width
+export const BreakpointSm = "40rem"; // Small breakpoint (640px) — landscape phones
+export const BreakpointMd = "48rem"; // Medium breakpoint (768px) — tablets portrait
+export const BreakpointLg = "64rem"; // Large breakpoint (1024px) — tablets landscape, small laptops
+export const BreakpointXl = "80rem"; // Extra large breakpoint (1280px) — desktops
+export const Breakpoint2xl = "96rem"; // 2X large breakpoint (1536px) — wide desktops
+export const ColorBrandBrand = "#7c5cff"; // Sovereign Violet — the single brand anchor. Identity color; the logo seam and primary brand moments. Sits outside the traffic-light status register.
+export const ColorBrandBrandDeep = "#5b3ee8"; // Companion to brand.brand — used on light surfaces where #7C5CFF fails WCAG 2.2 non-text contrast (>=3:1). Luminance shift only.
+export const ColorNeutralObsidian300 = "#c8d0de"; // Primary text on dark
+export const ColorNeutralObsidian400 = "#8a95a8"; // Secondary text
+export const ColorNeutralObsidian500 = "#4a5567"; // Muted text
+export const ColorNeutralObsidian600 = "#2a3142"; // Muted border
+export const ColorNeutralObsidian700 = "#1f2638"; // Border / divider
+export const ColorNeutralObsidian800 = "#161b2a"; // Input / well
+export const ColorNeutralObsidian850 = "#0f1320"; // Raised surface · cards
+export const ColorNeutralObsidian900 = "#0b0f19"; // Default dark canvas
+export const ColorNeutralObsidian950 = "#060912"; // Deepest backdrop · night-band canvas
+export const ColorNeutralMist50 = "#fbfcfe"; // Deepest light backdrop
+export const ColorNeutralMist100 = "#f4f6fa"; // Default light canvas
+export const ColorNeutralMist200 = "#e8ecf4"; // Raised surface · cards
+export const ColorNeutralMist300 = "#d6dce8"; // Input / well
+export const ColorNeutralMist400 = "#b0baca"; // Border / divider
+export const ColorNeutralMist500 = "#8a95a8"; // Muted (shared with obsidian.400)
+export const ColorNeutralMist600 = "#4a5567"; // Secondary text (shared with obsidian.500)
+export const ColorNeutralMist800 = "#2a3142"; // Strong text
+export const ColorNeutralMist950 = "#0b0f19"; // Highest-contrast text (shared with obsidian.900)
+export const ColorSemanticVerified = "#00d17a"; // Trust / success / verification passed — bright decorative accent (icons/fills). Fails WCAG AA as text on light surfaces; use verified-strong for readable fg/border.
+export const ColorSemanticVerifiedStrong = "#007947"; // Verified, darkened to WCAG AA — in-hue luminance shift of verified; 4.64:1 on Mist-200 (#E8ECF4). Status chip foreground/border.
+export const ColorSemanticSignal = "#4d9dff"; // Info / hyperlinks / neutral interactive accent — bright decorative accent. Fails WCAG AA as text on light surfaces; use signal-strong for readable fg/border.
+export const ColorSemanticSignalStrong = "#346bad"; // Signal, darkened to WCAG AA — in-hue luminance shift of signal; 4.60:1 on Mist-200 (#E8ECF4). Status chip foreground/border.
+export const ColorSemanticCaution = "#f5a623"; // Warning / pending / verification in progress — bright decorative accent. Fails WCAG AA as text on light surfaces; use caution-strong for readable fg/border.
+export const ColorSemanticCautionStrong = "#8e6014"; // Caution, darkened to WCAG AA — in-hue luminance shift of caution; 4.63:1 on Mist-200 (#E8ECF4). Status chip foreground/border.
+export const ColorSemanticCritical = "#ff4d4d"; // Error / verification failure / destructive action — bright decorative accent. Fails WCAG AA as text on light surfaces; use critical-strong for readable fg/border.
+export const ColorSemanticCriticalStrong = "#be3939"; // Critical, darkened to WCAG AA — in-hue luminance shift of critical; 4.63:1 on Mist-200 (#E8ECF4). Status chip foreground/border.
+export const ColorAdaptiveDawnSurface = "#f0eee9"; // Adaptive dawn band surface (05:00-09:00)
+export const ColorAdaptiveDawnText = "#2a3142"; // Adaptive dawn band primary text (05:00-09:00)
+export const ColorAdaptiveDaySurface = "#f4f6fa"; // Adaptive day band surface (09:00-17:00)
+export const ColorAdaptiveDayText = "#2a3142"; // Adaptive day band primary text (09:00-17:00)
+export const ColorAdaptiveDuskSurface = "#1a1a26"; // Adaptive dusk band surface (17:00-21:00)
+export const ColorAdaptiveDuskText = "#c8d0de"; // Adaptive dusk band primary text (17:00-21:00)
+export const ColorAdaptiveNightSurface = "#060912"; // Adaptive night band surface (21:00-05:00)
+export const ColorAdaptiveNightText = "#c8d0de"; // Adaptive night band primary text (21:00-05:00)
+export const ColorSurfaceCanvas = "#f4f6fa"; // Default canvas (light); reassigned per adaptive band at runtime. Per BR-1 §4.2 'Default light canvas'.
+export const ColorSurfaceRaised = "#e8ecf4"; // Raised surface — cards. Per BR-1 §4.2 'Raised surface · cards'.
+export const ColorSurfaceInput = "#d6dce8"; // Input / well. Per BR-1 §4.2 'Input / well'.
+export const ColorSurfaceBorder = "#b0baca"; // Border / divider. Per BR-1 §4.2 'Border / divider'.
+export const ColorSurfaceBorderMuted = "#8a95a8"; // Muted border — implicit in Mist scale (mid-range collision with Obsidian 600). Per BR-1 §4.2.
+export const ColorTextPrimary = "#0b0f19"; // Primary text on canvas; reassigned per adaptive band. Per BR-1 §4.2 'Highest-contrast text'.
+export const ColorTextSecondary = "#4a5567"; // Secondary text role; aliases to mist.600, whose hex (#4A5567) is shared with obsidian.500 per BR-1 §4.2 mid-range collision.
+export const ColorTextMuted = "#8a95a8"; // Muted text — shared with obsidian.400 per BR-1 §4.2 mid-range collision. Contrast on surface.canvas is ~2.8:1 — intentionally below WCAG AA for body text; use only for de-emphasised auxiliary text where ≥3:1 (UI components) is the relevant bar.
+export const ColorTextDisabled = "#b0baca"; // Disabled text — low-contrast, deliberate. Aliases mist.400; downstream consumers may alternatively compose text.primary with state.opacity.disabled (0.38) for a different visual register.
+export const ColorTextInverse = "#fbfcfe"; // Text on dark surfaces (e.g. obsidian backdrop, dark scrim). Aliases mist.50 — the lightest neutral. Distinct from on-brand: inverse is for neutral-dark contexts; on-brand is reserved for brand backgrounds.
+export const ColorTextOnBrand = "#fbfcfe"; // Text on brand backgrounds (e.g. CTA buttons). Constant per brand discipline.
+export const ColorScrimLight = "#0b0f1980"; // Modal/sheet backdrop on light surfaces — obsidian-900 at 50% opacity (per BR-2 spec §4).
+export const ColorScrimDark = "#060912b3"; // Modal/sheet backdrop on dark surfaces — obsidian-950 at 70% opacity for stronger isolation.
+export const ColorActionPrimaryBg = "#7c5cff"; // Primary action background — Sovereign Violet. The single high-emphasis CTA per surface.
+export const ColorActionPrimaryFg = "#fbfcfe"; // Text/icon on a primary action.
+export const ColorActionPrimaryBorder = "#7c5cff"; // Primary action border — matches bg.
+export const ColorActionPrimaryBgHover = "#5b3ee8"; // Primary action hover — deep companion.
+export const ColorActionPrimaryBgActive = "#5b3ee8"; // Primary action pressed/active.
+export const ColorActionSecondaryBg = "#e8ecf4"; // Secondary action background — neutral raised surface.
+export const ColorActionSecondaryFg = "#0b0f19"; // Text/icon on a secondary action.
+export const ColorActionSecondaryBorder = "#b0baca"; // Secondary action border.
+export const ColorActionSecondaryBgHover = "#d6dce8"; // Secondary action hover.
+export const ColorActionGhostFg = "#0b0f19"; // Ghost action text/icon — no fill until hover.
+export const ColorActionGhostBgHover = "#e8ecf4"; // Ghost action hover fill.
+export const ColorActionDestructiveBg = "#ff4d4d"; // Destructive action background — Critical. A status color used for a destructive control; never the brand.
+export const ColorActionDestructiveFg = "#fbfcfe"; // Text/icon on a destructive action.
+export const ColorActionDestructiveBorder = "#ff4d4d"; // Destructive action border.
+export const ColorStatusVerifiedFg = "#007947"; // Verified status foreground — Verified Green darkened to WCAG AA (#007947, ≥4.5:1 on the chip bg). The in-product success state; never the brand.
+export const ColorStatusVerifiedBg = "#e8ecf4"; // Verified status chip background — neutral; color carried by fg/border (restraint over volume).
+export const ColorStatusVerifiedBorder = "#007947"; // Verified status border — AA-dark shade (≥3:1 non-text).
+export const ColorStatusVerifiedAccent = "#00d17a"; // Verified bright decorative accent (#00D17A) — for icons/fills where contrast is not a text/border requirement.
+export const ColorStatusSignalFg = "#346bad"; // Informational status foreground — Signal darkened to WCAG AA (#346BAD, ≥4.5:1 on the chip bg).
+export const ColorStatusSignalBg = "#e8ecf4"; // Informational status chip background — neutral.
+export const ColorStatusSignalBorder = "#346bad"; // Informational status border — AA-dark shade (≥3:1 non-text).
+export const ColorStatusSignalAccent = "#4d9dff"; // Signal bright decorative accent (#4D9DFF) — for icons/fills.
+export const ColorStatusCautionFg = "#8e6014"; // Caution status foreground — Caution darkened to WCAG AA (#8E6014, ≥4.5:1 on the chip bg); pending / in-progress.
+export const ColorStatusCautionBg = "#e8ecf4"; // Caution status chip background — neutral.
+export const ColorStatusCautionBorder = "#8e6014"; // Caution status border — AA-dark shade (≥3:1 non-text).
+export const ColorStatusCautionAccent = "#f5a623"; // Caution bright decorative accent (#F5A623) — for icons/fills.
+export const ColorStatusCriticalFg = "#be3939"; // Critical status foreground — Critical darkened to WCAG AA (#BE3939, ≥4.5:1 on the chip bg); error / failure.
+export const ColorStatusCriticalBg = "#e8ecf4"; // Critical status chip background — neutral.
+export const ColorStatusCriticalBorder = "#be3939"; // Critical status border — AA-dark shade (≥3:1 non-text).
+export const ColorStatusCriticalAccent = "#ff4d4d"; // Critical bright decorative accent (#FF4D4D) — for icons/fills.
+export const ColorBorderDefault = "#b0baca"; // Default component border — divider weight.
+export const ColorBorderStrong = "#8a95a8"; // Higher-contrast component border for emphasis.
+export const ColorBorderFocus = "#4d9dff"; // Focused-input border color — matches the focus ring (single source: focus.ring.color).
+export const ColorControlBg = "#d6dce8"; // Form control background — input / well.
+export const ColorControlBorder = "#b0baca"; // Form control border.
+export const ColorControlFg = "#0b0f19"; // Form control text/value.
+export const ColorControlPlaceholder = "#8a95a8"; // Form control placeholder text — de-emphasised.
+export const ContainerSm = "40rem"; // Container max-width at sm breakpoint
+export const ContainerMd = "48rem"; // Container max-width at md breakpoint
+export const ContainerLg = "64rem"; // Container max-width at lg breakpoint
+export const ContainerXl = "80rem"; // Container max-width at xl breakpoint
+export const Container2xl = "96rem"; // Container max-width at 2xl breakpoint
+export const FocusRingWidth = "2px"; // Focus ring width. Per WCAG 2.4.7.
+export const FocusRingColor = "#4d9dff"; // Focus ring color — semantic.signal (#4D9DFF). Contrast ≥3:1 verified in Task 7 (contrast-validation).
+export const FocusRingOffset = "2px"; // Focus ring offset (gap between target and ring).
+export const FontFamilySans =
+  "Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"; // Primary UI and reading family — Inter Variable per BR-1 §5.1. System fallbacks listed in priority order.
+export const FontFamilyMono =
+  "'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace"; // Technical family for IDs, hashes, code, timestamps — JetBrains Mono Variable per BR-1 §5.1.
+export const FontWeightRegular = "400"; // Body / paragraph weight
+export const FontWeightMedium = "500"; // H2/H3, labels, wordmark
+export const FontWeightSemibold = "600"; // Display / H1
+export const FontWeightBold = "700"; // Reserved for rare emphasis; not used in default scale
+export const MotionDurationInstant = "0ms"; // State changes — selection, focus state (no animation). Per BR-1 §9.1.
+export const MotionDurationFast = "120ms"; // Hover, focus rings, button presses. Per BR-1 §9.1.
+export const MotionDurationBase = "200ms"; // Most UI transitions — panels, tooltips. Per BR-1 §9.1.
+export const MotionDurationDeliberate = "350ms"; // Verification moments, modals, the check. Per BR-1 §9.1.
+export const MotionDurationAmbient = "1200ms"; // Band transitions, time-of-day, hero entrances. Per BR-1 §9.1. NOT for UI feedback.
+export const MotionEasingVerdify = "cubic-bezier(0.2, 0.8, 0.2, 1)"; // Default — natural, slightly snappy. Per BR-1 §9.2.
+export const MotionEasingEmphasis = "cubic-bezier(0.34, 1.56, 0.64, 1)"; // The check moment only — slight overshoot. Per BR-1 §9.2.
+export const MotionEasingAmbient = "cubic-bezier(0.4, 0, 0.6, 1)"; // Long, gentle — adaptive bands. Per BR-1 §9.2.
+export const MotionEasingExit = "cubic-bezier(0.4, 0, 1, 1)"; // Things leaving feel decisive. Per BR-1 §9.2.
+export const MotionTransitionMicroDuration = "120ms"; // Hover/press feedback duration. Per BR-2 spec D-11.
+export const MotionTransitionMicroEasing = "cubic-bezier(0.2, 0.8, 0.2, 1)"; // Hover/press feedback easing.
+export const MotionTransitionLayoutDuration = "200ms"; // Most UI layout transitions duration.
+export const MotionTransitionLayoutEasing = "cubic-bezier(0.2, 0.8, 0.2, 1)"; // Most UI layout transitions easing.
+export const MotionTransitionModalDuration = "350ms"; // Modal/sheet entry/exit duration. Per BR-1 §9.3 — restraint (no ease-emphasis; that is reserved for the check).
+export const MotionTransitionModalEasing = "cubic-bezier(0.2, 0.8, 0.2, 1)"; // Modal/sheet entry/exit easing.
+export const MotionTransitionAmbientDuration = "1200ms"; // Adaptive band transitions duration. NOT for primary UI feedback.
+export const MotionTransitionAmbientEasing = "cubic-bezier(0.4, 0, 0.6, 1)"; // Adaptive band transitions easing.
+export const Opacity0 = "0"; // Fully transparent
+export const Opacity5 = "0.05"; // Opacity 5%
+export const Opacity10 = "0.1"; // Opacity 10%
+export const Opacity20 = "0.2"; // Opacity 20%
+export const Opacity30 = "0.3"; // Opacity 30%
+export const Opacity40 = "0.4"; // Opacity 40%
+export const Opacity50 = "0.5"; // Opacity 50%
+export const Opacity60 = "0.6"; // Opacity 60%
+export const Opacity70 = "0.7"; // Opacity 70%
+export const Opacity80 = "0.8"; // Opacity 80%
+export const Opacity90 = "0.9"; // Opacity 90%
+export const Opacity95 = "0.95"; // Opacity 95%
+export const Opacity100 = "1"; // Fully opaque
+export const RadiusNone = "0"; // No border radius — squared corners
+export const RadiusSm = "0.25rem"; // Small radius (4px) — inputs, chips
+export const RadiusMd = "0.5rem"; // Medium radius (8px) — buttons, cards
+export const RadiusLg = "0.75rem"; // Large radius (12px) — modals, sheets
+export const RadiusXl = "1rem"; // Extra large radius (16px) — feature surfaces
+export const RadiusFull = "9999px"; // Full radius — pills, circular avatars
+export const ShadowNone = "none"; // No shadow
+export const ShadowSm = "0 1px 2px 0 rgb(11 15 25 / 0.05)"; // Subtle elevation — inputs, low cards
+export const ShadowMd =
+  "0 4px 6px -1px rgb(11 15 25 / 0.08), 0 2px 4px -2px rgb(11 15 25 / 0.08)"; // Standard elevation — raised cards, dropdowns
+export const ShadowLg =
+  "0 10px 15px -3px rgb(11 15 25 / 0.10), 0 4px 6px -4px rgb(11 15 25 / 0.10)"; // Strong elevation — popovers, sheets
+export const ShadowXl =
+  "0 20px 25px -5px rgb(11 15 25 / 0.10), 0 8px 10px -6px rgb(11 15 25 / 0.10)"; // Hero elevation — modals, feature emphasis. Max opacity (brand-voice ceiling).
+export const SizeIconSm = "1rem"; // Small icon (16px) — inline, captions
+export const SizeIconMd = "1.25rem"; // Medium icon (20px) — buttons, inline body
+export const SizeIconLg = "1.5rem"; // Large icon (24px) — primary actions, headers
+export const SizeIconXl = "2rem"; // Extra large icon (32px) — feature emphasis
+export const SizeTargetMobile = "2.75rem"; // Mobile minimum tap target (44px). Per WCAG 2.5.5 and Apple HIG.
+export const SizeTargetDesktop = "2.5rem"; // Desktop minimum click target (40px). Per Material Design.
+export const Space0 = "0"; // Spacing step 0 (0px)
+export const Space1 = "0.25rem"; // Spacing step 1 (4px)
+export const Space2 = "0.5rem"; // Spacing step 2 (8px)
+export const Space3 = "0.75rem"; // Spacing step 3 (12px)
+export const Space4 = "1rem"; // Spacing step 4 (16px) — base unit
+export const Space5 = "1.25rem"; // Spacing step 5 (20px)
+export const Space6 = "1.5rem"; // Spacing step 6 (24px)
+export const Space7 = "1.75rem"; // Spacing step 7 (28px)
+export const Space8 = "2rem"; // Spacing step 8 (32px)
+export const Space9 = "2.25rem"; // Spacing step 9 (36px)
+export const Space10 = "2.5rem"; // Spacing step 10 (40px)
+export const Space11 = "2.75rem"; // Spacing step 11 (44px)
+export const Space12 = "3rem"; // Spacing step 12 (48px)
+export const Space14 = "3.5rem"; // Spacing step 14 (56px)
+export const Space16 = "4rem"; // Spacing step 16 (64px)
+export const Space20 = "5rem"; // Spacing step 20 (80px)
+export const Space24 = "6rem"; // Spacing step 24 (96px)
+export const Space28 = "7rem"; // Spacing step 28 (112px)
+export const Space32 = "8rem"; // Spacing step 32 (128px)
+export const StateOpacityHover = "0.08"; // Hover state-layer opacity overlay. Material-derived; per BR-2 spec D-10.
+export const StateOpacityPressed = "0.12"; // Pressed/active state-layer opacity overlay.
+export const StateOpacityFocus = "0.12"; // Focused state-layer opacity overlay (in addition to focus ring).
+export const StateOpacityDisabled = "0.38"; // Disabled state opacity — applied to text or icon, not as overlay.
+export const StateOpacityDragged = "0.16"; // Dragged state-layer opacity overlay.
+export const TextDisplaySize = "3.5rem"; // Display heading size (56px); per BR-1 §5.2
+export const TextDisplayLineHeight = "1.05"; // Display heading line-height
+export const TextDisplayLetterSpacing = "-0.025em"; // Display heading tracking
+export const TextDisplayWeight = "600"; // Display heading weight (semibold)
+export const TextH1Size = "2.25rem"; // H1 size (36px); per BR-1 §5.2
+export const TextH1LineHeight = "1.15"; // H1 line-height
+export const TextH1LetterSpacing = "-0.022em"; // H1 tracking
+export const TextH1Weight = "600"; // H1 weight (semibold)
+export const TextH2Size = "1.625rem"; // H2 size (26px); per BR-1 §5.2
+export const TextH2LineHeight = "1.25"; // H2 line-height
+export const TextH2LetterSpacing = "-0.018em"; // H2 tracking
+export const TextH2Weight = "500"; // H2 weight (medium)
+export const TextH3Size = "1.25rem"; // H3 size (20px); per BR-1 §5.2
+export const TextH3LineHeight = "1.35"; // H3 line-height
+export const TextH3LetterSpacing = "-0.015em"; // H3 tracking
+export const TextH3Weight = "500"; // H3 weight (medium)
+export const TextBodyLgSize = "1.0625rem"; // Body large size (17px); per BR-1 §5.2
+export const TextBodyLgLineHeight = "1.55"; // Body large line-height
+export const TextBodyLgLetterSpacing = "0"; // Body large tracking (none)
+export const TextBodyLgWeight = "400"; // Body large weight (regular)
+export const TextBodySize = "0.9375rem"; // Body size (15px); per BR-1 §5.2. Consumers MUST apply a 16px reset on inputs to avoid iOS auto-zoom (per spec D-12).
+export const TextBodyLineHeight = "1.55"; // Body line-height
+export const TextBodyLetterSpacing = "0"; // Body tracking (none)
+export const TextBodyWeight = "400"; // Body weight (regular)
+export const TextCaptionSize = "0.75rem"; // Caption size (12px); per BR-1 §5.2
+export const TextCaptionLineHeight = "1.45"; // Caption line-height
+export const TextCaptionLetterSpacing = "0.005em"; // Caption tracking
+export const TextCaptionWeight = "400"; // Caption weight (regular)
+export const TextLabelSize = "0.6875rem"; // Label size (11px); UPPERCASE per BR-1 §5.4
+export const TextLabelLineHeight = "1.4"; // Label line-height
+export const TextLabelLetterSpacing = "0.18em"; // Label tracking (wide; for eyebrows/labels)
+export const TextLabelWeight = "500"; // Label weight (medium)
+export const TextMonoSmSize = "0.75rem"; // Mono small size (12px); per BR-1 §5.2
+export const TextMonoSmLineHeight = "1.5"; // Mono small line-height
+export const TextMonoSmLetterSpacing = "0"; // Mono small tracking (none)
+export const TextMonoSmWeight = "400"; // Mono small weight (regular)
+export const TextMonoSize = "0.875rem"; // Mono size (14px); per BR-1 §5.2
+export const TextMonoLineHeight = "1.55"; // Mono line-height
+export const TextMonoLetterSpacing = "0"; // Mono tracking (none)
+export const TextMonoWeight = "400"; // Mono weight (regular)
+export const ZIndexBase = "0"; // Base stacking — flat content
+export const ZIndexDropdown = "1000"; // Dropdown menus, comboboxes
+export const ZIndexSticky = "1100"; // Sticky headers, fixed bars
+export const ZIndexModal = "1200"; // Modal dialogs, sheets
+export const ZIndexPopover = "1300"; // Popovers, tooltips above modals
+export const ZIndexToast = "1400"; // Toasts, notifications — highest

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@verdify/tokens",
+  "version": "0.6.0",
+  "description": "Verdify design tokens — W3C DTCG sources with Tailwind v4 preset, CSS vars, JS/TS, and raw JSON outputs",
+  "license": "UNLICENSED",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mirinsim/verdify-brand.git",
+    "directory": "packages/tokens"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/tokens.mjs",
+      "require": "./dist/tokens.js",
+      "types": "./dist/tokens.d.ts"
+    },
+    "./css": "./dist/tokens.css",
+    "./preset": "./dist/preset.css",
+    "./preset-adaptive": "./dist/preset-adaptive.css",
+    "./json": "./dist/tokens.json",
+    "./tokens/*": "./src/tokens/*"
+  },
+  "files": [
+    "dist/",
+    "src/tokens/",
+    "README.md"
+  ],
+  "devDependencies": {
+    "style-dictionary": "^4.0.0",
+    "tsx": "^4.7.0",
+    "typescript": "^5.4.0",
+    "ajv": "^8.12.0",
+    "@types/node": "^20.0.0"
+  },
+  "scripts": {
+    "sync": "tsx scripts/sync-color.ts",
+    "sync:print": "tsx scripts/sync-print.ts",
+    "build:ase": "tsx scripts/build-ase.ts",
+    "validate": "tsx scripts/validate.ts",
+    "build": "pnpm run sync && pnpm run sync:print && pnpm run build:ase && pnpm run validate && tsx scripts/build.ts",
+    "verify": "pnpm run build && git diff --exit-code src/",
+    "test": "tsx scripts/test.ts"
+  }
+}

package/src/tokens/border-width.tokens.json

@@ -0,0 +1,8 @@
+{
+  "border-width": {
+    "0":       { "$value": "0",   "$type": "dimension", "$description": "No border" },
+    "default": { "$value": "1px", "$type": "dimension", "$description": "Default border width" },
+    "2":       { "$value": "2px", "$type": "dimension", "$description": "Emphasized border width" },
+    "4":       { "$value": "4px", "$type": "dimension", "$description": "Heavy border width — reserved for focus indicators or active states" }
+  }
+}

package/src/tokens/breakpoint.tokens.json

@@ -0,0 +1,9 @@
+{
+  "breakpoint": {
+    "sm":  { "$value": "40rem",  "$type": "dimension", "$description": "Small breakpoint (640px) — landscape phones" },
+    "md":  { "$value": "48rem",  "$type": "dimension", "$description": "Medium breakpoint (768px) — tablets portrait" },
+    "lg":  { "$value": "64rem",  "$type": "dimension", "$description": "Large breakpoint (1024px) — tablets landscape, small laptops" },
+    "xl":  { "$value": "80rem",  "$type": "dimension", "$description": "Extra large breakpoint (1280px) — desktops" },
+    "2xl": { "$value": "96rem",  "$type": "dimension", "$description": "2X large breakpoint (1536px) — wide desktops" }
+  }
+}