---
name: "GSAP"
mode: "dark"
---
# GSAP
## Visual theme and atmosphere
GSAP is a dark-canvas design language built for a motion library: a near-black stage where massive cream type, thin outlined pill buttons, and individually color-coded category labels create a typographic showcase rather than a traditional marketing site. Color functions as taxonomy, not decoration — each animation discipline (GSAP core, SVG, Scroll, Text, UI) wears its own vivid hue. Typography is the hero: a single sans-serif (Mori) at six weights, pushing to 224px for the main headline with aggressive negative tracking and near-1.0 line-height, so words feel carved rather than laid out. Buttons are almost exclusively ghost-pills with 100px radius and hairline cream borders — there are no filled CTAs.
Animated chalkboard in a design studio. A near-black wall, warm cream chalk, and five color-coded highlighters — one for each animation discipline.
## Color palette and roles
- **Light Green (#abff84)**: Green text accent for links, tags, and emphasized short phrases — do not promote it to the primary CTA color.
- **Core Green (#dfffd1)**: Subtle brand-tinted background washes for feature cards tied to the GSAP core.
- **Orangey (#ff8709)**: SVG category label, orange-tool icon fills, gradient endpoint in Orange Crush.
- **Pink (#fec5fb)**: Scroll category label, decorative splashes, gradient endpoint in Summer Fair.
- **Lilac (#9d95ff)**: Text category label, thin illustrative strokes, gradient endpoint in Purple Haze.
- **Blue (#00bae2)**: UI category label, gradient endpoint in Skyfall and Emerald City.
- **Lipstick Pink (#f100cb)**: Deep gradient stop for expressive decorative gradients, not used for text or UI.
- **Just Black (#0e100f)**: Page canvas, footer surface, deep section backgrounds.
- **Off Black (#191919)**: Alternative dark surface for nested panels and code blocks.
- **Surface 25 (#42433d)**: Hairline borders, dividers, low-contrast outlines against the black canvas.
- **Surface 50 (#7c7c6f)**: Muted secondary text, icon fills at rest, subhead annotations, disabled-state labels.
- **Surface Cream (#fffce1)**: Primary text, outlined button borders, nav links, card text, the default surface-light for ghost controls and headings.
## Typography rules
- **Display**: Mori, 600, 224px. Hero headline — carved, massive, line-height 0.9, -0.02em tracking. Fallback: Inter Tight, Söhne, or DM Sans..
- **Body**: Mori, 400, 19px. Body text and UI labels, line-height 1.15..
- **Label**: Mori, 600, 18px. Button text and section heads..
## Spacing and shape
- Base unit: 4px.
- Default gap: 16px.
- Card padding: 24px.
- Section padding: 80px.
- Card corners: 8px.
- Control corners: 8px.
- Pills: 100px.
## Motion
Use expressive motion. Fast feedback lasts 100ms; composed transitions last 500ms; easing is cubic-bezier(0.22, 1, 0.36, 1).
## Guardrails
- Render every button as a 100px-radius ghost pill with 1px cream border.
- Push hero headline to 224px weight 600 with line-height 0.9.
- Do not add filled solid-color CTA buttons.
- Do not use pure white or pure black — use #fffce1 and #0e100f.
---
name: "GSAP"
mode: "dark"
---
# GSAP
## Visual theme and atmosphere
GSAP is a dark-canvas design language built for a motion library: a near-black stage where massive cream type, thin outlined pill buttons, and individually color-coded category labels create a typographic showcase rather than a traditional marketing site. Color functions as taxonomy, not decoration — each animation discipline (GSAP core, SVG, Scroll, Text, UI) wears its own vivid hue. Typography is the hero: a single sans-serif (Mori) at six weights, pushing to 224px for the main headline with aggressive negative tracking and near-1.0 line-height, so words feel carved rather than laid out. Buttons are almost exclusively ghost-pills with 100px radius and hairline cream borders — there are no filled CTAs.
Animated chalkboard in a design studio. A near-black wall, warm cream chalk, and five color-coded highlighters — one for each animation discipline.
## Color palette and roles
- **Light Green (#abff84)**: Green text accent for links, tags, and emphasized short phrases — do not promote it to the primary CTA color.
- **Core Green (#dfffd1)**: Subtle brand-tinted background washes for feature cards tied to the GSAP core.
- **Orangey (#ff8709)**: SVG category label, orange-tool icon fills, gradient endpoint in Orange Crush.
- **Pink (#fec5fb)**: Scroll category label, decorative splashes, gradient endpoint in Summer Fair.
- **Lilac (#9d95ff)**: Text category label, thin illustrative strokes, gradient endpoint in Purple Haze.
- **Blue (#00bae2)**: UI category label, gradient endpoint in Skyfall and Emerald City.
- **Lipstick Pink (#f100cb)**: Deep gradient stop for expressive decorative gradients, not used for text or UI.
- **Just Black (#0e100f)**: Page canvas, footer surface, deep section backgrounds.
- **Off Black (#191919)**: Alternative dark surface for nested panels and code blocks.
- **Surface 25 (#42433d)**: Hairline borders, dividers, low-contrast outlines against the black canvas.
- **Surface 50 (#7c7c6f)**: Muted secondary text, icon fills at rest, subhead annotations, disabled-state labels.
- **Surface Cream (#fffce1)**: Primary text, outlined button borders, nav links, card text, the default surface-light for ghost controls and headings.
## Typography rules
- **Display**: Mori, 600, 224px. Hero headline — carved, massive, line-height 0.9, -0.02em tracking. Fallback: Inter Tight, Söhne, or DM Sans..
- **Body**: Mori, 400, 19px. Body text and UI labels, line-height 1.15..
- **Label**: Mori, 600, 18px. Button text and section heads..
## Spacing and shape
- Base unit: 4px.
- Default gap: 16px.
- Card padding: 24px.
- Section padding: 80px.
- Card corners: 8px.
- Control corners: 8px.
- Pills: 100px.
## Motion
Use expressive motion. Fast feedback lasts 100ms; composed transitions last 500ms; easing is cubic-bezier(0.22, 1, 0.36, 1).
## Guardrails
- Render every button as a 100px-radius ghost pill with 1px cream border.
- Push hero headline to 224px weight 600 with line-height 0.9.
- Do not add filled solid-color CTA buttons.
- Do not use pure white or pure black — use #fffce1 and #0e100f.
---
name: "GSAP"
mode: "dark"
---
# GSAP
## Visual theme and atmosphere
GSAP is a dark-canvas design language built for a motion library: a near-black stage where massive cream type, thin outlined pill buttons, and individually color-coded category labels create a typographic showcase rather than a traditional marketing site. Color functions as taxonomy, not decoration — each animation discipline (GSAP core, SVG, Scroll, Text, UI) wears its own vivid hue. Typography is the hero: a single sans-serif (Mori) at six weights, pushing to 224px for the main headline with aggressive negative tracking and near-1.0 line-height, so words feel carved rather than laid out. Buttons are almost exclusively ghost-pills with 100px radius and hairline cream borders — there are no filled CTAs.
Animated chalkboard in a design studio. A near-black wall, warm cream chalk, and five color-coded highlighters — one for each animation discipline.
## Color palette and roles
- **Light Green (#abff84)**: Green text accent for links, tags, and emphasized short phrases — do not promote it to the primary CTA color.
- **Core Green (#dfffd1)**: Subtle brand-tinted background washes for feature cards tied to the GSAP core.
- **Orangey (#ff8709)**: SVG category label, orange-tool icon fills, gradient endpoint in Orange Crush.
- **Pink (#fec5fb)**: Scroll category label, decorative splashes, gradient endpoint in Summer Fair.
- **Lilac (#9d95ff)**: Text category label, thin illustrative strokes, gradient endpoint in Purple Haze.
- **Blue (#00bae2)**: UI category label, gradient endpoint in Skyfall and Emerald City.
- **Lipstick Pink (#f100cb)**: Deep gradient stop for expressive decorative gradients, not used for text or UI.
- **Just Black (#0e100f)**: Page canvas, footer surface, deep section backgrounds.
- **Off Black (#191919)**: Alternative dark surface for nested panels and code blocks.
- **Surface 25 (#42433d)**: Hairline borders, dividers, low-contrast outlines against the black canvas.
- **Surface 50 (#7c7c6f)**: Muted secondary text, icon fills at rest, subhead annotations, disabled-state labels.
- **Surface Cream (#fffce1)**: Primary text, outlined button borders, nav links, card text, the default surface-light for ghost controls and headings.
## Typography rules
- **Display**: Mori, 600, 224px. Hero headline — carved, massive, line-height 0.9, -0.02em tracking. Fallback: Inter Tight, Söhne, or DM Sans..
- **Body**: Mori, 400, 19px. Body text and UI labels, line-height 1.15..
- **Label**: Mori, 600, 18px. Button text and section heads..
## Spacing and shape
- Base unit: 4px.
- Default gap: 16px.
- Card padding: 24px.
- Section padding: 80px.
- Card corners: 8px.
- Control corners: 8px.
- Pills: 100px.
## Motion
Use expressive motion. Fast feedback lasts 100ms; composed transitions last 500ms; easing is cubic-bezier(0.22, 1, 0.36, 1).
## Guardrails
- Render every button as a 100px-radius ghost pill with 1px cream border.
- Push hero headline to 224px weight 600 with line-height 0.9.
- Do not add filled solid-color CTA buttons.
- Do not use pure white or pure black — use #fffce1 and #0e100f.
---
name: "GSAP"
mode: "dark"
---
# GSAP
## Visual theme and atmosphere
GSAP is a dark-canvas design language built for a motion library: a near-black stage where massive cream type, thin outlined pill buttons, and individually color-coded category labels create a typographic showcase rather than a traditional marketing site. Color functions as taxonomy, not decoration — each animation discipline (GSAP core, SVG, Scroll, Text, UI) wears its own vivid hue. Typography is the hero: a single sans-serif (Mori) at six weights, pushing to 224px for the main headline with aggressive negative tracking and near-1.0 line-height, so words feel carved rather than laid out. Buttons are almost exclusively ghost-pills with 100px radius and hairline cream borders — there are no filled CTAs.
Animated chalkboard in a design studio. A near-black wall, warm cream chalk, and five color-coded highlighters — one for each animation discipline.
## Color palette and roles
- **Light Green (#abff84)**: Green text accent for links, tags, and emphasized short phrases — do not promote it to the primary CTA color.
- **Core Green (#dfffd1)**: Subtle brand-tinted background washes for feature cards tied to the GSAP core.
- **Orangey (#ff8709)**: SVG category label, orange-tool icon fills, gradient endpoint in Orange Crush.
- **Pink (#fec5fb)**: Scroll category label, decorative splashes, gradient endpoint in Summer Fair.
- **Lilac (#9d95ff)**: Text category label, thin illustrative strokes, gradient endpoint in Purple Haze.
- **Blue (#00bae2)**: UI category label, gradient endpoint in Skyfall and Emerald City.
- **Lipstick Pink (#f100cb)**: Deep gradient stop for expressive decorative gradients, not used for text or UI.
- **Just Black (#0e100f)**: Page canvas, footer surface, deep section backgrounds.
- **Off Black (#191919)**: Alternative dark surface for nested panels and code blocks.
- **Surface 25 (#42433d)**: Hairline borders, dividers, low-contrast outlines against the black canvas.
- **Surface 50 (#7c7c6f)**: Muted secondary text, icon fills at rest, subhead annotations, disabled-state labels.
- **Surface Cream (#fffce1)**: Primary text, outlined button borders, nav links, card text, the default surface-light for ghost controls and headings.
## Typography rules
- **Display**: Mori, 600, 224px. Hero headline — carved, massive, line-height 0.9, -0.02em tracking. Fallback: Inter Tight, Söhne, or DM Sans..
- **Body**: Mori, 400, 19px. Body text and UI labels, line-height 1.15..
- **Label**: Mori, 600, 18px. Button text and section heads..
## Spacing and shape
- Base unit: 4px.
- Default gap: 16px.
- Card padding: 24px.
- Section padding: 80px.
- Card corners: 8px.
- Control corners: 8px.
- Pills: 100px.
## Motion
Use expressive motion. Fast feedback lasts 100ms; composed transitions last 500ms; easing is cubic-bezier(0.22, 1, 0.36, 1).
## Guardrails
- Render every button as a 100px-radius ghost pill with 1px cream border.
- Push hero headline to 224px weight 600 with line-height 0.9.
- Do not add filled solid-color CTA buttons.
- Do not use pure white or pure black — use #fffce1 and #0e100f.
---
name: "GSAP"
mode: "dark"
---
# GSAP
## Visual theme and atmosphere
GSAP is a dark-canvas design language built for a motion library: a near-black stage where massive cream type, thin outlined pill buttons, and individually color-coded category labels create a typographic showcase rather than a traditional marketing site. Color functions as taxonomy, not decoration — each animation discipline (GSAP core, SVG, Scroll, Text, UI) wears its own vivid hue. Typography is the hero: a single sans-serif (Mori) at six weights, pushing to 224px for the main headline with aggressive negative tracking and near-1.0 line-height, so words feel carved rather than laid out. Buttons are almost exclusively ghost-pills with 100px radius and hairline cream borders — there are no filled CTAs.
Animated chalkboard in a design studio. A near-black wall, warm cream chalk, and five color-coded highlighters — one for each animation discipline.
## Color palette and roles
- **Light Green (#abff84)**: Green text accent for links, tags, and emphasized short phrases — do not promote it to the primary CTA color.
- **Core Green (#dfffd1)**: Subtle brand-tinted background washes for feature cards tied to the GSAP core.
- **Orangey (#ff8709)**: SVG category label, orange-tool icon fills, gradient endpoint in Orange Crush.
- **Pink (#fec5fb)**: Scroll category label, decorative splashes, gradient endpoint in Summer Fair.
- **Lilac (#9d95ff)**: Text category label, thin illustrative strokes, gradient endpoint in Purple Haze.
- **Blue (#00bae2)**: UI category label, gradient endpoint in Skyfall and Emerald City.
- **Lipstick Pink (#f100cb)**: Deep gradient stop for expressive decorative gradients, not used for text or UI.
- **Just Black (#0e100f)**: Page canvas, footer surface, deep section backgrounds.
- **Off Black (#191919)**: Alternative dark surface for nested panels and code blocks.
- **Surface 25 (#42433d)**: Hairline borders, dividers, low-contrast outlines against the black canvas.
- **Surface 50 (#7c7c6f)**: Muted secondary text, icon fills at rest, subhead annotations, disabled-state labels.
- **Surface Cream (#fffce1)**: Primary text, outlined button borders, nav links, card text, the default surface-light for ghost controls and headings.
## Typography rules
- **Display**: Mori, 600, 224px. Hero headline — carved, massive, line-height 0.9, -0.02em tracking. Fallback: Inter Tight, Söhne, or DM Sans..
- **Body**: Mori, 400, 19px. Body text and UI labels, line-height 1.15..
- **Label**: Mori, 600, 18px. Button text and section heads..
## Spacing and shape
- Base unit: 4px.
- Default gap: 16px.
- Card padding: 24px.
- Section padding: 80px.
- Card corners: 8px.
- Control corners: 8px.
- Pills: 100px.
## Motion
Use expressive motion. Fast feedback lasts 100ms; composed transitions last 500ms; easing is cubic-bezier(0.22, 1, 0.36, 1).
## Guardrails
- Render every button as a 100px-radius ghost pill with 1px cream border.
- Push hero headline to 224px weight 600 with line-height 0.9.
- Do not add filled solid-color CTA buttons.
- Do not use pure white or pure black — use #fffce1 and #0e100f.
