GSAP
A dark, high-contrast developer-brand interface built on a near-black canvas (#0e100f) with warm cream ink (#fffce1) and oversized Mori display type. The system reads as confident, playful, and engineering-led — enormous wordmark-scale headlines, a tight monochrome core punctuated by a vivid multi-hue accent set (orange, lime-green, pink, violet, cyan) drawn from GSAP's plugin branding, square/no-radius primary CTAs alongside fully-pill outline buttons, and decorative 3D gradient shapes floating over the hero. Brand voltage comes from scale and the saturated accent palette, not from surface variety.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
h1
32px · 400 · 1.15
The quick brown fox jumps
h2
24px · 400 · 1.15
The quick brown fox jumps
h3
18.72px · 400 · 1.15
The quick brown fox jumps
h4
18px · 600 · 1.2
The quick brown fox jumps
body
14px · 400 · 1.4
The quick brown fox jumps
button
18px · 600 · 1.05
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 5px | |
| xs | 7px | |
| sm | 8px | |
| base | 10px | |
| md | 16px | |
| lg | 18px | |
| xl | 24px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| sm | 7px | |
| md | 8px | |
| pill | 100px |
FAQ
- What colors does GSAP use?
- GSAP's core palette includes #fffce1, #0e100f, #7c7c6f, #bbbaa6, #fec5fb. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the GSAP DESIGN.md.
- What font does GSAP use?
- GSAP's primary typeface is Mori. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
- What is the GSAP design system?
- A dark, high-contrast developer-brand interface built on a near-black canvas (#0e100f) with warm cream ink (#fffce1) and oversized Mori display type. The system reads as confident, playful, and engin…