---
version: alpha
name: "SolidJS"
website: "https://www.solidjs.com"
description: >-
  A fine-grained reactive framework whose marketing site pairs a proprietary geometric sans-serif named Gordita against a dark navy-to-mid-blue gradient hero, with pale-steel blue shapes and cards filling the mid-page. The brand colors are a family of slate blues — the themeColor is a muted navy, while the button CTA uses a brighter cornflower blue. Below the fold the page whitens and the blue recedes; the overall palette reads as a quieter, more academic counterpart to React's utility-neutral whites.

seo:
  title: "SolidJS Design System for React — steel blue on white, Gordita, 16 components"
  metaDescription: "SolidJS's marketing design system: Gordita sans-serif, a steel-blue brand palette spanning dark navy to cornflower, 24px pill radius, and a uncluttered-white below-fold canvas. Tokens for React, Next.js, and AI tools."
  highlights:
    - "Gordita as proprietary identity — a geometric sans used across all tiers (display, body, label, mono fallback) at weights 400-700, giving the site a distinct voice versus Inter/Roboto defaults"
    - "Blue-family brand ladder — three distinct blues from dark navy (#2c4f7c) to medium steel (#446b9e) to cornflower button (#4f88c6); the whole page is within a single hue family"
    - "24px pill radius as dominant — the most-used radius at 21 occurrences, treating buttons and section chips as fully-rounded capsules while inner surfaces stay at 4-8px"
    - "White below-fold canvas — the hero is dark-gradient, but 80% of the page is on a white or near-white surface with the blue palette used for accents only"
    - "Monospace as syntax highlight only — Menlo/Monaco mono appears exclusively in the embedded live code editor; Gordita handles every marketing surface"
  tags:
    - "Developer Tools & IDEs"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    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.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.solidjs.com"
      title: "SolidJS — official site"
      description: "SolidJS's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "solidjs-brand-color"
      title: "What is SolidJS's primary brand color?"
      answer: "SolidJS's themeColor meta tag is set to #2c4f7c — a muted navy blue. The actual primary CTA button uses #4f88c6, a brighter cornflower blue. The brand is best described as a blue-family ladder spanning three steps: the dark navy (#2c4f7c) for the theme meta and deep gradient sections, the medium steel (#446b9e) for gradient highlights and mid-tone accents, and cornflower (#4f88c6) for the primary interactive element. There is no complementary accent — the entire palette stays within a single blue hue family, which reads as restrained and focused rather than expressive."
    - id: "solidjs-typeface"
      title: "What typeface does SolidJS use and what should I substitute?"
      answer: "SolidJS uses Gordita, a proprietary geometric sans-serif, across all tiers of the system — display headings (36px / weight 600), section headings (30px / weight 600), body paragraphs (16px / weight 400), and UI buttons (16px / weight 400). It is not available on Google Fonts or as an open-source download. The closest substitutes are Nunito Sans or Outfit at the same weights for the round, friendly character; DM Sans is a reasonable alternative that skews slightly more editorial. Inter is too neutral to carry Gordita's warmth. The code surfaces use Menlo/Monaco/Courier New as the browser monospace stack — no custom mono font."
    - id: "solidjs-radius"
      title: "What corner-radius philosophy does SolidJS use?"
      answer: "SolidJS uses a dual-philosophy radius scale. The dominant tier is 24px (21 occurrences) — a pill-capsule shape applied to the primary button, section chips, and larger UI containers. The secondary tier runs 4-8px (8 occurrences each) for smaller interactive elements like badges, inputs, and code chips. A 9999px full-pill value appears for certain tight chips. The 3px value (11 occurrences) handles inline code spans and compact metadata. There is no middle tier at 12-16px — the scale jumps from tight (3-8px) to capsule (24px), giving the page its two-mode character: data-dense small elements paired with large soft containers."
    - id: "solidjs-hero-dark"
      title: "How does SolidJS's dark hero relate to the white below-fold sections?"
      answer: "The hero uses a dark blue gradient (navy to mid-blue) as its canvas, hosting white headline text and a cornflower CTA pill. Below the first fold the page transitions entirely to white, and the blue palette appears only as accent — section headings, link colors, code syntax highlights. This two-tone structure — dark hero, white body — is a different approach than Svelte (all-white) or Vue (all-white with green accents), but less committed than Next.js or Vercel (fully dark). The hero dark canvas signals performance and engineering seriousness; the white below-fold signals documentation-friendly accessibility."
    - id: "solidjs-compared-to-react"
      title: "How does SolidJS's design system compare to React's?"
      answer: "React's marketing site (react.dev) uses Inter across all tiers, a near-white canvas, purple-tinted accents, and a tight 6-8px radius scale that reads as minimal and documentation-focused. SolidJS uses Gordita (a warmer geometric sans), a blue-family brand palette, 24px pill radius for primary UI, and a dark-gradient hero that signals differentiation from the React default. Where React's design leans on neutrality and lets the content lead, SolidJS invests in a visible brand identity — the blue palette and pill radius are recognizable at a glance. For a fine-grained reactive library competing against React's ecosystem, the distinct visual identity is the marketing bet."

