SolidJS Design System

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

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.