W3C DTCG format — 168 tokens
| TOKEN | VALUE | TYPE | PREVIEW |
|---|---|---|---|
brand.logo.url Canonical logo URL — always use this for headers, presentations, demos | https://www.reshapex.com/images/logos/reshape-logo.svg | asset | |
brand.logo.same-origin | /images/logos/reshape-logo.svg | asset | |
brand.logo.alt | ReshapeX | content | |
brand.company.name | ReshapeX | content | |
brand.company.tagline | Reshape Automation | content | |
brand.slide-mode.dark.background Template owns the dark background — never set #0D1117 in HTML | transparent | color | |
brand.slide-mode.dark.text-primary | #FFFFFF | color | |
brand.slide-mode.dark.text-body | #E5E9EC | color | |
brand.slide-mode.dark.text-subtle | #A0AEB8 | color | |
brand.slide-mode.dark.text-muted | #8B9AAD | color | |
brand.slide-mode.dark.divider | #1C2128 | color | |
brand.slide-mode.dark.card-surface | #1C2128 | color | |
brand.slide-mode.dark.palette Dark slides use marketing palette colors | marketing | content | |
brand.slide-mode.light.background | #FFFFFF | color | |
brand.slide-mode.light.text-primary | #0D1117 | color | |
brand.slide-mode.light.text-body | #1C2128 | color | |
brand.slide-mode.light.text-subtle | #8B9AAD | color | |
brand.slide-mode.light.divider | #E5E9EC | color | |
brand.slide-mode.light.card-surface | #F5F7FA | color | |
brand.slide-mode.light.palette Light slides use enterprise palette colors | enterprise | content | |
brand.opacity-levels.values | 06, 08, 10, 12, 15, 20, 25, 30, 35, 40, 48 | content |
| TOKEN | VALUE | TYPE | PREVIEW |
|---|---|---|---|
colors.marketing.electric-green Primary brand color — Electric Green | #73B400 | color | |
colors.marketing.cyber-blue Secondary brand color — Cyber Blue | #00D9FF | color | |
colors.marketing.hot-magenta Accent brand color — Hot Magenta | #FF006E | color | |
colors.marketing.volt-yellow Highlight color — Volt Yellow | #FFE500 | color | |
colors.enterprise.professional-green Enterprise primary — Professional Green (triadic) | #5C9000 | color | |
colors.enterprise.enterprise-blue Enterprise secondary — Enterprise Blue (triadic) | #005C90 | color | |
colors.enterprise.executive-magenta Enterprise accent — Executive Magenta (triadic) | #90005C | color | |
colors.enterprise.enterprise-violet Complement of Professional Green | #340090 | color | |
colors.neutral.white | #FFFFFF | color | |
colors.neutral.deep-space Background | #0D1117 | color | |
colors.neutral.slate Surface | #1C2128 | color | |
colors.neutral.steel Secondary text | #8B9AAD | color | |
colors.neutral.light-gray | #F6F8FA | color | |
colors.semantic.primary Default primary — enterprise mode | {enterprise.professional-green} | color | |
colors.semantic.secondary Default secondary — enterprise mode | {enterprise.enterprise-blue} | color | |
colors.semantic.accent Default accent — enterprise mode | {enterprise.executive-magenta} | color | |
colors.semantic.destructive | {marketing.hot-magenta} | color | |
colors.scale-green.10 Whisper | #F0F9E6 | color | |
colors.scale-green.20 Soft | #E1F3CC | color | |
colors.scale-green.40 Light | #BFDF8A | color | |
colors.scale-green.60 Medium | #9DCC47 | color | |
colors.scale-green.100 Enterprise / dark | #5C9000 | color | |
colors.scale-green.base Electric Green | #73B400 | color | |
colors.scale-green.darker | #3D6000 | color | |
colors.scale-blue.10 Ice | #E6F9FF | color | |
colors.scale-blue.20 Frost | #CCF3FF | color | |
colors.scale-blue.40 Sky | #80E8FF | color | |
colors.scale-blue.60 Bright | #40E0FF | color | |
colors.scale-blue.100 Ocean / enterprise | #005C90 | color | |
colors.scale-blue.base Cyber Blue | #00D9FF | color | |
colors.scale-blue.deep | #00ADCC | color | |
colors.scale-blue.darker | #003D5C | color | |
colors.scale-magenta.10 Blush | #FFE6F2 | color | |
colors.scale-magenta.20 Pink | #FFCCE5 | color | |
colors.scale-magenta.40 Rose | #FF80B7 | color | |
colors.scale-magenta.60 Hot | #FF4092 | color | |
colors.scale-magenta.100 Rich / enterprise | #90005C | color | |
colors.scale-magenta.base Hot Magenta | #FF006E | color | |
colors.scale-magenta.darker Wine | #66003D | color |
| TOKEN | VALUE | TYPE | PREVIEW |
|---|---|---|---|
effects.shadow.sm | 0 1px 2px 0 rgba(0, 0, 0, 0.05) | shadow | |
effects.shadow.md | 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) | shadow | |
effects.shadow.lg | 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) | shadow | |
effects.shadow.xl | 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) | shadow | |
effects.shadow.2xl | 0 25px 50px -12px rgba(0, 0, 0, 0.25) | shadow | |
effects.shadow.inner | inset 0 2px 4px 0 rgba(0, 0, 0, 0.05) | shadow | |
effects.shadow.primary-lg Green-tinted brand shadow | 0 12px 40px 0 rgba(92, 144, 0, 0.15) | shadow | |
effects.shadow.primary-hover | 0 16px 48px 0 rgba(92, 144, 0, 0.25) | shadow | |
effects.shadow.accent-hover | 0 16px 48px 0 rgba(144, 0, 92, 0.25) | shadow | |
effects.transition.fast | 150ms cubic-bezier(0.4, 0, 0.2, 1) | transition | |
effects.transition.base | 200ms cubic-bezier(0.4, 0, 0.2, 1) | transition | |
effects.transition.slow | 300ms cubic-bezier(0.4, 0, 0.2, 1) | transition | |
effects.transition.slower | 500ms cubic-bezier(0.4, 0, 0.2, 1) | transition | |
effects.slide-transition.default All slides default | dissolve 300ms | transition | |
effects.slide-transition.section-break Into section break | push-left 400ms | transition | |
effects.slide-transition.within-slide Within-slide elements | smart-animate 200ms ease-in-out | transition | |
effects.gradient.hero Primary brand gradient — AI energy | linear-gradient(135deg, #73B400 0%, #00D9FF 100%) | gradient | |
effects.gradient.cyber | linear-gradient(135deg, #00D9FF 0%, #FF006E 100%) | gradient | |
effects.gradient.neural | linear-gradient(135deg, #73B400 0%, #FFE500 100%) | gradient | |
effects.gradient.full | linear-gradient(135deg, #73B400 0%, #00D9FF 50%, #FF006E 100%) | gradient | |
effects.gradient.enterprise Enterprise accent gradient | linear-gradient(135deg, #5C9000 0%, #005C90 100%) | gradient | |
effects.gradient.image-overlay Dark slide hero image overlay | linear-gradient(to right, rgba(13,17,23,0.95) 40%, transparent 100%) | gradient |
| TOKEN | VALUE | TYPE | PREVIEW |
|---|---|---|---|
spacing.semantic.xs 0.5rem — tightest gap | 8px | dimension | |
spacing.semantic.sm 1rem | 16px | dimension | |
spacing.semantic.md 1.5rem — grid baseline | 24px | dimension | |
spacing.semantic.lg 2rem | 32px | dimension | |
spacing.semantic.xl 2.5rem | 40px | dimension | |
spacing.semantic.2xl 3rem | 48px | dimension | |
spacing.semantic.3xl 4rem | 64px | dimension | |
spacing.numeric.0 | 0 | dimension | |
spacing.numeric.1 4px | 0.25rem | dimension | |
spacing.numeric.2 8px — base unit | 0.5rem | dimension | |
spacing.numeric.3 12px | 0.75rem | dimension | |
spacing.numeric.4 16px | 1rem | dimension | |
spacing.numeric.5 20px | 1.25rem | dimension | |
spacing.numeric.6 24px | 1.5rem | dimension | |
spacing.numeric.8 32px | 2rem | dimension | |
spacing.numeric.10 40px | 2.5rem | dimension | |
spacing.numeric.12 48px | 3rem | dimension | |
spacing.numeric.16 64px | 4rem | dimension | |
spacing.numeric.20 80px | 5rem | dimension | |
spacing.numeric.24 96px | 6rem | dimension | |
spacing.numeric.32 128px | 8rem | dimension | |
spacing.container.sm | 640px | dimension | |
spacing.container.md | 768px | dimension | |
spacing.container.lg | 1024px | dimension | |
spacing.container.xl | 1280px | dimension | |
spacing.container.2xl | 1536px | dimension | |
spacing.container.3xl | 1920px | dimension | |
spacing.container.full 1440px — max-width | 90rem | dimension | |
spacing.radius.sm 6px | 0.375rem | dimension | |
spacing.radius.md 8px | 0.5rem | dimension | |
spacing.radius.lg 12px | 0.75rem | dimension | |
spacing.radius.xl 16px | 1rem | dimension | |
spacing.radius.2xl 20px | 1.25rem | dimension | |
spacing.radius.full | 9999px | dimension | |
spacing.slide-grid.canvas-width | 1920px | dimension | |
spacing.slide-grid.canvas-height | 1080px | dimension | |
spacing.slide-grid.content-height Header 90px + footer 90px | 900px | dimension | |
spacing.slide-grid.margin | 120px | dimension | |
spacing.slide-grid.padding | 80px 120px | dimension | |
spacing.slide-grid.headline-y | 80px | dimension | |
spacing.slide-grid.body-y | 240px | dimension | |
spacing.slide-grid.right-column-x Two-column layout | 1080px | dimension |
| TOKEN | VALUE | TYPE | PREVIEW |
|---|---|---|---|
typography.font-family.heading | General Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif | fontFamily | |
typography.font-family.body | General Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif | fontFamily | |
typography.font-family.mono | JetBrains Mono, 'SF Mono', 'Cascadia Code', 'Courier New', monospace | fontFamily | |
typography.font-family.slide Used in slide HTML (Figma strips class names) | Inter, -apple-system, BlinkMacSystemFont, sans-serif | fontFamily | |
typography.font-weight.normal | 400 | fontWeight | |
typography.font-weight.medium | 500 | fontWeight | |
typography.font-weight.semibold | 600 | fontWeight | |
typography.font-weight.bold | 700 | fontWeight | |
typography.font-weight.extrabold | 800 | fontWeight | |
typography.font-weight.black | 900 | fontWeight | |
typography.line-height.none | 1 | lineHeight | |
typography.line-height.hero Hero headings (48px+) | 1.1 | lineHeight | |
typography.line-height.heading Large headings (32-44px) | 1.15 | lineHeight | |
typography.line-height.subheading Medium headings (24-32px) | 1.2 | lineHeight | |
typography.line-height.snug | 1.3 | lineHeight | |
typography.line-height.body Optimal reading rhythm | 1.5 | lineHeight | |
typography.line-height.loose | 1.6 | lineHeight | |
typography.font-size.xs 12px | 0.75rem | dimension | |
typography.font-size.sm 14px — minimum readable | 0.875rem | dimension | |
typography.font-size.base 20px — body text base | 1.25rem | dimension | |
typography.font-size.lg 23px | 1.4375rem | dimension | |
typography.font-size.xl 26px | 1.625rem | dimension | |
typography.font-size.2xl 29px | 1.8125rem | dimension | |
typography.font-size.3xl 32px | 2rem | dimension | |
typography.font-size.4xl 36px | 2.25rem | dimension | |
typography.font-size.5xl 40px | 2.5rem | dimension | |
typography.font-size.6xl 46px | 2.875rem | dimension | |
typography.font-size.7xl 52px | 3.25rem | dimension | |
typography.font-size.8xl 58px — Display | 3.625rem | dimension | |
typography.heading-size.h1-hero 56-72px — Hero page title | clamp(3.5rem, 3rem + 3vw, 4.5rem) | dimension | |
typography.heading-size.h1 40-48px — Page titles | clamp(2.5rem, 2.2rem + 1.5vw, 3rem) | dimension | |
typography.heading-size.h2 32-44px — Section headings | clamp(2rem, 1.8rem + 1vw, 2.75rem) | dimension | |
typography.heading-size.h3 26-36px — Subsection headings | clamp(1.625rem, 1.5rem + 0.75vw, 2.25rem) | dimension | |
typography.heading-size.h4 22-30px — Card titles | clamp(1.375rem, 1.3rem + 0.5vw, 1.875rem) | dimension | |
typography.slide-typography.title weight: 800, lineHeight: 1.05, letterSpacing: -0.02em | 88px | dimension | |
typography.slide-typography.subtitle weight: 400, lineHeight: 1.30 | 36px | dimension | |
typography.slide-typography.h2 weight: 700, lineHeight: 1.10, letterSpacing: -0.01em | 64px | dimension | |
typography.slide-typography.h3 weight: 700, lineHeight: 1.15, letterSpacing: -0.01em | 44px | dimension | |
typography.slide-typography.body weight: 400, lineHeight: 1.50 | 26px | dimension | |
typography.slide-typography.caption weight: 400, lineHeight: 1.40, letterSpacing: 0.01em | 20px | dimension | |
typography.slide-typography.stat weight: 900, lineHeight: 1.00, letterSpacing: -0.03em | 112px | dimension | |
typography.slide-typography.stat-label weight: 600, lineHeight: 1.30, letterSpacing: 0.04em | 22px | dimension | |
typography.slide-typography.code weight: 400, lineHeight: 1.60 | 22px | dimension | |
typography.slide-typography.eyebrow weight: 600, lineHeight: 1.20, letterSpacing: 0.10em | 16px | dimension |