mockups:
  - "marketing-hero"
  - "pricing-table"

colors:
  primary: "#4f88c6"
  secondary: "#446b9e"
  tertiary: "#2c4f7c"
  ink: "#000000"
  ink-secondary: "#24292e"
  ink-dark: "#1b1f23"
  ink-muted: "#4b5563"
  canvas: "#ffffff"
  surface-1: "#f3f4f6"
  hairline: "#e5e7eb"
  hairline-inner: "#d1d5db"
  code-red: "#d73a49"
  code-green: "#319331"
  code-blue: "#005cc5"
  code-purple: "#6f42c1"

typography:
  display-xl:
    fontFamily: "Gordita, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\""
    fontSize: 36px
    fontWeight: 600
    lineHeight: 40px
    letterSpacing: 0
  display-md:
    fontFamily: "Gordita, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\""
    fontSize: 30px
    fontWeight: 600
    lineHeight: 36px
    letterSpacing: 0
  heading-lg:
    fontFamily: "Gordita, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\""
    fontSize: 24px
    fontWeight: 600
    lineHeight: 32px
    letterSpacing: 0
  heading-md:
    fontFamily: "Gordita, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\""
    fontSize: 20px
    fontWeight: 600
    lineHeight: 28px
    letterSpacing: 0
  body-lg:
    fontFamily: "Gordita, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\""
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: 0
  body-md:
    fontFamily: "Gordita, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\""
    fontSize: 16px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: 0
  body-sm:
    fontFamily: "Gordita, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\""
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0
  label-md:
    fontFamily: "Gordita, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\""
    fontSize: 16px
    fontWeight: 600
    lineHeight: 24px
    letterSpacing: 0
  label-sm:
    fontFamily: "Gordita, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\""
    fontSize: 14px
    fontWeight: 600
    lineHeight: 20px
    letterSpacing: 0
  caption:
    fontFamily: "Gordita, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\""
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0
  mono-md:
    fontFamily: "Menlo, Monaco, \"Courier New\", monospace"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 23px
    letterSpacing: 0

rounded:
  none: "0px"
  sm: "3px"
  md: "4px"
  lg: "6px"
  xl: "8px"
  2xl: "24px"
  full: "9999px"

spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  base: "16px"
  lg: "20px"
  xl: "40px"
  2xl: "48px"

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xl}"
    padding: "12px 20px"
    height: "48px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xl}"
    padding: "12px 20px"
    height: "48px"
    borderColor: "{colors.hairline}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    padding: "12px 20px"
    height: "48px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "12px 16px"
    height: "48px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.display-xl}"
    padding: "0px"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
    padding: "0px"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    padding: "0px"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.2xl}"
    borderColor: "{colors.hairline}"
    padding: "20px"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.hairline-inner}"
    padding: "8px 16px"
    height: "44px"
  code-block:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.mono-md}"
    rounded: "{rounded.md}"
    padding: "12px 16px"
  feature-chip:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.2xl}"
    padding: "4px 8px"
  stats-number:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "0px"
  testimonial-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.2xl}"
    borderColor: "{colors.hairline}"
    padding: "20px"
  footer:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-sm}"
    padding: "40px 48px"
  logo-chip:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-sm}"
    padding: "4px 0px"
  badge:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: "4px 8px"
