prismdinstrument
EXTRACTED · 10 SECTIONS · 50 COLORS · GRADE B

trpc.io

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

50
colors
1
face
8
shadows
6
keyframes
DESIGN.md tokens.json
trpc.io
real render · source of truth

trpc.io is built on a pure-white canvas (rgb(255,255,255)). The system uses rgb(57, 140, 203) as the accent for primary actions and brand signals. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside system-ui as the primary typeface. A layered elevation system (8 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 6 keyframe animations plus transition-driven interactions.

01

Color — roles, semantics & the full census

50 colors measured · click any swatch to copy

Canvas
#ffffff
AAA 16.71:1
Ink
#1c1e21
AAA 16.71:1
Accent
#398ccb
AA·lg 3.63:1
Line
#969faf
Fail 2.67:1
Semantic states
error#fd9c9fsuccess#008b00warning#e6a700info#87d8f2

4 semantic roles found.

50 colors mined from the live renderexpand
02

Type — the ladder, in the real face

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

display xl
display-xl48px · 800
display lg
display-lg48px · 800 · ×1.00
display md
display-md20px · 700 · ×2.40
body
body16px · 400 · ×1.25
body sm
body-sm14px · 500 · ×1.14
button
button18px · 700 · ×0.78
eyebrow
eyebrow16px · 400 · ×1.13
04

Depth — elevation is extracted, not invented

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

shadow-1
shadow-2
shadow-3
shadow-4
shadow-5
05

Motion — easings, transitions & live keyframes

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

Easing & transitions
transition-2cubic-bezier(0.08, 0.52, 0.52, 1)
ifm-transition-timing-defaultcubic-bezier(.08,.52,.52,1)
6 keyframe animations extracted
infinite-scroll
loader
pulse
loading-spin_HK5v
fade-in
loading_zvTa
03

Spacing & radius, made spatial

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

Spacing scale
xxs · 2px
xs · 4px
sm · 8px
md · 12px
base · 16px
lg · 24px
xl · 32px
2xl · 48px
3xl · 60px
Radius
none
0px
xs
4px
sm
8px
md
12px
lg
16px
xl
9999px
full
9999px
06

Components — the closed vocabulary

11 component families · 54 variants counted on the live DOM

ComponentVariants found
buttons×10
heading H2×10
links×10
nav Links×8
code Block×7
footer Links×3
heading H3×2
heading H1×1
eyebrow Labels×1
captions×1
tooltip×1
Component style specs (§4)expand

Buttons

Light / Invert

  • Background: #f4f4f5 {colors.surface-2}
  • Text: #969faf {colors.hairline}
  • Padding: 0px 8px
  • Radius: 6px
  • Font: 16px weight 500
  • Use: Bright CTA on dark sections

Primary Brand

  • Background: #398ccb {colors.primary}
  • Text: #ffffff {colors.surface-1}
  • Padding: 8px 16px
  • Radius: 8px
  • Shadow: rgba(14, 165, 233, 0.2) 0px 20px 25px -5px, rgba(14, 165, 233, 0.2) 0px 8px 10px...
  • Font: 18px weight 700
  • Use: Primary CTA / brand action

Dark / Solid

  • Background: #171717
  • Text: #398ccb {colors.primary}
  • Padding: 0px
  • Radius: 8px
  • Border: 20px solid rgb(23, 23, 23)
  • Shadow: rgba(57, 140, 203, 0.15) 0px -24px 300px 0px
  • Font: 16px weight 400
  • Use: Solid dark CTA

Subtle

  • Background: rgba(0, 0, 0, 0.3)
  • Text: #ffffff {colors.surface-1}
  • Padding: 6.4px 8px
  • Radius: 6.4px
  • Font: 16px weight 400
  • Use: Quiet action against page bg

Navigation

Main Nav

  • Background: transparent
  • Padding: 96px 0px 0px
  • Radius: none
  • Font: 16px weight 400
  • Use: Static flex nav — N/A items
  • Hover: color: #243e53, outline: rgb(36, 62, 83) none 3px

Code Blocks

Inline Code / Pre

  • Background: #ffffff {colors.surface-1}
  • Text: #24292e
  • Padding: 0px
  • Radius: 6.4px
  • Border: 1px solid rgb(218, 221, 225)
  • Font: 16px weight 400 — ui-monospace
  • Use: Code samples, CLI commands, syntax highlighting blocks
07

Layout — structure & dimensions

4 layout metrics measured

header 1224px 1320px max-width
max Width1320px
header Height1224px
sidebar Width0px
container Padding0px 24px
08

Responsive — real breakpoints

9 media-query stops read from the live CSS

576px
640px
768px
996px
997px
1024px
1280px
1440px
1536px
09

Do's & Don'ts

25 enforceable rules pulled verbatim from the spec

Do
Use Near-Black (`#1c1e21`) for text — not pure black, it's warmer and more readable
Use ui-sans-serif as the primary typeface — it defines the brand personality
Use negative letter-spacing (-1.2px) at display sizes for compressed, editorial headlines
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 (`#398ccb`) as the primary accent — it's the brand's signature interactive color
Use 8px border-radius on buttons — the standard corner rounding for interactive elements
Keep navigation sticky to the top — the design uses a persistent navigation pattern
Maintain nav height at 60px — consistent vertical space for the navigation bar
Respect the 4px–32px spacing range — the design uses a wide scale for visual breathing room
Make the hero full-viewport (≥70% screen height) — this design uses an immersive hero, not a tall navbar
Include exactly 3 CTAs in the hero (primary + secondary) — this design pattern is multi-action, not single-purpose
Make the navigation sticky — it stays visible during scroll, signaling content depth
Include a theme toggle in the nav — dark mode is a first-class feature
Each card uses an icon (not photo) — the visual language is illustrative, not photographic
Use a 4-column grid on desktop — density matters for this content type
Lay out testimonials in a grid (13+ items) — quantity signals scale and trust
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 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 put a CTA button in the nav — this design uses links only at the top
10

Agent guide & export

Paste-ready prompt + the real files behind this page

Build a UI in the trpc.io design system. Canvas #ffffff · ink #1c1e21 · accent #398ccb. Type: Roboto — 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 trpc
DESIGN.md · narrative spec tokens.json
A · InstrumentB · Press