prismdinstrument
EXTRACTED · 10 SECTIONS · 10 COLORS · GRADE B

angular.dev

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

10
colors
6
faces
3
shadows
7
keyframes
DESIGN.md tokens.json
angular.dev
real render · source of truth

angular.dev is built on a pure-white canvas (rgb(255,255,255)). The system uses rgb(21, 20, 23) as a near-neutral accent (low saturation). Crisp CTAs (4px radius) reinforce a precise, technical aesthetic alongside Inter Tight 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

10 colors measured · click any swatch to copy

Canvas
#ffffff
AAA 18.88:1
Ink
#111111
AAA 18.88:1
Accent
#151417
AAA 18.35:1
Line
#24292e
AAA 14.67:1
Semantic states

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

10 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-xl80px · 500
display md
display-md16px · 500 · ×5.00
body
body12.8px · 500 · ×1.25
caption
caption14.4px · 500 · ×0.89
button
button14px · 600 · ×1.03
mono
mono16px · 400 · ×0.88
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-3ease-out
transition-4linear
7 keyframe animations extracted
spin-gradient
_ngcontent-ng-c3968259679_menuFadeIn
_ngcontent-ng-c4082591351_rotateGradient
_ngcontent-ng-c4082591351_pulse
_ngcontent-ng-c1693377263_fadeIn
_ngcontent-ng-c3149880212_shimmer
_ngcontent-ng-c4008248509_spinner-animation
03

Spacing & radius, made spatial

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

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

Components — the closed vocabulary

14 component families · 63 variants counted on the live DOM

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

Buttons

Dark / Solid

  • Background: #151417 {colors.primary}
  • Text: #ffffff {colors.on-primary}
  • Padding: 8px
  • Radius: 4px
  • Border: 1px solid oklch(0.6902 0.277 332.77)
  • Font: 14px weight 600
  • Use: Solid dark CTA
  • Focus: outline: rgb(16, 16, 16) auto 1px

Outline

  • Background: transparent
  • Text: #746e7c
  • Padding: 1px 6px
  • Radius: 4px
  • Border: 1px solid oklch(0.9175 0.004 301.42)
  • Font: 12.8px weight 500
  • Use: Secondary action with border
  • Focus: outline: rgb(16, 16, 16) auto 1px

Ghost

  • Background: transparent
  • Text: #746e7c
  • Padding: 20px 6px
  • Radius: 0px
  • Font: 13.3333px weight 500
  • Use: Subtle action, toolbar, nav button
  • Focus: outline: rgb(16, 16, 16) auto 1px

Ghost

  • Background: transparent
  • Text: #000000
  • Padding: 1px 16px
  • Radius: 0px
  • Font: 13.3333px weight 600
  • Use: Subtle action, toolbar, nav button
  • Focus: outline: rgb(16, 16, 16) auto 1px

Light / Invert

  • Background: #ffffff {colors.on-primary}
  • Text: #0546ff
  • Padding: 10px
  • Radius: 4px
  • Border: 1px solid oklch(0.9175 0.004 301.42)
  • Font: 16px weight 500
  • Use: Bright CTA on dark sections
  • Focus: outline: rgb(16, 16, 16) auto 1px

Light / Invert

  • Background: #ffffff {colors.on-primary}
  • Text: #0546ff
  • Padding: 32px
  • Radius: 8px
  • Border: 1px solid oklch(0.9175 0.004 301.42)
  • Font: 16px weight 500
  • Use: Bright CTA on dark sections
  • Focus: outline: rgb(16, 16, 16) auto 1px
07

Layout — structure & dimensions

4 layout metrics measured

header 64px 80ch max-width
max Width80ch
header Height64px
sidebar Width0px
container Padding0px
08

Responsive — real breakpoints

7 media-query stops read from the live CSS

700px
701px
775px
900px
901px
1431px
1801px
09

Do's & Don'ts

17 enforceable rules pulled verbatim from the spec

Do
Use Primary Contrast (`#151417`) for text — not pure black, it's warmer and more readable
Use Inter as the primary typeface — it defines the brand personality
Keep font weights between 400-600 — the system uses a narrow weight range for subtle hierarchy
Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
Use Primary Contrast (`#151417`) as the primary accent — it's the brand's signature interactive color
Use small 4px radius for buttons — this design system uses subtle rounding, not pill shapes
Respect the 2px–32px spacing range — the design uses a wide scale for visual breathing room
Include a search input directly in the nav — discoverability is a primary UX value here
Include a theme toggle in the nav — dark mode is a first-class feature
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 use weight 700 (bold) or above — 600 is the maximum weight in this system
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 over-round buttons with pill or large radius — the system uses restrained, sharp-ish corners
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 angular.dev design system. Canvas #ffffff · ink #111111 · accent #151417. Type: Inter — 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 angular
DESIGN.md · narrative spec tokens.json
A · InstrumentB · Press