---

## Overview

SolidJS's marketing surface makes one clear architectural choice. **Single-Hue Discipline.** Every brand color on the page — hero gradient, primary button, section accents, link tones — lives within the blue family, from dark navy through medium steel to cornflower. Where React, Vue, and Angular use neutral-plus-accent systems (white with purple, white with green, white with red respectively), SolidJS commits fully to one hue at three depths. The result reads as focused and distinctly non-generic for a performance-first framework competing on technical differentiation rather than ecosystem size.

The Gordita typeface is the second identity signal. A round geometric sans with warm counters, it appears at weights 400-700 across display, body, label, and button tiers. No serif, no mono for marketing copy — just one family at varying weights. The hero headline at 36px / weight 600 is notably smaller than Svelte (54px) or Cloudflare (56px), which signals documentation-adjacent sobriety over marketing bravado. The page trusts its framework's benchmarks to do the persuasion.

**Key Characteristics:**
- Single-hue blue brand ladder: dark navy (`{colors.tertiary}`) to steel (`{colors.secondary}`) to cornflower CTA (`{colors.primary}`) — all blues, no complementary accents.
- Gordita sans-serif across every marketing tier at weights 400-600; a warm geometric that feels friendlier than the neutral grotesk defaults.
- Dark gradient hero above the fold; white canvas below — a two-mode page structure.
- 24px as the dominant radius for buttons, section containers, and larger UI chips (21 occurrences).
- Tight 3-8px radius for inline badges, code elements, inputs.
- Monospace font (Menlo/Monaco) scoped entirely to the live code editor; never in marketing surfaces.
- Below-fold canvas is white with a light gray surface tier for feature cards.
- Footer inverts to ink-on-black, the only dark surface below the fold.

## Colors

### Brand

- **Primary** (`{colors.primary}` — ): frequency 4. Used as background (3), gradient (1). The cornflower-blue CTA button — the single brightest blue on the page. Wired as a brand-layer color.
- **Secondary** (`{colors.secondary}` — ): frequency 7. Used as text (4), background (2), gradient (1). Mid-range steel blue; appears in gradient nodes and section accent backgrounds.
- **Tertiary** (`{colors.tertiary}` — ): frequency 6. Used as text (4), border (2). Darkest brand blue; the themeColor value and deep gradient anchor.

### Text

- **Ink** (`{colors.ink}` — ): frequency 283. Used as text (271), shadow (12). Dominant text color across all below-fold prose.
- **Ink Secondary** (`{colors.ink-secondary}` — ): frequency 128. Used as text only. Secondary prose and card body text.
- **Ink Dark** (`{colors.ink-dark}` — ): frequency 13. Used as text only. Darkest ink variant for emphasis text in feature sections.
- **Ink Muted** (`{colors.ink-muted}` — ): frequency 2. Used as text only. Sub-label and metadata color.

### Surface & Hairlines

- **Canvas** (`{colors.canvas}` — ): frequency 57. Used as text (23), background (22), gradient (12). Below-fold page floor.
- **Surface-1** (`{colors.surface-1}` — ): frequency 32. Used as background (11), border (12), shadow (9). Feature card and section fill.
- **Hairline** (`{colors.hairline}` — ): frequency 485. Primarily border (484). The dominant structural border; appears on 484 of 485 measured elements.
- **Hairline Inner** (`{colors.hairline-inner}` — ): frequency 12. Used as border only. Secondary hairline for input fields and tighter borders.

### Code Syntax

- **Code Red** (`{colors.code-red}` — ): frequency 17 (text only). Keyword and operator color in embedded GitHub-style code samples.
- **Code Green** (`{colors.code-green}` — ): frequency 14 (text only). String and success token color.
- **Code Blue** (`{colors.code-blue}` — ): frequency 9 (text only). Variable and attribute color.
- **Code Purple** (`{colors.code-purple}` — ): frequency 7 (text only). Built-in and type color.

## Typography

### Font Family

