prismdinstrument

EXTRACTED · 9 SECTIONS · 18 COLORS · GRADE C

qwik.dev

Accent #5e6ad2 · Poppins — every value below measured via getComputedStyle(), not asserted by hand.

colors

faces

keyframes

breakpoints

DESIGN.md tokens.json

real render · source of truth

qwik.dev is built on a pure-white canvas (rgb(255,255,255)). The system uses rgb(235, 237, 240) as a near-neutral accent (low saturation). Generously rounded CTAs (40px) suggest approachable, content-first design alongside Poppins as the primary typeface. Depth comes from borders and surface contrast rather than shadows — a flat, structural elevation model. Motion is minimal — a few targeted transitions, no decorative animation.

Color — roles, semantics & the full census

18 colors measured · click any swatch to copy

Canvas

#ffffff

AAA 16.93:1

Ink

#0e201a

AAA 16.93:1

Accent

#ebedf0

Fail 1.17:1

Line

#e5e7eb

Fail 1.24:1

Semantic states

warning#d9d900

1 semantic role found.

18 colors mined from the live renderexpand

Type — the ladder, in the real face

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

display xl

display-xl80px · 600

body

body14px · 500 · ×5.71

body sm

body-sm19.2px · 400 · ×0.73

button

button16px · 500 · ×1.20

Motion — easings, transitions & live keyframes

5 easing curves · 2 keyframes · hover a tile to preview

Easing & transitions

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

transition-3ease-in-out

transition-4cubic-bezier(0.37, 0.01, 0, 0.98)

ease-in-outcubic-bezier(.4,0,.2,1)

ease-outcubic-bezier(0,0,.2,1)

2 keyframe animations extracted

indeterminate-progress-bar

fade-in

Spacing & radius, made spatial

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

Spacing scale

xxs · 2px

xs · 12px

sm · 16px

md · 40px

base · 43px

lg · 48px

xl · 56px

2xl · 64px

3xl · 72px

Radius

none
0px

xs
6px

sm
8px

md
16px

lg
17px

xl
40px

full
9999px

Components — the closed vocabulary

5 component families · 18 variants counted on the live DOM

Component	Variants found
links	×10
buttons	×2
cards	×2
nav Links	×2
footer Links	×2

Component style specs (§4)expand

Buttons

Light / Invert

Background: #ebedf0 {colors.primary}
Text: #006ce9
Padding: 12px
Radius: 40px
Border: 2px solid rgb(0, 108, 233)
Font: 16px weight 500
Use: Bright CTA on dark sections

Icon Button

Background: transparent
Text: #ffffff {colors.background}
Padding: 0px
Radius: 6px
Font: 14px weight 500
Use: Toolbar/UI icons

Secondary

Background: #1d2023
Text: #ffffff {colors.background}
Padding: 14px 25px
Radius: 8px
Font: 16px weight 500
Use: Secondary action

Primary Brand

Background: #ac7ef4
Text: #ffffff {colors.background}
Padding: 15px 35px
Radius: 8px
Font: 16px weight 600
Use: Primary CTA / brand action

Primary Brand

Background: #31adf6
Text: #ffffff {colors.background}
Padding: 15px 35px
Radius: 8px
Font: 16px weight 400
Use: Primary CTA / brand action

Primary Brand

Background: #18b6f6
Text: #ffffff {colors.background}
Padding: 15px 35px
Radius: 8px
Font: 16px weight 400
Use: Primary CTA / brand action

Layout — structure & dimensions

4 layout metrics measured

max Width1400px

header Height80px

sidebar Width0px

container Padding0px

Responsive — real breakpoints

9 media-query stops read from the live CSS

64px

540px

640px

768px

991px

999px

1023px

1024px

1300px

Do's & Don'ts

13 enforceable rules pulled verbatim from the spec

Use Near Black (`#0e201a`) for text — not pure black, it's warmer and more readable

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

Use negative letter-spacing (-2.4px) at display sizes for compressed, editorial headlines

Use Whitesmoke (`#ebedf0`) as the primary accent — it's the brand's signature interactive color

Use 40px border-radius on primary buttons — the brand uses generously-rounded CTAs

Make the navigation sticky — it stays visible during scroll, signaling content depth

Include a search input directly in the nav — discoverability is a primary UX value here

Don't

Don't use pure black (`#000000`) for text — the near-black adds warmth

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

Don't increase letter-spacing on headings — the type is designed to run tight at scale

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

Don't use sharp-cornered or pill buttons — 40px is the CTA border-radius standard

Don't put a CTA button in the nav — this design uses links only at the top

Agent guide & export

Paste-ready prompt + the real files behind this page

Build a UI in the qwik.dev design system. Canvas #ffffff · ink #0e201a · accent #ebedf0. Type: Poppins — 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 qwik

DESIGN.md · narrative spec tokens.json

A · Instrument B · Press