Prism prismd.fr
Extracted · 10 sections · 29 colors · grade B

composio.dev

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

29
colors
4
faces
5
shadows
9
keyframes
Get DESIGN.md tokens.json Repeindre ce design
composio.dev
rendu réel · source de vérité

composio.dev is built on a pure-white canvas (rgb(246, 246, 246)). The system uses rgb(255, 255, 255) as the singular interactive color. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside abcDiatype as the primary typeface. AbcDiatype is paired with abcDiatype Fallback for secondary roles. A layered elevation system (5 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 9 keyframe animations plus transition-driven interactions.

01

Color — roles, semantics & the full census

29 colors measured · click any swatch to copy

Canvas
#f6f6f6
AAA 17.74:1
Ink
#0f0f0f
AAA 17.74:1
Accent
#ffffff
Fail 1.08:1
Line
#2c2c2c
AAA 12.92:1
Semantic states

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

29 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-xl64px · 400
display md
display-md28px · 400 · ×2.29
body
body14px · 400 · ×2.00
button
button14px · 400 · ×1.00
03

Spacing & radius, made spatial

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

Spacing scale
xxs · 2px
xs · 4px
sm · 8px
md · 14px
base · 16px
lg · 24px
xl · 48px
2xl · 64px
3xl · 79px
Radius
none
0px
xs
4px
sm
6px
md
24px
lg
28px
xl
32px
full
9999px
04

Depth — elevation is extracted, not invented

5 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

4 easing curves · 9 keyframes · hover a tile to preview

Easing & transitions
transition-2cubic-bezier(0.4, 0, 0.2, 1)
ease-incubic-bezier(.4,0,1,1)
ease-in-outcubic-bezier(.4,0,.2,1)
ease-outcubic-bezier(0,0,.2,1)
9 keyframe animations extracted
fadeIn
spin
ping
pulse
marquee
marquee-vertical
pulse-dot
shimmer-install
shimmer-text
06

Components — the closed vocabulary

9 component families · 46 variants counted on the live DOM

ComponentVariants found
buttons×10
nav Links×7
links×7
heading H2×6
code Block×6
cards×3
footer Links×3
heading H3×3
heading H1×1
Component style specs (§4)expand

Buttons

Ghost

  • Background: transparent
  • Text: #ffffff {colors.primary}
  • Padding: 0px 8px
  • Radius: 0px
  • Font: 14px weight 400
  • Use: Subtle action, toolbar, nav button
  • Focus: outline: oklab(0.556 0 0 / 0.5) auto 1px

Ghost

  • Background: transparent
  • Text: #ffffff {colors.primary}
  • Padding: 16px 20px
  • Radius: 0px
  • Font: 16px weight 400
  • Use: Subtle action, toolbar, nav button
  • Focus: outline: oklab(0.556 0 0 / 0.5) auto 1px

Outline

  • Background: transparent
  • Text: #ffffff {colors.primary}
  • Padding: 10px 16px
  • Radius: 0px
  • Border: 1px solid oklab(0.999994 0.0000455678 0.0000200868 / 0.3)
  • Font: 14px weight 400
  • Use: Secondary action with border
  • Focus: outline: oklab(0.556 0 0 / 0.5) auto 1px

Secondary

  • Background: #1e1e1e
  • Text: #0f0f0f {colors.ink-muted}
  • Padding: 10px
  • Radius: 0px
  • Border: 1px solid rgb(0, 7, 205)
  • Font: 16px weight 400
  • Use: Secondary action
  • Focus: outline: oklab(0.556 0 0 / 0.5) auto 1px

Cards & Containers

Standard Card

  • Background: transparent
  • Padding: 8px
  • Radius: 0px
  • Border: 1px solid rgba(0, 0, 0, 0)
  • Use: Content containers, listing items

Navigation

Main Nav

  • Background: transparent
  • Padding: 8px
  • Radius: none
  • Border: 1px solid rgba(0, 0, 0, 0)
  • Font: 16px weight 400
  • Use: Fixed/sticky flex nav — N/A items
07

Layout — structure & dimensions

4 layout metrics measured

header 51px 1240px max-width
max Width1240px
header Height51px
sidebar Width0px
container Padding0px
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

18 enforceable rules pulled verbatim from the spec

Do
Use Off-White (`#f6f6f6`) as the page background — it's intentionally not pure white
Use Near-Black (`#0f0f0f`) for text — not pure black, it's warmer and more readable
Use abcDiatype as the primary typeface — it defines the brand personality
Use negative letter-spacing (-1.6px) at display sizes for compressed, editorial headlines
Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
Use White (`#ffffff`) as the primary accent — it's the brand's signature interactive color
Apply 8px padding inside cards — matches the design system's content breathing room
Respect the 4px–48px 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 2 CTAs in the hero (primary + secondary) — this design pattern is multi-action, not single-purpose
Repeat the primary CTA across 3 banner sections — conversion paths are layered, not single
Don't
Don't use pure white (`#ffffff`) as a page background — the warm tone is part of the brand identity
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 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
10

Agent guide & export

Paste-ready prompt + the real files behind this page

Build a UI in the composio.dev design system. Canvas #f6f6f6 · ink #0f0f0f · accent #ffffff. Type: abcDiatype — 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 composio
DESIGN.md · narrative spec tokens.json