Skip to content
Library

Made With Gsap. Editorial ink on warm concrete.

  • Developer tools
  • Light theme
  • 7 colors
  • 1 typeface

Made With Gsap is a high-contrast editorial showcase built on a near-monochrome canvas: warm light-gray surfaces against ink-black type at near-architectural scale. A single vivid lime accent (#c9fe6e) acts as the only chromatic note, used sparingly for CTA fills, active borders, and hover states. The visual system is typographically driven — display headlines reach 100-250px with aggressively tight tracking and line-heights under 0.90, letting the words themselves become composition. Cards, dividers, and frames keep radii at 2-12px (nearly sharp), and the page alternates between the light canvas and full-bleed dark demo cards that invert the palette. Everything else is restraint: thin borders, compact spacing, no shadows, no gradients, and one custom geometric grotesk doing all the work.

Screenshot of Made With Gsap
Captured from madewithgsap.com on October 11, 2026

Made With Gsap design system

Made With Gsap

Brand1

  • Primary CTA fill, active border accent, highlight tags — the only chromatic note in an otherwise monochrome system, used at 1-2 instances per viewport to make actions feel switched on

Neutrals6

  • Primary text, heading borders, nav borders, dark demo-card surfaces, icon strokes — the dominant structural color across the system

  • Deep SVG fills, dark interior backgrounds for inverted panels

  • Card borders, elevated surface edges — one step lighter than Ink for layered card frames

  • Muted body copy, secondary metadata, inactive borders

  • Page canvas, card surfaces, light borders, inverted text on dark — the base background layer every other element sits on

  • Inverted text on dark cards, light link borders, occasional white surfaces

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Ink on Lime Voltage

15.96 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictPasses AAA 7

More DESIGN.md files. Same web, different personalities.