prismdinstrument
EXTRACTED · 10 SECTIONS · 17 COLORS · GRADE B

xata.io

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

17
colors
2
faces
15
shadows
32
keyframes
DESIGN.md tokens.json
xata.io
real render · source of truth

xata.io is built on a mid-dark canvas (lab(2.51107 0.242703 -0.886115)). The system uses rgb(39, 39, 42) as a near-neutral accent (low saturation). Geist as the primary typeface. A layered elevation system (15 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 32 keyframe animations plus transition-driven interactions.

01

Color — roles, semantics & the full census

17 colors measured · click any swatch to copy

Canvas
#ffffff
AAA 18.88:1
Ink
#111111
AAA 18.88:1
Accent
#27272a
AAA 14.89:1
Line
#52525b
AAA 7.73:1
Semantic states

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

17 colors mined from the live renderexpand
02

Type — the ladder, in the real face

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

display xl
display-xl72px · 600
display md
display-md20px · 700 · ×3.60
body
body16px · 400 · ×1.25
body sm
body-sm14px · 400 · ×1.14
caption
caption14px · 700 · ×1.00
button
button14px · 500 · ×1.00
04

Depth — elevation is extracted, not invented

15 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

3 easing curves · 32 keyframes · hover a tile to preview

Easing & transitions
transition-2cubic-bezier(0.4, 0, 0.2, 1)
default-transition-timing-functioncubic-bezier(.4, 0, .2, 1)
ease-outcubic-bezier(0, 0, .2, 1)
32 keyframe animations extracted
animate-glitch
enter
exit
spin
ping
pulse
accordion-down
accordion-up
marquee
marquee-vertical
border-beam
spotlight
03

Spacing & radius, made spatial

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

Spacing scale
xxs · 2px
xs · 8px
sm · 16px
md · 20px
base · 24px
lg · 32px
xl · 33px
2xl · 40px
3xl · 64px
Radius
none
0px
xs
calc(.5rem - 4px)
sm
8px
md
12px
lg
16px
xl
32px
full
9999px
06

Components — the closed vocabulary

9 component families · 36 variants counted on the live DOM

ComponentVariants found
links×10
buttons×7
heading H2×6
nav Links×5
footer Links×4
cta Banner×1
heading H1×1
heading H3×1
captions×1
Component style specs (§4)expand

Buttons

Ghost

  • Background: transparent
  • Text: #ffffff {colors.on-primary}
  • Padding: 8px 16px
  • Radius: 6px
  • Font: 14px weight 500
  • Use: Subtle action, toolbar, nav button
  • Hover: color: #ececee, outline: oklab(0.944349 0.000789192 -0.00264909) none 3px
  • Focus: color: oklab(0.999994 0.0000455678 0.0000200868), outline: rgb(16, 16, 16) none 1px

Ghost

  • Background: transparent
  • Text: #ffffff {colors.on-primary}
  • Padding: 0px 10px
  • Radius: 6px
  • Shadow: oklab(0.999994 0.0000455678 0.0000200868 / 0.25) 0px 1px 0px 0px inset, oklab(0....
  • Font: 12.8px weight 500
  • Use: Subtle action, toolbar, nav button
  • Hover: color: #ececee, outline: oklab(0.944349 0.000789192 -0.00264909) none 3px
  • Focus: color: oklab(0.999994 0.0000455678 0.0000200868), outline: rgb(16, 16, 16) none 1px

Secondary

  • Background: #27272a {colors.primary}
  • Text: #ffffff {colors.on-primary}
  • Padding: 0px 10px
  • Radius: 9999px
  • Border: 1px solid lab(15.0806 4.80817 -10.5003)
  • Shadow: oklab(0.141 0.00136173 -0.00480696 / 0.1) 0px 1px 3px 0px, oklab(0.141 0.0013617...
  • Font: 14px weight 500
  • Use: Secondary action
  • Hover: color: #ececee, outline: oklab(0.944349 0.000789192 -0.00264909) none 3px
  • Focus: color: oklab(0.999994 0.0000455678 0.0000200868), outline: rgb(16, 16, 16) none 1px

Icon Button

  • Background: #27272a {colors.primary}
  • Text: #ffffff {colors.on-primary}
  • Padding: 0px
  • Radius: 6px
  • Border: 1px solid lab(15.7305 0.613764 -2.16959)
  • Font: 14px weight 500
  • Use: Toolbar/UI icons
  • Hover: color: #ececee, outline: oklab(0.944349 0.000789192 -0.00264909) none 3px
  • Focus: color: oklab(0.999994 0.0000455678 0.0000200868), outline: rgb(16, 16, 16) none 1px

Secondary

  • Background: #27272a {colors.primary}
  • Text: #ffffff {colors.on-primary}
  • Padding: 0px 10px
  • Radius: 8px
  • Border: 1px solid lab(15.0806 4.80817 -10.5003)
  • Shadow: oklab(0.141 0.00136173 -0.00480696 / 0.1) 0px 1px 3px 0px, oklab(0.141 0.0013617...
  • Font: 14px weight 500
  • Use: Secondary action
  • Hover: color: #ececee, outline: oklab(0.944349 0.000789192 -0.00264909) none 3px
  • Focus: color: oklab(0.999994 0.0000455678 0.0000200868), outline: rgb(16, 16, 16) none 1px

CTA Banners

07

Layout — structure & dimensions

4 layout metrics measured

header 65px 1200px max-width
max Width1200px
header Height65px
sidebar Width0px
container Padding0px
08

Responsive — real breakpoints

1 media-query stops read from the live CSS

600px
09

Do's & Don'ts

17 enforceable rules pulled verbatim from the spec

Do
Use dark background (`#09090b`) as the foundation — this is a dark-mode-native design
Use GeistMono as the primary typeface — it defines the brand personality
Use negative letter-spacing (-1.8px) at display sizes for compressed, editorial headlines
Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
Use Input (`#27272a`) as the primary accent — it's the brand's signature interactive color
Use 6px border-radius on buttons — the standard corner rounding for interactive elements
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
Place 4 pricing tiers side-by-side on desktop — direct comparison is the value prop
Lay out testimonials in a grid (4+ items) — quantity signals scale and trust
Don't
Don't use light backgrounds — the dark canvas is the native medium
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 introduce additional saturated accent colors — the palette is intentionally controlled
Don't make the nav sticky — this design lets it scroll away to maximize content focus
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 xata.io design system. Canvas #ffffff · ink #111111 · accent #27272a. Type: GeistMono — 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 xata
DESIGN.md · narrative spec tokens.json
A · InstrumentB · Press