SolidJS Design System

SolidJS's marketing site opens on a dark gradient hero — navy transitioning to mid-blue — with a geometric sans-serif headline ("Simple and performant reactivity for building user interfaces.") set in Gordita at 36px weight 600. The primary CTA is a cornflower-blue pill button leading to a 100-second video. Surrounding it, pale-steel 3D-rendered shape decorations (teardrop blobs and geometric tiles in varying blue transparencies) give the hero depth without the code-first austerity that frameworks like Angular or Preact lean on. It reads as the most approachable entry point in the fine-grained reactive space.

The system's whole identity lives within a single hue: blue. The brand ladder spans from a muted navy (#2c4f7c, the themeColor meta tag) through steel (#446b9e, section backgrounds and gradient node) to cornflower (#4f88c6, the primary button fill). Below the hero fold, the page washes to white and blue retreats to section headings, code syntax highlights, and link accents. The navigation at top runs on white with black ink, using Gordita at 16px weight 400 for link text — distinctly warmer than the cold grays that Preact or Qwik deploy.

For teams adopting SolidJS's aesthetic in React, the operative token is the pill radius: the 24px capsule at 21 occurrences tells you this is a friendly, rounded system. Pair that with Gordita (or its nearest substitute) at weight 600 for headings and 400 for body, and a blue-family accent ladder that stays within a single hue rather than mixing complementary colors. The library's performance-first ethos shows up more in the code than in the design — the visual identity is warmer and more accessible than you might expect from a framework that beats React in benchmarks.