---
title: "Made With Gsap design system"
variant: extended
source: https://madewithgsap.com/
captured_at: 2026-10-12
theme: dark
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/madewithgsap-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Made With Gsap · Design System

> A quiet monochrome stage for expressive motion.

**Theme:** dark · **Industry:** devtools · **Source:** https://madewithgsap.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Made With Gsap presents a curated library of JavaScript motion effects through a spacious, high-contrast interface. Oversized typography and animated media lead the experience, while a restrained lime CTA supplies a single vivid accent.

## North star

Keep the interface quiet and spacious so animated previews and oversized type carry the visual energy.

## Overview

The page uses a restrained monochrome foundation: a white opening canvas gives way to long near-black sections, with white and muted gray text defining hierarchy. A small lime pill is reserved for the primary join action, rather than spreading accent color throughout the interface. LayGrotesk carries the expressive work: large, tightly tracked headlines sit alongside readable body copy, while PPNeueMontrealMono gives navigation and utility labels a compact, uppercase, technical character. The hero is unusually open, placing a dark motion preview between widely separated headline fragments and leaving generous space around it. Farther down, centered explanatory copy and interface previews sit within the dark field; later feature cards and a pale latest-effects panel create contrast without changing the minimal visual language. Media previews are the main source of imagery and color variation, so keep their framing clean and let the effects provide movement. Rounded pills, soft card corners and subtle transitions temper the otherwise flat, editorial layout.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Ink | `#0a0a0b` | `--color-midnight-ink` | brand | Near-black canvas for the long explanatory and feature sections; also anchors dark text and hairline-like boundaries. |
| Soft Ash | `#999999` | `--color-soft-ash` | neutral | Muted supporting copy and secondary links, including the tutorial link and lighter headline emphasis. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Opening hero canvas, text on dark sections, and the pale feature-card and preview surfaces. |
| Media Black | `#000000` | `--color-media-black` | neutral | Dark media-preview interiors; treat as content framing, not a separate brand surface. |
| Electric Lime | `#c9fe6e` | `--color-electric-lime` | accent | Primary JOIN pill in the navigation; keep this vivid accent rare. |

### Semantic aliases

`--color-canvas` → `#0a0a0b` (Midnight Ink) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#000000` (Media Black) · `--color-text` → `#ffffff` (Gallery White) · `--color-text-muted` → `#999999` (Soft Ash) · `--color-text-subtle` → `#0a0a0b` (Midnight Ink) · `--color-border` → `#0a0a0b` (Midnight Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#0a0a0b` | 19.79:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#999999` | `#0a0a0b` | 6.95:1 | AA |
| `#999999` | `#ffffff` | 2.85:1 | fail |
| `#999999` | `#000000` | 7.37:1 | AAA |
| `#0a0a0b` | `#ffffff` | 19.79:1 | AAA |
| `#0a0a0b` | `#000000` | 1.06:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| LayGrotesk | `--font-body` | webfont | 500, 700 | Display and editorial text, headings, body copy, and prominent text links. | Inter |
| PPNeueMontrealMono | `--font-mono` | webfont | 500 | Navigation, captions, technical labels, and compact interface metadata. | Space Mono |

- **LayGrotesk:** Medium-weight display and body; headlines use tight negative tracking. Keep case natural rather than forcing uppercase.
- **PPNeueMontrealMono:** Medium weight, small uppercase utility text with neutral tracking; use for navigation and labels rather than paragraphs.

### Type scale — Custom (ratio ≈ 1.693, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 250px | 500 | 0.8 | -0.04em | — | LayGrotesk | Oversized campaign-scale display lettering in motion-led moments. |
| h1 | 120px | 500 | 0.95 | -0.02em | — | LayGrotesk | Primary hero headline and major page statements. |
| h2 | 48px | 500 | 1.02 | -0.02em | — | LayGrotesk | Section-level editorial headings and feature statements. |
| h3 | 47.5px | 500 | 1.02 | -0.02em | — | LayGrotesk | Feature and supporting section headings. |
| h4 | 44px | 700 | 1.2 | 0 | — | LayGrotesk | Strong card titles and compact feature headlines. |
| body | 18px | 500 | 1.4 | 0 | — | LayGrotesk | Explanatory copy, descriptions, and supporting links. |
| caption | 13px | 500 | 1.49 | 0 | uppercase | PPNeueMontrealMono | Uppercase technical labels and small section metadata. |
| nav | 13px | 500 | 1.62 | 0 | uppercase | PPNeueMontrealMono | Uppercase navigation items and compact utility controls. |
| code | 13px | 500 | 1.49 | 0 | uppercase | PPNeueMontrealMono | Small uppercase effect metadata and technical labels. |

OpenType features in use: `"cswh", "dlig", "hlig", "kern", "liga", "ss02"`.

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 3, 5, 6, 10, 13, 14, 15, 16, 18, 25, 50, 62, 70, 87, 124, 180 px.
- Section rhythm 180px · element gap 15px · card padding — · max content width 688px.

The opening section is a broad white canvas with navigation at the top, a centered dark media preview, and headline fragments aligned far to either side. Supporting copy and an exploration cue sit low in the hero. The page then changes to long, near-black bands with centered explanatory content, embedded interface imagery, and later feature cards. A pale latest-effects panel interrupts the dark run. Layouts feel spacious and editorial rather than densely packed; use the measured 688px page max width where content is constrained, while keeping hero media and section backgrounds broad.