The system uses **Gordita** exclusively for all marketing surfaces — a proprietary geometric sans-serif with round, friendly counters. The full fallback stack is `Gordita, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`. There is no display serif, no secondary sans family.

**Menlo / Monaco / "Courier New"** appear at 15px / weight 400 exclusively inside the embedded live code editor panel. They do not appear in any marketing copy.

### Hierarchy

| Token | Size | Weight | Line Height | Use |
|---|---|---|---|---|
| `{typography.display-xl}` | 36px | 600 | 40px | Hero h2 headline |
| `{typography.display-md}` | 30px | 600 | 36px | Section h2 headings |
| `{typography.heading-lg}` | 24px | 600 | 32px | Sub-section h2 titles |
| `{typography.heading-md}` | 20px | 600 | 28px | h3 card titles |
| `{typography.body-lg}` | 18px | 400 | 28px | Intro paragraphs |
| `{typography.body-md}` | 16px | 400 | 28px | Standard body prose, nav links, button text |
| `{typography.body-sm}` | 14px | 400 | 20px | Feature cards, table cells |
| `{typography.label-md}` | 16px | 600 | 24px | Button labels, bold link text |
| `{typography.label-sm}` | 14px | 600 | 20px | Badge labels, strong inline text |
| `{typography.caption}` | 12px | 400 | 16px | Table captions, metadata |
| `{typography.mono-md}` | 15px | 400 | 23px | Live code editor only |

### Substitutes

Gordita is proprietary. Nearest open substitutes: **Nunito Sans** at the same weights for the warm rounded geometry; **Outfit** for a slightly tighter but similar character; **DM Sans** for a more editorial feel. Inter is technically correct but too neutral — it will lose Gordita's warmth.

## Layout

### Spacing System

- **Base unit:** 4px.
- **Card padding:** 20px (`{spacing.lg}`), consistent across feature and testimonial cards.
- **Button padding:** 12px vertical / 20px horizontal (`{spacing.md}` × `{spacing.lg}`).
- **Section vertical padding:** 40px standard, 48px for the hero band.
- **Nav padding:** 12px vertical / 16px horizontal.

### Grid & Container

- **Hero:** full-bleed dark blue gradient, centered content column, max-width ~768px.
- **Feature strip:** 4-column icon + label row for key framework properties (Performance, Flexibility, Pragmatism, Productive).
- **Stats bar:** single row of numbered metrics (stars, npm downloads, contributors, sponsors).
- **Feature panels:** alternating two-column layouts (code left / prose right, prose left / visual right).
- **Testimonials:** single-column quote cards.
- **Benchmark section:** performance table vs. React, Vue, Angular, Preact, Inferno.

### Rhythm

The page alternates between white background feature sections and the blue-tinted hero. Each section is bounded by hairline borders or background-color changes rather than vertical whitespace alone.

## Elevation

The system uses a **layered shadow approach** unlike Svelte's flat hairlines. Feature card shadows use the ink color at low opacity (box-shadow with  at 12 occurrences) to lift cards off the white canvas. The shadow scale is subtle — the card elevation reads as a gentle lift, not a dramatic float. Input fields and code elements use hairline borders without shadow.

## Shapes

Two distinct radius modes define the system:

- `{rounded.none}` 0px — editorial sections, hero.
- `{rounded.sm}` 3px — inline code spans and compact badge elements (11 occurrences).
- `{rounded.md}` 4px — nav links, small interactive chips (8 occurrences).
- `{rounded.lg}` 6px — input fields, medium chips (4 occurrences).
- `{rounded.xl}` 8px — buttons, card corners, inputs (8 occurrences).
- `{rounded.2xl}` 24px — dominant pill radius for primary CTAs, feature cards, large containers (21 occurrences — the highest frequency).
- `{rounded.full}` 9999px — tight pill chips.

The binary character (tight 3-8px for small elements, 24px for large containers) is the system's visual signature.

## Components

**`button-primary`** — Cornflower-blue `{colors.primary}` fill, white text, `{rounded.xl}` 8px radius, 12px/20px padding, 48px height. The hero instance links to "Intro to SolidJS (100 seconds)" on YouTube.

