Skip to content
Library

Apollographql. A starfield console where orange is the only dial that glows.

  • Developer tools
  • Mixed theme
  • 7 colors
  • 2 typefaces

Apollo uses a deep-space command-center language: a near-black navy canvas anchors every major surface, a star-field line pattern reinforces the cosmic/orchestration metaphor, and one vivid orange does all the shouting. Inter at confident weights (400 for body, 600–700 for headings, 900 for hero) keeps the system feeling developer-native rather than marketing-polished. Components are oversized and generous — testimonial cards, video panels, and feature blocks all carry 24–32px radii and 48px internal padding, making the interface feel more like a product tour than a landing page. The orange #e75e15 is rationed: it colors brand name mentions, one per-screen hero accent, and the pill action button, but never decorates backgrounds or fills cards. Every transition from dark to light surfaces uses the same gray-50 (#efefef) as a neutral floor, creating a predictable rhythm of starfield-dark panels floating on a quiet gray field.

Screenshot of Apollographql
Captured from apollographql.com on October 11, 2026

Apollographql design system

Apollographql

Brand1

  • Orange supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color

Neutrals6

  • Hero background, testimonial card surface, headline text on light surfaces, footer, and the entire dark-mode layer

  • Secondary dark surface for testimonial and profile cards — a slightly lifted step above Cosmic Ink so cards read as separate panels without leaving the dark family

  • Muted dividers, dashed card separators, secondary icon strokes on dark surfaces

  • Hairline borders, section dividers, subtle outline controls on light surfaces

  • Alternate section background that breaks Cloud bands without introducing a different color

  • Page canvas, card surface, input fill — the default light ground

Try a pairing

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

Aa

Cosmic Ink on Signal Orange

4.50 : 1 contrast

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

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