prismdinstrument
EXTRACTED · 10 SECTIONS · 25 COLORS · GRADE B

replicate.com

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

25
colors
6
faces
3
shadows
7
keyframes
DESIGN.md tokens.json
replicate.com
real render · source of truth

replicate.com is built on a pure-white canvas (rgb(255, 255, 255)). The system uses rgb(255, 255, 255) as the singular interactive color. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside rb-freigeist-neue as the primary typeface. A restrained elevation system (3 distinct shadows) — shadows reserved for the few elements that must lift off the page. Motion is a first-class concern — 7 keyframe animations plus transition-driven interactions.

01

Color — roles, semantics & the full census

25 colors measured · click any swatch to copy

Canvas
#ffffff
AAA 16.29:1
Ink
#202020
AAA 16.29:1
Accent
#ffffff
Fail 1:1
Line
#d9d9d9
Fail 1.41:1
Semantic states

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

25 colors mined from the live renderexpand
02

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-xl72px · 700
display md
display-md30px · 600 · ×2.40
body
body14px · 400 · ×2.14
button
button18px · 400 · ×0.78
04

Depth — elevation is extracted, not invented

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

shadow-1
shadow-2
shadow-3
05

Motion — easings, transitions & live keyframes

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

Easing & transitions
transition-2cubic-bezier(0.4, 0, 0.2, 1)
transition-5linear
7 keyframe animations extracted
go2264125279
go3020080000
go463499852
go1268368563
go1310225428
go651618207
go901347462
03

Spacing & radius, made spatial

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

Spacing scale
xxs · 2px
xs · 4px
sm · 8px
md · 10px
base · 16px
lg · 24px
xl · 64px
2xl · 96px
3xl · 144px
Radius
none
0px
xs
2px
sm
9999px
md
10007px
lg
10015px
xl
10023px
full
9999px
06

Components — the closed vocabulary

15 component families · 62 variants counted on the live DOM

ComponentVariants found
buttons×10
logo Tile×8
links×8
tabs×6
badges×5
status Badge×4
nav Links×4
heading H2×4
inputs×3
footer Links×3
cards×2
code Block×2
heading H1×1
heading H3×1
heading H4×1
Component style specs (§4)expand

Buttons

Light / Invert

  • Background: #ffffff {colors.primary}
  • Text: #202020 {colors.ink-subtle}
  • Padding: 6px 10px
  • Radius: 0px
  • Border: 1px solid rgb(32, 32, 32)
  • Font: 14px weight 400
  • Use: Bright CTA on dark sections

Outline

  • Background: #000000
  • Text: #ffffff {colors.primary}
  • Padding: 12px 16px
  • Radius: 0px
  • Border: 1px solid rgb(0, 0, 0)
  • Font: 18px weight 400
  • Use: Secondary action with border

Ghost

  • Background: transparent
  • Text: #202020 {colors.ink-subtle}
  • Padding: 10px 8px
  • Radius: 0px
  • Font: 14px weight 400
  • Use: Subtle action, toolbar, nav button

Icon Button

  • Background: #ffffff {colors.primary}
  • Text: #202020 {colors.ink-subtle}
  • Padding: 0px
  • Radius: 0px
  • Border: 1px solid rgb(32, 32, 32)
  • Font: 18px weight 400
  • Use: Toolbar/UI icons

Pill

  • Background: rgba(0, 0, 0, 0.3)
  • Text: rgba(255, 255, 255, 0.9) {colors.primary}
  • Padding: 2px 10px
  • Radius: 9999px
  • Font: 11px weight 400
  • Use: Status pills, tags, chips

Pill

  • Background: transparent
  • Text: #202020 {colors.ink-subtle}
  • Padding: 2px
  • Radius: 9999px
  • Font: 16px weight 400
  • Use: Status pills, tags, chips

Cards & Containers

Standard Card

  • Background: transparent
  • Padding: 0px
  • Radius: 0px
  • Border: 4px solid rgba(0, 0, 0, 0)
07

Layout — structure & dimensions

5 layout metrics measured

header 72px 1200px max-width
max Width1200px
header Height72px
sidebar Width0px
gap16px
container Padding24px
08

Responsive — real breakpoints

fluid system — no hard stops

No distinct @media breakpoints captured at the desktop/mobile pass — this layout is fluid, adapting by ratio rather than hard stops.

09

Do's & Don'ts

15 enforceable rules pulled verbatim from the spec

Do
Use Near-Black (`#202020`) for text — not pure black, it's warmer and more readable
Use basier-square as the primary typeface — it defines the brand personality
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 Pure White (`#ffffff`) as the primary accent — it's the brand's signature interactive color
Use pill-shaped radius (9999px) for primary CTA buttons — the brand uses fully-rounded, pill CTAs
Respect the 4px–64px 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
Use a single primary CTA in the hero — the design intentionally avoids choice paralysis
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 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 use rectangular buttons for primary actions — the rounded pill shape is the brand standard
10

Agent guide & export

Paste-ready prompt + the real files behind this page

Build a UI in the replicate.com design system. Canvas #ffffff · ink #202020 · accent #ffffff. Type: basier-square — 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 replicate
DESIGN.md · narrative spec tokens.json
A · InstrumentB · Press