**`button-secondary`** — Transparent fill, ink text, hairline border, same dimensions as primary. Used for secondary hero actions.

**`top-nav`** — White canvas, Gordita 16px, 48px height. Navigation links in ink-black, no accent color in nav.

**`nav-link`** — Transparent, ink text, Gordita 16px, 4px radius, 12-16px padding.

**`hero-heading`** — White text on the dark gradient canvas, Gordita 36px / weight 600.

**`section-heading`** — Ink text, Gordita 30px / weight 600.

**`body-paragraph`** — Ink text, Gordita 16px / weight 400, 28px line height.

**`card`** — White canvas, hairline border, 24px radius, 20px padding. Used for feature cards throughout the below-fold sections.

**`text-input`** — White canvas, hairline-inner border, Gordita 14px, 6px radius, 8-16px padding.

**`code-block`** — Surface-1 fill, Menlo mono 15px, 4px radius, code syntax using the red/green/blue/purple token set.

**`feature-chip`** — Surface-1 fill, Gordita 12px, 24px radius, 4-8px padding. Used for category labels (Performance, Flexibility, etc.).

**`testimonial-card`** — White canvas, hairline border, 24px radius, 20px padding.

**`stats-number`** — Ink text, Gordita 36px / weight 600. Used for the benchmark numbers row.

**`badge`** — Surface-1 fill, label-sm typography, 3px radius. Inline metadata labels.

**`footer`** — Ink fill, white text, Gordita 14px, 40-48px padding.

## Do's and Don'ts

**Do** stay within the blue hue family for all brand accents. The system has no complementary warm or green accent; introducing one breaks the single-hue discipline that distinguishes SolidJS from React and Vue.

**Do** use the 24px radius for primary buttons and larger card containers. The capsule shape at `{rounded.2xl}` is the dominant visual move — 21 occurrences make it the system's calling card. Smaller elements should stay at 3-8px.

**Do** use Gordita at weight 600 for headings and weight 400 for body. The weight contrast between the two tiers (400 to 600) is moderate — avoid 700 or 800 which would push the page toward bold-display territory the system explicitly avoids.

**Do** keep the hero dark gradient and the below-fold white canvas as two distinct zones. The page's two-mode structure (dark hero / white body) is architectural; flattening both to white loses the visual weight that makes the hero landing feel like an entry point.

**Don't** use `{colors.code-red}`, `{colors.code-green}`, `{colors.code-blue}`, or `{colors.code-purple}` outside code blocks. These are GitHub-style syntax highlight colors borrowed for the embedded code samples — they are not brand accents. Using red in a status badge or green in a success notification would feel off-model.

**Don't** add a second typeface family. Gordita alone handles every tier; introducing a serif for headings or a different sans for captions would fragment the mono-family warmth that differentiates SolidJS from the Inter-everywhere defaults.

**Don't** reduce button radius below 8px. The system's smallest button radius is `{rounded.xl}` 8px; going tighter (4px or less) creates a sharp UI feel that contradicts the Gordita warmth and the 24px capsule dominance.

**Don't** use the dark gradient background below the fold. The hero gradient (navy → mid-blue) is confined to the above-fold section; everything below uses white. Extending the gradient into feature sections would flatten the two-mode architecture that makes the scroll feel like entering the documentation.

## Known Gaps

- **Hero gradient exact values:** the dark blue gradient uses  and  as gradient nodes but the exact direction, angle, and stop positions are not captured in the extracted tokens.
- **Hover states:** button hover behavior is not captured; the primary button likely shifts to a slightly darker cornflower, but this is not measured.
- **Animation:** the pale blue 3D blob shapes in the hero appear to animate (floating or rotating); motion timing and easing are not captured.
- **Dark mode:** the site appears to have no dark-mode variant; the system is light-first throughout.
- **Icon system:** the feature-strip icons (Performance, Flexibility, etc.) use SVG illustrations; their color tokens and stroke widths are not captured.
- **SolidStart surfaces:** the SolidStart meta-framework has a distinct docs surface; this file covers solidjs.com only.
- **Mobile breakpoints:** nav collapse behavior and responsive padding adjustments below 768px are not represented.