## Shape & elevation

- Radius: button `50%` · card `20px` · media `4px` · nav `9999px` · link `9999px` · xs `4px` · sm `20px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s ease` on interactive elements.

The interface is mostly flat, with contrast between light and dark section surfaces doing the structural work. There are no measured shadows. Use rounded pill controls, gently rounded feature cards, and slightly rounded media framing; rely on overlap and surface contrast for depth instead of adding conspicuous borders or elevation.

## Imagery

Use animated effect previews as the page’s primary imagery: framed website snippets, interaction demos, and small interface showcases. In the hero, keep a single dark media window prominent against white space; later previews can sit inside pale cards or dark embedded panels. Media may contain its own colors, so preserve the monochrome shell and avoid treating screenshot colors as brand accents.

## Components

### Floating navigation

Compact uppercase mono links sit in a pale rounded pill near the top right; pair them with a separate lime JOIN pill and restrained brand text.

### Hero motion preview

A centered, dark framed media window sits between widely separated headline phrases on a large white canvas.

### Scroll exploration cue

Place a small uppercase mono drag-to-explore instruction near the lower edge of the opening section.

### Dark editorial section

Use near-black full-width bands with white centered headings, muted explanatory copy, and generous separation around embedded previews.

### Feature preview cards

Arrange preview imagery in softly rounded light cards, with concise titles and small explanatory text beneath.

### Latest effects panel

Contrast the dark page with a pale panel, oversized two-line heading, media previews, and compact effect metadata.

### Measured component styles

- **Primary button** (“JOIN JOIN”): background #c9fe6e · text #0a0a0b · radius 25px · padding 0px 25px · 500 13px PPNeueMontrealMono · uppercase
- **Secondary button**: background #f3f3f3 · text #ffffff · radius 100% · padding 0px · 500 22px LayGrotesk
- **Link** (“Watch the tutorial”): transparent background · text #999999 · radius 0px · padding 0px · 500 18px LayGrotesk
- **Card** (“Meet our easy-to-use plateform”): background #ffffff · text #ffffff · radius 20px · padding 0px · 500 22px LayGrotesk
- **Navigation item** (“COLLECTION 120 COLLECTION 120 PRICING PR”): transparent background · text #0a0a0b · radius 0px · padding 0px · 500 13px PPNeueMontrealMono · uppercase

## Do

- Use near-black and white as the dominant page surfaces.
- Reserve Electric Lime for the primary action.
- Give the hero generous empty space around its media.
- Use LayGrotesk for expressive headlines and body copy.
- Set navigation and utility labels in uppercase mono.
- Let effect previews provide the page’s visual color and motion.

## Don't

- Do not fill the page with additional accent colors.
- Do not compress the hero into a dense conventional banner.
- Do not add conspicuous shadows to otherwise flat surfaces.
- Do not use mono typography for long-form explanatory copy.
- Do not treat colors inside media previews as brand palette.
- Do not make every section use the same background.

## Agent prompt

Build a new page in the Made With Gsap visual style: a spacious editorial shell with a near-black Midnight Ink (#0a0a0b) and Gallery White (#ffffff) foundation. Use Electric Lime (#c9fe6e) only for a primary pill CTA; use Soft Ash (#999999) for muted supporting text. Set expressive headlines and body in a LayGrotesk-like sans, with compact uppercase mono navigation and labels. Keep the hero open, with headline fragments around a centered dark motion preview and supporting copy low in the section. Alternate broad light and dark surfaces to organize content, and use effect demos as the main imagery. Favor rounded pills, softly rounded cards, flat surfaces, and restrained transitions. Avoid extra accent colors, heavy borders, and decorative shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | White full-width hero; top navigation, centered dark preview, split headline phrases, and low edge copy. | drag to explore, primary join action, preview-led discovery | floating pill navigation, centered media frame, oversized editorial type, uppercase mono cue |
| 2 | feature-split | Near-black editorial section with centered explanatory text and a large embedded product-interface preview. | explain the collection, show interface in context | centered copy, dark canvas, large framed preview, muted supporting text |
| 3 | logo-cloud | Sparse dark section with a small user/social proof cluster and a horizontal row of brand marks. | social proof, trust by association | avatar cluster, monochrome logo row, generous dark negative space |
| 4 | other | Long, near-black, media-led section with a single-column overall structure and ample breathing room. | browse visual examples, discover effects through motion | dark background, embedded effect media, minimal surrounding chrome |
| 5 | feature-grid | Centered heading above a multi-column row of light media cards with concise text underneath. | scan workflow benefits, watch tutorial | rounded preview cards, centered heading, small supporting copy |
| 6 | content-feed | Pale contrasting section with centered oversized heading, paired media previews, and compact metadata. | browse recent additions, open an effect | light panel, two-line display heading, media tiles, compact metadata pill |
| 7 | cta | Near-black closing section with a widely tracked central prompt and three-column composition. | prompt next action, encourage animation creation | dark canvas, spaced display lettering, multi-column composition |

## Source CSS custom properties (selected)

```css
--text-grey: #777;
--mwg2-radius-l: 20px;
--mwg2-radius-m: 12px;
--mwg2-radius-s: 4px;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/madewithgsap-com