Prism prismd.fr

Extracted · 10 sections · 32 colors · grade C

solidjs.com

Accent #5e6ad2 · Gordita — chaque valeur ci-dessous est mesurée via getComputedStyle(), jamais affirmée à la main.

colors

faces

shadows

keyframes

Get DESIGN.md tokens.json Repeindre ce design

rendu réel · source de vérité

solidjs.com is built on a pure-white canvas (rgb(255, 255, 255)). The system uses rgb(68, 107, 158) as the accent for primary actions and brand signals. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside Gordita as the primary typeface. A layered elevation system (4 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 15 keyframe animations plus transition-driven interactions.

Color — roles, semantics & the full census

32 colors measured · click any swatch to copy

Canvas

#ffffff

AAA 18.88:1

Ink

#111111

AAA 18.88:1

Accent

#446b9e

AA 5.47:1

Line

#e5e5e5

Fail 1.26:1

Semantic states

No semantic state colors detected — this system signals state through weight & motion, not hue.

32 colors mined from the live renderexpand

Type — the ladder, in the real face

5 roles · rendered live in the real Inter (captured woff2) · lines are editable, click any spec to copy

display xl

display-xl36px · 600

display md

display-md20px · 600 · ×1.80

body

body16px · 400 · ×1.25

button

button15px · 400 · ×1.07

mono

mono15px · 400 · ×1.00

Spacing & radius, made spatial

9 spacing steps · 7 radii · bars are exact px widths

Spacing scale

xxs · 2px

xs · 8px

sm · 12px

md · 20px

base · 32px

lg · 40px

xl · 48px

2xl · 64px

3xl · 80px

Radius

none
0px

xs
4px

sm
8px

md
24px

lg
9999px

xl
10007px

full
9999px

Depth — elevation is extracted, not invented

4 box-shadows measured on the live page · click a tile to copy its raw value

shadow-1

shadow-2

shadow-3

shadow-4

Motion — easings, transitions & live keyframes

1 easing curve · 15 keyframes · hover a tile to preview

Easing & transitions

transition-2cubic-bezier(0.4, 0, 0.2, 1)

15 keyframe animations extracted

spin

reveal-delay

Page-Loading-Bar

monaco-cursor-smooth

monaco-cursor-phase

monaco-cursor-expand

monaco-findInput-highlight-0

monaco-findInput-highlight-1

monaco-findInput-highlight-dark-0

monaco-findInput-highlight-dark-1

progress

fadeIn

Components — the closed vocabulary

6 component families · 34 variants counted on the live DOM

Component	Variants found
buttons	×10
links	×10
nav Links	×6
heading H2	×5
heading H3	×2
inputs	×1

Component style specs (§4)expand

Buttons

Outline

Background: transparent {colors.hairline}
Text: #446b9e {colors.primary}
Padding: 0px 12px
Radius: 6px
Border: 1px solid rgb(229, 231, 235)
Font: 16px weight 400
Use: Secondary action with border

Primary Brand

Background: #eab308 {colors.primary-hover}
Text: #ffffff {colors.on-primary}
Padding: 12px
Radius: 0px
Font: 15px weight 400
Use: Primary CTA / brand action

Primary Brand

Background: #446b9e {colors.primary}
Text: #ffffff {colors.on-primary}
Padding: 12px 20px
Radius: 8px
Font: 16px weight 400
Use: Primary CTA / brand action

Primary Brand

Background: #4f88c6
Text: #ffffff {colors.on-primary}
Padding: 12px 20px
Radius: 8px
Font: 16px weight 400
Use: Primary CTA / brand action

Ghost

Background: transparent {colors.hairline}
Text: #000000
Padding: 12px 16px
Radius: 4px
Font: 16px weight 400
Use: Subtle action, toolbar, nav button

Icon Button

Background: transparent {colors.hairline}
Text: #000000
Padding: 16px 24px 0px 16px
Radius: 6px
Border: 1px solid rgb(229, 231, 235)
Font: 14px weight 400
Use: Toolbar/UI icons

Subtle

Background: rgba(226, 232, 240, 0.5) {colors.surface-2}
Text: #446b9e {colors.primary}
Padding: 20px
Radius: 8px
Font: 18px weight 400
Use: Quiet action against page bg

Layout — structure & dimensions

4 layout metrics measured

max Width1200px

header Height728px

sidebar Width0px

container Padding0px

Responsive — real breakpoints

5 media-query stops read from the live CSS

640px

768px

1024px

1280px

1536px

Do's & Don'ts

18 enforceable rules pulled verbatim from the spec

Use Gordita as the primary typeface — it defines the brand personality

Keep font weights between 400-600 — the system uses a narrow weight range for subtle hierarchy

Use the extracted shadow patterns for elevation — they are tuned to match the brand palette

Use full-pill radius (9999px) only for specific elements (avatars, pills, toggles)

Use Steel Blue (`#446b9e`) as the primary accent — it's the brand's signature interactive color

Maintain nav height at 64px — consistent vertical space for the navigation bar

Make the hero full-viewport (≥70% screen height) — this design uses an immersive hero, not a tall navbar

Build the hero as a split layout with media on the right — text and visual share equal weight

Include exactly 3 CTAs in the hero (primary + secondary) — this design pattern is multi-action, not single-purpose

Each card includes a top image — imagery is part of the card identity, not optional

Use a 5-column grid on desktop — density matters for this content type

Don't

Don't substitute with generic sans-serif or serif — the custom font carries the brand

Don't use weight 700 (bold) or above — 600 is the maximum weight in this system

Don't invent new shadow values — use only the extracted shadow levels

Don't apply pill radius on rectangular buttons or cards — it's reserved for specific interactive elements

Don't introduce additional saturated accent colors — the palette is intentionally controlled

Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence

Don't over-build the footer — this design keeps it minimal (1 cols, 0 links)

Agent guide & export

Paste-ready prompt + the real files behind this page

Build a UI in the solidjs.com design system. Canvas #ffffff · ink #111111 · accent #446b9e. Type: Gordita — respect the size/weight ladder in §3. Radius, spacing, shadow: use only the extracted scales (no magic numbers). Full spec follows — paste the DESIGN.md below into your agent.

Every value above was getComputedStyle-verified.

$ npx prismd add solidjs

DESIGN.md · narrative spec tokens.json