← Gallery

threejs.org

The JavaScript 3D library that powers most of the web's WebGL. threejs.org's landing page is known to use Three.js (not auto-detected on the landing page) and set in Roboto Mono. Its palette centers on #0000EE, #444444, #049EF4.

Screenshot of threejs.org Visit threejs.org ↗ Analyze it yourself →

Color palette

#0000EE
#444444
#049EF4
#9E9E9E

What we detected

Detected animation / 3D librariesNone detected on the landing page
Also known to use (from the site itself; not auto-detected)Three.js
FontsRoboto Mono
Mobile-readyYes (viewport meta present)
Structured data (JSON-LD)Not found
Social profiles linkedX / Twitter, YouTube, GitHub
Images on landing page244
Links on landing page264
Load time (our browser)0.5s

Use this palette as CSS variables

:root {
  --threejs-color-1: #0000EE;
  --threejs-color-2: #444444;
  --threejs-color-3: #049EF4;
  --threejs-color-4: #9E9E9E;
  --threejs-font: "Roboto Mono", system-ui, sans-serif;
}

Rebuild something in this style with Claude

Paste this into Claude Code, Claude, ChatGPT or Cursor with Enrichr connected. It borrows the system, not the content: your copy, your brand, threejs.org's rhythm.

Use Enrichr to extract the design system from https://threejs.org.
Write tokens.css from the captured values (palette, type scale,
spacing, radii, easings), then build a hero in that style using
my own copy. List anything you had to guess.

threejs.org design FAQ

What font does threejs.org use?

threejs.org's landing page loads Roboto Mono. A font you can see on a site is licensed to that site, so check the foundry's terms or pick a free alternative before using it yourself.

What colors does threejs.org use?

The most used colors on threejs.org's landing page are #0000EE, #444444, #049EF4, #9E9E9E, ranked by how often they appear in the rendered page.

Does threejs.org use GSAP, Three.js or another animation library?

threejs.org is known to use Three.js, though it wasn't auto-detected on the landing page in our capture.

How do I get threejs.org's full design system?

Connect Enrichr to Claude, ChatGPT or Cursor and ask for the design system of https://threejs.org. It captures the rendered page and returns the full token set (type scale, spacing, radii, easings) plus animation timings and any WebGL shaders.

This is only the surface. A full Enrichr capture of threejs.org would also recover exact animation timings and easing, WebGL shaders and the 3D scene graph, the complete design-token set and any source maps — delivered to Claude as a brief it can rebuild from.
Try it free — 25 credits a month →

More from the gallery

gsap.comlenis.darkroom.engineeringstripe.comlinear.app

Captured 2026-09-29 from the site's public landing page. Only publicly observable information is shown, and it can change as the site does. All names and trademarks belong to their owners; Enrichr is not affiliated with threejs.org.

Gallery Account Pricing Connect Claude Connect Cursor Blog Free tools Compare